es-grid-template 1.7.39 → 1.7.41

package/es/grid-component/hooks/utils.d.ts

@@ -57,6 +57,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];

package/es/grid-component/hooks/utils.js

@@ -447,6 +447,17 @@ export function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   dig(data);
   return keys;
 }
+export function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach(item => {
+      keys.push(item[rowKey]);
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
+}
 export const flattenArray = arr => {
   if (!arr) {
     return [];

package/es/table-component/InternalTable.js

@@ -29,15 +29,16 @@ import Grid from "./table/Grid";
 
 // import { Tooltip } from 'react-tooltip'
 // import ContextMenu from './ContextMenu'
-import { addRowIdArray, convertToObj,
+import { addRowIdArray, convertToObj, convertToObjTrue,
 // convertFilters,
 filterDataByColumns, flatColumns2,
 // filterDataByColumns,
-getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTree } from "./hook/utils";
+getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray } from "./hook/utils";
 // import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { Modal } from 'antd';
+import { findAllChildrenKeys2 } from "../grid-component/hooks";
 // import { columns111 } from '../test-2/columns'
 
 dayjs.extend(customParseFormat);
@@ -62,6 +63,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
+    expandable,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -70,6 +72,10 @@ const InternalTable = props => {
   const id = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
   const rowKey = 'rowId';
   const prefix = 'ui-rc';
   const getWindowSize = () => {
@@ -110,17 +116,14 @@ const InternalTable = props => {
     return convertToTanStackColumns({
       t,
       columns,
-      // expanded,
-      // setExpanded,
-      // expandable,
       format,
       editAble
     });
 
-    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+    // return convertToTanStackColumns<RecordType>(columns)
   }, [t, columns, format, editAble]);
   const isDataTree = React.useMemo(() => {
-    return isTree(dataSource);
+    return isTreeArray(dataSource);
   }, [dataSource]);
   const columnPinning = React.useMemo(() => {
     return {
@@ -133,6 +136,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
     value: undefined
   });
+  React.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = findAllChildrenKeys2(convertData, rowKey, 'children');
+      setExpanded(convertToObjTrue(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
 
   // ========================= Keys =========================
 
@@ -196,7 +209,8 @@ const InternalTable = props => {
     height: height,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -265,7 +279,8 @@ const InternalTable = props => {
     windowSize: windowSize,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable
   })))));
 };
 export default InternalTable;

package/es/table-component/hook/utils.d.ts

@@ -136,3 +136,4 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
+export declare function isTreeArray(arr: any[]): boolean;

package/es/table-component/hook/utils.js

@@ -1877,14 +1877,24 @@ export const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
 };
 export function isTree(arr) {
-  if (!Array.isArray(arr)) return false;
+  if (!Array.isArray(arr)) {
+    return false;
+  }
   function checkNode(node) {
-    if (typeof node !== "object" || node === null) return false;
+    if (typeof node !== "object" || node === null) {
+      return false;
+    }
     if ("children" in node) {
-      if (!Array.isArray(node.children)) return false;
-      if (node.children.length === 0) return false;
+      if (!Array.isArray(node.children)) {
+        return false;
+      }
+      if (node.children.length === 0) {
+        return false;
+      }
       for (const child of node.children) {
-        if (!checkNode(child)) return false;
+        if (!checkNode(child)) {
+          return false;
+        }
       }
     }
     return true;
@@ -1898,4 +1908,13 @@ export function findFirst(items) {
   const leftItem = items.find(item => item.getIsPinned() === 'left');
   if (leftItem) return leftItem;
   return null;
+}
+export function isTreeArray(arr) {
+  if (!Array.isArray(arr)) return false;
+  return arr.every(item => {
+    if ("children" in item) {
+      return Array.isArray(item.children) && item.children.length > 0;
+    }
+    return true; // node lá thì hợp lệ
+  });
 }

package/es/table-component/table/Grid.js

@@ -64,7 +64,7 @@ const Grid = props => {
   const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
   const [grouping, setGrouping] = React.useState([]);
   const [columnSizing, setColumnSizing] = React.useState({});
-  const [manualUpdate, setManualUpdate] = React.useState(false);
+  // const [manualUpdate, setManualUpdate] = React.useState(false)
   // const [manualResize, setManualResize] = React.useState(false)
 
   const [columnFilters, setColumnFilters] = React.useState([]);
@@ -149,13 +149,16 @@ const Grid = props => {
     }
   }, [columnHidden, table]);
   React.useEffect(() => {
-    if (!manualUpdate) {
+    // if (!manualUpdate) {
+    if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {
       setRowSelection(convertToObjTrue(mergedSelectedKeys));
     }
-  }, [manualUpdate, mergedSelectedKeys]);
+
+    // }
+  }, [mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
-      setManualUpdate(true);
+      // setManualUpdate(true)
       const aa = table.getState().rowSelection;
       const dataTable = table.getRowModel().flatRows;
       const ids = Object.keys(aa);

package/lib/grid-component/hooks/utils.d.ts

@@ -57,6 +57,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];

package/lib/grid-component/hooks/utils.js

@@ -17,6 +17,7 @@ exports.convertFormat = convertFormat;
 exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.detectSeparators = exports.customWeekStartEndFormat = exports.customFilterOption = exports.countItemsBeforeIndex = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns4 = filterDataByColumns4;
 exports.findAllChildrenKeys = findAllChildrenKeys;
+exports.findAllChildrenKeys2 = findAllChildrenKeys2;
 exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
@@ -38,8 +39,8 @@ exports.isRightMostInRegion = isRightMostInRegion;
 exports.isTopMostInRegion = exports.isSelectedCell = void 0;
 exports.mergeWithFilter = mergeWithFilter;
 exports.mergeWithFilter2 = mergeWithFilter2;
-exports.removeInvisibleColumns = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = void 0;
+exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = exports.removeInvisibleColumns = void 0;
 exports.updateDataByFilter = updateDataByFilter;
 exports.updateOrInsert = updateOrInsert;
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -525,6 +526,17 @@ function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   dig(data);
   return keys;
 }
+function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach(item => {
+      keys.push(item[rowKey]);
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
+}
 const flattenArray = arr => {
   if (!arr) {
     return [];

package/lib/table-component/InternalTable.js

@@ -20,6 +20,7 @@ var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
 var _convert = require("./hook/convert");
 var _antd = require("antd");
+var _hooks = require("../grid-component/hooks");
 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 en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -68,6 +69,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
+    expandable,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -76,6 +78,10 @@ const InternalTable = 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 = () => {
@@ -116,17 +122,14 @@ const InternalTable = props => {
     return (0, _useColumns.convertToTanStackColumns)({
       t,
       columns,
-      // expanded,
-      // setExpanded,
-      // expandable,
       format,
       editAble
     });
 
-    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+    // return convertToTanStackColumns<RecordType>(columns)
   }, [t, columns, format, editAble]);
   const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTree)(dataSource);
+    return (0, _utils.isTreeArray)(dataSource);
   }, [dataSource]);
   const columnPinning = _react.default.useMemo(() => {
     return {
@@ -139,6 +142,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
     value: undefined
   });
+  _react.default.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = (0, _hooks.findAllChildrenKeys2)(convertData, rowKey, 'children');
+      setExpanded((0, _utils.convertToObjTrue)(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
 
   // ========================= Keys =========================
 
@@ -202,7 +215,8 @@ const InternalTable = props => {
     height: height,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -271,7 +285,8 @@ const InternalTable = props => {
     windowSize: windowSize,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable
   })))));
 };
 var _default = exports.default = InternalTable;

