es-grid-template 1.3.3 → 1.3.4

package/assets/index.css

@@ -10,6 +10,10 @@
   min-width: 200px;
 }
 
+.ant-dropdown-menu.popup-context-menu .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title {
+  align-items: center;
+}
+
 .ui-rc-table-wrapper p {
   margin: 0;
 }
@@ -111,6 +115,12 @@
 .ui-rc-table-wrapper .ui-rc-table-thead .ui-rc-table-cell .ui-rc-table-cell-content {
   line-height: 22px;
 }
+.ui-rc-table-wrapper .ui-rc-table-thead .ui-rc-table-cell.head-align-center {
+  text-align: center;
+}
+.ui-rc-table-wrapper .ui-rc-table-thead .ui-rc-table-cell.head-align-right {
+  text-align: right;
+}
 .ui-rc-table-wrapper .ui-rc-table-summary .ui-rc-table-cell {
   background-color: #fafafa;
   height: 39px;

package/assets/index.scss

@@ -26,6 +26,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
 .popup-context-menu {
   min-width: 200px;
+
+}
+.ant-dropdown-menu.popup-context-menu {
+  .ant-dropdown-menu-submenu {
+    .ant-dropdown-menu-submenu-title {
+      align-items: center;
+    }
+  }
 }
 
 // -------------- Table -------------
@@ -239,6 +247,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       .#{$prefix}-table-column-title {
         //display: flex;
       }
+
+      &.head-align-center {
+        text-align: center;
+      }
+      &.head-align-right {
+        text-align: right;
+      }
     }
   }
 

package/es/grid-component/ContextMenu.js

@@ -98,7 +98,10 @@ const ContextMenu = props => {
             maxHeight: pos.viewportHeight - 20,
             width: 'fit-content'
           },
