es-grid-template 1.7.34 → 1.7.35

package/es/table-component/InternalTable.js

@@ -51,8 +51,8 @@ export const SELECTION_COLUMN = {};
 const InternalTable = props => {
   const {
     t,
-    // columns: propsColumns,
-    columns,
+    columns: propsColumns,
+    // columns,
     lang,
     locale,
     dataSource,
@@ -126,6 +126,10 @@ const InternalTable = props => {
   const [filterStates, setFilterState] = React.useState(null);
   const [sorterStates, setSorterStates] = React.useState([]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [columns, setColumns] = React.useState([]);
+  React.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
   const [expanded, setExpanded] = React.useState({});
   const convertData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -169,10 +173,14 @@ const InternalTable = props => {
   const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
     value: undefined
   });
-  const triggerChangeColumns = (cols, keys) => {
-    const aa = flatColumns2(columns).map(it => it.field);
-    const rsss = getDiffent2Array(aa, keys);
-    setColumnsHiddenKeys(rsss);
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = flatColumns2(columns).map(it => it.field);
+      const rsss = getDiffent2Array(aa, keys);
+      setColumnsHiddenKeys(rsss);
+    }
   };
 
   // const contextMenuItems = React.useMemo(() => {

package/es/table-component/TableContainerEdit.js

@@ -116,7 +116,8 @@ const TableContainerEdit = props => {
     contextMenuHidden,
     showDefaultContext,
     commandSettings,
-    isDataTree
+    isDataTree,
+    onCellClick
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1442,6 +1443,33 @@ const TableContainerEdit = props => {
     }
     contextMenuClick?.(args);
   };
+  const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = updateArrayByKey([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: rowNumber,
+        rowId,
+        cellValue,
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
@@ -1554,7 +1582,8 @@ const TableContainerEdit = props => {
       handleDeleteContent,
       handleAddMulti,
       dataErrors,
-      windowSize
+      windowSize,
+      handleCellClick
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

@@ -128,7 +128,8 @@ const TableBodyCellEdit = props => {
     expanded,
     setExpanded,
     expandable,
-    isDataTree
+    isDataTree,
+    handleCellClick
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -415,6 +416,7 @@ const TableBodyCellEdit = props => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
+    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -875,6 +877,9 @@ const TableBodyCellEdit = props => {
           rowId: cell.row.id,
           colId: cell.column.id
         });
+        if (canEdit) {
+          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+        }
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {

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

@@ -40,7 +40,7 @@ export declare function groupArrayByColumns(arr: any[], columns: string[] | unde
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare function getFixedFields(columns: ColumnTable[], type: 'left' | 'right'): string[];
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
 export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
 export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
 export declare function isEqualSet(setA: any, setB: any): boolean;

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

@@ -305,7 +305,7 @@ export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
     return '.';
   }
 };
-export function getFixedFields(columns, type) {
+export const getFixedFields = (columns, type) => {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
@@ -319,7 +319,7 @@ export function getFixedFields(columns, type) {
   }
   traverse(columns);
   return result;
-}
+};
 export function areStringArraysEqual(a, b) {
   if (a.length !== b.length) return false;
   const sortedA = [...a].sort();

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

@@ -7,7 +7,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     rowKey: string;
     prefix: string;
     columns: ColumnDef<T>[];
-    propsColumns: ColumnsTable;
+    propsColumns: ColumnsTable<T>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;
@@ -20,7 +20,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    triggerChangeColumns?: (args: any, keys: any) => void;
+    triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;
     isDataTree: boolean;
 };

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

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -66,6 +66,7 @@ export interface IContext<T> {
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
     isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/es/table-component/useContext.js

@@ -16,5 +16,6 @@ export const TableContext = /*#__PURE__*/createContext({
   setIsSelectionChange: () => {},
   setSorterChange: () => {},
   setFilterChange: () => {},
-  setExpanded: () => {}
+  setExpanded: () => {},
+  handleCellClick: () => {}
 });

package/lib/table-component/InternalTable.js

@@ -57,8 +57,8 @@ const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
 const InternalTable = props => {
   const {
     t,
-    // columns: propsColumns,
-    columns,
+    columns: propsColumns,
+    // columns,
     lang,
     locale,
     dataSource,
@@ -132,6 +132,10 @@ const InternalTable = props => {
   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([]);
+  _react.default.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
   const [expanded, setExpanded] = _react.default.useState({});
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -175,10 +179,14 @@ const InternalTable = props => {
   const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
     value: undefined
   });
-  const triggerChangeColumns = (cols, keys) => {
-    const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
-    const rsss = (0, _utils.getDiffent2Array)(aa, keys);
-    setColumnsHiddenKeys(rsss);
+  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);
+    }
   };
 
   // const contextMenuItems = React.useMemo(() => {

package/lib/table-component/TableContainerEdit.js

@@ -123,7 +123,8 @@ const TableContainerEdit = props => {
     contextMenuHidden,
     showDefaultContext,
     commandSettings,
-    isDataTree
+    isDataTree,
+    onCellClick
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -1449,6 +1450,33 @@ const TableContainerEdit = props => {
     }
     contextMenuClick?.(args);
   };
+  const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = (0, _utils.updateArrayByKey)([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: rowNumber,
+        rowId,
+        cellValue,
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
@@ -1561,7 +1589,8 @@ const TableContainerEdit = props => {
       handleDeleteContent,
       handleAddMulti,
       dataErrors,
-      windowSize
+      windowSize,
+      handleCellClick
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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

@@ -135,7 +135,8 @@ const TableBodyCellEdit = props => {
     expanded,
     setExpanded,
     expandable,
-    isDataTree
+    isDataTree,
+    handleCellClick
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -422,6 +423,7 @@ const TableBodyCellEdit = props => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
+    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -882,6 +884,9 @@ const TableBodyCellEdit = props => {
           rowId: cell.row.id,
           colId: cell.column.id
         });
+        if (canEdit) {
+          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+        }
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {

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

@@ -40,7 +40,7 @@ export declare function groupArrayByColumns(arr: any[], columns: string[] | unde
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare function getFixedFields(columns: ColumnTable[], type: 'left' | 'right'): string[];
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
 export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
 export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
 export declare function isEqualSet(setA: any, setB: any): boolean;

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

@@ -23,9 +23,7 @@ exports.filterDataByColumns = filterDataByColumns;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
-exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles = void 0;
-exports.getFixedFields = getFixedFields;
-exports.getFormat = void 0;
+exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
@@ -367,7 +365,7 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
   }
 };
 exports.checkDecimalSeparator = checkDecimalSeparator;
-function getFixedFields(columns, type) {
+const getFixedFields = (columns, type) => {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
@@ -381,7 +379,8 @@ function getFixedFields(columns, type) {
   }
   traverse(columns);
   return result;
-}
+};
+exports.getFixedFields = getFixedFields;
 function areStringArraysEqual(a, b) {
   if (a.length !== b.length) return false;
   const sortedA = [...a].sort();

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

@@ -7,7 +7,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     rowKey: string;
     prefix: string;
     columns: ColumnDef<T>[];
-    propsColumns: ColumnsTable;
+    propsColumns: ColumnsTable<T>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;
@@ -20,7 +20,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    triggerChangeColumns?: (args: any, keys: any) => void;
+    triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;
     isDataTree: boolean;
 };

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

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -66,6 +66,7 @@ export interface IContext<T> {
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
     isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/table-component/useContext.js

@@ -22,5 +22,6 @@ const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContex
   setIsSelectionChange: () => {},
   setSorterChange: () => {},
   setFilterChange: () => {},
-  setExpanded: () => {}
+  setExpanded: () => {},
+  handleCellClick: () => {}
 });

package/package.json

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