feat: instant applying of built-in editor

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

@@ -51,6 +51,10 @@ const columns = [
       },
     },
   },
+  {
+    name: 'instantApply',
+    editor: { type: 'datePicker', options: { instantApply: true } },
+  },
 ];
 const data = [
   {
@@ -60,6 +64,7 @@ const data = [
     timePickerWithTab: '2019-11-11 11:11 AM',
     monthPicker: '2019-11',
     yearPicker: '2019',
+    instantApply: '2019-11-11',
   },
 ];
 
@@ -166,3 +171,10 @@ it('focus the editing cell when datepicker layer is closed', () => {
 
   cy.get('@editingInput').should('be.focused');
 });
+
+it('should apply selected value instantly when instantApply option is true', () => {
+  cy.gridInstance().invoke('startEditing', 0, 'instantApply');
+  cy.get('.tui-calendar-date').contains('14').click();
+
+  cy.getCell(0, 'instantApply').should('have.text', '2019-11-14');
+});

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

@@ -530,6 +530,77 @@ describe('select, checkbox, radio editor', () => {
       });
     });
   });
+
+  describe('Inatant apply', () => {
+    function createGridWithTypeAndInstantApply(type: string) {
+      const columns = [
+        {
+          name: 'name',
+          formatter: 'listItemText',
+          editor: {
+            type,
+            options: {
+              listItems: [
+                { text: 'A', value: '1' },
+                { text: 'B', value: '2' },
+                { text: 'C', value: '3' },
+              ],
+              instantApply: true,
+            },
+          },
+        },
+        {
+          name: 'isHuman',
+          defaultValue: '2',
+          formatter: 'listItemText',
+          editor: {
+            type,
+            options: {
+              listItems: [
+                { text: 'true', value: '1' },
+                { text: 'false', value: '2' },
+              ],
+              instantApply: true,
+            },
+          },
+        },
+      ];
+
+      cy.createGrid({ data: dataForGridWithType, columns });
+    }
+
+    it('should apply selected value instantly when instantApply option is true(select)', () => {
+      createGridWithTypeAndInstantApply('select');
+      cy.gridInstance().invoke('setFrozenColumnCount', 1);
+      cy.gridInstance().invoke('startEditing', 1, 'isHuman');
+
+      cy.get('.tui-select-box-item').eq(0).click();
+
+      cy.getByCls('editor-select-box-layer').should('be.not.visible');
+      cy.getCell(1, 'isHuman').should('have.text', 'true');
+    });
+
+    it('should apply selected value instantly when instantApply option is true(radio)', () => {
+      createGridWithTypeAndInstantApply('radio');
+      cy.gridInstance().invoke('setFrozenColumnCount', 1);
+      cy.gridInstance().invoke('startEditing', 1, 'isHuman');
+
+      cy.getByCls(`editor-label-icon-radio`).eq(0).click();
+
+      cy.getByCls('editor-checkbox-list-layer').should('be.not.visible');
+      cy.getCell(1, 'isHuman').should('have.text', 'true');
+    });
+
+    it('should not apply selected value instantly when instantApply option is true(checkbox)', () => {
+      createGridWithTypeAndInstantApply('checkbox');
+      cy.gridInstance().invoke('setFrozenColumnCount', 1);
+      cy.gridInstance().invoke('startEditing', 1, 'isHuman');
+
+      cy.getByCls(`editor-label-icon-checkbox`).eq(0).click();
+
+      cy.getByCls('editor-checkbox-list-layer').should('be.visible');
+    });
+  });
 });
 
 // @TODO: should rewrite test case after modifying casting editing value

packages/toast-ui.grid/src/editor/checkbox.ts