-          rootClassName: 'popup-context-menu',
+          rootClassName: 'popup-context-menu'
+          // rootClassName={'be-popup-container'}
+          ,
+
           onClick: e => {
             setOpen(false);
             contextMenuClick?.({

package/es/grid-component/EditableCell.js

@@ -11,14 +11,14 @@ getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customW
 } from "./hooks";
 // import moment from "moment";
 // import dayjs from "dayjs";
-import { TreeSelect } from "antd";
+// import {TreeSelect} from "antd";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import dayjs from "dayjs";
 import moment from "moment";
 import { Controller } from "react-hook-form";
-import { Checkbox, Select } from "rc-master-ui";
+import { Checkbox, Select, TreeSelect } from "rc-master-ui";
 import { AsyncSelect } from "./async-select";
 import { AsyncTableSelect } from "./async-table-select";
 import { cyan, green, red, blue } from '@ant-design/colors';
@@ -52,7 +52,6 @@ const EditableCell = props => {
     ...restProps
   } = props;
   const {
-    rowKey,
     format,
     control,
     getValues,
@@ -121,6 +120,8 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 option: newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -193,6 +194,8 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 option: newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -313,6 +316,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -393,6 +398,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -448,6 +455,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -518,12 +527,23 @@ const EditableCell = props => {
 
         const newTreeData = convertLabelToTitle(optionsTree);
         // @ts-ignore
-        const valueTreeSelect = column?.editSelectSettings?.isMulti ? Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : [] : record[column.dataIndex];
+        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : []) : record[column.dataIndex]
+
+        let valueTreeSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueTreeSelect = record[fieldValue] ?? value;
+        }
+        if (isMulti || selectMode === 'checkbox') {
+          // @ts-ignore
+          valueTreeSelect = !isNullOrUndefined(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+        }
         return /*#__PURE__*/React.createElement(TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',
           style: {
-            width: '100%'
+            width: '100%',
+            height: '100%'
           },
           value: valueTreeSelect,
           dropdownStyle: {
@@ -550,17 +570,28 @@ const EditableCell = props => {
             value: keySelect,
             children: 'children'
           },
-          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox'
-          // getPopupContainer={() => tableWrapperRef.current}
-          ,
-          filterTreeNode: filterTreeNode
-          // onChange={(val: any) => {
-          //   record[column.dataIndex] = val
-          //   handleCellChange(val, val, record, col, indexRow, indexCol)
-          //
-          // }}
-          ,
-
+          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
+          filterTreeNode: filterTreeNode,
+          onSelect: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined
         });
       case 'checkbox':
@@ -589,6 +620,8 @@ const EditableCell = props => {
               prevState: value,
               newState: newVal,
               field: column.field ?? column.dataIndex,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -674,6 +707,8 @@ const EditableCell = props => {
               record: formState,
               prevState: value,
               newState: `#${valueColor.toHex()}`,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -773,6 +808,8 @@ const EditableCell = props => {
                 record: formState,
                 prevState,
                 newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -810,23 +847,28 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 field: column.field ?? column.dataIndex,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
           },
           onPressEnter: () => {
+            const key = getRowKey?.(record, index);
             const formState = getValues();
             const newState = getValues(dataIndex);
             // @ts-ignore
             const prevState = record[dataIndex];
             // @ts-ignore
             // if (itemState !== record[dataIndex]) {
-            // @ts-ignore
+
             handleCellChange?.({
-              key: record[rowKey],
+              key: key,
               newState,
               prevState,
               record: formState,
+              indexCol,
+              indexRow,
               type: 'enter'
             });
             // }

package/es/grid-component/TableGrid.js

@@ -287,12 +287,6 @@ const TableGrid = props => {
     if (checkboxOnly !== true) {
       if (type === 'single') {}
     }
-    if (clickRef.current) return;
-
-    // @ts-ignore
-    clickRef.current = setTimeout(() => {
-      clickRef.current = null;
-    }, 250);
   };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
@@ -372,7 +366,7 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? filterDataByColumns3(dataSource, filterStates) : []
+    dataSource: columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []
     // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,

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

@@ -1,5 +1,5 @@
 import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
-import { NumericFormat, numericFormatter } from "react-numeric-component";
+import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import React, { Fragment } from "react";
@@ -7,6 +7,7 @@ import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
+import Number from "../../number";
 const {
   RangePicker
 } = DatePicker;
@@ -68,7 +69,10 @@ export const getValueCell = (column, value, format) => {
       const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
       const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
       const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
-      const content = !isEmpty(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -78,7 +82,7 @@ export const getValueCell = (column, value, format) => {
         decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
         fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
       };
-      return !isEmpty(content) ? numericFormatter(content, numericFormatProps) : '';
+      return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
     case 'date':
       return value ? dayjs(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
@@ -102,7 +106,7 @@ export const getValueCell = (column, value, format) => {
       }));
     case 'checkbox':
       return /*#__PURE__*/React.createElement(Input, {
-        checked: !!content,
+        checked: !!value,
         readOnly: true,
         type: "checkbox"
       });
@@ -136,18 +140,11 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        // allowNegative={col.format && col.format.allowNegative === true}
-        ,
-        allowNegative: true,
-        customInput: Input,
-        className: ' rounded-0 input-element form-control',
-        onValueChange: values => {
-          // onChangeValueFilter(type, values.floatValue)
-          setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
+      }, /*#__PURE__*/React.createElement(Number, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
         }
       }))));
     case 'NumberRange':

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

@@ -263,7 +263,8 @@ const useColumns = config => {
           },
           onHeaderCell: () => ({
             width: col.width,
-            onResize: handleResize?.(col)
+            onResize: handleResize?.(col),
+            className: col.headerTextAlign === 'center' ? 'head-align-center' : col.headerTextAlign === 'right' ? 'head-align-right' : ''
           }),
           onCell: (data, index) => {
             return {

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

@@ -80,3 +80,16 @@ export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;
 export declare function invalidDate(date: any): boolean;
+export declare const isContinuous: (set: any) => boolean;
+export declare const parseCells: (cellSet: any) => {
+    row: any;
+    col: any;
+    key: any;
+}[];
+export declare const buildConnectedRegions: (cells: any) => any[];
+export declare const isBottomMostInRegion: (rowIndex: number, colIndex: number, listSelectCell: any) => boolean;
+export declare const isTopMostInRegion: (rowIndex: number, colIndex: number, listSelectCell: any) => boolean;
+export declare function isRightMostInRegion(rowIndex: number, colIndex: number, listSelectCell: any): boolean;
+export declare function isEqualSet(setA: any, setB: any): boolean;
+export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
+export declare const mergedSets: (arr: any[]) => Set<unknown>;

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

@@ -980,10 +980,10 @@ export const filterDataByColumns3 = (data, queries) => {
       const queryStr = value?.toString().toLowerCase?.();
       switch (operator.toLowerCase()) {
         case "equal":
-          condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue == value;
+          condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
           break;
         case "notequal":
-          condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue != value;
+          condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
           break;
         case "greaterthan":
           // @ts-ignore
@@ -1029,8 +1029,19 @@ export const filterDataByColumns3 = (data, queries) => {
 // ======= Helper functions ========
 
 // Kiểm tra có phải Date object không
+// function isDate(value: any) {
+//   return value instanceof Date || !isNaN(Date.parse(value));
+// }
+
 function isDate(value) {
-  return value instanceof Date || !isNaN(Date.parse(value));
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+  if (typeof value === "string") {
+    // Chỉ chấp nhận định dạng yyyy-mm-dd hoặc mm/yyyy
+    return /^\d{4}-\d{2}-\d{2}$/.test(value) || /^\d{2}\/\d{4}$/.test(value);
+  }
+  return false;
 }
 
 // Chuỗi MM/YYYY → Date
@@ -1064,4 +1075,125 @@ export function compareDate(itemValue, value) {
 }
 export function invalidDate(date) {
   return date instanceof Date && !isNaN(date.getTime());
-}
+}
+export const isContinuous = set => {
+  const rows = [];
+  const cols = [];
+  for (const item of set) {
+    const [row, col] = item.split('-').map(Number);
+    rows.push(row);
+    cols.push(col);
+  }
+
+  // Lấy danh sách duy nhất và sắp xếp
+  const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);
+  const isSequential = arr => {
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i] !== arr[i - 1] + 1) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const sortedRows = uniqueSorted(rows);
+  const sortedCols = uniqueSorted(cols);
+  return isSequential(sortedRows) && isSequential(sortedCols);
+};
+export const parseCells = cellSet => {
+  return Array.from(cellSet).map(cell => {
+    const [row, col] = cell.split('-').map(Number);
+    return {
+      row,
+      col,
+      key: cell
+    };
+  });
+};
+export const buildConnectedRegions = cells => {
+  const cellMap = new Map();
+  const visited = new Set();
+  for (const cell of cells) {
+    cellMap.set(cell.key, cell);
+  }
+  const directions = [[1, 0],
+  // down
+  [-1, 0],
+  // up
+  [0, 1],
+  // right
+  [0, -1] // left
+  ];
+  const regions = [];
+  for (const cell of cells) {
+    if (visited.has(cell.key)) continue;
+    const stack = [cell];
+    const region = [];
+    while (stack.length) {
+      const current = stack.pop();
+      if (visited.has(current.key)) continue;
+      visited.add(current.key);
+      region.push(current);
+      for (const [dr, dc] of directions) {
+        const neighborKey = `${current.row + dr}-${current.col + dc}`;
+        if (cellMap.has(neighborKey) && !visited.has(neighborKey)) {
+          stack.push(cellMap.get(neighborKey));
+        }
+      }
+    }
+    regions.push(region);
+  }
+  return regions;
+};
+export const isBottomMostInRegion = (rowIndex, colIndex, listSelectCell) => {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxRow = Math.max(...region.map(cell => cell.row));
+      return rowIndex === maxRow;
+    }
+  }
+  return false;
+};
+export const isTopMostInRegion = (rowIndex, colIndex, listSelectCell) => {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const minRow = Math.min(...region.map(cell => cell.row));
+      return rowIndex === minRow;
+    }
+  }
+  return false;
+};
+export function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxCol = Math.max(...region.map(cell => cell.col));
+      return colIndex === maxCol;
+    }
+  }
+  return false;
+}
+export function isEqualSet(setA, setB) {
+  if (setA.size !== setB.size) return false;
+  for (const item of setA) {
+    if (!setB.has(item)) return false;
+  }
+  return true;
+}
+export function isBottomMostInRanges(rowIndex, colIndex, regions) {
+  const ranges = regions.map(it => parseCells(it));
+  for (const region of ranges) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxRow = Math.max(...region.map(cell => cell.row));
+      return rowIndex === maxRow;
+    }
+  }
+  return false;
+}
+export const mergedSets = arr => {
+  return new Set(arr.flatMap(set => Array.from(set)));
+};

