antd-multi-asl-cascader
Version:
A multiple cascader component for antd
50 lines (49 loc) • 3.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const container_1 = tslib_1.__importDefault(require("../container"));
const constants_1 = require("../constants");
const MenuItem_1 = tslib_1.__importDefault(require("./MenuItem"));
const react_virtualized_1 = require("react-virtualized");
const antd_1 = require("antd");
// import './Menu.less'
const icons_1 = require("@ant-design/icons");
const Column = (props) => {
const { item, columnWidth, depth, setMenuData } = props;
const ref = react_1.useRef(null);
const [width, setWidth] = react_1.useState(columnWidth);
const [searchVal, setSearchVal] = react_1.useState();
const showOptions = react_1.useMemo(() => {
setMenuData(preMenuData => preMenuData.slice(0, depth + 1));
return item.filter(eachItem => {
if (!(searchVal === null || searchVal === void 0 ? void 0 : searchVal.length)) {
return true;
}
return (eachItem.label || '').includes(searchVal);
});
}, [searchVal, item, depth]);
// 固定宽度，避免切换时菜单跳动的问题
react_1.useEffect(() => {
const { width: refWidth } = ref.current.getBoundingClientRect();
setWidth(refWidth);
}, []);
function rowRenderer({ key, index,
// isScrolling,
// isVisible,
style }) {
return (react_1.default.createElement("div", { key: key, style: style }, react_1.default.createElement(MenuItem_1.default, { key: showOptions[index].value, depth: depth, node: showOptions[index] })));
}
return (react_1.default.createElement("div", { className: `${constants_1.prefix}-column`, style: { width: `${columnWidth || width}px` }, ref: ref },
react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
react_1.default.createElement(antd_1.Input, { bordered: false, className: 'itemtype-input', prefix: react_1.default.createElement(icons_1.SearchOutlined, null), value: searchVal, onChange: e => { var _a, _b; return setSearchVal((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''); }, placeholder: "\u8BF7\u9009\u62E9\u72B6\u6001\u8FDB\u5165\u65F6\u95F4", allowClear: true }),
showOptions.length ? react_1.default.createElement(react_virtualized_1.List, { width: 245, height: 180, rowCount: showOptions.length, rowHeight: 32, rowRenderer: rowRenderer }) : react_1.default.createElement(antd_1.Empty, { style: { marginLeft: '20px' }, image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }))));
};
exports.default = (props) => {
const { columnWidth } = props;
const { menuData, setMenuData } = container_1.default.useContainer();
return (react_1.default.createElement("div", { className: `${constants_1.prefix}-menu` }, menuData.map((item, index) => {
var _a;
return (react_1.default.createElement(Column, { item: item, columnWidth: columnWidth, depth: index, key: ((_a = item[0]) === null || _a === void 0 ? void 0 : _a.value) || index, setMenuData: setMenuData }));
})));
};