es-grid-template
Version:
es-grid-template
415 lines (373 loc) • 15 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SELECTION_COLUMN = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _react = _interopRequireWildcard(require("react"));
require("react-resizable/css/styles.css");
var _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
var _faker = require("@faker-js/faker");
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _reactTable = require("@tanstack/react-table");
var _utils = require("./hook/utils");
var _hooks = require("../grid-component/hooks");
var _Grid = _interopRequireDefault(require("./table/Grid"));
var _utils2 = require("../table-component/hook/utils");
var _operator = require("../table-component/features/operator");
var _useColumns = require("../table-component/hook/useColumns");
var _rcMasterUi = require("rc-master-ui");
var _useLocale = require("../locale/useLocale");
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 { convertToTanStackColumns } from './hook/useColumns'
_dayjs.default.extend(_customParseFormat.default);
const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
const InternalTable = props => {
const {
t,
columns: propsColumns,
// columns,
lang,
locale,
dataSource,
editAble,
format,
groupAble,
groupSetting,
groupColumns,
selectionSettings,
expandable,
onChooseColumns,
height,
pagination,
allowResizing,
infiniteScroll,
sortMultiple,
allowSortering,
allowFiltering,
...rest
} = props;
const id = _react.default.useMemo(() => {
return _faker.faker.string.alpha(20);
}, []);
const language = _react.default.useMemo(() => {
return (0, _useLocale.getLocale)(lang);
}, [lang]);
const languages = _react.default.useMemo(() => {
return (0, _useLocale.getLocales)(lang);
}, [lang]);
const {
defaultExpandedRowKeys,
defaultExpandAllRows
} = expandable || {};
const rowKey = 'rowId';
const prefix = 'ui-rc';
const getWindowSize = () => {
const {
innerWidth,
innerHeight
} = window;
return {
innerWidth,
innerHeight
};
};
const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
_react.default.useEffect(() => {
const handleWindowResize = () => {
setWindowSize(getWindowSize());
};
document.addEventListener('resize', handleWindowResize);
return () => {
document.removeEventListener('resize', handleWindowResize);
};
}, []);
const [columnResizeMode] = _react.default.useState('onChange');
const [columnResizeDirection] = _react.default.useState('ltr');
const [rowSelection, setRowSelection] = _react.default.useState({});
// const [grouping, setGrouping] = React.useState<GroupingState>([])
const [paginationState, setPagination] = _react.default.useState({
pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
});
const [columnSizing, setColumnSizing] = _react.default.useState({});
const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
// const [columnOrder, setColumnOrder] = React.useState<string[]>(() => columns.map(c => c.id!))
const [columnFilters, setColumnFilters] = _react.default.useState([]);
const [operator, setOperator] = _react.default.useState([]);
const [sorting, setSorting] = _react.default.useState([]);
const [filterStates, setFilterState] = _react.default.useState(null);
const [sorterStates, setSorterStates] = _react.default.useState([]);
const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
const [columns, setColumns] = _react.default.useState([]);
const [tableData, setTableData] = _react.default.useState([]);
const [expanded, setExpanded] = _react.default.useState({});
// const [visible, setVisible] = React.useState({visible: false, column: ''})
const [columnVisibility, setColumnVisibility] = _react.default.useState({});
const originData = _react.default.useMemo(() => {
return (0, _utils.addRowIdArray)(dataSource);
}, [dataSource]);
const isDataOriginTree = _react.default.useMemo(() => {
return (0, _utils.isTreeArray)(originData);
}, [originData]);
_react.default.useEffect(() => {
if (groupColumns && groupColumns.length > 0 && groupSetting?.client !== false && isDataOriginTree === false) {
const abc = (0, _utils.groupArrayByColumns)(originData, groupColumns);
const rs = (0, _utils.filterDataByColumns)(abc, filterStates, sorterStates, []);
setTableData(rs);
} else {
const rs = (0, _utils.filterDataByColumns)(originData, filterStates, sorterStates, []);
setTableData(rs);
}
}, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client, isDataOriginTree]);
// }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client])
_react.default.useEffect(() => {
// setColumns(updateWidthsByOther(propsColumns, columns))
setColumns(propsColumns);
}, [propsColumns]);
const mergedColumns = _react.default.useMemo(() => {
return (0, _useColumns.convertToTanStackColumns)({
t,
columns,
format,
editAble
});
}, [t, columns, format, editAble]);
const isDataTree = _react.default.useMemo(() => {
return (0, _utils.isTreeArray)(tableData);
}, [tableData]);
const columnPinning = _react.default.useMemo(() => {
return {
left: (0, _utils.getFixedFields)(columns, 'left'),
right: (0, _utils.getFixedFields)(columns, 'right')
};
}, [columns]);
// ========================= Keys =========================
const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(originData), {
value: undefined
});
// ========================= Keys =========================
const {
selectedRowKeys,
defaultSelectedRowKeys
} = selectionSettings ?? {};
const [mergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || [], {
value: selectedRowKeys
});
// const mergedData = React.useMemo(() => {
// return filterDataByColumns(tableData, filterStates, sorterStates, mergedFilterKeys)
// }, [tableData, filterStates, mergedFilterKeys, sorterStates])
// const columnVisibility = React.useMemo(() => {
// return getInvisibleColumns(columns)
// }, [columns])
_react.default.useEffect(() => {
const a = (0, _utils.getInvisibleColumns)(columns);
const bcd = (0, _utils.convertToObj)(groupColumns);
setColumnVisibility({
...a,
...bcd
});
}, [columns, groupColumns]);
const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
value: undefined
});
const triggerChangeColumns = (cols, keys, type) => {
if (type === 'cellClick') {
setColumns(cols);
} else {
const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
const rsss = (0, _utils.getDiffent2Array)(aa, keys);
setColumnsHiddenKeys(rsss);
onChooseColumns?.({
showColumns: (0, _hooks.removeInvisibleColumns)([...cols]),
columns: [...cols],
flattenColumns: (0, _utils.convertFlatColumn1)([...cols])
});
}
};
const table = (0, _reactTable.useReactTable)({
_features: [_operator.OperatorFeature],
data: tableData,
// data: mergedData,
columns: mergedColumns,
state: {
rowSelection,
expanded,
columnPinning,
columnVisibility: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
pagination: pagination && !infiniteScroll ? paginationState : undefined,
// grouping,
columnSizing,
// columnOrder,
columnFilters,
operator,
sorting,
columnSizingInfo
},
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: row => {
if (selectionSettings?.getCheckboxProps) {
return !selectionSettings?.getCheckboxProps(row.original)?.disabled;
}
return true;
},
onRowSelectionChange: setRowSelection,
// --------------RowSelection END-----------------
// 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,
getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
onPaginationChange: setPagination,
onColumnVisibilityChange: setColumnVisibility
// onColumnPinningChange,
// debugTable: true
});
_react.default.useEffect(() => {
if (defaultExpandAllRows) {
const allKeys = (0, _utils.findAllChildrenKeys2)(tableData, rowKey, 'children');
setExpanded((0, _utils.convertToObjTrue)(allKeys));
} else {
if (defaultExpandedRowKeys) {
setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
}
}
}, [defaultExpandAllRows, defaultExpandedRowKeys, tableData]);
const triggerGroupColumns = groupedColumns => {
// const abc = updateColumnsByGroup(columns, groupedColumns)
const bcd = (0, _utils.convertToObj)(groupedColumns);
// const a = getInvisibleColumns(columns)
const prev = groupColumns ?? [];
const bbb = prev.filter(item => !groupedColumns.includes(item));
const ccc = (0, _utils.removeKeys)(columnVisibility, bbb);
const rs = {
...ccc,
...bcd
};
setColumnVisibility(rs);
// table.setColumnVisibility(rs)
if (groupSetting) {
if (groupSetting.onGroup) {
groupSetting.onGroup({
columnGrouped: groupedColumns,
columns: (0, _utils2.removeColumns)(columns, groupedColumns),
flattenColumns: (0, _utils.flatColumns2)((0, _utils2.removeColumns)(columns, groupedColumns))
});
}
if (groupSetting.client === false) {
// group server => không xử lý gì
} else {
// group client
table.resetRowSelection();
table.resetExpanded();
setRowSelection({});
setExpanded({});
}
}
};
// useEffect(() => {
// table.toggleAllRowsExpanded(true)
// }, [tableData ])
const triggerFilter = args => {
// table.resetRowSelection()
// table.resetExpanded()
// setRowSelection({})
setExpanded({});
setFilterState(args);
// const rs = filterDataByColumns(originData, args, sorterStates, [])
// const allKeys = findAllChildrenKeys2<RecordType>(rs, rowKey, 'children')
// setExpanded(convertToObjTrue(allKeys))
// setTableData(rs)
};
const triggerSorter = args => {
// table.resetRowSelection()
// table.resetExpanded()
// setRowSelection({})
// setExpanded({})
setSorterStates(args);
// const rs = filterDataByColumns(originData, filterStates, args, [])
// setTableData(rs)
};
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
locale: language
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
locale: languages
}, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
t: t,
id: id,
table: table,
prefix: prefix,
originData: originData
// dataSource={mergedData}
,
dataSource: tableData,
locale: locale,
format: format
// columns={convertColumns(mergedColumns)}
,
columns: mergedColumns,
propsColumns: columns,
rowKey: rowKey,
groupSetting: groupSetting,
groupAble: groupAble,
groupColumns: groupColumns,
columnPinning: columnPinning,
columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
triggerFilter: triggerFilter,
triggerSorter: triggerSorter,
setMergedFilterKeys: setMergedFilterKeys,
mergedFilterKeys: mergedFilterKeys,
editAble: false,
triggerChangeColumns: triggerChangeColumns,
triggerGroupColumns: triggerGroupColumns,
expanded: expanded,
setExpanded: setExpanded,
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen,
windowSize: windowSize,
height: height,
isDataTree: isDataTree,
selectionSettings: selectionSettings,
mergedSelectedKeys: mergedSelectedKeys,
expandable: expandable,
setColumns: setColumns,
columnFilters: columnFilters,
columnSizing: columnSizing,
columnSizingInfo: columnSizingInfo,
setColumnSizing: setColumnSizing,
rowSelection: rowSelection,
pagination: pagination
})))));
};
var _default = exports.default = InternalTable;