antd-multi-asl-cascader
Version:
A multiple cascader component for antd
54 lines (53 loc) • 3.7 kB
JavaScript
"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 rc_overflow_1 = tslib_1.__importDefault(require("rc-overflow"));
const container_1 = tslib_1.__importDefault(require("../container"));
const constants_1 = require("../constants");
const Tag = (props) => {
const { onRemove, item, renderTitle = () => undefined, closable = true, } = props;
const handleRemove = (event) => {
event.stopPropagation();
if (onRemove) {
onRemove(item);
}
};
const value = item;
const title = renderTitle(value);
return (react_1.default.createElement("span", { className: "ant-select-selection-item" },
react_1.default.createElement("span", { className: "ant-select-selection-item-content" }, title),
closable && (react_1.default.createElement("span", { className: "ant-select-selection-item-remove" },
react_1.default.createElement(icons_1.CloseOutlined, { onClick: handleRemove })))));
};
const Selector = (props) => {
const { width, onRemove, placeholder, allowClear, onClear, forwardRef, className, disabled, data, selectAll, value: valueProps, onChange, okText, cancelText, selectAllText, onCascaderChange, popupTransitionName, renderTitle, selectLeafOnly, getPopupContainer, maxTagCount } = props, rest = tslib_1.__rest(props, ["width", "onRemove", "placeholder", "allowClear", "onClear", "forwardRef", "className", "disabled", "data", "selectAll", "value", "onChange", "okText", "cancelText", "selectAllText", "onCascaderChange", "popupTransitionName", "renderTitle", "selectLeafOnly", "getPopupContainer", "maxTagCount"]);
const { selectedLeafNode } = container_1.default.useContainer();
const handleClear = react_1.useCallback((event) => {
event.stopPropagation();
if (onClear) {
onClear();
}
}, [onClear]);
const renderItem = react_1.useCallback((item) => {
return (react_1.default.createElement(Tag, { key: item, onRemove: onRemove, item: item, renderTitle: renderTitle }));
}, [renderTitle, onRemove]);
const renderRest = react_1.useCallback((omittedValues) => (react_1.default.createElement(Tag, { closable: false, renderTitle: () => react_1.default.createElement("span", null,
"+",
omittedValues.length,
"..."), item: [
{
label: '',
value: '',
}
] })), []);
return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default(constants_1.prefix, 'ant-select ant-tree-select ant-select-multiple', className, {
'ant-select-disabled': disabled,
}), ref: forwardRef }, rest),
react_1.default.createElement("div", { className: "ant-select-selector", style: { paddingRight: !disabled && allowClear ? '24px' : undefined, width: `${width}px` } }, selectedLeafNode.length ? (react_1.default.createElement(rc_overflow_1.default, { prefixCls: `${constants_1.prefix}-overflow`, data: selectedLeafNode, renderItem: renderItem, renderRest: renderRest, maxCount: maxTagCount })) : (react_1.default.createElement("span", { className: `${constants_1.prefix}-placeholder ant-select-selection-placeholder` }, placeholder))),
!disabled && allowClear ? (react_1.default.createElement("span", { className: "ant-select-clear", onClick: handleClear },
react_1.default.createElement(icons_1.CloseCircleFilled, null))) : null));
};
exports.default = Selector;