@@ -37,14 +37,17 @@ export class CheckboxEditor implements CellEditor {
 
   private initLayerPos: LayerPos | null = null;
 
+  private instantApplyCallback?: Function;
+
   public constructor(props: CellEditorProps) {
-    const { columnInfo, width, formattedValue, portalEditingKeydown } = props;
+    const { columnInfo, width, formattedValue, portalEditingKeydown, instantApplyCallback } = props;
+    const { type: inputType, instantApply } = columnInfo.editor?.options ?? {};
     const el = document.createElement('div');
     const value = String(isNil(props.value) ? '' : props.value);
     el.className = cls('layer-editing-inner');
     el.innerText = formattedValue;
 
-    this.inputType = columnInfo.editor!.options!.type;
+    this.inputType = inputType;
 
     const listItems = getListItems(props);
     const layer = this.createLayer(listItems, width);
@@ -54,6 +57,10 @@ export class CheckboxEditor implements CellEditor {
     this.layer = layer;
 
     this.setValue(value);
+
+    if (instantApply && inputType === 'radio') {
+      this.instantApplyCallback = instantApplyCallback;
+    }
   }
 
   private createLayer(listItems: ListItem[], width: number) {
@@ -119,6 +126,9 @@ export class CheckboxEditor implements CellEditor {
   private onChange = (ev: Event) => {
     const value = (ev.target as HTMLInputElement).value;
     this.setLabelClass(value);
+
+    // eslint-disable-next-line no-unused-expressions
+    this.instantApplyCallback?.();
   };
 
   private onKeydown = (ev: KeyboardEvent) => {

packages/toast-ui.grid/src/editor/datePicker.ts

@@ -57,6 +57,7 @@ export class DatePickerEditor implements CellEditor {
     const {
       grid: { usageStatistics },
       columnInfo,
+      instantApplyCallback,
     } = props;
     const value = String(isNil(props.value) ? '' : props.value);
     const el = document.createElement('div');
@@ -103,7 +104,12 @@ export class DatePickerEditor implements CellEditor {
     };
 
     this.datePickerEl = new TuiDatePicker(layer, deepMergedCopy(defaultOptions, options));
-    this.datePickerEl.on('close', () => this.focus());
+    this.datePickerEl.on('close', () => {
+      this.focus();
+      if (options.instantApply) {
+        instantApplyCallback();
+      }
+    });
   }
 
   public moveDropdownLayer(gridRect: GridRectForDropDownLayerPos) {

packages/toast-ui.grid/src/editor/select.ts

@@ -30,7 +30,9 @@ export class SelectEditor implements CellEditor {
   private initLayerPos: LayerPos | null = null;
 
   public constructor(props: CellEditorProps) {
-    const { width, formattedValue, portalEditingKeydown } = props;
+    const { width, formattedValue, portalEditingKeydown, columnInfo, instantApplyCallback } = props;
+
+    const { instantApply } = columnInfo.editor?.options ?? {};
     const el = document.createElement('div');
     const value = String(isNil(props.value) ? '' : props.value);
     el.className = cls('layer-editing-inner');
@@ -43,6 +45,10 @@ export class SelectEditor implements CellEditor {
     this.el = el;
     this.layer = layer;
     this.layer.addEventListener('keydown', this.onKeydown);
+
+    if (instantApply) {
+      this.selectBoxEl.on('close', instantApplyCallback);
+    }
   }
 
   private onKeydown = (ev: KeyboardEvent) => {

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

@@ -94,7 +94,7 @@ export class EditingLayerComp extends Component<Props> {
     });
   }
 
-  private saveAndFinishEditing(triggeredByKey = false) {
+  private saveAndFinishEditing = (triggeredByKey = false) => {
     const { dispatch, active } = this.props;
 
     if (this.editor && active) {
@@ -103,7 +103,7 @@ export class EditingLayerComp extends Component<Props> {
       dispatch('setValue', rowKey, columnName, value);
       dispatch('finishEditing', rowKey, columnName, value, { save: true, triggeredByKey });
     }
-  }
+  };
 
   private setInitScrollPos() {
     const { bodyScrollTop, bodyScrollLeft } = this.props;
@@ -132,6 +132,7 @@ export class EditingLayerComp extends Component<Props> {
       formattedValue,
       width: right - left,
       portalEditingKeydown: this.handleKeyDown,
+      instantApplyCallback: this.saveAndFinishEditing,
     };
     const cellEditor = new EditorClass(editorProps);
     const editorEl = cellEditor.getElement();

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

@@ -17,6 +17,7 @@ export interface CellEditorProps {
   formattedValue: string;
   width: number;
   portalEditingKeydown: PortalEditingKeydown;
+  instantApplyCallback: Function;
 }
 
 export interface CellEditor {