xy-select/es/Hooks/useOptions.js

基于React的下拉列表组件

import { useRef } from "react";
import { useForceUpdate, useMount, useUpdateEffect } from "utils-hooks";
/**
 * 管理select内声明的option
 * @export
 * @param {boolean} multiple    是否多选
 * @returns UseOptionsReturn
 */
export default function useOptions(multiple, children) {
    var options = useRef([]);
    var cacheSelectCfg = useRef(new Map());
    var optionsContextRef = useRef({ onOptionAdd: onOptionAdd, onOptionRemove: onOptionRemove });
    var update = useForceUpdate();
    var lastSelectedCfg = useRef(null);
    /**
     * 添加option
     * @param cfg
     */
    function onOptionAdd(cfg) {
        cacheSelectCfg.current.set(cfg.value, cfg);
        if (!options.current.some(function (x) { return x.value === cfg.value; })) {
            options.current.push(cfg);
        }
    }
    /**
     * 移除option
     * @param value
     */
    function onOptionRemove(value) {
        options.current = options.current.filter(function (cfg) { return cfg.value !== value; });
    }
    /**
     * 根据prop获取option配置
     * @param {*} value 值
     * @param {string} [prop='value']
     * @returns {(OptionConfig | OptionConfig[])}
     */
    function getOptionCfg(value) {
        if (multiple) {
            var cfgs_1 = [];
            if (!value) {
                return cfgs_1;
            }
            value.forEach(function (val) {
                var cfg = cacheSelectCfg.current.get(val);
                if (cfg) {
                    cfgs_1.push(cfg);
                }
            });
            return cfgs_1;
        }
        else {
            return cacheSelectCfg.current.get(value);
        }
    }
    function _getOptionCfg(value) {
        var selectedCfg = getOptionCfg(value);
        lastSelectedCfg.current = selectedCfg;
        return selectedCfg;
    }
    useUpdateEffect(function () {
        if (!lastSelectedCfg.current) {
            // 更新 SelectBox 显示的label
            // 同步最新得options到缓存里
            options.current.forEach(function (x) { return cacheSelectCfg.current.set(x.value, x); });
            update();
        }
    }, [children]);
    // Tips: 这里主要是为了初次 options 收集完毕后, 重新渲染SelectInner
    useMount(function () {
        update();
    });
    return [options, optionsContextRef, _getOptionCfg, cacheSelectCfg];
}
//# sourceMappingURL=useOptions.js.map