feat: enable/disable specific cell (#1530)

* tests: add test for enable/disable cell

* feat: enable/disable specific cell

* chore: remove only flag

chore: caching property to variable

* chore: string to constant

* chore: rename constants

* chore: apply code reviews

packages/toast-ui.grid/cypress/integration/data.spec.ts

@@ -1106,3 +1106,37 @@ describe('D&D', () => {
     });
   });
 });
+
+describe('enableCell() / disableCell()', () => {
+  beforeEach(() => {
+    createGrid();
+  });
+  it('should disable cell after calling disableCell() and enable cell after calling enableCell()', () => {
+    createGrid();
+    cy.gridInstance().invoke('disableCell', 0, 'name');
+
+    cy.getCell(0, 'name').should('have.class', cls('cell-disabled'));
+
+    cy.gridInstance().invoke('enableCell', 0, 'name');
+
+    cy.getCell(0, 'name').should('have.not.class', cls('cell-disabled'));
+  });
+
+  it('should not disable cell if it row number cell or draggable cell', () => {
+    createGrid({ rowHeaders: [{ type: 'rowNum' }], draggable: true });
+
+    cy.gridInstance().invoke('disableCell', 0, '_number');
+    cy.gridInstance().invoke('disableCell', 0, '_draggable');
+
+    cy.getRowHeaderCell(0, '_number').should('have.not.class', cls('cell-disabled'));
+    cy.getRowHeaderCell(0, '_draggable').should('have.not.class', cls('cell-disabled'));
+  });
+
+  it('should disable check box after calling disableCell() to check box cell', () => {
+    createGrid({ rowHeaders: [{ type: 'checkbox' }] });
+
+    cy.gridInstance().invoke('disableCell', 0, '_checked');
+
+    cy.getRowHeaderCell(0, '_checked').should('have.class', cls('cell-disabled'));
+  });
+});

