es-grid-template
Version:
es-grid-template
403 lines (387 loc) • 14.7 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 _antd = require("antd");
var _faker = require("@faker-js/faker");
var _reactTable = require("@tanstack/react-table");
var _core = require("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
var _react = _interopRequireWildcard(require("react"));
var _TableContainer = _interopRequireDefault(require("../TableContainer"));
var _operator = require("../features/operator");
var _utils = require("../hook/utils");
var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
var _classnames = _interopRequireDefault(require("classnames"));
var _style = require("../style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// import { makeData } from "../default/makeData";
const Grid = props => {
const {
theme,
t,
id,
prefix,
dataSource,
originData,
columns,
propsColumns,
setColumns,
pagination,
expanded,
setExpanded,
columnHidden,
columnPinning,
selectionSettings,
rowSelected,
sortMultiple,
triggerSorter,
triggerFilter,
setMergedFilterKeys,
onSorter,
onFilter,
allowFiltering,
allowSortering,
groupColumns,
// height= 700,
height,
minHeight,
editAble,
triggerChangeColumns,
infiniteScroll,
mergedSelectedKeys,
allowResizing,
windowSize,
fullScreenTitle,
className: tableClassNames,
setIsExpandClick,
...rest
} = props;
const [columnResizeMode] = _react.default.useState('onChange');
const [columnResizeDirection] = _react.default.useState('ltr');
const [paginationState, setPagination] = _react.default.useState({
pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
});
// const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
// const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
const [rowSelection, setRowSelection] = _react.default.useState({});
// const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
const [grouping, setGrouping] = _react.default.useState([]);
const [columnSizing, setColumnSizing] = _react.default.useState({});
const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
// const [manualUpdate, setManualUpdate] = React.useState(false)
// const [manualResize, setManualResize] = React.useState(false)
const [columnFilters, setColumnFilters] = _react.default.useState([]);
const [operator, setOperator] = _react.default.useState([]);
const [sorting, setSorting] = _react.default.useState([]);
const [columnOrder, setColumnOrder] = _react.default.useState(() => columns.map(c => c.id));
const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
isChange: false,
type: '',
rowData: {},
rowsData: []
});
const [sorterChange, setSorterChange] = _react.default.useState(false);
const [filterChange, setFilterChange] = _react.default.useState(false);
const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
const table = (0, _reactTable.useReactTable)({
_features: [_operator.OperatorFeature],
data: dataSource,
columns: columns,
state: {
rowSelection,
expanded,
columnPinning,
columnVisibility: columnHidden,
pagination: pagination && !infiniteScroll ? paginationState : undefined,
grouping,
columnSizing,
columnOrder,
columnFilters,
operator,
sorting
},
getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
getRowId(originalRow) {
return originalRow.rowId;
},
getSubRows: row => row.children,
// RowSelection
enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
enableMultiRowSelection: selectionSettings && (selectionSettings.mode === 'checkbox' || selectionSettings.type !== 'single'),
// enableRowSelection: true,
enableRowSelection: row => {
if (selectionSettings?.getCheckboxProps) {
return !selectionSettings?.getCheckboxProps(row.original)?.disabled;
}
return true;
},
initialState: {
rowSelection: {}
},
onRowSelectionChange: setRowSelection,
// RowSelection
// ColumnSizing
enableColumnResizing: allowResizing !== false,
columnResizeMode,
columnResizeDirection,
onColumnSizingChange: setColumnSizing,
onColumnSizingInfoChange: setColumnSizingInfo,
// ColumnSizing
// ColumnSorting
// getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
enableMultiSort: sortMultiple !== false,
isMultiSortEvent: () => sortMultiple === false ? false : true,
enableSorting: allowSortering !== false,
// ColumnSorting
enableFilters: allowFiltering !== false,
onColumnFiltersChange: setColumnFilters,
onColumnOperatorChange: setOperator,
// getFilteredRowModel: getFilteredRowModel(),
onColumnOrderChange: setColumnOrder,
onGroupingChange: setGrouping,
getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
// onExpandedChange: setExpanded,
getRowCanExpand: row => {
return Array.isArray(row.original.children);
},
getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
onPaginationChange: setPagination
// onColumnVisibilityChange: setColumnVisibility,
// onColumnPinningChange,
// debugTable: true
});
_react.default.useEffect(() => {
if (columnHidden) {
const abb = table.getVisibleLeafColumns()?.[0];
if (abb && Object.keys(columnSizingInfo).length === 0) {
setColumnSizing({
[abb.id]: abb.getSize()
});
}
}
}, [columnHidden, columnSizingInfo]);
_react.default.useEffect(() => {
const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
if (!isEqual) {
setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
}
}, [mergedSelectedKeys]);
_react.default.useEffect(() => {
if (isSelectionChange.isChange) {
const aa = table.getState().rowSelection;
const ids = Object.keys(aa);
// const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
const rs = ssss.map(it => it.original);
rowSelected?.({
type: isSelectionChange.type,
rowData: isSelectionChange.rowData,
selected: rs
});
}
}, [isSelectionChange, rowSelection, table.getState().rowSelection]);
_react.default.useEffect(() => {
if (sorterChange) {
const aa = table.getState().sorting;
const rs = aa.map(it => {
return {
columnKey: it.id,
field: it.id,
order: it.desc ? 'descend' : 'ascend'
};
});
if (onSorter) {
onSorter?.(rs);
} else {
triggerSorter(rs);
}
}
}, [sorterChange, sorting, table]);
_react.default.useEffect(() => {
if (filterChange) {
// const filterState = table.getState().columnFilters
const operatorState = table.getState().operator;
const merged = columnFilters.map(filter => {
const match = operatorState.find(op => op.id === filter.id);
const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
return {
field: filter.id,
key: filter.id,
column: col,
filteredKeys: filter.value,
operator: match ? match.operator : undefined
// ...(match && { operator: match.operator })
};
});
if (onFilter) {
onFilter?.((0, _utils.convertFilters)(merged));
} else {
triggerFilter((0, _utils.convertFilters)(merged));
const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
setMergedFilterKeys((0, _utils.getAllRowKey)(b));
}
}
}, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);
// reorder columns after drag & drop
function handleDragEnd(event) {
const {
active,
over
} = event;
if (active && over && active.id !== over.id) {
setColumnOrder(cols => {
const oldIndex = cols.indexOf(active.id);
const newIndex = cols.indexOf(over.id);
return (0, _sortable.arrayMove)(cols, oldIndex, newIndex); //this is just a splice util
});
}
}
const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
const ContainerComponent = editAble ? _TableContainerEdit.default : _TableContainer.default;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
$prefix: prefix,
$theme: {
theme: theme?.theme,
...theme
},
className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
[`${prefix}-grid-light`]: !theme || theme.theme === 'light',
[`${prefix}-grid-dark`]: theme?.theme === 'dark',
[`${prefix}-grid-editable`]: editAble
}),
style: {
minHeight: minHeight ?? undefined,
maxHeight: height ?? undefined,
backgroundColor: theme?.backgroundColor ?? undefined
}
}, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
collisionDetection: _core.closestCenter,
modifiers: [_modifiers.restrictToHorizontalAxis],
onDragEnd: handleDragEnd,
sensors: sensors
}, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
id: id,
t: t,
windowSize: windowSize,
table: table,
editAble: editAble,
dataSource: dataSource,
originData: originData,
prefix: prefix,
selectionSettings: selectionSettings,
isSelectionChange: isSelectionChange,
setIsSelectionChange: setIsSelectionChange,
setSorterChange: setSorterChange,
setFilterChange: setFilterChange,
height: height ?? minHeight ?? 700,
minHeight: minHeight,
pagination: pagination,
columns: columns,
propsColumns: propsColumns,
triggerChangeColumns: triggerChangeColumns,
columnHidden: columnHidden,
setExpanded: setExpanded,
expanded: expanded,
infiniteScroll: infiniteScroll,
setMergedFilterKeys: setMergedFilterKeys,
setColumnSizing: setColumnSizing,
setColumns: setColumns,
columnSizing: columnSizing,
columnSizingInfo: columnSizingInfo,
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen,
setIsExpandClick: setIsExpandClick
})))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
open: isFullScreen,
footer: null,
centered: true,
closable: true,
width: '100%',
style: {
maxWidth: '100%',
height: '100%'
},
onCancel: () => setIsFullScreen(false)
// destroyOnClose
,
styles: {
content: {
height: '100vh',
borderRadius: 0,
padding: '15px 10px'
},
wrapper: {
zIndex: 1050
}
},
title: /*#__PURE__*/_react.default.createElement("div", {
style: {
minHeight: 24
}
}, " ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
destroyOnClose: true
}, /*#__PURE__*/_react.default.createElement("div", {
style: {}
}, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
$prefix: prefix,
$theme: {
theme: theme?.theme,
...theme
},
className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
[`${prefix}-grid-light`]: !theme || theme.theme === 'light',
[`${prefix}-grid-dark`]: theme?.theme === 'dark'
}),
style: {
// minHeight: minHeight ?? undefined,
maxHeight: windowSize.innerHeight - 70
}
}, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
collisionDetection: _core.closestCenter,
modifiers: [_modifiers.restrictToHorizontalAxis],
onDragEnd: handleDragEnd,
sensors: sensors
}, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
id: _faker.faker.string.alpha(20),
t: t,
table: table,
editAble: editAble,
dataSource: dataSource,
originData: originData,
prefix: prefix,
selectionSettings: selectionSettings,
isSelectionChange: isSelectionChange,
setIsSelectionChange: setIsSelectionChange,
setSorterChange: setSorterChange,
setFilterChange: setFilterChange,
height: windowSize.innerHeight - 70,
minHeight: minHeight,
pagination: pagination,
columns: columns,
windowSize: windowSize,
propsColumns: propsColumns,
triggerChangeColumns: triggerChangeColumns,
columnHidden: columnHidden,
setExpanded: setExpanded,
expanded: expanded,
infiniteScroll: infiniteScroll,
setMergedFilterKeys: setMergedFilterKeys,
setColumnSizing: setColumnSizing,
setColumns: setColumns,
columnSizing: columnSizing,
columnSizingInfo: columnSizingInfo,
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen,
setIsExpandClick: setIsExpandClick
})))))));
};
var _default = exports.default = Grid;