weike-multi-cascader
Version:
A multiple cascader component for antd
31 lines (30 loc) • 2.15 kB
JavaScript
;
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"));
exports.default = react_1.default.memo((props) => {
const { node, depth, index } = props;
const { children, value, title, isLeaf } = node;
const { handleCascaderChange, menuPath, selectLeafOnly, fristColumMulti, } = container_1.default.useContainer();
const [loading, setLoading] = react_1.useState(false);
const hasChildren = (children && children.length > 0) || isLeaf === false;
const checkboxHidden = selectLeafOnly && hasChildren;
const handleClick = react_1.useCallback(() => {
setLoading(true);
handleCascaderChange(node, depth);
}, [node, depth]);
const active = react_1.useMemo(() => !!menuPath.find((item) => item.value === value), [menuPath, value]);
const cls = 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 && (index !== 0) || fristColumMulti) ? react_1.default.createElement(Checkbox_1.default, { node: node }) : null,
react_1.default.createElement("p", { className: `${constants_1.prefix}-column-item-label`, style: { paddingLeft: checkboxHidden ? '0px' : '' } },
react_1.default.createElement("span", null, title)),
!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` }))));
});