From 2fd2cfa7cda56252de5e28e75e43680b23ea4b8c Mon Sep 17 00:00:00 2001 From: Ashton Date: Mon, 25 Dec 2023 03:24:42 +0900 Subject: [PATCH] refactor: subdividing a type of grid event handler --- packages/toast-ui.grid/src/event/eventBus.ts | 11 +- packages/toast-ui.grid/src/grid.tsx | 7 +- packages/toast-ui.grid/types/options.d.ts | 170 ++++++++++++++----- 3 files changed, 137 insertions(+), 51 deletions(-) diff --git a/packages/toast-ui.grid/src/event/eventBus.ts b/packages/toast-ui.grid/src/event/eventBus.ts index 0bd708470..91bf2907f 100644 --- a/packages/toast-ui.grid/src/event/eventBus.ts +++ b/packages/toast-ui.grid/src/event/eventBus.ts @@ -3,13 +3,20 @@ import { GridId } from '@t/store'; import GridEvent from './gridEvent'; import { removeArrayItem } from '../helper/common'; import { getInstance } from '../instance'; +import { GridEventProps } from '@t/event'; type TargetEventName = GridEventName | 'onGridMounted' | 'onGridBeforeDestroy' | 'onGridUpdated'; const eventBusMap: { [id: number]: EventBus } = {}; export interface EventBus { - on: (eventName: TargetEventName, fn: GridEventListener) => void; - off: (eventName: TargetEventName, fn?: GridEventListener) => void; + on: >( + eventName: TargetEventName, + fn: GridEventListener + ) => void; + off: >( + eventName: TargetEventName, + fn?: GridEventListener + ) => void; trigger: (eventName: TargetEventName, gridEvent: GridEvent) => void; } diff --git a/packages/toast-ui.grid/src/grid.tsx b/packages/toast-ui.grid/src/grid.tsx index 3a0c5ab0e..543d06075 100644 --- a/packages/toast-ui.grid/src/grid.tsx +++ b/packages/toast-ui.grid/src/grid.tsx @@ -3,7 +3,6 @@ import TuiGrid from '@t/index'; import { Dictionary, GridEventListener, - GridEventName, LifeCycleEventName, OptAppendRow, OptAppendTreeRow, @@ -18,6 +17,8 @@ import { OptRemoveRow, OptRow, ResetOptions, + GridEventType, + GridEventTypeMap, } from '@t/options'; import { Store } from '@t/store'; import { CellValue, InvalidRow, Row, RowKey } from '@t/store/data'; @@ -1386,7 +1387,7 @@ export default class Grid implements TuiGrid { * @param {string} eventName - custom event name * @param {function} fn - event handler */ - public on(eventName: GridEventName, fn: GridEventListener) { + public on(eventName: `${T}`, fn: GridEventListener

) { this.eventBus.on(eventName, fn); } @@ -1395,7 +1396,7 @@ export default class Grid implements TuiGrid { * @param {string} eventName - custom event name * @param {function} fn - event handler */ - public off(eventName: GridEventName, fn?: GridEventListener) { + public off(eventName: `${T}`, fn?: GridEventListener

) { this.eventBus.off(eventName, fn); } diff --git a/packages/toast-ui.grid/types/options.d.ts b/packages/toast-ui.grid/types/options.d.ts index f7c0b58cd..40dfd7916 100644 --- a/packages/toast-ui.grid/types/options.d.ts +++ b/packages/toast-ui.grid/types/options.d.ts @@ -16,7 +16,7 @@ import { SelectionUnit } from './store/selection'; import { FilterOptionType, FilterState } from './store/filterLayerState'; import { CreateMenuGroups } from './store/contextMenu'; import { SummaryColumnContentMapOnlyFn, SummaryPosition } from './store/summary'; -import { TuiGridEvent } from './event'; +import { GridEventProps, TuiGridEvent } from './event'; import { CellRendererClass, CellRendererProps, HeaderRendererClass } from './renderer'; import { CellEditorClass } from './editor'; import { EnterCommandType } from '../src/helper/keyboard'; @@ -40,51 +40,56 @@ export type RecursivePartial = { [P in keyof T]?: RecursivePartial }; export type LifeCycleEventName = 'onGridMounted' | 'onGridUpdated' | 'onGridBeforeDestroy'; // @TODO: 'sort', 'filter' event will be deprecated -export type GridEventName = - | 'click' - | 'dblclick' - | 'mousedown' - | 'mouseover' - | 'mouseout' - | 'focusChange' - | 'columnResize' - | 'check' - | 'uncheck' - | 'checkAll' - | 'uncheckAll' - | 'beforeCheckBetween' - | 'selection' - | 'editingStart' - | 'editingFinish' - | 'sort' - | 'filter' - | 'scrollEnd' - | 'beforeRequest' - | 'response' - | 'successResponse' - | 'failResponse' - | 'errorResponse' - | 'expand' - | 'collapse' - | 'beforeSort' - | 'afterSort' - | 'beforeUnsort' - | 'afterUnsort' - | 'beforeFilter' - | 'afterFilter' - | 'beforeUnfilter' - | 'afterUnfilter' - | 'beforePageMove' - | 'afterPageMove' - | 'beforeChange' - | 'afterChange' - | 'dragStart' - | 'drag' - | 'drop' - | 'keydown' - | 'beforeExport' - | 'afterExport'; -export type GridEventListener = (gridEvent: TuiGridEvent) => void; + +export enum GridEventType { + CLICK = 'click', + DBL_CLICK = 'dblclick', + MOUSEDOWN = 'mousedown', + MOUSEOVER = 'mouseover', + MOUSEOUT = 'mouseout', + FOCUS_CHANGE = 'focusChange', + COLUMN_RESIZE = 'columnResize', + CHECK = 'check', + UNCHECK = 'uncheck', + CHECK_ALL = 'checkAll', + UNCHECK_ALL = 'uncheckAll', + BEFORE_CHECK_BETWEEN = 'beforeCheckBetween', + SELECTION = 'selection', + EDITING_START = 'editingStart', + EDITING_FINISH = 'editingFinish', + SORT = 'sort', + FILTER = 'filter', + SCROLL_END = 'scrollEnd', + BEFORE_REQUEST = 'beforeRequest', + RESPONSE = 'response', + SUCCESS_RESPONSE = 'successResponse', + FAIL_RESPONSE = 'failResponse', + ERROR_RESPONSE = 'errorResponse', + EXPAND = 'expand', + COLLAPSE = 'collapse', + BEFORE_SORT = 'beforeSort', + AFTER_SORT = 'afterSort', + BEFORE_UNSORT = 'beforeUnsort', + AFTER_UNSORT = 'afterUnsort', + BEFORE_FILTER = 'beforeFilter', + AFTER_FILTER = 'afterFilter', + BEFORE_UNFILTER = 'beforeUnfilter', + AFTER_UNFILTER = 'afterUnfilter', + BEFORE_PAGE_MOVE = 'beforePageMove', + AFTER_PAGE_MOVE = 'afterPageMove', + BEFORE_CHANGE = 'beforeChange', + AFTER_CHANGE = 'afterChange', + DRAG_START = 'dragStart', + DRAG = 'drag', + DROP = 'drop', + KEYDOWN = 'keydown', + BEFORE_EXPORT = 'beforeExport', + AFTER_EXPORT = 'afterExport', +} + +export type GridEventName = `${GridEventType}`; + +export type GridEventListener = {}> = (gridEvent: TuiGridEvent & T) => void; export interface OptGrid { el: HTMLElement; @@ -122,6 +127,79 @@ export interface OptGrid { exportOptions?: Exports; } +export interface GridEventTypeMap { + [index: string]: Partial; + [GridEventType.AFTER_CHANGE]: Pick; + [GridEventType.AFTER_EXPORT]: Pick< + GridEventProps, + 'exportFormat' | 'exportOptions' | 'data' | 'complexHeaderData' + >; + [GridEventType.AFTER_FILTER]: Pick; + [GridEventType.AFTER_PAGE_MOVE]: Pick; + [GridEventType.AFTER_SORT]: Pick; + [GridEventType.AFTER_UNFILTER]: Pick; + [GridEventType.AFTER_UNSORT]: Pick; + [GridEventType.BEFORE_CHANGE]: Pick; + [GridEventType.BEFORE_CHECK_BETWEEN]: Pick; + [GridEventType.BEFORE_EXPORT]: Pick< + GridEventProps, + 'exportFormat' | 'exportOptions' | 'data' | 'complexHeaderData' | 'exportFn' + >; + [GridEventType.BEFORE_FILTER]: Pick< + GridEventProps, + 'filterState' | 'columnFilterState' | 'conditionFn' | 'type' | 'columnName' | 'operator' + >; + [GridEventType.BEFORE_PAGE_MOVE]: Pick; + [GridEventType.BEFORE_REQUEST]: Pick; + [GridEventType.BEFORE_SORT]: Pick< + GridEventProps, + 'columnName' | 'ascending' | 'multiple' | 'sortState' + >; + [GridEventType.BEFORE_UNFILTER]: Pick; + [GridEventType.BEFORE_UNSORT]: Pick; + [GridEventType.CHECK]: Pick; + [GridEventType.CHECK_ALL]: {}; + [GridEventType.CLICK]: Pick; + [GridEventType.COLLAPSE]: Pick; + [GridEventType.COLUMN_RESIZE]: Pick; + [GridEventType.DBL_CLICK]: Pick; + [GridEventType.DRAG]: Pick< + GridEventProps, + 'rowKey' | 'targetRowKey' | 'appended' | 'targetColumnName' + >; + [GridEventType.DRAG_START]: Pick< + GridEventProps, + 'rowKey' | 'floatingRow' | 'columnName' | 'floatingColumn' + >; + [GridEventType.DROP]: Pick< + GridEventProps, + 'rowKey' | 'targetRowKey' | 'appended' | 'columnName' | 'targetColumnName' + >; + [GridEventType.EDITING_FINISH]: Pick< + GridEventProps, + 'rowKey' | 'columnName' | 'value' | 'save' | 'triggeredByKey' + >; + [GridEventType.EDITING_START]: Pick; + [GridEventType.ERROR_RESPONSE]: Pick; + [GridEventType.EXPAND]: Pick; + [GridEventType.FAIL_RESPONSE]: Pick; + [GridEventType.FILTER]: Pick; + [GridEventType.FOCUS_CHANGE]: Pick< + GridEventProps, + 'rowKey' | 'columnName' | 'prevColumnName' | 'prevRowKey' + >; + [GridEventType.KEYDOWN]: Pick; + [GridEventType.MOUSEDOWN]: Pick; + [GridEventType.MOUSEOUT]: Pick; + [GridEventType.MOUSEOVER]: Pick; + [GridEventType.RESPONSE]: Pick; + [GridEventType.SCROLL_END]: {}; + [GridEventType.SORT]: Pick; + [GridEventType.SUCCESS_RESPONSE]: Pick; + [GridEventType.UNCHECK]: Pick; + [GridEventType.UNCHECK_ALL]: {}; +} + export type OptRowProp = CellValue | RecursivePartial | OptRow[]; export interface OptRow {