es-grid-template 1.8.71 → 1.8.73

package/lib/group-component/table/Grid.d.ts

@@ -0,0 +1,33 @@
+import type { ColumnDef, ColumnPinningState, ExpandedState, VisibilityState } from '@tanstack/react-table';
+import type { ColumnsTable, Sorter, TableProps } from '../../grid-component/type';
+import type { Dispatch, Key, SetStateAction } from 'react';
+import React from 'react';
+type Props<T> = Omit<TableProps<T>, 'columns'> & {
+    id: string;
+    rowKey: string;
+    prefix: string;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable<T>;
+    setColumns: Dispatch<SetStateAction<ColumnsTable<T>>>;
+    columnHidden: VisibilityState;
+    expanded: ExpandedState;
+    setExpanded: any;
+    columnPinning: ColumnPinningState;
+    setColumnPinning: Dispatch<SetStateAction<ColumnPinningState>>;
+    originData: T[];
+    mergedFilterKeys: any;
+    setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    triggerFilter: Dispatch<SetStateAction<any>>;
+    triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    triggerChangeColumns?: (args: any, keys: any, type: string) => void;
+    windowSize: any;
+    isDataTree: boolean;
+    mergedSelectedKeys: Key[];
+    columnVisibility?: any;
+    setColumnVisibility?: Dispatch<SetStateAction<any>>;
+};
+declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Grid;

package/lib/group-component/table/Grid.js

@@ -0,0 +1,444 @@
+"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");
+var _utils2 = require("../../table-component/hook/utils");
+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,
+    setColumnPinning,
+    selectionSettings,
+    rowSelected,
+    sortMultiple,
+    triggerSorter,
+    triggerFilter,
+    setMergedFilterKeys,
+    onSorter,
+    onFilter,
+    allowFiltering,
+    allowSortering,
+    groupColumns,
+    // height= 700,
+    height,
+    minHeight,
+    editAble,
+    triggerChangeColumns,
+    infiniteScroll,
+    mergedSelectedKeys,
+    allowResizing,
+    windowSize,
+    fullScreenTitle,
+    className: tableClassNames,
+    groupSetting,
+    ...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,
+    getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
+    getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
+    onPaginationChange: setPagination,
+    // onColumnVisibilityChange: setColumnVisibility,
+    onColumnPinningChange: setColumnPinning
+
+    // 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 triggerGroupColumns = groupedColumns => {
+    // const abcd = updateColumnsByGroup(columns, groupedColumns)
+
+    const aaa = (0, _utils.fixColumnsLeft)(propsColumns, groupedColumns);
+    const abc = (0, _utils.sortColumnsByField)(aaa, groupedColumns);
+
+    // const bcd = convertToObj(groupedColumns)
+
+    // const bbb = updateWidthsByOther(propsColumns, abc)
+
+    setColumns((0, _utils.sortByType)(abc));
+
+    // const a = getInvisibleColumns(columns)
+
+    // const prev = groupColumns ?? []
+
+    // const bbb = prev.filter(item => !groupedColumns.includes(item))
+
+    // const ccc = 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, _utils2.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({});
+      }
+    }
+  };
+  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,
+    groupColumns: groupColumns,
+    propsColumns: propsColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden,
+    setExpanded: setExpanded,
+    expanded: expanded,
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys,
+    triggerGroupColumns: triggerGroupColumns,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })))), /*#__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(_react.default.Fragment, null, "  ", 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
+  })))))));
+};
+var _default = exports.default = Grid;

package/lib/group-component/table/TableWrapper.d.ts

@@ -0,0 +1,33 @@
+import { type Table } from "@tanstack/react-table";
+import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from "../../grid-component/type";
+import React from "react";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import type { Column } from "@tanstack/react-table";
+type Props<T> = {
+    prefix: string;
+    id: string;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    height: number;
+    minHeight?: number;
+    table: Table<T>;
+    summary?: boolean;
+    loading?: boolean;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
+    editAble?: boolean;
+    contextMenuItems?: ContextMenuItem[];
+    showEmptyText?: boolean;
+    contextMenuClick?: any;
+    contextMenuOpen?: (args: Omit<ContextInfo<T>, 'item'>) => void;
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<T>, 'item' | 'event'>) => string[]);
+    next?: () => void;
+    dataSource: T[];
+    pagination?: false | PaginationConfig;
+    infiniteScroll?: boolean;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+};
+declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default TableWrapper;