es-grid-template 1.2.6 → 1.2.7

package/lib/grid-component/EditableCell.js

@@ -268,15 +268,15 @@ const EditableCell = props => {
         const columnsTable = rr.map(colSelect => {
           return {
             title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
-            dataIndex: colSelect.dataIndex,
+            dataIndex: colSelect.field ?? colSelect.dataIndex,
             key: colSelect.dataIndex,
             render: colSelect.template ? (text, recd, ind) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colSelect.template?.({
               value: text,
               rowData: recd,
               column: colSelect,
-              field: colSelect.dataIndex,
+              field: colSelect.field,
               index: ind,
-              [colSelect.dataIndex]: text
+              [colSelect.field]: text
             })) : undefined,
             width: colSelect.width,
             ellipsis: true,
@@ -324,8 +324,9 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           placeholder: t ? t('Select') : 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
@@ -398,8 +399,10 @@ const EditableCell = props => {
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
+
           style: {
             width: '100%',
             height: '100%'
@@ -449,8 +452,9 @@ const EditableCell = props => {
             });
           },
           showSearch: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           style: {
@@ -529,8 +533,9 @@ const EditableCell = props => {
           treeData: newTreeData,
           placeholder: t ? t('Select') : 'Select',
           treeDefaultExpandAll: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           virtual: true,
           allowClear: true
           // maxTagTextLength={column?.editSelectSettings?.showItems}

package/lib/grid-component/InternalTable.js

@@ -22,7 +22,10 @@ var _useColumns = _interopRequireDefault(require("./hooks/useColumns"));
 require("./styles.scss");
 var _columns = require("./hooks/columns");
 var _Group = _interopRequireDefault(require("./table/Group"));
+var _sweetalert = _interopRequireDefault(require("sweetalert2"));
+var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
 _dayjs.default.extend(_customParseFormat.default);
+const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
 
 // const ASCEND = 'ascend';
 // const DESCEND = 'descend';
@@ -80,6 +83,8 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    commandClick,
+    commandSettings,
     ...rest
   } = props;
   const rowKey = _react.default.useMemo(() => {
@@ -205,6 +210,126 @@ const InternalTable = props => {
     // setMergedData(newData)
     onDataChange?.(newData);
   };
+  const triggerCommandClick = args => {
+    const {
+      id,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    if (id === 'DELETE') {
+      // bật modal confirm
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            if (!commandSettings || commandSettings && commandSettings.client !== false) {
+              // client
+
+              // kiểm tra dòng hiện tại có parent
+
+              let newData = [];
+              if (rowData?.parentId) {
+                const parent = (0, _hooks.findItemByKey)(dataSource, rowKey, rowData.parentId);
+                const childData = parent?.children ? [...parent.children] : [];
+                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+                childData.splice(Number(findIndex), 1);
+                const newRowData = {
+                  ...parent,
+                  children: childData
+                };
+                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
+                newData = (0, _hooks.updateArrayByKey)(tmpData, newRowData, rowKey);
+              } else {
+                tmpData.splice(Number(index), 1);
+                newData = [...tmpData];
+              }
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  // rows: [...tmpData]
+                  rows: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...dataSource]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = (0, _hooks.findItemByKey)(dataSource, rowKey, rowData.parentId);
+            const childData = parent?.children ? [...parent.children] : [];
+            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+            childData.splice(Number(findIndex), 1);
+            const newRowData = {
+              ...parent,
+              children: childData
+            };
+            newData2 = (0, _hooks.updateArrayByKey)(tmpData, newRowData, rowKey);
+          } else {
+            tmpData.splice(Number(index), 1);
+            newData2 = [...tmpData];
+          }
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...newData2]
+            });
+          }
+        } else {
+          // server
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...dataSource]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick(args);
+      }
+    }
+  };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = (0, _hooks.updateData)(dataSource, callbackData, rowKey);
@@ -260,7 +385,8 @@ const InternalTable = props => {
     clickHeaderToSort: clickHeaderToSort,
     groupSetting: groupSetting,
     groupAble: groupAble,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    commandClick: triggerCommandClick
   }));
 };
 var _default = exports.default = InternalTable;

package/lib/grid-component/hooks/columns/index.js

@@ -377,8 +377,9 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
       // options={translateOption(numberOperator, t)}
+      // options={find ? options : column.source ?? []}
       , {
-        options: find ? options : column.source ?? [],
+        options: column.source ? column.source : options ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/lib/grid-component/hooks/useColumns.js

@@ -175,7 +175,10 @@ const useColumns = config => {
           // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
           ellipsis: col.ellipsis !== false,
           align: col.textAlign ?? col.align,
-          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+          fixed: col.fixedType ?? col.fixed,
+          isSummary: col.isSummary ?? col.haveSum,
+          hidden: col.hidden ?? col.visible === false
+          // hidden: true
         };
         if (transformedColumn.children && transformedColumn.children?.length) {
           return {
@@ -280,7 +283,7 @@ const useColumns = config => {
             }
             return (0, _columns.renderContent)(col, value, record, rowIndex, format);
           },
-          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };
       });
     };

package/lib/grid-component/hooks/utils.d.ts

@@ -68,4 +68,4 @@ export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordTyp
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
 export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
-export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => (boolean | ((rowData: any) => boolean)) & (boolean | ((rowData: any) => boolean));

package/lib/grid-component/hooks/utils.js

@@ -795,7 +795,7 @@ const convertColumns = cols => {
       // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
       ellipsis: col.ellipsis !== false,
       align: col.textAlign ?? col.align,
-      fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      fixed: col.fixedType ?? col.fixed
     };
     if (transformedColumn.children && transformedColumn.children?.length) {
       return {

package/lib/grid-component/styles.scss

@@ -205,6 +205,8 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         border-bottom: 1px solid $tableBorderColor;
         //background: #fff;
         font-weight: 500;
+        //line-height: 23px;
+        //height: 40px;
       }
     }
 
@@ -336,10 +338,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper {
 
   .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-selection-column{
-      //padding: 8px 8px;
-      //padding: 6px 8px;
+    .ui-rc-table-thead {
+      >tr >th.#{$prefix}-table-selection-column{
+        //padding-block: 7px;
+        padding: 0;
+        //padding: 6px 8px;
+      }
     }
+    //.#{$prefix}-table-selection-column{
+    //  padding-block: 7px;
+    //  padding: 0;
+    //  //padding: 6px 8px;
+    //}
   }
 
   &.grid-editable {

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,16 +104,34 @@ 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>[];
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    disable?: boolean | ((rowData: any) => boolean);
+    editEnable?: boolean | ((rowData: any) => boolean);
+    isClearable?: boolean;
+    maxDate?: any;
+    minDate?: any;
+    maxTime?: any;
+    minTime?: any;
+    max?: number;
+    min?: number;
+    editSelectSettings?: IEditSelectSettings;
+    fixedType?: FixedType;
+};
+export type ColumnTemplate<RecordType> = {
+    value: any;
+    rowData: RecordType;
+    index: number;
+    field: string;
 };
 export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
@@ -180,6 +202,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 +312,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 {};