es-grid-template
Version:
es-grid-template
302 lines (297 loc) • 9.98 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 _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("./TableWrapper"));
var _ColumnsChoose = require("../../table-component/ColumnsChoose");
var _utils = require("../hook/utils");
var _useContext = require("../useContext");
var _utils2 = require("../../table-component/hook/utils");
var _ColumnsGroup = require("../ColumnsGroup");
var _locale = require("rc-master-ui/es/locale");
// import { ColumnsGroup } from '../../grid-component/ColumnsGroup';
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] = (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);
_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 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, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
setExpanded((0, _utils.convertToObjTrue)(allKeys));
};
const groupToolbar = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: 'flex',
gap: '10px',
marginRight: 10
}
}, groupSetting?.showGroupIcon !== false && /*#__PURE__*/_react.default.createElement(_ColumnsGroup.ColumnsGroup, {
t: t
// defaultGroupColumns={['name']}
,
unClearableLevel: groupSetting?.unClearableLevel
// unClearableLevel={2}
,
columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
columnsGrouped: groupColumns,
onSubmit: handleOnGroup
}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
fontSize: 16,
color: '#555555',
onClick: handleCollapseAllGroup
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
fontSize: 16,
color: '#555555',
onClick: handleExpandAllGroup
})));
};
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'
}
}, 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": t ? t('Minimized') : 'Minimized'
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
fontSize: 16,
onClick: () => {
setIsFullScreen(!isFullScreen);
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": t ? t('Full screen') : 'Full screen'
})), 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,
wrapSettings,
recordDoubleClick,
selectionSettings,
isSelectionChange,
setIsSelectionChange,
onContextMenu,
setSorterChange,
setFilterChange,
windowSize,
isDataTree,
rowClassName,
onRowStyles,
onRowFooterStyles,
onRowHeaderStyles,
table,
pagination,
groupSetting
}
}, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
tableContainerRef: tableContainerRef,
prefix: prefix,
id: id,
height: tableHeight,
minHeight: minHeight,
dataSource: dataSource,
table: table,
columns: columns,
commandClick: triggerCommandClick
}))), /*#__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;