es-grid-template 1.8.28 → 1.8.29

package/es/table-component/header/TableHeadCell2.js

@@ -9,7 +9,7 @@ import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';
 import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
-import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { excludeItems, extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
@@ -38,9 +38,11 @@ const TableHeadCell2 = props => {
     setFilterChange,
     wrapSettings,
     selectionSettings,
+    isSelectionChange,
     setIsSelectionChange,
     id,
-    locale
+    locale,
+    format
   } = useContext(TableContext);
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -110,9 +112,15 @@ const TableHeadCell2 = props => {
     if (info.source === 'trigger') {
       if (newVisible) {
         const filterValue = column.getFilterValue() ?? [];
-        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
+        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column.columnDef?.meta ?? {});
         setSelectedKeys(filterValue);
         column.setFilterOperator?.(operatorValue);
+        setTimeout(() => {
+          const inputFilter = document.querySelector('.filter-input');
+          if (inputFilter) {
+            inputFilter.focus();
+          }
+        }, 200);
       } else {}
       triggerVisible(newVisible);
     }
@@ -144,10 +152,7 @@ const TableHeadCell2 = props => {
     destroyPopupOnHide: true,
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
-
-      // const operatorValue = (column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
-
-      const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column.columnDef?.meta ?? {});
+      const operatorValue = column.getFilterOperator() ?? getDefaultOperator(originalColumn);
       const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         // className='ui-rc-table-filter-dropdown'
@@ -159,7 +164,7 @@ const TableHeadCell2 = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/React.createElement("div", null), column.columnDef.meta?.showOperator !== false && column.columnDef.meta?.typeFilter !== 'DateRange' && column.columnDef.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null), column.columnDef?.meta?.showOperator !== false && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),
@@ -178,7 +183,10 @@ const TableHeadCell2 = props => {
       }, renderFilter({
         column: column.columnDef,
         selectedKeys,
-        setSelectedKeys
+        setSelectedKeys,
+        doFilter,
+        format
+
         // selectedKeys: (column.getFilterValue() ?? []) as string[],
         // setSelectedKeys: column.setFilterValue,
       })), /*#__PURE__*/React.createElement(Space, {
@@ -253,15 +261,33 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
   }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
-    checked: table.getIsAllRowsSelected(),
-    indeterminate: table.getIsSomeRowsSelected(),
+    checked: table.getIsAllRowsSelected()
+    // indeterminate={table.getIsSomeRowsSelected()}
+    ,
+    indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {
-      setIsSelectionChange({
-        isChange: true,
-        type: 'all',
-        rowData: {}
-      });
       table.getToggleAllRowsSelectedHandler()(e);
+      const aa = isSelectionChange?.rowsData ?? [];
+      if (table.getIsAllRowsSelected()) {
+        const dd = table.getRowModel().flatRows;
+        const cc = excludeItems(aa, dd);
+        setIsSelectionChange({
+          isChange: true,
+          type: 'all',
+          rowData: {},
+          rowsData: cc
+        });
+      } else {
+        aa.concat(table.getRowModel().flatRows);
+        const bb = table.getRowModel().flatRows;
+        const abc = [...aa, ...bb];
+        setIsSelectionChange({
+          isChange: true,
+          type: 'all',
+          rowData: {},
+          rowsData: abc
+        });
+      }
     }
   }), column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-column-title",

package/es/table-component/header/TableHeadGroupCell.js

@@ -252,7 +252,8 @@ const TableHeadGroupCell = props => {
       setIsSelectionChange({
         isChange: true,
         type: 'all',
-        rowData: {}
+        rowData: {},
+        rowsData: []
       });
       table.getToggleAllRowsSelectedHandler()(e);
     }

package/es/table-component/header/renderFilter.d.ts

