antd-multi-cascader
Version:
A multiple cascader component for antd
30 lines (29 loc) • 1.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = (0, tslib_1.__importStar)(require("react"));
const container_1 = (0, tslib_1.__importDefault)(require("../container"));
const constants_1 = require("../constants");
const MenuItem_1 = (0, tslib_1.__importDefault)(require("./MenuItem"));
const Column = (props) => {
const { item, columnWidth, depth } = props;
const ref = (0, react_1.useRef)(null);
const [width, setWidth] = (0, react_1.useState)(columnWidth);
// 固定宽度，避免切换时菜单跳动的问题
(0, react_1.useEffect)(() => {
const { width: refWidth } = ref.current.getBoundingClientRect();
setWidth(refWidth);
}, []);
return (react_1.default.createElement("div", { className: `${constants_1.prefix}-column`, style: { width: `${columnWidth || width}px` }, ref: ref },
react_1.default.createElement("ul", null, item.map((node) => {
return (react_1.default.createElement(MenuItem_1.default, { key: node.value.toString(), depth: depth, node: node }));
}))));
};
exports.default = (props) => {
const { columnWidth } = props;
const { menuData } = 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 }));
})));
};