xy-select/es/Option/OptGroup.js

基于React的下拉列表组件

import classNames from "classnames";
import React, { useCallback, useContext, useRef, useState } from "react";
import { useUpdateEffect } from "utils-hooks";
import { OptionsContext, OptionStateContext } from "../Context";
/**
 * Option分组
 * @description 仅仅在视觉上包容一组option, 不可嵌套
 */
export function OptGroup(props) {
    var _a = props.prefixCls, prefixCls = _a === void 0 ? "xy-optgroup" : _a, className = props.className, style = props.style, label = props.label, children = props.children;
    // 代理 OptionsContext.onOptionAdd, OptionsContext.onOptionRemove 维护自己分组内部options集合
    var context = useContext(OptionsContext);
    // Tips: 为了触发更新, 判断是否为空
    useContext(OptionStateContext);
    var options = useRef([]);
    // 是否此分组内的option都不可用(被禁用或过滤)
    var _b = useState(false), empty = _b[0], setEmpty = _b[1];
    useUpdateEffect(function () {
        var _empy = options.current.filter(function (x) { return !x.disabled && !x.filtered; }).length === 0;
        setEmpty(_empy);
    });
    var onOptionAdd = useCallback(function (cfg) {
        if (!options.current.some(function (x) { return x.value === cfg.value; })) {
            options.current.push(cfg);
        }
        if (context && context.onOptionAdd) {
            context.onOptionAdd(cfg);
        }
    }, []);
    var onOptionRemove = useCallback(function (value) {
        options.current = options.current.filter(function (cfg) { return cfg.value !== value; });
        if (context && context.onOptionRemove) {
            context.onOptionRemove(value);
        }
    }, []);
    // 没有option时, 分组不显示
    if (!children || (children instanceof Array && children.length <= 0)) {
        return null;
    }
    return (React.createElement("li", { className: classNames(prefixCls, className), style: Object.assign({}, style, { display: empty ? "none" : "block" }) },
        React.createElement("p", { title: label, className: prefixCls + "__title" }, label),
        React.createElement(OptionsContext.Provider, { value: { onOptionAdd: onOptionAdd, onOptionRemove: onOptionRemove } },
            React.createElement("ul", { className: prefixCls + "__list" }, children))));
}
export default React.memo(OptGroup);
//# sourceMappingURL=OptGroup.js.map