es-grid-template 1.8.63 → 1.8.65

package/es/table-component/TableContainerEdit.js

@@ -358,6 +358,9 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = React.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
+
+  // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
+
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -396,7 +399,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table]);
   const triggerChangeData = React.useCallback(newData => {
     onDataChange?.(newData);
-  }, [onDataChange]);
+  }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), callbackData);
@@ -955,6 +958,30 @@ const TableContainerEdit = props => {
     mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
+  const handleAddMulti = React.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      });
+      const kkk = getAllRowKey(newRows) ?? [];
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+      setMergedFilterKeys?.(rs);
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const onSubmit = formData => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -975,6 +1002,26 @@ const TableContainerEdit = props => {
       console.log('Validate Failed:', errInfo);
     }
   };
+  const onSubmit2 = (formData, newOriginData) => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...newOriginData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
   const handleCellChange = args => {
     const {
       record,
@@ -1032,30 +1079,111 @@ const TableContainerEdit = props => {
       onSubmit(record);
     }
   };
-  const handleAddMulti = React.useCallback((item, n, newId) => {
-    if (item.onClick) {
-      item.onClick({
-        toolbar: item
-      });
-    } else {
-      const defaultRowValue = getDefaultValue(defaultValue);
-      const newRows = Array.from({
-        length: n
-      }).map(() => defaultRowValue ? {
-        ...defaultRowValue,
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      } : {
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      });
-      const kkk = getAllRowKey(newRows) ?? [];
-      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
-      setMergedFilterKeys?.(rs);
-      const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData);
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const newRowId = newGuid();
+    const newRows = Array.from({
+      length: 1
+    }).map(() => defaultRowValue ? {
+      ...defaultRowValue,
+      id: undefined,
+      rowId: newRowId
+    } : {
+      id: undefined,
+      rowId: newRowId
+    });
+    const kkk = getAllRowKey(newRows) ?? [];
+    const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+    setMergedFilterKeys?.(rs);
+    const newData = originData.concat(newRows);
+    setFocusedCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setStartCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setEndCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setTimeout(() => {
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId: newRowId,
+        colId: field
+      }, {
+        rowId: newRowId,
+        colId: field
+      }));
+    });
+    setTimeout(() => {
+      const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+      const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+      if (cellFocus) {
+        cellFocus.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        cellFocus.focus();
+      }
+    }, 100);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        onSubmit2(callbackRecord, [...newData]);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit2(record, [...newData]);
+        }
+      }
     }
