@flatbiz/antd
Version:
170 lines (165 loc) • 6.31 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, b as _objectSpread2, a as _slicedToArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { get } from '@dimjs/utils/get/get';
import { cloneElement, useRef, useState, useEffect } from 'react';
import { useCreation, useInViewport, useSize, useEventListener } from 'ahooks';
import { Affix } from 'antd';
import { fbaHooks } from './fba-hooks/index.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
var _excluded = ["children", "target"];
var useEffectCustom = fbaHooks.useEffectCustom;
var _getParentNodeScroll = function getParentNodeScroll(parentNode) {
if (!parentNode) return undefined;
var computedStyle = getComputedStyle(parentNode);
if (computedStyle.overflowY === 'scroll' || computedStyle.overflowY === 'auto') {
return parentNode;
}
return _getParentNodeScroll(parentNode.parentNode);
};
/**
* 表格x轴浮动滚动条
* ```
* 使用方法
* <TableScrollbar>
* <Table/>
* </TableScrollbar>
* ```
*/
var TableScrollbar = function TableScrollbar(_ref) {
var children = _ref.children,
target = _ref.target,
props = _objectWithoutProperties(_ref, _excluded);
var _summary = get(children, 'props.summary');
return /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, props), {}, {
summary: function summary() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return /*#__PURE__*/jsxs(Fragment, {
children: [_summary === null || _summary === void 0 ? void 0 : _summary.apply(void 0, args), /*#__PURE__*/jsx(ScrollbarSummary, {
target: target
})]
});
}
}));
};
var ScrollbarSummary = function ScrollbarSummary(_ref2) {
var target = _ref2.target;
var refScrollBox = useRef();
var refScroll = useRef();
// 控制滚动条的显示
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
show = _useState2[0],
setShow = _useState2[1];
// 获取表格和表格包裹框
var _useCreation = useCreation(function () {
var _refScrollBox$current;
var _getParentTable = function getParentTable(parentNode) {
if (!parentNode) return undefined;
if (parentNode.nodeName === 'TABLE') {
return parentNode;
}
return _getParentTable(parentNode.parentNode);
};
var table = _getParentTable(refScrollBox === null || refScrollBox === void 0 || (_refScrollBox$current = refScrollBox.current) === null || _refScrollBox$current === void 0 ? void 0 : _refScrollBox$current.parentElement);
return {
table: table,
tableBox: table === null || table === void 0 ? void 0 : table.parentElement
};
}, [refScrollBox.current]),
table = _useCreation.table,
tableBox = _useCreation.tableBox;
// 表格是否显示
var _useInViewport = useInViewport(table === null || table === void 0 ? void 0 : table.querySelector('tbody')),
_useInViewport2 = _slicedToArray(_useInViewport, 1),
inViewport = _useInViewport2[0];
// 监听左右滚动框的大小变化
var size = useSize(tableBox);
// 获取上下滚动事件的滚动条
var _target = useCreation(function () {
if (target) return target;
return _getParentNodeScroll(table) || document.body;
}, [target, table, size]);
useEffectCustom(function () {
if (show && refScrollBox.current && refScroll.current) {
if (refScrollBox.current.clientWidth != (tableBox === null || tableBox === void 0 ? void 0 : tableBox.clientWidth)) {
refScrollBox.current.style.width = "".concat((tableBox === null || tableBox === void 0 ? void 0 : tableBox.clientWidth) || 0, "px");
}
if (refScroll.current.clientWidth != (table === null || table === void 0 ? void 0 : table.clientWidth)) {
refScroll.current.style.width = "".concat((table === null || table === void 0 ? void 0 : table.clientWidth) || 0, "px");
}
}
}, [size, show]);
// 注册原始滚动条事件
useEventListener('scroll', function (_ref3) {
var target = _ref3.target;
if (refScrollBox.current) {
refScrollBox.current.scrollLeft = target.scrollLeft;
}
}, {
target: function target() {
return tableBox;
}
});
// 注册原始自定义滚动条时间
useEventListener('scroll', function (_ref4) {
var target = _ref4.target;
if (tableBox) tableBox.scrollLeft = target.scrollLeft;
}, {
target: refScrollBox
});
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
key = _useState4[0],
setKey = _useState4[1];
var rootRef = useRef(null);
useEffect(function () {
var _rootRef$current;
var parentNode = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.parentNode;
var inModal = false;
while (parentNode != null) {
var _parentNode$classList, _parentNode$classList2;
if ((_parentNode$classList = parentNode.classList) !== null && _parentNode$classList !== void 0 && _parentNode$classList.contains('ant-modal-content') || (_parentNode$classList2 = parentNode.classList) !== null && _parentNode$classList2 !== void 0 && _parentNode$classList2.contains('ant-drawer-body')) {
inModal = true;
break;
}
parentNode = parentNode.parentNode;
}
if (inModal) {
setTimeout(function () {
setKey(Date.now());
}, 400);
} else {
setKey(Date.now());
}
}, []);
return /*#__PURE__*/jsx("div", {
className: "scrollbar-main",
ref: rootRef,
children: key ? /*#__PURE__*/jsx(Affix, {
offsetBottom: inViewport ? 13 : 0,
style: {
opacity: show ? 1 : 0
},
onChange: function onChange(value) {
setShow(!!value);
},
target: function target() {
return _target;
},
children: /*#__PURE__*/jsx("div", {
ref: refScrollBox,
className: "scrollbar-box",
children: /*#__PURE__*/jsx("div", {
ref: refScroll,
style: {
height: 1
}
})
})
}) : null
});
};
export { TableScrollbar as T };
//# sourceMappingURL=table-scrollbar-CBqQ4pYQ.js.map