@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
89 lines (88 loc) • 3.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTableSticky", {
enumerable: true,
get: function() {
return useTableSticky;
}
});
var _define_property = require("@swc/helpers/_/_define_property");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = require("react");
function useTableSticky(columns) {
var rtl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isSticky = _useState[0], setIsSticky = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)({}), 2), stickyColumnStyleMap = _useState1[0], setStickyColumnStyleMap = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)({}), 2), stickyColumnClassMap = _useState2[0], setStickyColumnClassMap = _useState2[1];
var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), stickyLeftWidth = _useState3[0], setStickyLeftWidth = _useState3[1];
var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), stickyRightWidth = _useState4[0], setStickyRightWidth = _useState4[1];
(0, _react.useEffect)(function() {
var leftColumns = columns.filter(function(item) {
return item.fixed === 'left';
}) || [];
var rightColumns = columns.filter(function(item) {
return item.fixed === 'right';
}) || [];
var middleColumns = columns.filter(function(item) {
return !item.fixed;
}) || [];
var _columnStyleMap = {};
var _columnClassMap = {};
var _stickyLeftWidth = 0;
var _stickyRightWidth = 0;
// 左侧固定列
leftColumns.forEach(function(curr, index) {
var dir = rtl ? 'right' : 'left';
var _obj;
_columnStyleMap[curr.key] = (_obj = {}, (0, _define_property._)(_obj, dir, _stickyLeftWidth || 0), (0, _define_property._)(_obj, "width", curr.width || 'auto'), _obj);
_columnClassMap[curr.key] = {
'nut-table-fixed-left': true,
'nut-table-fixed-left-last': index === leftColumns.length - 1
};
_stickyLeftWidth += curr.width || 0;
});
middleColumns.forEach(function(curr) {
_columnStyleMap[curr.key] = {
width: curr.width || 'auto'
};
});
// 右侧列
for(var i = rightColumns.length - 1; i >= 0; i--){
var curr = rightColumns[i];
var dir = rtl ? 'left' : 'right';
var _obj;
_columnStyleMap[curr.key] = (_obj = {}, (0, _define_property._)(_obj, dir, _stickyRightWidth || 0), (0, _define_property._)(_obj, "width", curr.width || 'auto'), _obj);
_columnClassMap[curr.key] = {
'nut-table-fixed-right': true,
'nut-table-fixed-right-first': i === 0
};
_stickyRightWidth += curr.width || 0;
}
setIsSticky(leftColumns.length > 0 || rightColumns.length > 0);
setStickyColumnStyleMap(_columnStyleMap);
setStickyColumnClassMap(_columnClassMap);
setStickyLeftWidth(_stickyLeftWidth);
setStickyRightWidth(_stickyRightWidth);
}, [
columns
]);
var getStickyStyle = (0, _react.useCallback)(function(key) {
return stickyColumnStyleMap[key];
}, [
stickyColumnStyleMap
]);
var getStickyClass = (0, _react.useCallback)(function(key) {
return stickyColumnClassMap[key];
}, [
stickyColumnClassMap
]);
return {
isSticky: isSticky,
stickyLeftWidth: stickyLeftWidth,
stickyRightWidth: stickyRightWidth,
getStickyClass: getStickyClass,
getStickyStyle: getStickyStyle
};
}