es-grid-template 1.2.3 → 1.2.5

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

@@ -245,11 +245,11 @@ const useColumns = config => {
           }),
           onCell: data => {
             return {
-              colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
+              colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
               className: classNames('', {
-                'cell-group': data.children,
-                'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
+                'cell-group': groupColumns && data.children,
+                'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
               })
             };
           },

package/es/grid-component/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useForceUpdate(): React.DispatchWithoutAction;

package/es/grid-component/hooks/useForceUpdate.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export default function useForceUpdate() {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  return forceUpdate;
+}

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

@@ -66,3 +66,6 @@ export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordTyp
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
 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);

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

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
 import { Table } from "rc-master-ui";
 import { flatColumns2 } from "./columns";
+import { SELECTION_COLUMN } from "./useColumns";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -138,9 +139,14 @@ export const updateColumns = (columns, includes) => {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-    newColumn.hidden = newColumn.key && !includes.includes(newColumn.key);
+
+    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
+    newColumn.hidden = newColumn.field && !includes.includes(newColumn.field);
+    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
+
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.hidden = !hasVisibleChild;
+      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
     }
     return newColumn;
   });
@@ -474,19 +480,6 @@ export const getFirstSelectCell = selectCells => {
     col
   };
 };
-
-// export const getLastSelectCell = (selectCells: any): {row: number, col: number} => {
-//
-//   if (selectCells.size === 0) {
-//     return {row: 0, col: 0}
-//   }
-//   const lastValue = [...selectCells].pop();
-//
-//   const [row, col] = lastValue.split("-").map(Number);
-//   return {row, col};
-//
-// }
-
 export const getRowsPasteIndex = pasteRows => {
   if (!pasteRows) {
     return [];
@@ -504,8 +497,25 @@ export function addRows8(arr, n) {
   const addedRows = [];
 
   // Hàm kiểm tra kiểu date hợp lệ
-  const isValidDate = d => {
-    return !isNaN(Date.parse(d));
+  const isValidDate = item => {
+    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
   };
 
   // Lấy giá trị mẫu của cột j từ hàng đầu tiên
@@ -711,4 +721,61 @@ export const convertFlatColumn = array => {
     }
   });
   return result;
+};
+export const convertColumns = cols => {
+  return cols.map(col => {
+    if (col === SELECTION_COLUMN) {
+      return SELECTION_COLUMN;
+    }
+    const transformedColumn = {
+      ...col,
+      dataIndex: col.field ?? col.dataIndex,
+      key: col.field ?? col.dataIndex ?? col.key,
+      // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+      // title: () => (<span>aaa</span>),
+      // title: () => (<HeaderContent column={{...col} as any} t={t}/>),
+      // 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
+    };
+    if (transformedColumn.children && transformedColumn.children?.length) {
+      return {
+        ...transformedColumn,
+        children: convertColumns(transformedColumn.children)
+      };
+    }
+    if (["index", "#"].includes(col.field)) {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number'
+        }),
+        render: (_, __, rowIndex) => rowIndex + 1
+      };
+    }
+    if (col.key === 'command') {
+      return {
+        ...transformedColumn,
+        onCell: () => ({
+          className: 'cell-number',
+          style: {
+            padding: '2px 8px'
+          }
+        })
+      };
+    }
+    return {
+      ...transformedColumn
+    };
+  });
+};
+export const checkChild = inputArray => {
+  return inputArray.some(item => item.children && item.children.length > 0);
+};
+export const isEditable = (column, rowData) => {
+  if (column && typeof column.editEnable === 'function') {
+    return column.editEnable(rowData);
+  }
+  return column?.editEnable;
 };

package/es/grid-component/styles.scss

@@ -42,6 +42,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     //font-weight: 500;
   }
 
+  .ui-rc-table {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        //padding: 6px 8px !important;
+        //padding: 6px 8px !important;
+      }
+    }
+  }
 
 
   &.table-none-column-select {
@@ -57,9 +65,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table {
-    line-height: 20px;
+
+    //line-height: 20px;
+
     .#{$prefix}-table-cell {
-      min-height: 35px;
+      //min-height: 35px;
+      //height: 35px;
 
       .#{$prefix}-table-filter-column {
         .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
@@ -324,6 +335,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
 .#{$prefix}-table-wrapper {
 
+  .#{$prefix}-table.#{$prefix}-table-small {
+    .#{$prefix}-table-selection-column{
+      //padding: 8px 8px;
+      //padding: 6px 8px;
+    }
+  }
+
   &.grid-editable {
 
     .#{$prefix}-table-row {
@@ -528,7 +546,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     .#{$prefix}-table.#{$prefix}-table-small {
       .#{$prefix}-table-selection-column{
         //padding: 8px 8px;
-        padding: 6px 8px;
+        //padding: 6px 8px;
       }
     }
 