package/lib/table-component/hook/utils.d.ts

@@ -136,3 +136,4 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
+export declare function isTreeArray(arr: any[]): boolean;

package/lib/table-component/hook/utils.js

@@ -39,6 +39,7 @@ exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isFormattedNumber = void 0;
 exports.isObjEqual = isObjEqual;
 exports.isTree = isTree;
+exports.isTreeArray = isTreeArray;
 exports.sortByType = exports.shouldInclude = exports.removeVietnameseTones = exports.parseBooleanToValue = exports.onRemoveBgSelectedCell = exports.onAddBgSelectedCell = exports.newGuid = void 0;
 exports.sortData = sortData;
 exports.updateColumns1 = exports.updateArrayByKey = exports.unFlattenData = exports.sumSize = void 0;
@@ -1978,14 +1979,24 @@ const getDiffent2Array = (a, b) => {
 };
 exports.getDiffent2Array = getDiffent2Array;
 function isTree(arr) {
-  if (!Array.isArray(arr)) return false;
+  if (!Array.isArray(arr)) {
+    return false;
+  }
   function checkNode(node) {
-    if (typeof node !== "object" || node === null) return false;
+    if (typeof node !== "object" || node === null) {
+      return false;
+    }
     if ("children" in node) {
-      if (!Array.isArray(node.children)) return false;
-      if (node.children.length === 0) return false;
+      if (!Array.isArray(node.children)) {
+        return false;
+      }
+      if (node.children.length === 0) {
+        return false;
+      }
       for (const child of node.children) {
-        if (!checkNode(child)) return false;
+        if (!checkNode(child)) {
+          return false;
+        }
       }
     }
     return true;
@@ -1999,4 +2010,13 @@ function findFirst(items) {
   const leftItem = items.find(item => item.getIsPinned() === 'left');
   if (leftItem) return leftItem;
   return null;
+}
+function isTreeArray(arr) {
+  if (!Array.isArray(arr)) return false;
+  return arr.every(item => {
+    if ("children" in item) {
+      return Array.isArray(item.children) && item.children.length > 0;
+    }
+    return true; // node lá thì hợp lệ
+  });
 }

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

@@ -66,7 +66,7 @@ const Grid = props => {
   const [rowSelection, setRowSelection] = _react.default.useState((0, _utils.convertToObjTrue)(mergedSelectedKeys));
   const [grouping, setGrouping] = _react.default.useState([]);
   const [columnSizing, setColumnSizing] = _react.default.useState({});
-  const [manualUpdate, setManualUpdate] = _react.default.useState(false);
+  // const [manualUpdate, setManualUpdate] = React.useState(false)
   // const [manualResize, setManualResize] = React.useState(false)
 
   const [columnFilters, setColumnFilters] = _react.default.useState([]);
@@ -151,13 +151,16 @@ const Grid = props => {
     }
   }, [columnHidden, table]);
   _react.default.useEffect(() => {
-    if (!manualUpdate) {
+    // if (!manualUpdate) {
+    if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {
       setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
     }
-  }, [manualUpdate, mergedSelectedKeys]);
+
+    // }
+  }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {
     if (isSelectionChange.isChange) {
-      setManualUpdate(true);
+      // setManualUpdate(true)
       const aa = table.getState().rowSelection;
       const dataTable = table.getRowModel().flatRows;
       const ids = Object.keys(aa);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.7.39",
+  "version": "1.7.41",
   "description": "es-grid-template",
   "keywords": [
     "react",