es-grid-template 1.2.6 → 1.2.8

package/lib/grid-component/table/GridEdit.js

@@ -127,7 +127,7 @@ const GridEdit = props => {
   const handleAddSingle = item => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
-    if (item.onClick) {
+    if (item && item.onClick) {
       item.onClick({
         toolbar: item
       });
@@ -190,7 +190,7 @@ const GridEdit = props => {
         toolbar: item
       });
     } else {
-      if (!record.parentId) {
+      if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
@@ -235,7 +235,7 @@ const GridEdit = props => {
         toolbar: item
       });
     } else {
-      if (!record.parentId) {
+      if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
@@ -335,7 +335,7 @@ const GridEdit = props => {
                   color: '#28c76f'
                 },
                 onClick: () => handleAddSingle(item)
-              }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
             }
           };
         }
@@ -353,7 +353,7 @@ const GridEdit = props => {
                 variant: 'outlined',
                 onClick: handleDeleteAll,
                 className: "d-flex toolbar-button"
-              }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
             }
           };
         }
@@ -384,7 +384,7 @@ const GridEdit = props => {
                 color: '#28c76f'
               },
               onClick: () => handleAddSingle(item)
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
           }
         };
       }
@@ -402,7 +402,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: handleDuplicate,
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
           }
         };
       }
@@ -420,7 +420,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')));
           }
         };
       }
@@ -438,7 +438,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
           }
         };
       }
@@ -456,7 +456,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertChild(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
           }
         };
       }
@@ -474,7 +474,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: handleDeleteAll,
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
           }
         };
       }
@@ -627,7 +627,7 @@ const GridEdit = props => {
     });
     const newRange = (0, _hooks.addRows8)(table, (0, _hooks.getRowsPasteIndex)(pastesArray).length);
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[(0, _hooks.getFirstSelectCell)(pastesArray).row];
-    if (!record.parentId) {
+    if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -905,7 +905,7 @@ const GridEdit = props => {
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
-    if (!record.parentId) {
+    if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -1301,7 +1301,10 @@ const GridEdit = props => {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (!isEditing(record) && record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey) {
+                // ~~ khi editingKey = ''
+                event.preventDefault();
+                event.stopPropagation();
                 handleEdit(record, column, column.editType, event);
                 handleCellClick(rowNumber, record, column);
                 const hasKey = mergedExpandedKeys.has(key);
@@ -1311,9 +1314,24 @@ const GridEdit = props => {
                 } else {
                   onTriggerExpand(record);
                 }
-              }
-              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
-                handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+              } else {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _hooks.flattenArray)(dataSource).length && event.key === 'Enter') {
+                    handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                  } else {
+                    // focus cell hiện tại và tắt edit
+                    handleFocusCell(rowNumber ?? 0, colIndex, column, 'vertical', event);
+                    setEditingKey('');
+
+                    // thêm dòng mới
+
+                    // handleAddSingle()
+                    //
+                    // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event)
+                  }
+                }
               }
             }
             if (event.key === 'Tab') {
@@ -1366,7 +1384,7 @@ const GridEdit = props => {
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
+              // setEditingKey('')
             }
           },
           // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',

package/lib/grid-component/type.d.ts

@@ -7,15 +7,17 @@ import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
+import type { FixedType } from "rc-base-table/lib/interface";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
-export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
-    position?: 'Top' | 'Bottom';
-    onClick?: (args: any) => void;
-};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
+export type ToolbarItem = Omit<RcToolbarItem, 'position' | 'align'> & {
+    position?: 'Top' | 'Bottom';
+    align?: ITextAlign;
+    onClick?: (args: any) => void;
+};
 export type ContextMenuItem = ItemType & {};
 export type ITemplateColumn = {
     value: any;
@@ -26,7 +28,7 @@ export type ITemplateColumn = {
 };
 export type ColumnSelectTable = {
     field: string;
-    dataIndex: string;
+    dataIndex?: string;
     type?: IColumnType;
     headerText?: string;
     fixedType?: 'left' | 'right' | undefined;
@@ -86,6 +88,8 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     field?: string;
     key?: any;
     type?: IColumnType;
+    /** @deprecated This function is deprecated and should use `onChange` instead */
+    haveSum?: boolean;
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
     maxWidth?: string | number;
@@ -100,18 +104,16 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;
     textAlign?: ITextAlign;
-    frozen?: Frozen;
-    template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
-};
-export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -123,12 +125,17 @@ export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>
     max?: number;
     min?: number;
     editSelectSettings?: IEditSelectSettings;
-    children?: ColumnEditType<RecordType>[];
+    fixedType?: FixedType;
+};
+export type ColumnTemplate<RecordType> = {
+    value: any;
+    rowData: RecordType;
+    index: number;
+    field: string;
 };
 export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
-export type ColumnsEditType<RecordType = AnyObject> = ColumnEditType<RecordType>[];
-export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | ColumnType<RecordType>;
-export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
+export type ColumnTable<RecordType = AnyObject> = ColumnType<RecordType>;
+export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
     groupAble?: boolean;
@@ -150,6 +157,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     toolbarItems?: ToolbarItem[];
     showColumnChoose?: boolean;
+    showAdvanceFilter?: boolean;
     onFilter?: (query: {
         field: string;
         key: string;
@@ -180,6 +188,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
     showEmptyText?: boolean;
+    commandSettings?: CommandSettings;
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
@@ -289,4 +298,8 @@ export type IFormat = {
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type Presets = Required<ColorPickerProps>['presets'][number];
+export type CommandSettings = {
+    client?: boolean;
+    confirmDialog?: boolean;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.21",
+    "rc-master-ui": "^1.1.22",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",
@@ -71,6 +71,8 @@
     "react-resizable": "^3.0.5",
     "sass": "^1.81.0",
     "styled-components": "^6.1.15",
+    "sweetalert2": "^11.4.14",
+    "sweetalert2-react-content": "^5.0.0",
     "throttle-debounce": "^5.0.2",
     "vitest": "^2.0.5"
   },