es-grid-template 1.9.71 → 1.9.72

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

@@ -202,8 +202,14 @@ function columnCustom(opts) {
       if (info.source === 'trigger') {
         if (newVisible) {
           const defaultFilterOption = defaultFilter?.find(it => it.field === column.field);
-          const filterValue = filterColumnState.filteredKeys === null ? [] : filterColumnState.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
-          const operator = filterColumnState.operator;
+
+          // Tìm trong filterState
+
+          const abc = filterState.find(it => it.field === column.field);
+
+          // const filterValue = filterColumnState.filteredKeys === null ? [] : (filterColumnState.filteredKeys ?? (defaultFilterOption?.filteredKeys ?? [])) as string[]
+          const filterValue = abc && abc.filteredKeys === null ? [] : abc?.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
+          const operator = abc?.operator;
           const operatorValue = operator ?? defaultFilterOption?.operator ?? (0, _utils2.getDefaultOperator)(column);
           pipeline.setStateAtKey(_constants.stateKeyColumnFilter, {
             operator: operatorValue,
@@ -223,7 +229,7 @@ function columnCustom(opts) {
             if (inputFilter) {
               inputFilter.focus();
             }
-          }, 100);
+          }, 20);
         } else {}
         triggerVisible(newVisible, column.field);
       }
@@ -284,9 +290,11 @@ function columnCustom(opts) {
           operator: filterColumnState.operator ?? undefined
         };
         const rs = (0, _hooks.updateArrayByKey)(filterState, currentFilter, 'field');