packages/toast-ui.grid/cypress/support/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../node_modules/cypress-plugin-tab/src/index.d.ts" />
 
 declare namespace Cypress {
-  type RowHeaderType = '_checked' | '_number';
+  type RowHeaderType = '_checked' | '_number' | '_draggable';
   type RowKey = number | string;
 
   interface Chainable<Subject> {

packages/toast-ui.grid/src/dispatch/data.ts

@@ -59,7 +59,7 @@ import {
 } from './summary';
 import { initFilter, resetFilterState } from './filter';
 import { initScrollPosition } from './viewport';
-import { isRowHeader } from '../helper/column';
+import { isCheckboxColumn, isDragColumn, isRowHeader, isRowNumColumn } from '../helper/column';
 import { updatePageOptions, updatePageWhenRemovingRow, resetPageState } from './pagination';
 import { updateRowSpanWhenAppending, updateRowSpanWhenRemoving } from './rowSpan';
 import { createObservableData } from './lazyObservable';
@@ -72,6 +72,12 @@ import {
 } from '../store/helper/validation';
 import { setColumnWidthsByText, setAutoResizingColumnWidths } from './column';
 import { fitRowHeightWhenMovingRow } from './renderState';
+import {
+  DISABLED_PRIORITY_CELL,
+  DISABLED_PRIORITY_COLUMN,
+  DISABLED_PRIORITY_NONE,
+  DISABLED_PRIORITY_ROW,
+} from '../helper/constant';
 
 function getIndexRangeOfCheckbox(
   { data, column, id }: Store,
@@ -468,7 +474,7 @@ export function setRowDisabled(
     const { _attributes, _disabledPriority } = row;
 
     column.allColumns.forEach((columnInfo) => {
-      _disabledPriority[columnInfo.name] = 'ROW';
+      _disabledPriority[columnInfo.name] = DISABLED_PRIORITY_ROW;
     });
 
     if (withCheckbox) {
@@ -485,11 +491,39 @@ export function setColumnDisabled({ data, column }: Store, disabled: boolean, co
   }
 
   data.rawData.forEach((row) => {
-    row._disabledPriority[columnName] = 'COLUMN';
+    row._disabledPriority[columnName] = DISABLED_PRIORITY_COLUMN;
   });
   setRowOrColumnDisabled(column.allColumnMap[columnName], disabled);
 }
 
+export function setCellDisabled(
+  store: Store,
+  disabled: boolean,
+  rowKey: RowKey,
+  columnName: string
+) {
+  const { data, column, id } = store;
+
+  if (isRowNumColumn(columnName) || isDragColumn(columnName)) {
+    return;
+  }
+
+  const row = findRowByRowKey(data, column, id, rowKey, false);
+
+  if (row) {
+    const { _attributes, _disabledPriority } = row;
+
+    _disabledPriority[columnName] = disabled ? DISABLED_PRIORITY_CELL : DISABLED_PRIORITY_NONE;
+
+    if (isCheckboxColumn(columnName)) {
+      _attributes.checkDisabled = disabled;
+      setDisabledAllCheckbox(store);
+    }
+
+    notify(row, '_disabledPriority');
+  }
+}
+
 export function setRowCheckDisabled(store: Store, disabled: boolean, rowKey: RowKey) {
   const { data, column, id } = store;
   const row = findRowByRowKey(data, column, id, rowKey, false);

packages/toast-ui.grid/src/grid.tsx

@@ -1096,7 +1096,7 @@ export default class Grid implements TuiGrid {
 
   /**
    * Disable the row identified by the specified rowKey to not be able to check.
-   * @param {number|string} rowKey - The unique keyof the row.
+   * @param {number|string} rowKey - The unique key of the row.
    */
   public disableRowCheck(rowKey: RowKey) {
     this.dispatch('setRowCheckDisabled', true, rowKey);
@@ -1126,6 +1126,24 @@ export default class Grid implements TuiGrid {
     this.dispatch('setColumnDisabled', false, columnName);
   }
 
+  /**
+   * Disable the cell identified by the row key and column name.
+   * @param {number|string} rowKey - The unique key of the row.
+   * @param {string} columnName - column name
+   */
+  public disableCell(rowKey: RowKey, columnName: string) {
+    this.dispatch('setCellDisabled', true, rowKey, columnName);
+  }
+
+  /**
+   * Enable the cell identified by the row key and column name.
+   * @param {number|string} rowKey - The unique key of the row.
+   * @param {string} columnName - column name
+   */
+  public enableCell(rowKey: RowKey, columnName: string) {
+    this.dispatch('setCellDisabled', false, rowKey, columnName);
+  }
+
   /**
    * Insert the new row with specified data to the end of table.
    * @param {Object} [row] - The data for the new row

packages/toast-ui.grid/src/helper/constant.ts

@@ -2,3 +2,7 @@ export const FILTER_DEBOUNCE_TIME = 50;
 export const TREE_INDENT_WIDTH = 22;
 export const TREE_CELL_HORIZONTAL_PADDING = 19;
 export const RIGHT_MOUSE_BUTTON = 2;
+export const DISABLED_PRIORITY_NONE = 'NONE';
+export const DISABLED_PRIORITY_CELL = 'CELL';
+export const DISABLED_PRIORITY_ROW = 'ROW';
+export const DISABLED_PRIORITY_COLUMN = 'COLUMN';

packages/toast-ui.grid/src/store/data.ts

@@ -33,6 +33,12 @@ import { createTreeRawData, createTreeCellInfo } from './helper/tree';
 import { addUniqueInfoMap, getValidationCode } from './helper/validation';
 import { isScrollPagination } from '../query/data';
 import { getFormattedValue, setMaxTextMap } from './helper/data';
+import {
+  DISABLED_PRIORITY_CELL,
+  DISABLED_PRIORITY_COLUMN,
+  DISABLED_PRIORITY_NONE,
+  DISABLED_PRIORITY_ROW,
+} from '../helper/constant';
 
 interface DataOption {
   data: OptRow[];
@@ -128,10 +134,17 @@ function createViewCell(
   const rowDisabled = isCheckboxColumn(name) ? checkDisabled : disabled;
   const columnClassName = isUndefined(classNameAttr.column[name]) ? [] : classNameAttr.column[name];
   const className = [...classNameAttr.row, ...columnClassName].join(' ');
+  const _disabledPriority = row._disabledPriority[name];
 
   let cellDisabled = rowDisabled || columnDisabled;
-  if (!isUndefined(row._disabledPriority[name])) {
-    cellDisabled = row._disabledPriority[name] === 'COLUMN' ? columnDisabled : rowDisabled;
+  if (_disabledPriority === DISABLED_PRIORITY_CELL) {
+    cellDisabled = true;
+  } else if (_disabledPriority === DISABLED_PRIORITY_NONE) {
+    cellDisabled = false;
+  } else if (_disabledPriority === DISABLED_PRIORITY_COLUMN) {
+    cellDisabled = columnDisabled;
+  } else if (_disabledPriority === DISABLED_PRIORITY_ROW) {
+    cellDisabled = rowDisabled;
   }
 
   return {

packages/toast-ui.grid/types/index.d.ts

@@ -174,6 +174,10 @@ declare namespace tui {
 
     public enableColumn(columnName: string): void;
 
+    public disableCell(rowKey: RowKey, columnName: string): void;
+
+    public enableCell(rowKey: RowKey, columnName: string): void;
+
     public disableRowCheck(rowKey: RowKey): void;
 
     public enableRowCheck(rowKey: RowKey): void;

packages/toast-ui.grid/types/store/data.d.ts

@@ -21,7 +21,7 @@ export type Row = Dictionary<CellValue> & {
   _leaf?: boolean;
 };
 export type RowSpanAttributeValue = RowSpanAttribute[keyof RowSpanAttribute];
-export type DisabledPriority = Dictionary<'ROW' | 'COLUMN'>;
+export type DisabledPriority = Dictionary<'CELL' | 'ROW' | 'COLUMN' | 'NONE'>;
 export type LoadingState = 'DONE' | 'EMPTY' | 'LOADING';
 export type ColumnDefaultValues = { name: string; value: CellValue }[];