es-grid-template 1.2.6 → 1.2.8

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

@@ -120,7 +120,7 @@ const GridEdit = props => {
   const handleAddSingle = item => {
     const defaultRowValue = getDefaultValue(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
-    if (item.onClick) {
+    if (item && item.onClick) {
       item.onClick({
         toolbar: item
       });
@@ -183,7 +183,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]);
@@ -228,7 +228,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]);
@@ -328,7 +328,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'))));
             }
           };
         }
@@ -346,7 +346,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'));
             }
           };
         }
@@ -377,7 +377,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'))));
           }
         };
       }
@@ -395,7 +395,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')));
           }
         };
       }
@@ -413,7 +413,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')));
           }
         };
       }
@@ -431,7 +431,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')));
           }
         };
       }
@@ -449,7 +449,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')));
           }
         };
       }
@@ -467,7 +467,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'));
           }
         };
       }
@@ -620,7 +620,7 @@ const GridEdit = props => {
     });
     const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
     const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
-    if (!record.parentId) {
+    if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -898,7 +898,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];
 
@@ -1294,7 +1294,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);
@@ -1304,9 +1307,24 @@ const GridEdit = props => {
                 } else {
                   onTriggerExpand(record);
                 }
-              }
-              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < 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 < 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') {
@@ -1359,7 +1377,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/es/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/lib/grid-component/AdvanceFilter.d.ts

@@ -1,10 +1,14 @@
 import React from "react";
-import type { ColumnsTable } from "./type";
-export type IColumnsChoose<RecordType> = {
-    columns: ColumnsTable<RecordType>;
-    columnsGroup?: string[];
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
+import type { IFormat } from "./type";
+type Props = {
+    columns: any[];
+    dataSourceFilter?: any[];
+    onFilter?: (query: any, col?: any[]) => void;
+    mode?: 'sidebar' | 'dropdown';
+    defaultFilter?: any[];
+    leftFilterWidth?: number;
+    format?: IFormat;
     t?: any;
-    triggerChangeKeys?: any;
 };
-export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;
+declare const AdvanceFilter: (props: Props) => React.JSX.Element;
+export default AdvanceFilter;