@@ -5,7 +5,6 @@ type RenderFilterProps<RecordType> = {
     column: ColumnDef<RecordType, unknown>;
     selectedKeys: any[];
     setSelectedKeys: (keys: any[]) => void;
-    confirm?: () => void;
     t?: any;
     locale?: any;
     dataSourceFilter?: {
@@ -15,6 +14,7 @@ type RenderFilterProps<RecordType> = {
     format?: IFormat;
     buddhistLocale?: any;
     dateRangeLocale?: any;
+    doFilter?: (type: boolean) => void;
 };
 export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
 export {};

package/es/table-component/header/renderFilter.js

@@ -15,13 +15,14 @@ export const renderFilter = args => {
     column,
     selectedKeys,
     setSelectedKeys,
-    confirm,
+    // confirm,
     t,
     locale,
     buddhistLocale,
     dateRangeLocale,
     dataSourceFilter,
-    format
+    format,
+    doFilter
   } = args;
   const {
     format: columnFormat,
@@ -45,7 +46,8 @@ export const renderFilter = args => {
         value: selectedKeys[0],
         onChange: vals => {
           setSelectedKeys(vals);
-        }
+        },
+        onPressEnter: () => doFilter?.(true)
       }))));
     case 'NumberRange':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
@@ -54,7 +56,8 @@ export const renderFilter = args => {
         max: selectedKeys[1],
         onChange: vals => {
           setSelectedKeys(vals);
-        }
+        },
+        onPressEnter: () => doFilter?.(true)
       })));
     case 'Date':
       const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
@@ -269,13 +272,18 @@ export const renderFilter = args => {
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Input, {
+        className: "aaaa",
+        classNames: {
+          input: 'filter-input'
+        },
         placeholder: t ? t('Search') : `Search`,
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
-        onPressEnter: () => confirm?.(),
+        onPressEnter: () => doFilter?.(true),
         allowClear: true
+        // autoFocus={true}
       }))));
   }
 };

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

@@ -213,16 +213,16 @@ export const optionFontSize = [{
   label: '48'
 }];
 
-/**
- * Sort order for BaseTable
+/**
+ * Sort order for BaseTable
  */
 const SortOrder = {
-  /**
-   * Sort data in ascending order
+  /**
+   * Sort data in ascending order
    */
   ascend: 'Ascending',
-  /**
-   * Sort data in descending order
+  /**
+   * Sort data in descending order
    */
   descend: 'Descending'
 };

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

