weike-multi-cascader
Version:
A multiple cascader component for antd
30 lines (29 loc) • 1.63 kB
JavaScript
;
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 Column = (props) => {
const { item, columnWidth, depth, index } = props;
const ref = react_1.useRef(null);
const [width, setWidth] = react_1.useState(columnWidth);
// 固定宽度，避免切换时菜单跳动的问题
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, { index: index, 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, { index: index, item: item, columnWidth: columnWidth, depth: index, key: ((_a = item[0]) === null || _a === void 0 ? void 0 : _a.value) || index }));
})));
};