package/es/grid-component/number/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { IFormat } from "../type";
+type Props = {
+    t?: any;
+    format?: IFormat;
+    value: number | string | undefined;
+    onChange?: (values: any[]) => void;
+};
+declare const Number: (props: Props) => React.JSX.Element;
+export default Number;

package/es/grid-component/number/index.js

@@ -0,0 +1,39 @@
+import React, { Fragment } from "react";
+import { NumericFormat } from "react-numeric-component";
+import { Input } from "rc-master-ui";
+import { checkDecimalSeparator, checkThousandSeparator } from "../hooks";
+const Number = props => {
+  const {
+    t,
+    value,
+    format,
+    onChange
+  } = props;
+  const values = React.useMemo(() => [value], [value]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    ,
+    thousandSeparator: checkThousandSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: Input,
+    className: 'rounded-0 input-element',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue]);
+    }
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('Enter') : 'Enter',
+    autoFocus: true
+  }));
+};
+export default Number;

package/es/grid-component/styles.scss

@@ -26,6 +26,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
 .popup-context-menu {
   min-width: 200px;
+
+}
+.ant-dropdown-menu.popup-context-menu {
+  .ant-dropdown-menu-submenu {
+    .ant-dropdown-menu-submenu-title {
+      align-items: center;
+    }
+  }
 }
 
 // -------------- Table -------------
@@ -239,6 +247,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       .#{$prefix}-table-column-title {
         //display: flex;
       }
+
+      &.head-align-center {
+        text-align: center;
+      }
+      &.head-align-right {
+        text-align: right;
+      }
     }
   }