es-grid-template
Version:
es-grid-template
294 lines (291 loc) • 9.12 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import classNames from 'classnames';
import Pagination from 'rc-master-ui/es/pagination';
import { Toolbar } from 'rc-master-ui';
import { Collapse2, Expand2, Maximize, Minimize } from 'becoxy-icons';
import { numericFormatter } from 'react-numeric-component';
import TableWrapper from "./TableWrapper";
import { ColumnsChoose } from "../../table-component/ColumnsChoose";
import { convertToObjTrue, findAllChildrenKeys2, getTableHeight, isObjEmpty } from "../hook/utils";
import { TableContext } from "../useContext";
// import { ColumnsGroup } from '../../grid-component/ColumnsGroup';
import { flatColumns2 } from "../../table-component/hook/utils";
import { ColumnsGroup } from "../ColumnsGroup";
import { useLocale } from 'rc-master-ui/es/locale';
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,
triggerGroupColumns,
columnHidden,
expanded,
setExpanded,
// showEmptyText,
infiniteScroll,
// next,
// loading,
windowSize,
// contextMenuOpen,
// contextMenuClick,
// contextMenuHidden,
isFullScreen,
setIsFullScreen,
isDataTree,
// setColumns,
// columnSizing,
// columnSizingInfo,
rowClassName,
onRowStyles,
onRowFooterStyles,
onRowHeaderStyles,
title,
groupSetting,
...rest
} = props;
const [paginationLocal] = useLocale('Pagination');
const [tableLocal] = useLocale('Table');
const tableContainerRef = React.useRef(null);
const containerRef = React.useRef(null);
const bottomToolbarRef = React.useRef(null);
const topToolbarRef = React.useRef(null);
const [tableHeight, settableHeight] = React.useState(0);
React.useEffect(() => {
// const totalHeight = minHeight ?? height
const totalHeight = 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.useEffect(() => {
const handleClickOutside = () => {
// setFocusedCell(undefined)
// setIsSelectionChange((prev) => (
// {
// ...prev,
// isChange: false
// }
// ))
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
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 = findAllChildrenKeys2(dataSource, rowKey, 'children');
setExpanded(convertToObjTrue(allKeys));
};
const groupToolbar = () => {
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
gap: '10px',
marginRight: 10
}
}, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
t: t
// defaultGroupColumns={['name']}
,
unClearableLevel: groupSetting?.unClearableLevel
// unClearableLevel={2}
,
columns: propsColumns ? flatColumns2(propsColumns) : [],
columnsGrouped: groupColumns,
onSubmit: handleOnGroup
}), /*#__PURE__*/React.createElement(React.Fragment, null, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement(Collapse2, {
fontSize: 16,
color: '#555555',
onClick: handleCollapseAllGroup
}) : /*#__PURE__*/React.createElement(Expand2, {
fontSize: 16,
color: '#555555',
onClick: handleExpandAllGroup
})));
};
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
id: id
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
ref: topToolbarRef,
className: classNames(`${prefix}-grid-top-toolbar`, {})
}, /*#__PURE__*/React.createElement("div", {
style: {
textAlign: 'center'
}
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}
}, groupToolbar(), /*#__PURE__*/React.createElement("div", {
style: {
flex: 1,
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Toolbar, {
items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
mode: 'scroll'
})), /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '.75rem'
}
}, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
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.createElement(Minimize, {
fontSize: 16,
onClick: () => {
setIsFullScreen(!isFullScreen);
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": t ? t('Minimized') : 'Minimized'
}) : /*#__PURE__*/React.createElement(Maximize, {
fontSize: 16,
onClick: () => {
setIsFullScreen(!isFullScreen);
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": t ? t('Full screen') : 'Full screen'
})), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
table: table,
id: id,
tableLocal: tableLocal,
columnHidden: columnHidden,
columns: columns,
originColumns: propsColumns,
t: t,
columnsGroup: groupColumns,
triggerChangeColumns: triggerChangeColumns
})))), /*#__PURE__*/React.createElement(TableContext.Provider, {
value: {
t,
locale,
prefix,
id,
rowKey,
format,
expandable,
expanded,
setExpanded,
dataSource,
originData,
wrapSettings,
recordDoubleClick,
selectionSettings,
isSelectionChange,
setIsSelectionChange,
onContextMenu,
setSorterChange,
setFilterChange,
windowSize,
isDataTree,
rowClassName,
onRowStyles,
onRowFooterStyles,
onRowHeaderStyles,
table,
pagination,
groupSetting
}
}, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
tableContainerRef: tableContainerRef,
prefix: prefix,
id: id,
height: tableHeight,
minHeight: minHeight,
dataSource: dataSource,
table: table,
columns: columns,
commandClick: triggerCommandClick
}))), /*#__PURE__*/React.createElement("div", {
ref: bottomToolbarRef
}, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
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) => `${numericFormatter((range[0] ?? 0).toString(), {
thousandSeparator: '.'
})}-${numericFormatter((range[1] ?? 0).toString(), {
thousandSeparator: '.'
})} / ${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
}))));
};
export default TableContainer;