es-grid-template 1.9.72 → 1.9.74

package/es/ali-table/pipeline/features/columnCustom.js

@@ -9,12 +9,13 @@ import { booleanOperator, findItemPath, isEditable, isObjEmpty, nonActionColumn,
 import classNames from 'classnames';
 import { Dropdown, Select, Space, Button } from 'rc-master-ui';
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject,
+// findFirst,
 // flattenArray,
 flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getEditType, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3,
 // getRowIndexMap,
 getSelectedCellMatrix1, getTypeFilter,
 // isObjEqual,
-newGuid } from "../../../table-component/hook/utils";
+newGuid, unFlattenData, updateOrInsert } from "../../../table-component/hook/utils";
 import { renderFilter } from "../../base-table/renderFilter";
 import { renderValueCell } from "../../../table-component/hook/useColumns";
 import EditCell from "../../base-table/cell/EditCell";
@@ -23,7 +24,7 @@ import { stateKeyResize, stateKeyColumnFilter, stateKeyFilter, stateKeyPaginatio
 //  state For edit
 stateKeyEndCell, stateKeyEndPasteCell, stateKeyStartCell, stateKeyStartPasteCell, stateKeyFocusedCell, stateKeyEditCellSettings, stateKeyIsEditing, stateKeyIsPasting, stateKeyIsSelecting } from "../../utils/constants";
 import { getColumnsAtLevel } from "../../base-table/utils";
-import { unFlattenData, updateOrInsert } from "../../utils/utility";
+// import { unFlattenData } from '../../utils/utility';
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -50,6 +51,7 @@ export function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
+    dataFlatten,
     isDataTree,
     defaultSorter,
     defaultFilter,