@@ -620,7 +638,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               .#{$prefix}-table-row-expand-icon {
                 position: absolute;
                 //.ui-rc_content {
-                padding-left: $i * 10px;
+                //padding-left: $i * 10px;
                 //}
               }
 

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

@@ -27,7 +27,8 @@ const Grid = props => {
           rowSelectedHoverBg: '#eb4619',
           cellFontSize: 12,
           cellFontSizeSM: 13,
-          headerBg: '#ffffff'
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
         }
       }
     }

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

@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
@@ -49,6 +49,7 @@ const GridEdit = props => {
     defaultValue,
     expandable,
     onCellClick,
+    rowEditable,
     ...rest
   } = props;
   const {
@@ -85,8 +86,6 @@ const GridEdit = props => {
   const [isSelectDragging, setSelectIsDragging] = useState(false);
   const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
-  // const [showDraggingPoint, setShowDraggingPoint] = useState(false);
-
   const [rowsSelected, setRowsSelected] = useState(new Set());
   const [startSelectedCells, setStartSelectedCell] = useState(null);
   const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
@@ -259,10 +258,54 @@ const GridEdit = props => {
       }
     }
   };
-  const handleDeleteAll = () => {};
+  const handleInsertChild = item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource];
+      let newElement = {};
+      if (!record.children || record.children.length === 0) {
+        newElement = {
+          ...record,
+          children: [{
+            ...defaultRowValue,
+            parentId: record.rowId,
+            rowId
+          }]
+        };
+      } else {
+        newElement = {
+          ...record,
+          children: [...record.children, {
+            ...defaultRowValue,
+            parentId: record.rowId,
+            rowId
+          }]
+        };
+      }
+      const newDataSource = updateArrayByKey(newData, newElement, rowKey);
+      triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
+    }
+    const key = getRowKey(record, dataSource.indexOf(record));
+
+    // let newExpandedKeys: Key[];
+    const hasKey = mergedExpandedKeys.has(key);
+    if (!hasKey) {
+      const newExpandedKeys = [...mergedExpandedKeys, key];
+      setInnerExpandedKeys(newExpandedKeys);
+    }
+  };
+  const handleDeleteAll = () => {
+    triggerChangeData?.([], 'INSERT_BEFORE');
+  };
   const toolbarItemsBottom = useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER').map(item => {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -391,6 +434,24 @@ const GridEdit = props => {
           }
         };
       }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              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')));
+          }
+        };
+      }
       if (item.key === 'DELETE') {
         return {
           ...item,
@@ -951,8 +1012,8 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // @ts-ignore
-      const index = newData.findIndex(item => formData[rowKey] === item[rowKey]);
-      const rs = updateArrayByKey(dataSource, row, rowKey);
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
         triggerChangeData?.(rs, 'onChange');
       }
@@ -1305,7 +1366,8 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          editing: isEditing(record),
+          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record) !== false,
+          // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
@@ -1324,7 +1386,7 @@ const GridEdit = props => {
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && !isSelectDragging &&
+        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) !== false && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1413,7 +1475,8 @@ const GridEdit = props => {
           rowSelectedHoverBg: '#eb4619',
           cellFontSize: 12,
           cellFontSizeSM: 13,
-          headerBg: '#ffffff'
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
           // cellPaddingBlock: 0,
           // cellPaddingBlockSM: 0,
           // cellPaddingInlineSM: 0,
@@ -1447,6 +1510,7 @@ const GridEdit = props => {
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
     expandable: {
+      expandIconColumnIndex: checkChild(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
       expandIcon: args => {
@@ -1481,6 +1545,7 @@ const GridEdit = props => {
         }
       }
     },
+    triggerChangeColumns: triggerChangeColumns,
     rowSelection: columns && columns.length === 0 ? undefined : {
       type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,

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

@@ -46,7 +46,7 @@ export type ColumnSelectTable = {
 };
 export type IEditSelectSettings = {
     fieldKey?: string;
-    options: any[];
+    options: any[] | ((rowData: any, field: string) => any[]);
     /**  get value form other field **/
     fieldValue?: string;
     /** get label form other field **/
@@ -114,6 +114,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
 export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
+    editEnable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
     maxDate?: any;
     minDate?: any;
@@ -185,6 +186,7 @@ export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
+    rowEditable?: (rowData: RecordType) => boolean;
 }
 export type ICellClick = {
     index: number;

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

@@ -5,5 +5,6 @@ export type IColumnsChoose<RecordType> = {
     columnsGroup?: string[];
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
+    triggerChangeKeys?: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;