@@ -96,7 +96,7 @@ export function convertToTanStackColumns({
       allowResizing,
       minWidth,
       template,
-      allowSorter,
+      allowSortering,
       allowFiltering
     } = col;
     const {
@@ -149,7 +149,7 @@ export function convertToTanStackColumns({
       sortDescFirst: false,
       minSize: minWidth,
       // maxSize: maxWidth,
-      enableSorting: allowSorter !== false || col.sorter !== false,
+      enableSorting: allowSortering !== false || col.sorter !== false,
       // enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
       enableColumnFilter: allowFiltering !== false
     };

package/es/table-component/hook/utils.d.ts

@@ -141,3 +141,10 @@ export declare function isTreeArray(arr: any[], options?: any): boolean;
 export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
 export declare function updateWidthsByOther(source: any[], target: any[]): any[];
 export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
+export declare function parseExcelText(text: string): string[][];
+export declare function parseExcelClipboard(e: React.ClipboardEvent): string[][];
+export declare function parseExcelClipboardText(text: string): string[][];
+export declare function parseClipboardEvent(e: ClipboardEvent | React.ClipboardEvent): string[][];
+export declare function arraysEqualIgnoreOrderFast(a: any[], b: any[]): boolean;
+export declare function filterByIds(a: any[], b: any[]): any[];
+export declare function excludeItems(arrayA: any[], arrayB: any[]): any[];

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

@@ -2038,4 +2038,137 @@ export function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
   }
   dig(data);
   return keys;
+}
+export function parseExcelText(text) {
+  // const text = e.clipboardData?.getData('text/plain') ?? '';
+  if (!text) return [];
+
+  // Excel thường dùng \r\n giữa dòng, \t giữa cột
+  const rows = text.split(/\r?\n/) // tách theo dòng
+  .filter(r => r.trim() !== '') // bỏ dòng trống
+  .map(row => row.split('\t') // tách theo cột
+  .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
+  );
+  return rows;
+}
+export function parseExcelClipboard(e) {
+  const text = e.clipboardData?.getData('text/plain') ?? '';
+  if (!text) return [];
+
+  // Excel thường dùng \r\n giữa dòng, \t giữa cột
+  const rows = text.split(/\r?\n/) // tách theo dòng
+  .filter(r => r.trim() !== '') // bỏ dòng trống
+  .map(row => row.split('\t') // tách theo cột
+  .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
+  );
+  return rows;
+}
+export function parseExcelClipboardText(text) {
+  const rows = [];
+  let curRow = [];
+  let curCell = '';
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (ch === '"') {
+      // "" -> an escaped quote inside quoted field
+      if (inQuotes && text[i + 1] === '"') {
+        curCell += '"';
+        i++; // skip next
+      } else {
+        inQuotes = !inQuotes; // open/close quote
+      }
+      continue;
+    }
+
+    // tab as column separator (only if not inside quotes)
+    if (ch === '\t' && !inQuotes) {
+      curRow.push(curCell);
+      curCell = '';
+      continue;
+    }
+
+    // newline as row separator (handle \r\n and lone \r or \n), only outside quotes
+    if ((ch === '\r' || ch === '\n') && !inQuotes) {
+      // handle CRLF
+      if (ch === '\r' && text[i + 1] === '\n') i++;
+      curRow.push(curCell);
+      curCell = '';
+      rows.push(curRow);
+      curRow = [];
+      continue;
+    }
+
+    // normal character
+    curCell += ch;
+  }
+
+  // push last cell/row (if any)
+  // avoid adding one spurious empty row when text ends with newline (we already pushed that row)
+  if (curCell !== '' || curRow.length > 0) {
+    curRow.push(curCell);
+    rows.push(curRow);
+  }
+
+  // if the whole input was empty, return []
+  if (rows.length === 1 && rows[0].length === 1 && rows[0][0] === '' && text.trim() === '') {
+    return [];
+  }
+  return rows;
+}
+export function parseClipboardEvent(e) {
+  const dataTransfer = e.clipboardData ?? e.nativeEvent?.clipboardData;
+  if (!dataTransfer) return [];
+
+  // 1) try HTML (better fidelity for Excel)
+  const html = dataTransfer.getData?.('text/html');
+  if (html) {
+    try {
+      const doc = new DOMParser().parseFromString(html, 'text/html');
+      const table = doc.querySelector('table');
+      if (table) {
+        const result = [];
+        for (const tr of Array.from(table.rows)) {
+          const row = [];
+          for (const cell of Array.from(tr.cells)) {
+            // innerText preserves newlines from <br>
+            row.push(cell.innerText ?? '');
+          }
+          result.push(row);
+        }
+        if (result.length) return result;
+      }
+    } catch {
+      // fallback to text parsing
+    }
+  }
+
+  // 2) fallback: parse plain text (TSV with quoted fields)
+  const text = dataTransfer.getData?.('text/plain') ?? '';
+  return parseExcelClipboardText(text);
+}
+export function arraysEqualIgnoreOrderFast(a, b) {
+  if (a.length !== b.length) return false;
+  const count = Object.create(null);
+  for (let i = 0; i < a.length; i++) {
+    const key = a[i];
+    count[key] = (count[key] || 0) + 1;
+  }
+  for (let i = 0; i < b.length; i++) {
+    const key = b[i];
+    if (!count[key]) return false;
+    count[key]--;
+    if (count[key] === 0) delete count[key];
+  }
+  return Object.keys(count).length === 0;
+}
+export function filterByIds(a, b) {
+  const idSet = new Set(a);
+  return b.filter(item => idSet.has(item.id));
+}
+export function excludeItems(arrayA, arrayB) {
+  const idsInB = new Set(arrayB.map(item => item.id));
+
+  // Lọc A, chỉ giữ lại phần tử không có trong B
+  return arrayA.filter(item => !idsInB.has(item.id));
 }