@@ -440,7 +442,7 @@ export function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -508,7 +510,7 @@ export function columnCustom(opts) {
       }
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = updateOrInsert(allRows, newData);
+      const rsFilterData = updateOrInsert(dataFlatten, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(stateKeyEndCell, endPasteCell);
@@ -535,7 +537,7 @@ export function columnCustom(opts) {
       const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowsPasteId.length) : addRowsDown(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = allRows;
+      const newData = dataFlatten;
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
         const targetRow = pasteState?.startRowIndex + rowIndex1;
@@ -557,7 +559,7 @@ export function columnCustom(opts) {
       });
 
       // const rsFilterData = updateOrInsert(dataSource, newData)
-      const rsFilterData = updateOrInsert(dataSource, newData);
+      const rsFilterData = updateOrInsert(dataFlatten, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
     };
@@ -1061,6 +1063,73 @@ export function columnCustom(opts) {
       pipeline.setStateAtKey(stateKeyEndCell, cellEnd);
       triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
     };
+
+    // cell Số thứ tự
+
+    const handleMouseDownIndex = rowId => {
+      // setIsSelecting?.(true);
+      pipeline.setStateAtKey(stateKeyIsSelecting, true);
+      const allColumns = allCols.filter(it => !nonActionColumn.includes(it.field));
+
+      // const firstCOlSpin = findFirst(allColumns)
+
+      const startCol = allColumns[0].field;
+      const endCol = allColumns[allColumns.length - 1].field;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      // setEndCell?.({ rowId, colId: endCol });
+
+      pipeline.setStateAtKey(stateKeyStartCell, {
+        rowId,
+        colId: startCol
+      });
+      pipeline.setStateAtKey(stateKeyEndCell, {
+        rowId,
+        colId: endCol
+      });
+
+      // if (firstCOlSpin) {
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlSpin.id })
+      // } else {
+      //   const firstCOlVisible = allColumns[0]
+      //   setFocusedCell?.({ rowId: cell.row.id, colId: firstCOlVisible.id })
+      // }
+      pipeline.setStateAtKey(stateKeyFocusedCell, {
+        rowId,
+        colId: startCol
+      });
+
+      // setRangeState?.(getSelectedCellMatrix(table, { rowId, colId: startCol }, { rowId, colId: endCol }))
+    };
+    const handleMouseEnterIndex = rowId => {
+      if (isSelecting) {
+        const allColumns = allCols.filter(it => !nonActionColumn.includes(it.field));
+
+        // const firstCOl = findFirst(allColumns)
+
+        // const startCol = allColumns[0].id
+        const endCol = allColumns[allColumns.length - 1].field;
+
+        //  // setStartCell?.({ rowId, colId: startCol });
+        // setEndCell?.({ rowId, colId: endCol });
+        pipeline.setStateAtKey(stateKeyEndCell, {
+          rowId,
+          colId: endCol
+        });
+      }
+    };
+    const handleMouseUpIndex = () => {
+      // setIsSelecting?.(false);
+
+      pipeline.setStateAtKey(stateKeyIsSelecting, false);
+
+      // const selectState = getSelectedCellMatrix(table, startCell, endCell)
+
+      // if (!isObjEqual(rangeState, selectState)) {
+
+      //   setRangeState?.(selectState)
+      // }
+    };
     pipeline.mapColumns(makeRecursiveMapper((col, params) => {
       const {
         startIndex,
@@ -1213,6 +1282,7 @@ export function columnCustom(opts) {
       // cell Index
       if (col.field === '#') {
         const prevContent = col.template;
+        const prevGetCellProps = col?.getCellProps;
         return {
           ...col,
           lock: !!col.fixed,
@@ -1247,7 +1317,73 @@ export function columnCustom(opts) {
               overflow: 'visible',
               position: 'relative'
             }
-          })
+          }),
+          getCellProps(value, record, rowIndex) {
+            const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
+
+            // const isCellSelected = (!startCell || !endCell) ? false : selectRowIds.includes(record.rowId) && cols.includes(col.field);
+
+            return mergeCellProps(prevCellProps, {
+              // @ts-ignore
+              'data-col-key': col.field,
+              ref: el => {
+                if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing.editing) {
+                  el?.focus({
+                    preventScroll: true
+                  });
+                }
+              },
+              style: {
+                ...prevCellProps?.style,
+                userSelect: 'none'
+                // padding: cellEditing ? 0 : undefined
+                // ...cellStyles,
+              },
+              className: classNames(prevCellProps?.className, `${prefix}-grid-cell`, {
+                [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+                [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+                [`${prefix}-grid-cell-text-center`]: col?.textAlign === 'center',
+                [`${prefix}-grid-cell-text-right`]: col?.textAlign === 'right' || col.type === 'number',
+                [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(record.rowId),
+                'no-hover': editAble
+
+                // isValid: !isEditing && rowError && rowError[col.field]?.field === col.field,
+                // [`${prefix}-grid-cell-selected`]: isCellSelected,
+              }),
+              onMouseDown: e => {
+                prevCellProps?.onMouseDown?.(e);
+                if (editAble) {
+                  // if (record[rowKey] === editingKey) {
+                  if (isEditing.editing) {
+                    // setFocusedCell?.({ rowId: cell.row.id, colId: cell.column.id })
+                  } else {
+                    handleMouseDownIndex(record.rowId);
+                    if (isEditing.editing) {
+                      setTimeout(() => {
+                        // setEditingKey?.('')
+                        pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
+                        reset?.();
+                      });
+                    }
+                  }
+                }
+              },
+              onMouseEnter: e => {
+                prevCellProps?.onMouseEnter?.(e);
+                // Edit
+
+                if (editAble) {
+                  handleMouseEnterIndex(record.rowId);
+                }
+              },
+              onMouseUp: e => {
+                prevCellProps?.onMouseUp?.(e);
+                if (editAble) {
+                  handleMouseUpIndex();
+                }
+              }
+            });
+          }
         };
       }
 
@@ -1514,9 +1650,6 @@ export function columnCustom(opts) {
         }),
         getCellProps(value, record, rowIndex) {
           const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
-
-          // console.log('record', record)
-
           const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : renderValueCell(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,

package/es/ali-table/utils/utility.d.ts

@@ -25,4 +25,15 @@ export declare function filterVisibleColumns<T extends ColumnTable>(columns: T[]
 export declare const sortByType: (arr: ColumnTable[], rowDnd?: RowDnd) => ColumnTable[];
 export declare function getVisibleColumnFields<T extends ColumnTable>(columns: T[]): string[];
 export declare const getOnlyInA: (a: string[], b: string[]) => string[];
+export declare const buildParentMap: <T extends {
+    id: string;
+    rowId: string;
+    children?: T[];
+}>(tree: T[]) => Map<string, T>;
+export declare const flattenTree: <T extends {
+    children?: T[];
+}>(tree: T[]) => T[];
+export declare const flattenTree2: <T extends {
+    children?: T[];
+}>(tree: T[]) => Omit<T, 'children'>[];
 export {};

package/es/ali-table/utils/utility.js

@@ -94,6 +94,9 @@ export const shouldIncludeOptimized = (item, queries, ignoreAccents = true) => {
         case 'contains':
           condition = ignoreAccents === false ? itemValue?.includes(value) : itemStr.includes(compareValue);
           break;
+        case 'notcontains':
+          condition = ignoreAccents === false ? !itemValue?.includes(value) : !itemStr.includes(compareValue);
+          break;
         case 'startswith':
           condition = ignoreAccents === false ? itemValue?.startsWith(value) : itemStr.startsWith(compareValue);
           break;
@@ -696,4 +699,53 @@ export function getVisibleColumnFields(columns) {
 export const getOnlyInA = (a, b) => {
   const setB = new Set(b);
   return a.filter(item => !setB.has(item));
+};
+export const buildParentMap = tree => {
+  const parentMap = new Map();
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const children = node.children;
+    if (!children?.length) continue;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      parentMap.set(child.rowId, node);
+      stack.push(child);
+    }
+  }
+  return parentMap;
+};
+export const flattenTree = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    result.push(node);
+    const children = node.children;
+    if (children?.length) {
+      // Push ngược để giữ nguyên thứ tự tree
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
+};
+export const flattenTree2 = tree => {
+  const result = [];
+  const stack = [...tree];
+  while (stack.length) {
+    const node = stack.pop();
+    const {
+      children,
+      ...item
+    } = node;
+    result.push(item);
+    if (children?.length) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push(children[i]);
+      }
+    }
+  }
+  return result;
 };

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

@@ -37,6 +37,10 @@ export const stringOperator = [{
   value: 'contains',
   key: '~=',
   label: 'Contains'
+}, {
+  value: 'notcontains',
+  key: '!~=',
+  label: 'Does not contain'
 }, {
   value: 'equal',
   key: '==',

package/es/group-component/hook/useColumns.js

@@ -204,12 +204,12 @@ export const toggleRowSelection = props => {
     } else {
       // chưa selected
 
-      const checkedRows = [...prevSelected, row];
+      const checkedRows = [...prevSelected, row.original];
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',
         rowData: row.original,
-        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
+        rowsData: selectionSettings?.type === 'single' ? [row.original] : checkedRows
       });
     }
     return;

package/es/group-component/hook/utils.js

@@ -801,6 +801,9 @@ export const shouldInclude = (item, queries) => {
       case "contains":
         condition = itemStr?.includes(queryStr);
         break;
+      case "notcontains":
+        condition = !itemStr?.includes(queryStr);
+        break;
       case "startswith":
         condition = itemStr?.startsWith(queryStr);
         break;

package/es/table-component/ColumnsConfig.js

@@ -60,6 +60,7 @@ export const ColumnsConfig = props => {
   };
   const handleAccept = () => {
     triggerChangeColumns?.(tmpColumn, [], 'columnChoose');
+    setCurrentRow('');
     onClose();
   };
   const handleChange = newElemt => {
@@ -109,10 +110,11 @@ export const ColumnsConfig = props => {
         return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Input, {
           defaultValue: value,
           allowClear: true,
+          autoFocus: true,
           onBlur: e => {
             const newData = {
               ...rowData,
-              visible: e.target.value
+              headerText: e.target.value
             };
             handleChange(newData);
           }
@@ -209,7 +211,7 @@ export const ColumnsConfig = props => {
       } = args;
       if (currentRow === rowData.field) {
         return /*#__PURE__*/React.createElement(InputNumber, {
-          defaultValue: value,
+          defaultValue: value ?? 150,
           style: {
             width: '100%'
           },
@@ -217,13 +219,13 @@ export const ColumnsConfig = props => {
           onBlur: e => {
             const newData = {
               ...rowData,
-              visible: e.target.value
+              width: e.target.value ? Number(e.target.value) : 150
             };
             handleChange(newData);
           }
         });
       }
-      return /*#__PURE__*/React.createElement("span", null, value);
+      return /*#__PURE__*/React.createElement("span", null, value ?? 150, "px");
     }
   }];
   const handleReset = () => {

package/es/table-component/TableContainer.js

@@ -359,6 +359,7 @@ const TableContainer = props => {
     summary: summary,
     dataSource: dataSource,
     infiniteScroll: infiniteScroll,
+    pagination: pagination,
     next: next,
     loading: loading,
     columnVirtualizer: columnVirtualizer,

package/es/table-component/TableContainerEdit.js

@@ -2274,6 +2274,7 @@ const TableContainerEdit = props => {
     summary: summary,
     dataSource: dataSource,
     infiniteScroll: infiniteScroll,
+    pagination: pagination,
     next: next,
     loading: loading,
     columnVirtualizer: columnVirtualizer,

package/es/table-component/hook/utils.js

@@ -1069,6 +1069,9 @@ export const shouldInclude = (item, queries, ignoreAccents) => {
       case "contains":
         condition = ignoreAccents === false ? itemValue?.includes(value) : itemStr?.includes(queryStr);
         break;
+      case "notcontains":
+        condition = ignoreAccents === false ? !itemValue?.includes(value) : !itemStr?.includes(queryStr);
+        break;
       case "startswith":
         condition = ignoreAccents === false ? itemValue?.startsWith(value) : itemStr?.startsWith(queryStr);
         break;

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

@@ -64,8 +64,8 @@ const Grid = props => {
   const [columnResizeMode] = React.useState('onChange');
   const [columnResizeDirection] = React.useState('ltr');
   const [paginationState, setPagination] = React.useState({
-    pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
-    pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
+    pageIndex: pagination && pagination?.currentPage ? pagination.currentPage - 1 : 0,
+    pageSize: pagination && pagination?.pageSize ? pagination.pageSize : 20
   });
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})

package/es/table-component/table/TableWrapper.js

@@ -7,7 +7,6 @@ import { Tooltip } from "react-tooltip";
 import ContextMenu from "../ContextMenu";
 import React, { useContext } from "react";
 import { TableContext } from "../useContext";
-import { isNullOrUndefined } from "../hook/utils";
 const TableWrapper = props => {
   const {
     id,
@@ -40,6 +39,12 @@ const TableWrapper = props => {
   const menuRef = React.useRef(null);
   const loadingRef = React.useRef(false);
   const hasMoreRef = React.useRef(true);
+  const pendingPageRef = React.useRef(null);
+  const pendingDataLengthRef = React.useRef(0);
+  const sawLoadingRef = React.useRef(false);
+  const lastScrollTopRef = React.useRef(0);
+  // const directionRef = React.useRef<'up' | 'down' | null>(null);
+
   const {
     windowSize
   } = useContext(TableContext);
@@ -48,6 +53,23 @@ const TableWrapper = props => {
     pageSize,
     total
   } = pagination ?? {};
+  React.useEffect(() => {
+    if (pendingPageRef.current === null) {
+      return;
+    }
+    if (loading) {
+      sawLoadingRef.current = true;
+      return;
+    }
+    const pageLoaded = currentPage >= pendingPageRef.current;
+    const dataLoaded = dataSource.length !== pendingDataLengthRef.current;
+    const requestFinished = sawLoadingRef.current;
+    if (pageLoaded || dataLoaded || requestFinished) {
+      loadingRef.current = false;
+      pendingPageRef.current = null;
+      sawLoadingRef.current = false;
+    }
+  }, [currentPage, dataSource.length, loading]);
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(undefined);
   const [position, setPosition] = React.useState({
@@ -74,46 +96,88 @@ const TableWrapper = props => {
   const loadData = page => {
     if (!hasMoreRef.current || loadingRef.current || loading) return;
     loadingRef.current = true;
-    setTimeout(() => {
-      next?.();
-      if (page * pageSize >= total) {
-        hasMoreRef.current = false;
-      }
-      loadingRef.current = false;
-    }, 10);
+    pendingPageRef.current = page;
+    pendingDataLengthRef.current = dataSource.length;
+    next?.();
+    if (pageSize && total && page * pageSize >= total) {
+      hasMoreRef.current = false;
+    }
   };
   const handleNext = () => {
     loadData(currentPage + 1);
   };
   const handleScroll = e => {
-    if (infiniteScroll) {
-      if (loadingRef.current || loading || dataSource?.length === 0) {
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-      const {
-        scrollHeight: tbScrollHeight,
-        scrollTop,
-        clientHeight
-      } = e.currentTarget;
-      const abc = clientHeight * (isNullOrUndefined(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0);
+    // if (infiniteScroll) {
+    //   const current = e.currentTarget.scrollTop;
+    //   const last = lastScrollTopRef.current;
 
-      // const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
-      const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
-      if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
-        handleNext();
-      }
+    //   if (loadingRef.current || loading || dataSource?.length === 0 || current === last) {
+
+    //     e.stopPropagation()
+    //     e.preventDefault()
+    //     return
+    //   }
+
+    //   const { scrollHeight: tbScrollHeight, scrollTop, clientHeight } = e.currentTarget;
+
+    //   const abc = clientHeight * (isNullOrUndefined(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0)
+
+    //   // const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+    //   const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
+
+    //   if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
+
+    //     handleNext()
+
+    //   }
+    // }
+
+    // if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
+    //   e.target.classList.add('ui-rc-table-ping-right')
+    // } else {
+    //   e.target.classList.remove('ui-rc-table-ping-right')
+    // }
+
+    // if ((e.target.scrollLeft ?? 0) > 0) {
+    //   e.target.classList.add('ui-rc-table-ping-left')
+    // } else {
+    //   e.target.classList.remove('ui-rc-table-ping-left')
+    // }
+
+    const target = e.currentTarget;
+
+    // Horizontal scroll
+    const {
+      scrollLeft,
+      clientWidth,
+      scrollWidth,
+      clientHeight
+    } = target;
+    target.classList.toggle('ui-rc-table-ping-left', scrollLeft > 0);
+    target.classList.toggle('ui-rc-table-ping-right', scrollLeft + clientWidth < scrollWidth);
+    if (!infiniteScroll) {
+      return;
+    }
+    const {
+      scrollTop,
+      scrollHeight
+    } = target;
+    const last = lastScrollTopRef.current;
+
+    // Update ngay
+    lastScrollTopRef.current = scrollTop;
+
+    // Chỉ xử lý khi scroll DOWN
+    if (scrollTop <= last) {
+      return;
     }
-    if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
-      e.target.classList.add('ui-rc-table-ping-right');
-    } else {
-      e.target.classList.remove('ui-rc-table-ping-right');
+    if (loadingRef.current || loading || !dataSource?.length || !hasMoreRef.current) {
+      return;
     }
-    if ((e.target.scrollLeft ?? 0) > 0) {
-      e.target.classList.add('ui-rc-table-ping-left');
-    } else {
-      e.target.classList.remove('ui-rc-table-ping-left');
+    const thresholdRatio = onEndReachedThreshold ?? 0.1;
+    const threshold = clientHeight * thresholdRatio;
+    if (scrollTop + clientHeight >= scrollHeight - threshold) {
+      handleNext();
     }
   };
   const onContextMenu = args => event => {

package/es/table-virtuoso/hook/utils.js

@@ -849,6 +849,9 @@ export const shouldInclude = (item, queries) => {
       case "contains":
         condition = itemStr?.includes(queryStr);
         break;
+      case "notcontains":
+        condition = !itemStr?.includes(queryStr);
+        break;
       case "startswith":
         condition = itemStr?.startsWith(queryStr);
         break;

package/lib/ali-table/Grid.js

@@ -179,7 +179,6 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
       //  setColumns(cols)
     } else {
-      console.log('setColumns');
       setColumns(cols);
       // pipeline.columns(cols)