es-grid-template 1.9.48 → 1.9.49

package/es/table-component/InternalTable.js

@@ -9,7 +9,7 @@ import "./style.scss";
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
-import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
+import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
@@ -95,16 +95,32 @@ const InternalTable = props => {
     }
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const depthData = React.useMemo(() => {
+    return getTreeDepth(convertData);
+  }, [convertData]);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const flatColumns = React.useMemo(() => {
+    return flatColumns2(propsColumns);
+  }, [propsColumns]);
+  const visibleColumns = React.useMemo(() => {
+    return flatColumns.filter(it => it.visible !== false);
+  }, [flatColumns]);
+  const expandColumn = React.useMemo(() => {
+    return visibleColumns[expandIconColumnIndex];
+  }, [expandIconColumnIndex, visibleColumns]);
   const mergedColumns = React.useMemo(() => {
     return convertToTanStackColumns({
       t,
       columns,
       format,
-      editAble
+      editAble,
+      depthData,
+      expandable,
+      expandColumn
     });
 
     // return convertToTanStackColumns<RecordType>(columns)
-  }, [t, columns, format, editAble]);
+  }, [t, columns, format, editAble, expandable, depthData, expandColumn]);
   const isDataTree = React.useMemo(() => {
     return isTreeArray(dataSource);
   }, [dataSource]);

package/es/table-component/TableContainer.d.ts

@@ -43,6 +43,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
+    maxDepth?: number;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => JSX.Element;
 export default TableContainer;

package/es/table-component/TableContainer.js