-        pipeline.setStateAtKey(_constants.stateKeyColumnFilter, {
-          ...currentFilter
-        });
+
+        // pipeline.setStateAtKey(stateKeyColumnFilter, {
+        //   ...currentFilter
+        // })
+
         pipeline.setStateAtKey(_constants.stateKeyFilter, rs);
         if (onFilter) {
           onFilter((0, _utils2.convertFilters)([...newFilterState]));
@@ -1267,7 +1275,7 @@ function columnCustom(opts) {
       const prevGetCellProps = col?.getCellProps;
       const headerCustomTooltip = col?.headerTooltip ?? (t ? t(col?.headerText) : col?.headerText);
       const htmlTooltip = headerCustomTooltip;
-      const headerEditType = col.headerEditType;
+      const headerEditType = col.headerEditType ?? col.editType;
       const headerRowIndex = params.path.findIndex(it => it.field === col.field);
       const headerRowId = `header-field-${headerRowIndex}`;
 
@@ -1277,6 +1285,7 @@ function columnCustom(opts) {
         [col.field]: headerData?.[col.field] ?? ''
       };
       const headerValue = headerData?.[col.field] ?? '';
+      const headerContent = (0, _useColumns.renderValueCell)(col, headerValue, {}, -1, startIndex, format, false);
       const cellHeaderEditing = isEditing.editing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
       const isCellSelect = headerRowId === focusedCell.rowId && startCell?.colId === col.field;
       const aa = (0, _utils3.getColumnsAtLevel)(originCols, headerRowIndex);
@@ -1288,23 +1297,7 @@ function columnCustom(opts) {
         ...col,
         lock: !!col.fixed,
         width: sizes[startIndex],
-        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: "ui-rc-grid-filter-column d-flex",
-          style: {
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "ui-rc-table-column-title",
-          style: {}
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(`${prefix}-grid-cell`, {
-            [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
-            [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
-            [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
-            [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
-          })
-        }, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
+        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
           column: col,
           editType: headerEditType ?? 'text',
           record: headerRecord,
@@ -1328,7 +1321,23 @@ function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : headerEditAble && col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerValue) : col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle))), !col.headerEditEnable && (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
+        })) : /*#__PURE__*/_react.default.createElement("div", {
+          className: "ui-rc-grid-filter-column d-flex",
+          style: {
+            justifyContent: 'space-between',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "ui-rc-table-column-title",
+          style: {}
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+            [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+            [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+            [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
+            [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
+          })
+        }, headerEditAble && col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerContent) : col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle))), (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
           className: "ui-rc-header-trigger d-flex gap-50"
         }, canSort && /*#__PURE__*/_react.default.createElement("div", {
           style: {
@@ -1398,6 +1407,7 @@ function columnCustom(opts) {
           className: (0, _classnames.default)('', {
             [`header-cell-editable`]: col.headerEditEnable,
             [`${prefix}-grid-cell-selected`]: !cellHeaderEditing && isCellSelect,
+            'cell-editing': cellHeaderEditing,
             'cell-border-top': !cellHeaderEditing && isCellSelect,
             'cell-border-bottom': !cellHeaderEditing && isCellSelect,
             'cell-border-right': !cellHeaderEditing && isCellSelect,
@@ -1501,6 +1511,9 @@ 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 ?? '') ? '' : (0, _useColumns.renderValueCell)(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,

package/lib/ali-table/pipeline/features/hiddenColumns.d.ts

@@ -1,6 +1,7 @@
 import type { TablePipeline } from '../pipeline';
 export interface HiddenColumnsOptions {
     columns: any[];
+    groupColumns?: any[];
     visibleKeys?: any[];
 }
 export declare function hiddenColumns(opts: HiddenColumnsOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/ali-table/pipeline/features/hiddenColumns.js

@@ -4,19 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hiddenColumns = hiddenColumns;
+var _constants = require("../../utils/constants");
 var _convertColumnsChoose = require("../../utils/convertColumnsChoose");
+var _utility = require("../../utils/utility");
 // const stateKey = 'pagination'
 
 function hiddenColumns(opts) {
   return function visibleClumns(pipeline) {
     const {
       columns,
-      visibleKeys
+      visibleKeys,
+      groupColumns
     } = opts;
-    pipeline.columns(processDataSource(columns, visibleKeys));
+    const abc = pipeline.getStateAtKey(_constants.stateKeyVisibleKeys) ?? visibleKeys ?? [];
+    const group = pipeline.getStateAtKey(_constants.stateKeyGroupKeys) ?? groupColumns ?? [];
+    const rs = (0, _utility.getOnlyInA)(abc, group);
+    pipeline.columns(processDataSource(columns, rs));
     return pipeline;
     function processDataSource(cols, keys) {
-      if (!keys) {
+      if (!keys || keys && keys.length === 0) {
         return cols;
       }
       return (0, _convertColumnsChoose.filterColumnsByField)(cols, keys ?? []);

package/lib/ali-table/pipeline/features/treeSelect.js

@@ -226,7 +226,7 @@ function treeSelect(opts) {
           return {
             style: {
               // cursor: 'not-allowed',
-              padding: 0
+              paddingBlock: 0
             }
           };
         }
@@ -237,14 +237,14 @@ function treeSelect(opts) {
           return {
             style: {
               cursor: 'not-allowed',
-              padding: 0
+              paddingBlock: 0
             }
           };
         }
         return (0, _utils2.mergeCellProps)(prevCellProps, {
           style: {
             cursor: 'pointer',
-            padding: 0
+            paddingBlock: 0
           },
           onClick(e) {
             if (opts.stopClickEventPropagation) {

package/lib/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/lib/ali-table/utils/constants.js

@@ -3,14 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyEditCellSettings = exports.stateKeyColumnFilter = void 0;
+exports.stateKeyVisibleKeys = exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyGroupKeys = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyEditCellSettings = exports.stateKeyColumnFilter = void 0;
 const stateKeyResize = exports.stateKeyResize = 'columnResize';
-const stateKeyFilter = exports.stateKeyFilter = 'columnsFilter';
+const stateKeyFilter = exports.stateKeyFilter = 'columnsFilter'; // array all state
+const stateKeyColumnFilter = exports.stateKeyColumnFilter = 'columnFilter'; // current column filter state
+
 const stateKeySorter = exports.stateKeySorter = 'columnsSorter';
 const stateKeyVisible = exports.stateKeyVisible = 'visible';
 const stateKeyTooltip = exports.stateKeyTooltip = 'tooltip';
 const stateKeyPagination = exports.stateKeyPagination = 'pagination';
-const stateKeyColumnFilter = exports.stateKeyColumnFilter = 'columnFilter';
+const stateKeyVisibleKeys = exports.stateKeyVisibleKeys = 'columnVisibleKeys';
+const stateKeyGroupKeys = exports.stateKeyGroupKeys = 'columnGroupKeys';
 
 // Key for Edit
 

package/lib/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/lib/ali-table/utils/utility.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.addRowIdArray = void 0;
 exports.filterDataByColumns1 = filterDataByColumns1;
 exports.filterVisibleColumns = filterVisibleColumns;
-exports.getMaxDepth = exports.flattenArray = void 0;
+exports.getOnlyInA = exports.getMaxDepth = exports.flattenArray = void 0;
 exports.getVisibleColumnFields = getVisibleColumnFields;
 exports.sortByType = exports.shouldIncludeOptimized = void 0;
 exports.sortData = sortData;
@@ -715,4 +715,9 @@ function getVisibleColumnFields(columns) {
   };
   traverse(columns);
   return result;
-}
+}
+const getOnlyInA = (a, b) => {
+  const setB = new Set(b);
+  return a.filter(item => !setB.has(item));
+};
+exports.getOnlyInA = getOnlyInA;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.71",
+  "version": "1.9.72",
   "description": "es-grid-template",
   "keywords": [
     "react",