xy-select/es/Hooks/useValue.js

基于React的下拉列表组件

import { __spreadArrays } from "tslib";
import { useCallback, useLayoutEffect, useState } from "react";
import { useControll } from "utils-hooks";
/**
 * 管理select选中的值
 * @param props select的属性
 * @param setVisible    设置可视状态
 * @param align   对齐函数
 */
export default function useValue(props, setVisible, align) {
    var multiple = props.multiple, disabled = props.disabled, onChange = props.onChange, onSearch = props.onSearch;
    var _a = useControll(props, "value", "defaultValue", multiple ? [] : null), value = _a[0], setValue = _a[1], isControll = _a[2];
    var _b = useState(""), search = _b[0], setSearch = _b[1];
    // Tips: 多选模式下, Select选择器高度随所选值动态改变, 需要重新对齐
    useLayoutEffect(function () {
        if (multiple && align.current) {
            align.current(false);
        }
    }, [value]);
    /**
     * 处理受控组件和非受控组件
     * @param value
     */
    function setSelectedValue(value) {
        if (!isControll) {
            setValue(value);
        }
        if (onChange) {
            onChange(value);
        }
    }
    /**
     * 选中值
     * @param val
     */
    function onSelect(val) {
        if (disabled) {
            return;
        }
        if (multiple) {
            if (val === null) {
                return;
            }
            if (!value) {
                setSelectedValue([val]);
                return;
            }
            var i = value.findIndex(function (x) { return x === val; });
            if (i === -1) {
                setSelectedValue(__spreadArrays(value, [val]));
            }
            else {
                setSelectedValue(value.filter(function (x) { return x !== val; }));
            }
        }
        else {
            setSelectedValue(val);
            setVisible(false);
        }
    }
    /**
     * 取消选中值
     * @param val
     */
    function onUnSelect(val) {
        if (disabled) {
            return;
        }
        if (multiple) {
            if (value.some(function (x) { return x === val; })) {
                setSelectedValue(value.filter(function (x) { return x !== val; }));
            }
        }
        else {
            setSelectedValue(null);
            setVisible(false);
        }
    }
    var searchHandle = useCallback(function (val) {
        setSearch(val);
        if (onSearch) {
            onSearch(val);
        }
    }, []);
    return [value, onSelect, onUnSelect, search, searchHandle];
}
//# sourceMappingURL=useValue.js.map