es-grid-template 1.8.64 → 1.8.66

package/lib/table-virtuoso/InternalTable.js

@@ -0,0 +1,400 @@
+"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 _useColumns = require("./hook/useColumns");
+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");
+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; }
+_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 {
+    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());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.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, table]);
+  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(_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: isFullScreen ? false : editAble,
+    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
+  })));
+};
+var _default = exports.default = InternalTable;

package/lib/table-virtuoso/body/TableBodyCell.d.ts

@@ -0,0 +1,14 @@
+import type { Cell, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../table-component/type";
+import React from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
+interface TableBodyCellProps<T> {
+    table: Table<T>;
+    tableId: string;
+    cell: Cell<T, unknown>;
+    commandClick?: (args: CommandClick<T>) => void;
+    virtualRow: VirtualItem;
+    [key: string]: any;
+}
+declare const TableBodyCell: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
+export default TableBodyCell;