@@ -78,6 +78,7 @@ const TableContainer = props => {
     setIsExpandClick,
     recordClick,
     striped = true,
+    maxDepth,
     ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
@@ -339,7 +340,8 @@ const TableContainer = props => {
       pagination,
       dataSourceFilter,
       onExpandClick,
-      setIsExpandClick
+      setIsExpandClick,
+      maxDepth
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     contextMenuItems: contextMenuItems,

package/es/table-component/body/EditableCell.js

@@ -356,13 +356,13 @@ const EditableCell = props => {
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
             }
-            onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
               dateTimePickerRef.current?.focus();
             }, 0);
           },
           onBlur: () => {
+            console.log('22222222222');
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
@@ -377,6 +377,7 @@ const EditableCell = props => {
               onChange(newVal);
               newValue = newVal;
             }
+            console.log('newValue', newValue);
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,

package/es/table-component/body/TableBodyCell.js

@@ -232,7 +232,7 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center' && cell.column.getIndex() !== expandIconColumnIndex,
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {

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

@@ -1,13 +1,16 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { ColumnsTable, ColumnTable, ExpandableConfig, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
 export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
-export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble, depthData, expandColumn }: {
     t?: any;
     columns: ColumnsTable<T>;
+    expandable?: ExpandableConfig<T>;
     format?: IFormat;
     editAble?: boolean;
+    depthData?: number;
+    expandColumn?: ColumnTable;
 }): ColumnDef<T, any>[];
 export type ToggleRow<T> = {
     e: any;

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

@@ -141,10 +141,11 @@ export function convertToTanStackColumns({
   // setExpanded,
   // expandable,
   format,
-  editAble
+  editAble,
+  depthData,
+  // expandable,
+  expandColumn
 }) {
-  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
-
   return sortByType(columns).map(col => {
     const {
       headerText,
@@ -202,7 +203,7 @@ export function convertToTanStackColumns({
       // enableHiding: false,
       // enableResizing: true,
       id: field,
-      size: width,
+      size: expandColumn?.field === col.field ? (width ?? 0) + (depthData ?? 0) * 25 : width,
       accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
@@ -219,7 +220,9 @@ export function convertToTanStackColumns({
         columns: children,
         editAble,
         format,
-        t
+        t,
+        depthData,
+        expandColumn
       });
     }
     const meta = {

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

@@ -166,3 +166,4 @@ export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare function sumFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare function sumNumberFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
+export declare const getTreeDepth: (rows: any[]) => number;

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

@@ -2714,4 +2714,8 @@ export function sumNumberFields(columns, data, childrenKey = 'children') {
     }
   }
   return result;
-}
+}
+export const getTreeDepth = rows => {
+  if (!rows?.length) return 0;
+  return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
+};

package/es/table-component/useContext.d.ts

@@ -93,6 +93,7 @@ export interface IContext<T> {
         rowData: any;
     }) => void;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
+    maxDepth?: number;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/table-component/InternalTable.js

@@ -104,16 +104,32 @@ const InternalTable = props => {
     }
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const depthData = _react.default.useMemo(() => {
+    return (0, _utils.getTreeDepth)(convertData);
+  }, [convertData]);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const flatColumns = _react.default.useMemo(() => {
+    return (0, _utils.flatColumns2)(propsColumns);
+  }, [propsColumns]);
+  const visibleColumns = _react.default.useMemo(() => {
+    return flatColumns.filter(it => it.visible !== false);
+  }, [flatColumns]);
+  const expandColumn = _react.default.useMemo(() => {
+    return visibleColumns[expandIconColumnIndex];
+  }, [expandIconColumnIndex, visibleColumns]);
   const mergedColumns = _react.default.useMemo(() => {
     return (0, _useColumns.convertToTanStackColumns)({
       t,
       columns,
       format,
-      editAble
+      editAble,
+      depthData,
+      expandable,
+      expandColumn
     });
 
     // return convertToTanStackColumns<RecordType>(columns)
-  }, [t, columns, format, editAble]);
+  }, [t, columns, format, editAble, expandable, depthData, expandColumn]);
   const isDataTree = _react.default.useMemo(() => {
     return (0, _utils.isTreeArray)(dataSource);
   }, [dataSource]);

package/lib/table-component/TableContainer.d.ts

@@ -43,6 +43,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
+    maxDepth?: number;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => JSX.Element;
 export default TableContainer;

package/lib/table-component/TableContainer.js

@@ -85,6 +85,7 @@ const TableContainer = props => {
     setIsExpandClick,
     recordClick,
     striped = true,
+    maxDepth,
     ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
@@ -346,7 +347,8 @@ const TableContainer = props => {
       pagination,
       dataSourceFilter,
       onExpandClick,
-      setIsExpandClick
+      setIsExpandClick,
+      maxDepth
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
     contextMenuItems: contextMenuItems,

package/lib/table-component/body/EditableCell.js

@@ -364,13 +364,13 @@ const EditableCell = props => {
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
             }
-            onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
               dateTimePickerRef.current?.focus();
             }, 0);
           },
           onBlur: () => {
+            console.log('22222222222');
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
@@ -385,6 +385,7 @@ const EditableCell = props => {
               onChange(newVal);
               newValue = newVal;
             }
+            console.log('newValue', newValue);
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,

package/lib/table-component/body/TableBodyCell.js

@@ -239,7 +239,7 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center' && cell.column.getIndex() !== expandIconColumnIndex,
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {

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

@@ -1,13 +1,16 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { ColumnsTable, ColumnTable, ExpandableConfig, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
 export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
-export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble, depthData, expandColumn }: {
     t?: any;
     columns: ColumnsTable<T>;
+    expandable?: ExpandableConfig<T>;
     format?: IFormat;
     editAble?: boolean;
+    depthData?: number;
+    expandColumn?: ColumnTable;
 }): ColumnDef<T, any>[];
 export type ToggleRow<T> = {
     e: any;

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

@@ -153,10 +153,11 @@ function convertToTanStackColumns({
   // setExpanded,
   // expandable,
   format,
-  editAble
+  editAble,
+  depthData,
+  // expandable,
+  expandColumn
 }) {
-  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
-
   return (0, _utils.sortByType)(columns).map(col => {
     const {
       headerText,
@@ -214,7 +215,7 @@ function convertToTanStackColumns({
       // enableHiding: false,
       // enableResizing: true,
       id: field,
-      size: width,
+      size: expandColumn?.field === col.field ? (width ?? 0) + (depthData ?? 0) * 25 : width,
       accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
@@ -231,7 +232,9 @@ function convertToTanStackColumns({
         columns: children,
         editAble,
         format,
-        t
+        t,
+        depthData,
+        expandColumn
       });
     }
     const meta = {

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

@@ -166,3 +166,4 @@ export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare function sumFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare function sumNumberFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
+export declare const getTreeDepth: (rows: any[]) => number;

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

@@ -41,7 +41,7 @@ exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
 exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
-exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
+exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTreeDepth = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
 exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
@@ -2848,4 +2848,9 @@ function sumNumberFields(columns, data, childrenKey = 'children') {
     }
   }
   return result;
-}
+}
+const getTreeDepth = rows => {
+  if (!rows?.length) return 0;
+  return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
+};
+exports.getTreeDepth = getTreeDepth;

package/lib/table-component/useContext.d.ts

@@ -93,6 +93,7 @@ export interface IContext<T> {
         rowData: any;
     }) => void;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
+    maxDepth?: number;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.48",
+  "version": "1.9.49",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -57,7 +57,7 @@
     "@vitest/coverage-v8": "2.0.5",
     "antd": "5.24.1",
     "antd-style": "3.7.1",
-    "becoxy-icons": "2.0.1",
+    "becoxy-icons": "^2.1.1",
     "classnames": "2.3.1",
     "dayjs": "^1.11.13",
     "lodash": "4.17.21",