@infinite-table/infinite-react 0.2.4 → 0.2.5

package/index.d.ts

@@ -675,7 +675,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         draggable?: boolean;
         resizable?: boolean;
         comparer?: InfiniteTableColumnComparer<T>;
-        hiddenWhenGrouped?: boolean;
+        defaultHiddenWhenGrouped?: boolean;
         align?: InfiniteTableColumnAlign;
         verticalAlign?: InfiniteTableColumnVerticalAlign;
         columnGroup?: string;
@@ -1136,6 +1136,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         defaultWidth?: number;
         defaultFlex?: number;
         defaultPinned?: InfiniteTableColumnPinnedValues;
+        defaultHiddenWhenGrouped?: boolean;
         header?: InfiniteTableColumn<T>['header'];
         comparer?: InfiniteTableColumn<T>['comparer'];
         draggable?: InfiniteTableColumn<T>['draggable'];
@@ -1418,6 +1419,7 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
         computedColumnGroups: InfiniteTablePropColumnGroupsMap;
         rowHeightCSSVar: string;
         headerHeightCSSVar: string;
+        controlledColumnVisibility: boolean;
     }
     export type InfiniteTableActions<T> = ComponentStateActions<InfiniteTableState<T>>;
     export interface InfiniteTableState<T> extends InfiniteTableMappedState<T>, InfiniteTableDerivedState<T>, InfiniteTableSetupState<T> {
@@ -1666,7 +1668,6 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
             index: number;
         };
     };
-    export const IS_GROUP_COLUMN_ID: (columnId: string) => boolean;
     export type GetComputedVisibleColumnsResult<T> = {
         computedRemainingSpace: number;
         computedPinnedStartColumnsWidth: number;

package/index.esm.js

@@ -856,6 +856,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1389,6 +1390,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGrouped: colType.defaultHiddenWhenGrouped,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -4082,7 +4084,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns();
+  useHideColumns();
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4204,9 +4206,10 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns() {
+function useHideColumns() {
   const {
     componentState: {
+      dataArray,
       groupBy,
       groupRowsState,
       originalLazyGroupDataChangeDetect
@@ -4217,18 +4220,19 @@ function useHideEmptyGroupColumns() {
     getComponentState,
     componentActions,
     componentState: {
+      columnTypes,
+      computedColumns,
       columnsWhenGrouping: generatedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
   useEffect9(() => {
-    if (groupRenderStrategy !== "multi-column") {
+    if (groupRenderStrategy !== "multi-column" || !hideEmptyGroupColumns) {
       return;
     }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4238,10 +4242,10 @@ function useHideEmptyGroupColumns() {
       }
     }
     const currentState = getComponentState();
-    const { computedColumns } = currentState;
+    const { computedColumns: computedColumns2 } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
+    const cols = computedColumns2;
     groupBy.forEach(({ field, column: groupColumn }, index) => {
       const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
       let col = cols.get(colId);
@@ -4265,9 +4269,36 @@ function useHideEmptyGroupColumns() {
     generatedColumns,
     originalLazyGroupDataChangeDetect,
     groupBy,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  useEffect9(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGrouped) {
+        const nowHidden = columnVisibility[id] === false;
+        if (!nowHidden && isGrouped) {
+          updated = true;
+          newColumnVisibility[id] = false;
+        }
+        if (nowHidden && !isGrouped) {
+          updated = true;
+          delete newColumnVisibility[id];
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -7739,7 +7770,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.4"
+      version: "0.2.5"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/index.js

@@ -873,6 +873,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1398,6 +1399,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGrouped: colType.defaultHiddenWhenGrouped,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -4068,7 +4070,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns();
+  useHideColumns();
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4190,9 +4192,10 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns() {
+function useHideColumns() {
   const {
     componentState: {
+      dataArray,
       groupBy,
       groupRowsState,
       originalLazyGroupDataChangeDetect
@@ -4203,18 +4206,19 @@ function useHideEmptyGroupColumns() {
     getComponentState,
     componentActions,
     componentState: {
+      columnTypes,
+      computedColumns,
       columnsWhenGrouping: generatedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
   (0, import_react17.useEffect)(() => {
-    if (groupRenderStrategy !== "multi-column") {
+    if (groupRenderStrategy !== "multi-column" || !hideEmptyGroupColumns) {
       return;
     }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4224,10 +4228,10 @@ function useHideEmptyGroupColumns() {
       }
     }
     const currentState = getComponentState();
-    const { computedColumns } = currentState;
+    const { computedColumns: computedColumns2 } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
+    const cols = computedColumns2;
     groupBy.forEach(({ field, column: groupColumn }, index) => {
       const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
       let col = cols.get(colId);
@@ -4251,9 +4255,36 @@ function useHideEmptyGroupColumns() {
     generatedColumns,
     originalLazyGroupDataChangeDetect,
     groupBy,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  (0, import_react17.useEffect)(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGrouped) {
+        const nowHidden = columnVisibility[id] === false;
+        if (!nowHidden && isGrouped) {
+          updated = true;
+          newColumnVisibility[id] = false;
+        }
+        if (nowHidden && !isGrouped) {
+          updated = true;
+          delete newColumnVisibility[id];
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -7646,7 +7677,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.4"
+      version: "0.2.5"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1644430025786
+  "publishedAt": 1644855707573
 }