es-grid-template 1.9.71 → 1.9.73

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

@@ -1,10 +1,12 @@
 export declare const stateKeyResize = "columnResize";
 export declare const stateKeyFilter = "columnsFilter";
+export declare const stateKeyColumnFilter = "columnFilter";
 export declare const stateKeySorter = "columnsSorter";
 export declare const stateKeyVisible = "visible";
 export declare const stateKeyTooltip = "tooltip";
 export declare const stateKeyPagination = "pagination";
-export declare const stateKeyColumnFilter = "columnFilter";
+export declare const stateKeyVisibleKeys = "columnVisibleKeys";
+export declare const stateKeyGroupKeys = "columnGroupKeys";
 export declare const stateKeyFocusedCell = "focusedCell";
 export declare const stateKeyIsEditing = "isEditing";
 export declare const stateKeyStartPasteCell = "startPasteCell";

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

@@ -1,10 +1,13 @@
 export const stateKeyResize = 'columnResize';
-export const stateKeyFilter = 'columnsFilter';
+export const stateKeyFilter = 'columnsFilter'; // array all state
+export const stateKeyColumnFilter = 'columnFilter'; // current column filter state
+
 export const stateKeySorter = 'columnsSorter';
 export const stateKeyVisible = 'visible';
 export const stateKeyTooltip = 'tooltip';
 export const stateKeyPagination = 'pagination';
-export const stateKeyColumnFilter = 'columnFilter';
+export const stateKeyVisibleKeys = 'columnVisibleKeys';
+export const stateKeyGroupKeys = 'columnGroupKeys';
 
 // Key for Edit
 

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

@@ -24,4 +24,5 @@ export declare function updateOrInsert<T extends Row>(dataArray: T[], dataFilter
 export declare function filterVisibleColumns<T extends ColumnTable>(columns: T[]): 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 {};

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;
@@ -692,4 +695,8 @@ export function getVisibleColumnFields(columns) {
   };
   traverse(columns);
   return result;
-}
+}
+export const getOnlyInA = (a, b) => {
+  const setB = new Set(b);
+  return a.filter(item => !setB.has(item));
+};

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.d.ts

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

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.d.ts

@@ -12,7 +12,6 @@ declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual
     pipeline: TablePipeline;
     originData: any[];
     originColumns: any[];
-    setVisibleKeys: Dispatch<SetStateAction<any>>;
     useVirtual?: VirtualEnum | {
         horizontal?: VirtualEnum;
         vertical?: VirtualEnum;
@@ -22,5 +21,7 @@ declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual
     toolbarItemTopRight?: ToolbarItem[];
     toolbarItemsTop?: ToolbarItem[];
     toolbarItemsBottom?: ToolbarItem[];
+    isDataTree?: boolean;
+    setColumns: Dispatch<SetStateAction<any>>;
 } & React.RefAttributes<BaseTable>>;
 export default Grid;

package/lib/ali-table/Grid.js

@@ -23,6 +23,7 @@ var _styles2 = require("./base-table/styles");
 var _ColumnsConfig = require("../table-component/ColumnsConfig");
 var _utils = require("../table-component/hook/utils");
 var _utility = require("./utils/utility");
+var _constants = require("./utils/constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import type { TableProps } from "../table-component"
@@ -64,9 +65,11 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     onRowStyles,
     showColumnChoose,
     originColumns,
+    striped,
+    isDataTree,
     // columns,
     groupColumns,
-    setVisibleKeys,
+    // setVisibleKeys,
     footerDataSource,
     loading,
     useVirtual,
@@ -78,7 +81,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     toolbarItemsBottom,
     toolbarItemTopRight,
     toolbarItemsTop,
-    onChooseColumns
+    onChooseColumns,
+    setColumns
   } = props;
   const {
     cssVariables
@@ -169,12 +173,14 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, []);
   const triggerChangeColumns = (cols, keys, type) => {
     const abc = (0, _utility.getVisibleColumnFields)(cols);
-    setVisibleKeys(abc);
+    // setVisibleKeys(abc)
+    pipeline.setStateAtKey(_constants.stateKeyVisibleKeys, abc);
     if (type === 'cellClick') {
 
       //  setColumns(cols)
     } else {
-      //  setColumns(cols)
+      console.log('setColumns');
+      setColumns(cols);
       // pipeline.columns(cols)
 
       // const aa = flatColumns2(columns).map((it) => it.field)
@@ -353,6 +359,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         ...prevRowProps,
         className: (0, _classnames.default)(``, {
           [`${prefix}-grid-row-parent`]: row.children && row.children.length > 0 || Array.isArray(row.children),
+          [`${prefix}-grid-row-odd`]: !editAble && !isDataTree && striped && rowIndex % 2 === 1,
+          [`${prefix}-grid-row-even`]: !editAble && !isDataTree && striped && rowIndex % 2 === 0,
           'no-hover': editAble
         }),
         style: {