es-grid-template 1.9.11 → 1.9.13

package/es/ali-table/InternalTable.js

@@ -5,13 +5,17 @@ import { useLocale } from "rc-master-ui/es/locale";
 import { faker } from "@faker-js/faker";
 import React from "react";
 import "./base-table/styles.scss";
-import { addRowIdArray, filterDataByColumns, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
+import { addRowIdArray, filterDataByColumns,
+// getInvisibleColumns, 
+getVisibleFields, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
 import { CustomProvider, ConfigProvider } from 'rc-master-ui';
 import { Modal } from 'antd';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
 import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
+// import { getInvisibleColumns } from "../group-component/hook/utils"
+
 const InternalTable = props => {
   const {
     t,
@@ -119,6 +123,14 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
+
+  // const columnInVisibility = React.useMemo(() => {
+  //   return getInvisibleColumns(columns)
+  // }, [columns])
+
+  const columnVisibility = React.useMemo(() => {
+    return getVisibleFields(columns);
+  }, [columns]);
   const pipeline = useTablePipeline({
     components: fusion
   }).input({
@@ -129,7 +141,9 @@ const InternalTable = props => {
   // .snapshot('flat')
   .use(features.hiddenColumns({
     columns,
-    visibleKeys
+    visibleKeys: visibleKeys ?? columnVisibility
+    // visibleKeys: ['name']
+    // visibleKeys
   })).use(features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,

package/es/ali-table/base-table/header.js

@@ -179,7 +179,9 @@ export default function TableHeader({
   const leftFlatCount = flat.left.length;
   const rightFlatCount = flat.right.length;
   const thead = headerRenderInfo.leveled.map((wrappedCols, level) => {
-    const headerCells = wrappedCols.map(wrapped => {
+    const headerCells = [];
+    let currentColIndex = 0;
+    for (const wrapped of wrappedCols) {
       if (wrapped.type === 'normal') {
         const {
           colIndex,
@@ -187,42 +189,43 @@ export default function TableHeader({
           isLeaf,
           col
         } = wrapped;
+        if (currentColIndex > colIndex) continue;
         const headerCellProps = col.headerCellProps ?? {};
+        const actualColSpan = headerCellProps.colSpan ?? colSpan;
         const positionStyle = {};
         if (colIndex < leftFlatCount) {
           positionStyle.position = 'sticky';
           positionStyle.left = stickyLeftMap.get(colIndex);
         } else if (colIndex >= fullFlatCount - rightFlatCount) {
           positionStyle.position = 'sticky';
-          positionStyle.right = stickyRightMap.get(colIndex + colSpan - 1);
+          positionStyle.right = stickyRightMap.get(colIndex + actualColSpan - 1);
         }
-        return /*#__PURE__*/React.createElement("th", _extends({
+        headerCells.push( /*#__PURE__*/React.createElement("th", _extends({
           key: colIndex
         }, headerCellProps, {
           className: cx(Classes.tableHeaderCell, headerCellProps.className, {
             first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
+            last: colIndex + actualColSpan === fullFlatCount,
             'lock-left': colIndex < leftFlatCount,
             'lock-right': colIndex >= fullFlatCount - rightFlatCount
           }),
-          colSpan: colSpan,
+          colSpan: actualColSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: {
             textAlign: col.textAlign,
             ...headerCellProps.style,
             ...positionStyle
           }
-        }), col.title ?? col.headerText);
+        }), col.title ?? col.headerText));
+        currentColIndex = colIndex + actualColSpan;
       } else {
         if (wrapped.width > 0) {
-          return /*#__PURE__*/React.createElement("th", {
+          headerCells.push( /*#__PURE__*/React.createElement("th", {
             key: wrapped.blankSide
-          });
-        } else {
-          return null;
+          }));
         }
       }
-    });
+    }
     return /*#__PURE__*/React.createElement("tr", {
       key: level,
       className: cx(Classes.tableHeaderRow, {

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

@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     sumGroup?: boolean;
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;

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

@@ -128,6 +128,7 @@ export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[
 export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
 export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];

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

@@ -1953,6 +1953,24 @@ export const getVisibleColumnKeys1 = columns => {
   const allParentKeys = getHiddenParentKeys1(columns);
   return allKeys.filter(item => !allParentKeys.includes(item));
 };
+export function getVisibleFields(columns) {
+  const result = [];
+  function traverse(nodes) {
+    for (const node of nodes) {
+      // nếu visible không phải false thì lấy field
+      if (node.visible !== false) {
+        result.push(node.field);
+      }
+
+      // nếu có children thì duyệt tiếp
+      if (node.children?.length) {
+        traverse(node.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+}
 export function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
   if (obj1 === obj2) return true;

package/es/table-component/style.scss

@@ -830,7 +830,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
   .ui-rc-toolbar-bottom {
     position: relative;
-    padding: .25rem 1rem;
+    padding: .25rem 0rem;
     background-color: #ffffff;
 
     // &::before {

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

@@ -294,8 +294,8 @@ const Grid = props => {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
       backgroundColor: theme?.backgroundColor ?? undefined,
-      transition: 'max-height 0.3s ease',
-      overflow: 'hidden'
+      transition: 'max-height 0.3s ease'
+      // overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
     collisionDetection: closestCenter,

package/lib/ali-table/InternalTable.js

@@ -21,6 +21,8 @@ var _Grid = _interopRequireDefault(require("./Grid"));
 var _selected = require("./utils/selected");
 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 { getInvisibleColumns } from "../group-component/hook/utils"
+
 const InternalTable = props => {
   const {
     t,
@@ -128,6 +130,14 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
+
+  // const columnInVisibility = React.useMemo(() => {
+  //   return getInvisibleColumns(columns)
+  // }, [columns])
+
+  const columnVisibility = _react.default.useMemo(() => {
+    return (0, _utils.getVisibleFields)(columns);
+  }, [columns]);
   const pipeline = (0, _pipeline.useTablePipeline)({
     components: fusion
   }).input({
@@ -138,7 +148,9 @@ const InternalTable = props => {
   // .snapshot('flat')
   .use(_pipeline.features.hiddenColumns({
     columns,
-    visibleKeys
+    visibleKeys: visibleKeys ?? columnVisibility
+    // visibleKeys: ['name']
+    // visibleKeys
   })).use(_pipeline.features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,

package/lib/ali-table/base-table/header.js

@@ -186,7 +186,9 @@ function TableHeader({
   const leftFlatCount = flat.left.length;
   const rightFlatCount = flat.right.length;
   const thead = headerRenderInfo.leveled.map((wrappedCols, level) => {
-    const headerCells = wrappedCols.map(wrapped => {
+    const headerCells = [];
+    let currentColIndex = 0;
+    for (const wrapped of wrappedCols) {
       if (wrapped.type === 'normal') {
         const {
           colIndex,
@@ -194,42 +196,43 @@ function TableHeader({
           isLeaf,
           col
         } = wrapped;
+        if (currentColIndex > colIndex) continue;
         const headerCellProps = col.headerCellProps ?? {};
+        const actualColSpan = headerCellProps.colSpan ?? colSpan;
         const positionStyle = {};
         if (colIndex < leftFlatCount) {
           positionStyle.position = 'sticky';
           positionStyle.left = stickyLeftMap.get(colIndex);
         } else if (colIndex >= fullFlatCount - rightFlatCount) {
           positionStyle.position = 'sticky';
-          positionStyle.right = stickyRightMap.get(colIndex + colSpan - 1);
+          positionStyle.right = stickyRightMap.get(colIndex + actualColSpan - 1);
         }
-        return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
+        headerCells.push( /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
           key: colIndex
         }, headerCellProps, {
           className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, {
             first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
+            last: colIndex + actualColSpan === fullFlatCount,
             'lock-left': colIndex < leftFlatCount,
             'lock-right': colIndex >= fullFlatCount - rightFlatCount
           }),
-          colSpan: colSpan,
+          colSpan: actualColSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: {
             textAlign: col.textAlign,
             ...headerCellProps.style,
             ...positionStyle
           }
-        }), col.title ?? col.headerText);
+        }), col.title ?? col.headerText));
+        currentColIndex = colIndex + actualColSpan;
       } else {
         if (wrapped.width > 0) {
-          return /*#__PURE__*/_react.default.createElement("th", {
+          headerCells.push( /*#__PURE__*/_react.default.createElement("th", {
             key: wrapped.blankSide
-          });
-        } else {
-          return null;
+          }));
         }
       }
-    });
+    }
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: level,
       className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, {

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

@@ -128,6 +128,7 @@ export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[
 export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
 export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];

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

@@ -40,6 +40,7 @@ exports.getInvisibleColumns = getInvisibleColumns;
 exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
 exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
+exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
 exports.isDateString = isDateString;
@@ -62,8 +63,7 @@ exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
 exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
-exports.updateColumns1 = void 0;
-exports.updateColumnsByGroup = void 0;
+exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
 exports.updateWidthsByOther = updateWidthsByOther;
 var _uuid = require("uuid");
@@ -2074,6 +2074,24 @@ const getVisibleColumnKeys1 = columns => {
   return allKeys.filter(item => !allParentKeys.includes(item));
 };
 exports.getVisibleColumnKeys1 = getVisibleColumnKeys1;
+function getVisibleFields(columns) {
+  const result = [];
+  function traverse(nodes) {
+    for (const node of nodes) {
+      // nếu visible không phải false thì lấy field
+      if (node.visible !== false) {
+        result.push(node.field);
+      }
+
+      // nếu có children thì duyệt tiếp
+      if (node.children?.length) {
+        traverse(node.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+}
 function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
   if (obj1 === obj2) return true;

package/lib/table-component/style.scss

@@ -830,7 +830,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
   .ui-rc-toolbar-bottom {
     position: relative;
-    padding: .25rem 1rem;
+    padding: .25rem 0rem;
     background-color: #ffffff;
 
     // &::before {

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

@@ -299,8 +299,8 @@ const Grid = props => {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
       backgroundColor: theme?.backgroundColor ?? undefined,
-      transition: 'max-height 0.3s ease',
-      overflow: 'hidden'
+      transition: 'max-height 0.3s ease'
+      // overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.11",
+  "version": "1.9.13",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.53",
+    "rc-master-ui": "1.1.58",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",