es-grid-template 1.2.2 → 1.2.4

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,55 @@ 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);
 };

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,8 +65,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table {
-    line-height: 20px;
+
+    //line-height: 20px;
+
     .#{$prefix}-table-cell {
+      //min-height: 35px;
+      //height: 35px;
 
       .#{$prefix}-table-filter-column {
         .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
@@ -323,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 {
@@ -527,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;
       }
     }
 
@@ -619,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, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
@@ -85,8 +85,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 +257,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 +433,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 +1011,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');
       }
@@ -1324,7 +1384,7 @@ const GridEdit = props => {
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), 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 && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1413,7 +1473,8 @@ const GridEdit = props => {
           rowSelectedHoverBg: '#eb4619',
           cellFontSize: 12,
           cellFontSizeSM: 13,
-          headerBg: '#ffffff'
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
           // cellPaddingBlock: 0,
           // cellPaddingBlockSM: 0,
           // cellPaddingInlineSM: 0,
@@ -1447,6 +1508,7 @@ const GridEdit = props => {
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
     expandable: {
+      expandIconColumnIndex: checkChild(dataSource) ? 3 : undefined,
       ...expandable,
       expandedRowKeys: innerExpandedKeys,
       expandIcon: args => {
@@ -1481,6 +1543,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

@@ -178,6 +178,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     onDataChange?: (data: RecordType[]) => void;
     defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
+    showEmptyText?: boolean;
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;

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;