antd-multi-cascader
Version:
A multiple cascader component for antd
55 lines (54 loc) • 3.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = (0, tslib_1.__importStar)(require("react"));
const icons_1 = require("@ant-design/icons");
const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
const lodash_1 = require("lodash");
const rc_overflow_1 = (0, tslib_1.__importDefault)(require("rc-overflow"));
const container_1 = (0, 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.value || item);
const title = renderTitle(value) || item.title || item;
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 { onRemove, placeholder, allowClear, onClear, forwardRef, className, disabled, data, selectAll, value: valueProps, onChange, okText, cancelText, selectAllText, onCascaderChange, popupTransitionName, renderTitle, selectLeafOnly, getPopupContainer, maxTagCount } = props, rest = (0, tslib_1.__rest)(props, ["onRemove", "placeholder", "allowClear", "onClear", "forwardRef", "className", "disabled", "data", "selectAll", "value", "onChange", "okText", "cancelText", "selectAllText", "onCascaderChange", "popupTransitionName", "renderTitle", "selectLeafOnly", "getPopupContainer", "maxTagCount"]);
const { selectedItems, hackValue } = container_1.default.useContainer();
const selectedItemsMap = (0, lodash_1.keyBy)(selectedItems, 'value');
const handleClear = (0, react_1.useCallback)((event) => {
event.stopPropagation();
if (onClear) {
onClear();
}
}, [onClear]);
const renderItem = (0, react_1.useCallback)((item) => {
return (react_1.default.createElement(Tag, { key: item, onRemove: onRemove, item: selectedItemsMap[item] || item, renderTitle: renderTitle }));
}, [selectedItemsMap, renderTitle, onRemove]);
const renderRest = (0, react_1.useCallback)((omittedValues) => (react_1.default.createElement(Tag, { closable: false, renderTitle: () => react_1.default.createElement("span", null,
"+",
omittedValues.length,
"..."), item: {
title: '',
value: '',
} })), []);
const values = valueProps || hackValue.current || [];
return (react_1.default.createElement("div", Object.assign({ className: (0, 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 } }, values.length ? (react_1.default.createElement(rc_overflow_1.default, { prefixCls: `${constants_1.prefix}-overflow`, data: values, 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;