weike-multi-cascader
Version:
A multiple cascader component for antd
76 lines (75 loc) • 4.75 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 config_provider_1 = require("antd/lib/config-provider");
const rc_trigger_1 = tslib_1.__importDefault(require("rc-trigger"));
const placement_1 = tslib_1.__importDefault(require("../libs/placement"));
const Menu_1 = tslib_1.__importDefault(require("./Menu"));
const container_1 = tslib_1.__importDefault(require("../container"));
const Selector_1 = tslib_1.__importDefault(require("./Selector"));
const utils_1 = require("../libs/utils");
const constants_1 = require("../constants");
const Checkbox_1 = tslib_1.__importDefault(require("./../components/Checkbox"));
const Popup = (props) => {
const ref = react_1.useRef(null);
const { data, selectAll, onCancel, onConfirm, okText = 'Confirm', cancelText = 'Cancel', selectAllText = 'All', showBottom } = props;
const { flattenData } = container_1.default.useContainer();
return (react_1.default.createElement("div", { className: `${constants_1.prefix}-popup`, ref: ref }, data && data.length ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Menu_1.default, null),
showBottom ? (react_1.default.createElement("div", { className: `${constants_1.prefix}-popup-footer` },
selectAll ? (react_1.default.createElement("div", { className: `${constants_1.prefix}-popup-all` },
react_1.default.createElement(Checkbox_1.default, { node: flattenData[0] }),
"\u00A0\u00A0",
selectAllText)) : null,
react_1.default.createElement("div", { className: `${constants_1.prefix}-popup-buttons` },
react_1.default.createElement(antd_1.Button, { size: "small", onClick: onCancel }, cancelText),
react_1.default.createElement(antd_1.Button, { size: "small", type: "primary", onClick: onConfirm }, okText)))) : null)) : (react_1.default.createElement(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }))));
};
const Component = react_1.default.memo(react_1.default.forwardRef((props, ref) => {
const { getPopupContainer: getContextPopupContainer } = react_1.default.useContext(config_provider_1.ConfigContext);
const selectorRef = react_1.useRef(null);
const { disabled, popupTransitionName = 'slide-up', getPopupContainer, } = props;
const { popupVisible, setPopupVisible, flattenData, value, resetMenuState, triggerChange, } = container_1.default.useContainer();
const handleCancel = react_1.useCallback(() => {
setPopupVisible(false);
}, []);
const handleItemRemove = react_1.useCallback((item) => {
let nextValue;
if (typeof item === 'string') {
nextValue = value.filter((v) => v !== item);
}
else {
nextValue = utils_1.reconcile(item, false, value);
}
triggerChange(nextValue);
}, [value, triggerChange]);
const handleClear = react_1.useCallback(() => {
resetMenuState();
triggerChange([]);
}, [resetMenuState, triggerChange]);
const handleConfirm = react_1.useCallback(() => {
triggerChange(value);
}, [triggerChange, value]);
react_1.useImperativeHandle(ref, () => {
return {
// 匹配所有叶子节点的 value
matchAllLeafValue: (v) => utils_1.matchAllLeafValue(v, flattenData),
};
}, [flattenData]);
return (react_1.default.createElement(rc_trigger_1.default, { action: !disabled ? ['click'] : [], prefixCls: constants_1.prefix, popup: react_1.default.createElement(Popup, Object.assign({}, props, { onCancel: handleCancel, onConfirm: handleConfirm })), popupVisible: disabled ? false : popupVisible, onPopupVisibleChange: setPopupVisible, popupStyle: {
position: 'absolute',
zIndex: 1050,
}, builtinPlacements: placement_1.default, popupPlacement: "bottomLeft", popupTransitionName: popupTransitionName, getPopupContainer: getPopupContainer || getContextPopupContainer },
react_1.default.createElement(Selector_1.default, Object.assign({ forwardRef: selectorRef, onRemove: handleItemRemove, onClear: handleClear }, props))));
}));
const MultiCascader = react_1.default.forwardRef((props, ref) => {
return (react_1.default.createElement(container_1.default.Provider, { initialState: props },
react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }))));
});
MultiCascader.defaultProps = {
data: [],
value: undefined,
};
exports.default = MultiCascader;