es-grid-template
Version:
es-grid-template
395 lines (379 loc) • 14.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useContext = require("./useContext");
var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
var _rcMasterUi = require("rc-master-ui");
var _becoxyIcons = require("becoxy-icons");
var _reactNumericComponent = require("react-numeric-component");
var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
var _utils = require("./hook/utils");
var _reactVirtual = require("@tanstack/react-virtual");
var _utils2 = require("../table-component/hook/utils");
var _ColumnsGroup = require("./ColumnsGroup");
var _locale = require("rc-master-ui/es/locale");
var _ColumnsChoose = require("../table-component/ColumnsChoose");
// import { ColumnsChoose } from './ColumnsChoose'
const TableContainer = props => {
const {
t,
table,
id,
prefix,
commandClick,
editAble,
rowKey,
format,
dataSource,
originData,
expandable,
wrapSettings,
recordDoubleClick,
// triggerFilter,
selectionSettings,
isSelectionChange,
setIsSelectionChange,
onContextMenu,
contextMenuItems,
setSorterChange,
setFilterChange,
height,
minHeight,
showToolbar,
toolbarItems,
actionTemplate,
pagination,
fullScreen,
showColumnChoose,
summary,
locale,
groupColumns,
columns,
propsColumns,
triggerChangeColumns,
columnHidden,
expanded,
setExpanded,
showEmptyText,
infiniteScroll,
next,
loading,
windowSize,
contextMenuOpen,
contextMenuClick,
contextMenuHidden,
isFullScreen,
setIsFullScreen,
isDataTree,
setColumns,
columnSizing,
columnSizingInfo,
rowClassName,
onRowStyles,
onRowFooterStyles,
onRowHeaderStyles,
title,
dataSourceFilter,
groupSetting,
triggerGroupColumns
} = props;
const [paginationLocal] = (0, _locale.useLocale)('Pagination');
const [tableLocal] = (0, _locale.useLocale)('Table');
const tableContainerRef = _react.default.useRef(null);
const containerRef = _react.default.useRef(null);
const bottomToolbarRef = _react.default.useRef(null);
const topToolbarRef = _react.default.useRef(null);
const [tableHeight, settableHeight] = _react.default.useState(0);
const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
_react.default.useEffect(() => {
// const totalHeight = minHeight ?? height
const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
if (totalHeight) {
const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
settableHeight(totalHeight - topHeight - bottomHeight);
}
}, [id, height, editAble, minHeight]);
_react.default.useEffect(() => {
const handleClickOutside = () => {
setFocusedCell(undefined);
setIsSelectionChange(prev => ({
...prev,
isChange: false
}));
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const visibleColumns = table.getVisibleLeafColumns();
const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
//we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
count: visibleColumns.length,
estimateSize: index => visibleColumns[index].getSize(),
//estimate width of each column for accurate scrollbar dragging
getScrollElement: () => tableContainerRef.current,
horizontal: true,
// measureElement(element) {
// return element?.getBoundingClientRect().width;
// },
measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
});
const virtualColumns = columnVirtualizer.getVirtualItems();
const cacheColumns = columnVirtualizer.measurementsCache;
const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
const rightWidth = (0, _utils.sumSize)(rightCols);
const leftWidth = (0, _utils.sumSize)(leftCols);
//different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
let virtualPaddingLeft;
let virtualPaddingRight;
const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
if (columnVirtualizer && virtualColumns?.length) {
virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
// virtualPaddingLeft = leftCols.length === rss.length ? (virtualColumns[0]?.start ?? 0) : 0;
// columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth > 0 ? columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth : 0;
virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
// virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
}
const columnSizingState = table.getState().columnSizing;
_react.default.useEffect(() => {
requestAnimationFrame(() => {
columnVirtualizer.measure();
});
}, [columnSizingState, columnVirtualizer]);
_react.default.useEffect(() => {
if (!tableContainerRef.current) {
return;
}
// const containerWidth = tableContainerRef.current.offsetWidth
// const totalWidth = table.getTotalSize()
// if (totalWidth && totalWidth <= containerWidth) {
// return
// }
if (columnSizingInfo.isResizingColumn === false) {
const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
setColumns(aa);
// requestAnimationFrame(() => {
// columnVirtualizer.measure()
// })
}
}, [columnSizingInfo]);
const triggerCommandClick = args => {
// const { id: idCommand, rowId, rowData, index } = args
// const tmpData = [...dataSource]
if (commandClick) {
commandClick({
...args,
rows: originData
});
}
};
const handleOnGroup = value => {
triggerGroupColumns?.(value);
};
const handleCollapseAllGroup = () => {
setExpanded({});
};
const handleExpandAllGroup = () => {
const allKeys = (0, _utils2.findAllChildrenKeys2)(dataSource, rowKey, 'children');
setExpanded((0, _utils2.convertToObjTrue)(allKeys));
};
const groupToolbar = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
gap: '10px',
marginRight: 10,
outline: 'none'
}
}, groupSetting?.showGroupIcon !== false && /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
t: t,
id: id,
tableLocal: tableLocal,
unClearableLevel: groupSetting?.unClearableLevel,
columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
columnsGrouped: groupColumns,
onSubmit: handleOnGroup
}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _utils2.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": tableLocal?.collapseAll || 'Collapse all',
fontSize: 16,
color: '#555555',
onClick: handleCollapseAllGroup,
className: "toolbar-icon"
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": tableLocal?.expandAll || 'Expand all',
fontSize: 16,
color: '#555555',
onClick: handleExpandAllGroup,
className: "toolbar-icon"
})));
};
return /*#__PURE__*/_react.default.createElement("div", {
ref: containerRef,
id: id
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
ref: topToolbarRef,
className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '.75rem'
}
}, groupToolbar(), /*#__PURE__*/_react.default.createElement("div", {
style: {
flex: 1,
overflow: 'hidden'
}
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
mode: 'scroll'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '.75rem'
}
}, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
showSizeChanger: true,
responsive: true,
size: 'small',
rootClassName: 'top-pagination',
showTotal: (totalItems, range) =>
// @ts-ignore
`${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
}, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
fontSize: 16,
onClick: () => {
setIsFullScreen(!isFullScreen);
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": tableLocal?.Minimized || 'Minimized',
className: "toolbar-icon"
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
fontSize: 16,
onClick: () => {
setIsFullScreen(!isFullScreen);
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": tableLocal?.fullScreen || 'Full screen',
className: "toolbar-icon"
})), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
table: table,
id: id,
tableLocal: tableLocal,
columnHidden: columnHidden,
columns: columns,
originColumns: propsColumns,
t: t,
columnsGroup: groupColumns,
triggerChangeColumns: triggerChangeColumns
})))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
value: {
t,
locale,
prefix,
id,
rowKey,
format,
expandable,
expanded,
setExpanded,
dataSource,
originData,
// triggerFilter,
wrapSettings,
recordDoubleClick,
selectionSettings,
isSelectionChange,
setIsSelectionChange,
onContextMenu,
setSorterChange,
setFilterChange,
windowSize,
isDataTree,
focusedCell,
setFocusedCell,
rowClassName,
onRowStyles,
onRowFooterStyles,
onRowHeaderStyles,
table,
pagination,
dataSourceFilter,
groupColumns
}
}, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
contextMenuItems: contextMenuItems,
height: tableHeight,
minHeight: minHeight,
id: id,
prefix: prefix,
table: table,
tableContainerRef: tableContainerRef,
commandClick: triggerCommandClick,
contextMenuClick: contextMenuClick,
contextMenuHidden: contextMenuHidden,
contextMenuOpen: contextMenuOpen,
editAble: editAble,
showEmptyText: showEmptyText,
summary: summary,
dataSource: dataSource,
infiniteScroll: infiniteScroll,
next: next,
loading: loading,
columnVirtualizer: columnVirtualizer,
virtualPaddingLeft: virtualPaddingLeft,
virtualPaddingRight: virtualPaddingRight,
fixedLeftColumns: fixedLeftColumns,
fixedRightColumns: fixedRightColumns
})), /*#__PURE__*/_react.default.createElement("div", {
ref: bottomToolbarRef
}, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
pageSizeOptions: [20, 50, 100, 1000, 10000],
rootClassName: 'pagination-template',
showSizeChanger: true,
size: 'small',
total: pagination.total,
pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
showTotal: (totalItems, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
thousandSeparator: '.'
})}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
thousandSeparator: '.'
})} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
thousandSeparator: '.'
})} ${pagination?.locale?.items || paginationLocal?.items || ''}`
}, pagination, {
onChange: (page, pageSize1) => {
if (pagination.onChange) {
pagination.onChange(page, pageSize1);
table.setPageIndex(page - 1);
table.setPageSize(pageSize1);
} else {
table.setPageIndex(page - 1);
table.setPageSize(pageSize1);
}
},
responsive: true
}))));
};
var _default = exports.default = TableContainer;