@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
79 lines (78 loc) • 3.56 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { useCallback, useEffect, useState } from "react";
export function useTableSticky(columns) {
var rtl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
var _useState = _sliced_to_array(useState(false), 2), isSticky = _useState[0], setIsSticky = _useState[1];
var _useState1 = _sliced_to_array(useState({}), 2), stickyColumnStyleMap = _useState1[0], setStickyColumnStyleMap = _useState1[1];
var _useState2 = _sliced_to_array(useState({}), 2), stickyColumnClassMap = _useState2[0], setStickyColumnClassMap = _useState2[1];
var _useState3 = _sliced_to_array(useState(0), 2), stickyLeftWidth = _useState3[0], setStickyLeftWidth = _useState3[1];
var _useState4 = _sliced_to_array(useState(0), 2), stickyRightWidth = _useState4[0], setStickyRightWidth = _useState4[1];
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 = {}, _define_property(_obj, dir, _stickyLeftWidth || 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 = {}, _define_property(_obj, dir, _stickyRightWidth || 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 = useCallback(function(key) {
return stickyColumnStyleMap[key];
}, [
stickyColumnStyleMap
]);
var getStickyClass = useCallback(function(key) {
return stickyColumnClassMap[key];
}, [
stickyColumnClassMap
]);
return {
isSticky: isSticky,
stickyLeftWidth: stickyLeftWidth,
stickyRightWidth: stickyRightWidth,
getStickyClass: getStickyClass,
getStickyStyle: getStickyStyle
};
}