weike-multi-cascader
Version:
A multiple cascader component for antd
109 lines (108 loc) • 5.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const container_1 = tslib_1.__importDefault(require("../container"));
const constants_1 = require("../constants");
const utils_1 = require("./../libs/utils");
// const Tag = (props: {
// onRemove?: SelectorProps['onRemove']
// item: TreeNode
// renderTitle: Props['renderTitle']
// closable?: boolean
// }) => {
// const {
// onRemove,
// item,
// closable = false,
// } = props
// const handleRemove = (
// event: React.MouseEvent<HTMLSpanElement, MouseEvent>
// ) => {
// event.stopPropagation()
// if (onRemove) {
// onRemove(item)
// }
// }
//
// // const value = (item.value || item) as string
// // const title = renderTitle(value) || item.title || item
// const flag = !!(item.children && item.children.length > 0)
//
// return (
// <span className="ant-select-selection-item-nostyle">
// <span className="ant-select-selection-item-content-nostyle">{conactAllName(item, '', flag)}、 </span>
// {closable && (
// <span className="ant-select-selection-item-remove">
// <CloseOutlined onClick={handleRemove} />
// </span>
// )}
// </span>
// )
// }
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 = 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, isToolTip } = container_1.default.useContainer();
const selectedItemsMap = lodash_1.keyBy(selectedItems, 'value');
const handleClear = react_1.useCallback((event) => {
event.stopPropagation();
if (onClear) {
onClear();
}
}, [onClear]);
// const renderItem = useCallback(
// (item: string) => {
// return (
// <Tag
// key={item}
// onRemove={onRemove}
// item={selectedItemsMap[item] || item}
// renderTitle={renderTitle}
// />
// )
// },
// [selectedItemsMap, renderTitle, onRemove]
// )
// const renderRest = useCallback(
// (omittedValues: string[]) => (
// <Tag
// closable={false}
// renderTitle={() => <span>+{omittedValues.length}...</span>}
// item={{
// title: '',
// value: '',
// }}
// />
// ),
// []
// )
const values = valueProps || hackValue.current || [];
let popupTitle = '';
values.forEach(item => {
const flag = !!((selectedItemsMap[item] || item).children && (selectedItemsMap[item] || item).children.length > 0);
popupTitle += `${utils_1.conactAllName((selectedItemsMap[item] || item), '', flag)}、`;
});
popupTitle = popupTitle.slice(0, -1);
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),
isToolTip ? (react_1.default.createElement(antd_1.Popover, { content: popupTitle, title: "\u5DF2\u9009\u4E2D", trigger: "hover" },
react_1.default.createElement("div", { className: "ant-select-selector", style: { paddingRight: !disabled && allowClear ? '24px' : undefined } }, values.length ? (react_1.default.createElement("div", { className: 'overflowP' }, popupTitle)) : (react_1.default.createElement("span", { className: `${constants_1.prefix}-placeholder ant-select-selection-placeholder` }, placeholder))))) : (react_1.default.createElement("div", { className: "ant-select-selector", style: { paddingRight: !disabled && allowClear ? '24px' : undefined } }, values.length ? (
// <Overflow
// prefixCls={`${prefix}-overflow`}
// data={values}
// renderItem={renderItem}
// renderRest={renderRest}
// maxCount={maxTagCount}
// />
react_1.default.createElement("div", { className: 'overflowP' }, popupTitle)) : (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,
react_1.default.createElement("span", { className: "input-arrow", onClick: handleClear },
react_1.default.createElement(icons_1.DownOutlined, null))));
};
exports.default = Selector;