-  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
+
+    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
+
+    //   onSubmit(record)
+
+    // }
+  };
   const handleDuplicate = React.useCallback(() => {
     // không tính tree
 
@@ -1782,10 +1910,6 @@ const TableContainerEdit = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -1836,7 +1960,11 @@ const TableContainerEdit = props => {
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns,
     columnHidden: columnHidden
-  })))), /*#__PURE__*/React.createElement("form", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
@@ -1888,6 +2016,7 @@ const TableContainerEdit = props => {
       setValue,
       reset,
       handleCellChange,
+      handleCellChangeAndAddRow,
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,

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

@@ -227,7 +227,7 @@ const TableBodyCellEdit = props => {
     setValue,
     getValues,
     handleCellChange,
-    // handleAddMulti,
+    handleCellChangeAndAddRow,
     dataErrors,
     expanded,
     setExpanded,
@@ -237,17 +237,13 @@ const TableBodyCellEdit = props => {
     isSelectionChange,
     setIsSelectionChange,
     selectionSettings,
-    pagination
+    pagination,
+    handleAddMulti
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -783,6 +779,8 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
       handleEdit(e, true);
       return;
     }
@@ -1038,6 +1036,64 @@ const TableBodyCellEdit = props => {
         indexRow: currentRowIndex,
         type: 'blur'
       });
+    } else {}
+  };
+  const handleChangeAndCreateRow = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      // vừa cell change + add new row
+      handleCellChangeAndAddRow?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {
+      // chỉ add new row
+
+      const newRowId = newGuid();
+      handleAddMulti?.({}, 1, newRowId);
+      setFocusedCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setStartCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setEndCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setTimeout(() => {
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }));
+      });
+      setTimeout(() => {
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+          cellFocus.focus();
+        }
+      }, 100);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -1110,9 +1166,10 @@ const TableBodyCellEdit = props => {
       if (!isEditing) {
         handleKeyDown(e, cell.row.id, cell.column.id);
       } else {
-        // setStartCell?.(undefined)
-
-        if (e.shiftKey && e.key === 'Enter') {} else {
+        if (e.shiftKey && e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        } else {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
@@ -1141,29 +1198,10 @@ const TableBodyCellEdit = props => {
               rowVirtualizer.scrollToIndex(nextRow.index, {
                 align: 'center'
               });
+              handleChange();
             } else {
-
-              // const newRowId = newGuid()
-              // handleAddMulti?.({}, 1, newRowId)
-
-              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
-              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setTimeout(() => {
-              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
-              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
-
-              // })
-
-              // setTimeout(() => {
-
-              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
-
-              // }, 100)
+              handleChangeAndCreateRow();
             }
-            handleChange();
             setEditingKey?.('');
             reset?.();
           }

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

@@ -154,3 +154,5 @@ export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
 export declare const getTableHeight: (height?: number, minHeight?: number) => number;
 export declare const convertFlatColumn1: (array: ColumnsTable) => ColumnsTable[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;

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

@@ -1,4 +1,4 @@
-import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
+// import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection"
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
 // import moment from "moment/moment"
@@ -263,7 +263,7 @@ export function groupArrayByColumns(arr, columns) {
 export const flatColumns2 = columns => {
   return columns.reduce((list, column) => {
     const subColumns = column.children;
-    if (column === SELECTION_COLUMN) {
+    if (column.field === 'selection_column') {
       return [...list, {
         ...column
       }];
@@ -2180,4 +2180,41 @@ export const convertFlatColumn1 = array => {
     }
   });
   return result;
+};
+export const updateColumnsByGroup = (columns, columnsGroup) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup);
+      hasVisibleChild = newColumn.children.some(child => child.visible !== false);
+    }
+
+    // Map previous behaviour (hidden = true when field in columnsGroup)
+    // to the new `visible` property: visible = !hidden
+    newColumn.visible = !(newColumn.field && columnsGroup.includes(newColumn.field));
+
+    // For parent columns, visibility depends on whether any child is visible
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !!hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+export const removeColumns = (columns, groupColumns) => {
+  const ttt = [...columns];
+  return ttt.filter(column => !groupColumns.includes(column.field)).map(column => {
+    const newCol = {
+      ...column
+    };
+    if (newCol?.children && newCol?.children.length > 0) {
+      newCol.children = removeColumns(newCol.children, groupColumns);
+    }
+    return newCol;
+  });
 };

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

@@ -59,6 +59,7 @@ const Grid = props => {
     mergedSelectedKeys,
     allowResizing,
     windowSize,
+    fullScreenTitle,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -316,9 +317,7 @@ const Grid = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    }
-    // onClose={() => setIsFullScreen(false)}
-    ,
+    },
     onCancel: () => setIsFullScreen(false)
 
     // destroyOnClose
@@ -333,12 +332,16 @@ const Grid = props => {
         zIndex: 1050
       }
     },
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 40
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, /*#__PURE__*/React.createElement(GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: classNames(`${prefix}-grid`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'

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

@@ -180,11 +180,9 @@ const TableWrapper = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      // height: height, //should be a fixed height
       maxHeight: height,
       //should be a fixed height
       minHeight: minHeight ? height : undefined //should be a fixed height
-      // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}
     ,

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

@@ -198,6 +198,7 @@ export type TableProps<RecordType = AnyObject> = {
         color?: string;
     };
     title?: ReactNode | ((data: RecordType) => ReactNode);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;
     next?: () => void;
@@ -424,13 +425,21 @@ export type ToolbarItem = {
 export type LoadOptionsArgs = {
     rowData?: any;
 };
+export type GroupTemplate = {
+    rowData: any;
+    value: any;
+    column: ColumnTable;
+};
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
+    groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
+    showHeaderColumn?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
     sumGroup?: boolean;
+    groupTemplate?: React.ReactNode | React.ReactElement | ((args: GroupTemplate) => React.ReactNode | React.ReactElement);
 };
 type IOnGroup = {
     columnGrouped: string[];

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

@@ -48,6 +48,7 @@ export interface IContext<T> {
     reset?: any;
     setValue?: any;
     handleCellChange?: (args: ContextCellChange) => void;
+    handleCellChangeAndAddRow?: (args: ContextCellChange) => void;
     editingKey?: string;
     setEditingKey?: Dispatch<SetStateAction<string>>;
     rangeState?: RangeState;
@@ -86,11 +87,12 @@ export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {
     key: string;
     record: any;
-    field: string | undefined;
+    field: string;
     option: any;
     indexRow: number;
     indexCol: number;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
+    addNewRow?: boolean;
 };

package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type IColumnsGroup = {
+    columns: any[];
+    dataSource?: string[];
+    onSubmit: (value: any) => void;
+    t?: any;
+    columnsGrouped?: string[];
+    unClearableLevel?: number;
+    defaultGroupColumns?: string[];
+};
+export declare const ColumnsGroup: (props: IColumnsGroup) => React.JSX.Element;
+export {};