Add style.visibility property (#415)

future-architect · Nov 22, 2023 · bc29a4a · bc29a4a
1 parent 38db1ba
commit bc29a4a
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 16 deletions.
diff --git a/packages/cheetah-grid/src/js/columns/style/BaseStyle.ts b/packages/cheetah-grid/src/js/columns/style/BaseStyle.ts
@@ -4,6 +4,7 @@ import type {
   ColumnStyle,
   IndicatorDefine,
   IndicatorObject,
+  Visibility,
 } from "../../ts-types";
 import { EventTarget } from "../../core/EventTarget";
 
@@ -14,6 +15,7 @@ const STYLE_EVENT_TYPE = {
 let defaultStyle: BaseStyle;
 export class BaseStyle extends EventTarget implements ColumnStyle {
   private _bgColor?: ColorDef;
+  private _visibility?: Visibility;
   private _indicatorTopLeft?: IndicatorObject;
   private _indicatorTopRight?: IndicatorObject;
   private _indicatorBottomRight?: IndicatorObject;
@@ -26,13 +28,15 @@ export class BaseStyle extends EventTarget implements ColumnStyle {
   }
   constructor({
     bgColor,
+    visibility,
     indicatorTopLeft,
     indicatorTopRight,
     indicatorBottomRight,
     indicatorBottomLeft,
   }: BaseStyleOption = {}) {
     super();
     this._bgColor = bgColor;
+    this._visibility = normalizeVisibility(visibility, undefined);
     this._indicatorTopLeft = normalizeIndicator(indicatorTopLeft);
     this._indicatorTopRight = normalizeIndicator(indicatorTopRight);
     this._indicatorBottomRight = normalizeIndicator(indicatorBottomRight);
@@ -45,6 +49,17 @@ export class BaseStyle extends EventTarget implements ColumnStyle {
     this._bgColor = bgColor;
     this.doChangeStyle();
   }
+  get visibility(): Visibility | undefined {
+    return this._visibility;
+  }
+  set visibility(visibility: Visibility | undefined) {
+    const normalized = normalizeVisibility(visibility, this._visibility);
+    if (this._visibility === normalized) {
+      return;
+    }
+    this._visibility = normalized;
+    this.doChangeStyle();
+  }
   get indicatorTopLeft(): IndicatorObject | undefined {
     return this._indicatorTopLeft;
   }
@@ -88,3 +103,12 @@ function normalizeIndicator(
   }
   return indicator;
 }
+function normalizeVisibility(
+  visibility: Visibility | undefined,
+  defaultValue: Visibility | undefined
+): Visibility | undefined {
+  if (visibility && visibility !== "visible" && visibility !== "hidden") {
+    return defaultValue;
+  }
+  return visibility;
+}
diff --git a/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts b/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts
@@ -634,12 +634,16 @@ export class BranchGraphColumn<T> extends BaseColumn<T> {
       mergeStyle,
       margin,
       bgColor,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
 
     const rect = context.getRect();
     const radius = circleSize / 2;

diff --git a/packages/cheetah-grid/src/js/columns/type/ButtonColumn.ts b/packages/cheetah-grid/src/js/columns/type/ButtonColumn.ts
@@ -56,12 +56,16 @@ export class ButtonColumn<T> extends Column<T> {
       font,
       padding,
       textOverflow,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
     const textValue = value != null ? String(value) : "";
     helper.testFontLoad(font, textValue, context);
     const { col, row } = context;

diff --git a/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts b/packages/cheetah-grid/src/js/columns/type/CheckColumn.ts
@@ -32,12 +32,16 @@ export class CheckColumn<T> extends BaseColumn<T> {
       checkBgColor,
       uncheckBgColor,
       bgColor,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
 
     const { col, row } = context;
     const range = grid.getCellRange(col, row);

diff --git a/packages/cheetah-grid/src/js/columns/type/Column.ts b/packages/cheetah-grid/src/js/columns/type/Column.ts
@@ -31,12 +31,16 @@ export class Column<T> extends BaseColumn<T> {
       bgColor,
       padding,
       textOverflow,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
     const textValue = value != null ? String(value) : "";
     helper.testFontLoad(font, textValue, context);
     utils.loadIcons(getIcon(), context, helper, (icons, context) => {

diff --git a/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts b/packages/cheetah-grid/src/js/columns/type/ImageColumn.ts
@@ -63,13 +63,16 @@ export class ImageColumn<T> extends BaseColumn<T> {
     _grid: ListGridAPI<T>,
     { drawCellBase }: DrawCellInfo<T>
   ): void {
+    const { textAlign, textBaseline, margin, bgColor, visibility } = style;
+    if (bgColor) {
+      drawCellBase({
+        bgColor,
+      });
+    }
+    if (visibility === "hidden") {
+      return;
+    }
     if (value) {
-      const { textAlign, textBaseline, margin, bgColor } = style;
-      if (bgColor) {
-        drawCellBase({
-          bgColor,
-        });
-      }
       helper.drawWithClip(context, (ctx) => {
         ctx.textAlign = textAlign;
         ctx.textBaseline = textBaseline;

diff --git a/packages/cheetah-grid/src/js/columns/type/MenuColumn.ts b/packages/cheetah-grid/src/js/columns/type/MenuColumn.ts
@@ -48,13 +48,17 @@ export class MenuColumn<T> extends BaseColumn<T> {
       padding,
       textOverflow,
       appearance,
+      visibility,
     } = style;
     let { color } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
     const convertedValue = this._convertInternal(value);
     const text = convertedValue != null ? String(convertedValue) : "";
     helper.testFontLoad(font, text, context);

diff --git a/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts b/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts
@@ -37,12 +37,16 @@ export class MultilineTextColumn<T> extends BaseColumn<T> {
       autoWrapText,
       lineClamp,
       textOverflow,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
     const textValue = value != null ? String(value) : "";
     const multilines = textValue
       .replace(/\r?\n/g, "\n")

diff --git a/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts b/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts
@@ -43,7 +43,10 @@ export class PercentCompleteBarColumn<T> extends Column<T> {
       grid,
       info
     );
-    const { barColor, barBgColor, barHeight } = style;
+    const { barColor, barBgColor, barHeight, visibility } = style;
+    if (visibility === "hidden") {
+      return;
+    }
 
     let textValue = value != null ? String(value) : "";
     if (str.endsWith(textValue, "%")) {

diff --git a/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts b/packages/cheetah-grid/src/js/columns/type/RadioColumn.ts
@@ -34,12 +34,16 @@ export class RadioColumn<T> extends BaseColumn<T> {
       uncheckBgColor,
       checkBgColor,
       bgColor,
+      visibility,
     } = style;
     if (bgColor) {
       drawCellBase({
         bgColor,
       });
     }
+    if (visibility === "hidden") {
+      return;
+    }
 
     const { col, row } = context;
     const range = grid.getCellRange(col, row);

diff --git a/packages/cheetah-grid/src/js/ts-types/column/style.ts b/packages/cheetah-grid/src/js/ts-types/column/style.ts
@@ -3,11 +3,13 @@ import type {
   IndicatorObject,
   LineClamp,
   TextOverflow,
+  Visibility,
 } from "../define";
 import type { ColorDef } from "../base";
 
 export interface ColumnStyle {
   bgColor?: ColorDef;
+  visibility?: Visibility;
   indicatorTopLeft?: IndicatorObject;
   indicatorTopRight?: IndicatorObject;
   indicatorBottomRight?: IndicatorObject;
@@ -18,6 +20,7 @@ export interface ColumnStyle {
 
 export interface BaseStyleOption {
   bgColor?: ColorDef;
+  visibility?: Visibility;
   indicatorTopLeft?: IndicatorDefine;
   indicatorTopRight?: IndicatorDefine;
   indicatorBottomRight?: IndicatorDefine;

diff --git a/packages/cheetah-grid/src/js/ts-types/define.ts b/packages/cheetah-grid/src/js/ts-types/define.ts
@@ -77,6 +77,9 @@ export interface ColumnMenuItemObjectOptions {
   [value: string]: string;
 }
 
+// ****** Style Options *******
+export type Visibility = "visible" | "hidden";
+
 // ****** TextStyle Options *******
 export type TextOverflow = "clip" | "ellipsis" | string /* a char */;
 export type LineClamp = number | "auto";

diff --git a/packages/cheetah-grid/src/test/ListGrid_sample.js b/packages/cheetah-grid/src/test/ListGrid_sample.js
@@ -183,7 +183,13 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
 									action: function(rec) {
 										alert('ID:' + rec.personid + ' ' + JSON.stringify(rec));//eslint-disable-line
 									},
+									disabled: function(rec) {
+										return rec.personid === 1;
+									},
 								}),
+								style: function(rec) {
+									return rec.personid === 1 ? {visibility: 'hidden'} : null;
+								},
 							},
 						],
 					},

diff --git a/packages/docs/api/js/column_styles/README.md b/packages/docs/api/js/column_styles/README.md
@@ -10,15 +10,16 @@ Define column style by using `style` property.
 
 Properties below are prepared in standard.
 
-| Property     | Description                                                                                      |
-| ------------ | ------------------------------------------------------------------------------------------------ |
-| color        | Define the color of cell.                                                                        |
-| textAlign    | Define the horizontal position of text in cell.                                                  |
-| textBaseline | Define the vertical position of text in cell.                                                    |
-| bgColor      | Define the background color of cell.                                                             |
-| font         | Define the font of cell.                                                                         |
-| padding      | Define the padding of cell. If you set 4 values separately, please set the `Array`.              |
-| textOverflow | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available. |
+| Property     | Description                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------- |
+| color        | Define the color of cell.                                                                                       |
+| textAlign    | Define the horizontal position of text in cell.                                                                 |
+| textBaseline | Define the vertical position of text in cell.                                                                   |
+| bgColor      | Define the background color of cell.                                                                            |
+| font         | Define the font of cell.                                                                                        |
+| padding      | Define the padding of cell. If you set 4 values separately, please set the `Array`.                             |
+| textOverflow | Define how to display when text overflows the area of a cell. `clip` or `ellipsis` is available.                |
+| visibility   | Specifying `hidden` to it will stop drawing the cell's content. Note that this does not stop the cell's action. |
 
 Note that the column type may add style properties that you can use. The properties added are described in the documentation for each column type.