antd-multi-asl-cascader-pro/dist/components/MenuItem.js

A multiple cascader component for antd

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const icons_1 = require("@ant-design/icons");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const container_1 = tslib_1.__importDefault(require("../container"));
const constants_1 = require("../constants");
const Checkbox_1 = tslib_1.__importDefault(require("./Checkbox"));
const tooltip_1 = tslib_1.__importDefault(require("antd/es/tooltip"));
exports.default = react_1.default.memo((props) => {
    const { node, depth } = props;
    const { children, value, label, isLeaf } = node;
    const { handleCascaderChange, menuPath, selectLeafOnly, } = container_1.default.useContainer();
    const [loading, setLoading] = (0, react_1.useState)(false);
    const hasChildren = (children && children.length > 0) || isLeaf === false;
    const checkboxHidden = selectLeafOnly && hasChildren;
    const handleClick = (0, react_1.useCallback)(() => {
        setLoading(true);
        handleCascaderChange(node, depth);
    }, [node, depth]);
    const showLabel = (0, react_1.useMemo)(() => {
        if (!label) {
            return '';
        }
        const length = label.length;
        if (length <= 10) {
            return label;
        }
        return label.slice(0, 10) + '...';
    }, [label]);
    const active = (0, react_1.useMemo)(() => !!menuPath.find((item) => item.value === value), [menuPath, value]);
    const cls = (0, classnames_1.default)(`${constants_1.prefix}-column-item`, {
        [`${constants_1.prefix}-column-item-active`]: active,
    });
    return (react_1.default.createElement("li", { onClick: handleClick, className: cls },
        checkboxHidden ? null : react_1.default.createElement(Checkbox_1.default, { node: node }),
        react_1.default.createElement("p", { className: `${constants_1.prefix}-column-item-label`, style: { paddingLeft: checkboxHidden ? '0px' : '' } },
            react_1.default.createElement(tooltip_1.default, { arrow: false, title: label },
                react_1.default.createElement("span", null, showLabel))),
        !hasChildren ? null : loading && !(children === null || children === void 0 ? void 0 : children.length) ? (react_1.default.createElement(icons_1.LoadingOutlined, { className: `${constants_1.prefix}-column-item-icon` })) : (react_1.default.createElement(icons_1.RightOutlined, { className: `${constants_1.prefix}-column-item-icon` }))));
});