fastlion-amis
Version:
一种MIS页面生成工具
124 lines (123 loc) • 9.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
require("./index.scss");
var antd_1 = require("antd");
var icons_1 = require("@ant-design/icons");
var OverflowWrapper = function (props) {
var _a, _b;
var items = props.items, itemClassName = props.itemClassName, moreBtnRender = props.moreBtnRender, _c = props.popoverWrapperClassName, popoverWrapperClassName = _c === void 0 ? '' : _c, classPrefix = props.classPrefix, env = props.env, fixRightRender = props.fixRightRender, _d = props.showFixRight, showFixRight = _d === void 0 ? true : _d, _e = props.fixRightRenderIndex, fixRightRenderIndex = _e === void 0 ? -1 : _e;
var _f = (0, react_1.useState)(false), isOverflow = _f[0], setIsOverflow = _f[1];
var _g = (0, react_1.useState)(0), finalIndex = _g[0], setFinalIndex = _g[1];
var _h = (0, react_1.useState)(false), showMoreContent = _h[0], setShowMoreContent = _h[1];
var containerRef = (0, react_1.useRef)(null);
var wrapperRef = (0, react_1.useRef)(null);
var boxRef = (0, react_1.useRef)(null);
var reCalcWidth = function (data) {
var _a, _b, _c, _d, _e, _f, _g;
// const { width: wrapperWidth } = data;
var wrapperWidth = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
// 找到最后一个显示在容器上的按钮
var allWidth = 0;
var finalIndex = 0;
var isOverflow = false;
// 获取所有按钮
var btnList = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.' + itemClassName)) !== null && _d !== void 0 ? _d : [];
// 获取所有按钮的实际宽度
var widthList = Array.from(btnList).filter(Boolean).map(function (item) { return item.clientWidth; });
// 获取更多容器宽度
var moreBtnBoxWidth = (_g = (_f = (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.querySelector('.more-btn-box.show')) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 0;
var fixedRightWidth = showFixRight ? widthList[fixRightRenderIndex] : 0;
for (var i = 0, len = widthList.length; i < len; i++) {
// 如果当前项很长，且加上当前项后会溢出，则要判断溢出的宽度，从而将显示更多按钮
var currentWidth = widthList[i];
var prevWidth = widthList[i - 1] > 0 ? widthList[i - 1] : 0;
var extraWidth = moreBtnBoxWidth > 0 ? (moreBtnBoxWidth >= 52 ? moreBtnBoxWidth : fixedRightWidth) : (currentWidth);
// console.log('debug------------- start', i)
// console.log('debug-moreBtnBoxWidth', moreBtnBoxWidth, containerRef.current?.querySelector('.more-btn-box.show'));
// console.log('debug-fixedRightWidth', fixedRightWidth);
// console.log('debug-prevWidth', `allWidth:${allWidth} + extraWidth:${extraWidth} = ${allWidth + extraWidth}`);
// console.log('debug-', `prevWidth${prevWidth}`);
// console.log('debug-', `currentWidth:${currentWidth}`, `wrapperWidth：${wrapperWidth}`, i);
// console.log('debug-containerRef.current', containerRef.current, containerRef.current?.clientWidth);
// console.log('debug-fixRightRenderIndex', fixRightRenderIndex, i);
if (i === fixRightRenderIndex && (allWidth + extraWidth) <= wrapperWidth) {
finalIndex = i;
isOverflow = false;
break;
}
if ((allWidth + extraWidth) <= wrapperWidth) {
// console.log('debug-小于wrapperWidth');
allWidth += currentWidth;
isOverflow = false;
if (boxRef.current) {
boxRef.current.style.left = 'unset';
}
}
else {
// console.log('debug-大于wrapperWidth');
var leftWidth = wrapperWidth - allWidth - (moreBtnBoxWidth > 52 ? moreBtnBoxWidth : ((showFixRight ? 104 : 52)));
if (boxRef.current) {
// 如果溢出的空间大于当前宽度的3/4（保留弹性边界值5px），则显示在左侧，否则显示在右侧
var left = leftWidth > 0 ? (leftWidth > (currentWidth * 3 / 4) ? 0 : leftWidth) : leftWidth + Math.abs(widthList[i - 1] - 5);
// console.log('debug-left', `left: ${left}`, `leftWidth: ${leftWidth}`, `currentWidth: ${currentWidth}`, `allWidth: ${allWidth}`, `wrapperWidth: ${wrapperWidth}`, `widthList[i-1]: ${widthList[i-1]}`);
boxRef.current.style.left = left + 'px';
isOverflow = true;
finalIndex = i - (leftWidth < 0 ? 1 : 0);
}
break;
}
// console.log('debug------------- end', i)
}
setIsOverflow(finalIndex >= 0 && isOverflow);
setShowMoreContent(false);
setFinalIndex(finalIndex);
};
var moreContentRender = (0, react_1.useMemo)(function () {
var newContentList = items.slice(finalIndex).filter(function (item) { return fixRightRenderIndex > -1 ? item.key !== fixRightRenderIndex : true; });
if (finalIndex >= 0 && (newContentList === null || newContentList === void 0 ? void 0 : newContentList.length) > 0) {
return (react_1.default.createElement("div", { onClick: function () { return toggleMoreContent(false); }, onMouseLeave: function () { return toggleMoreContent(false); }, className: "more-content-box ".concat(classPrefix('Crud-toolbar-tool-content')) }, newContentList.map(function (item) {
return react_1.default.createElement("div", { key: item.key, className: "item" }, item.children);
})));
}
else {
return null;
}
}, [finalIndex, items]);
var toggleMoreContent = function (visible) {
setShowMoreContent(visible);
};
(0, react_1.useEffect)(function () {
var resizeObserver = new ResizeObserver(function (entries) {
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
var entry = entries_1[_i];
var width = entry.contentRect.width;
reCalcWidth({ width: width });
}
});
requestAnimationFrame(function () {
if (containerRef.current) {
// reCalcWidth({ width: containerRef.current.clientWidth });
resizeObserver.observe(containerRef.current);
}
});
return function () {
containerRef.current && resizeObserver.unobserve(containerRef.current);
};
}, [containerRef.current]);
return (react_1.default.createElement("div", { className: "overflow-container", ref: containerRef },
react_1.default.createElement("div", { className: "overflow-box", ref: boxRef },
react_1.default.createElement("div", { className: "overflow-wrapper ".concat(isOverflow ? 'isOverflow' : ''), ref: wrapperRef }, items.map(function (item, index) {
return (showFixRight && fixRightRenderIndex > -1 && isOverflow) ? (fixRightRenderIndex != index ? item : null) : item;
}).filter(Boolean)
.map(function (item) { return item.children; }))),
react_1.default.createElement("div", { className: "more-btn-box ".concat(isOverflow ? 'show' : '') },
react_1.default.createElement(antd_1.Popover, { getPopupContainer: env.getModalContainer, content: moreContentRender, open: showMoreContent, trigger: ['hover', 'click'], onOpenChange: toggleMoreContent, mouseLeaveDelay: 0.4, overlayClassName: "popover-overlay ".concat(popoverWrapperClassName) },
react_1.default.createElement("div", null, moreBtnRender !== null && moreBtnRender !== void 0 ? moreBtnRender : (react_1.default.createElement("div", { className: classPrefix('Crud-toolbar-item', 'more-btn') },
react_1.default.createElement("div", { className: classPrefix('Button', 'Button--default', 'Button-sm') }, "\u66F4\u591A"),
react_1.default.createElement(icons_1.DownOutlined, { style: { fontSize: '12px' } }))))),
react_1.default.createElement("div", { className: "fix-right-box" }, showFixRight ? (fixRightRender !== null && fixRightRender !== void 0 ? fixRightRender : (react_1.default.createElement("div", null, (_b = (_a = items.slice(fixRightRenderIndex > -1 ? fixRightRenderIndex : 0)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b['children']))) : null))));
};
exports.default = OverflowWrapper;
//# sourceMappingURL=./components/OverflowWrapper/index.js.map