From 163a45cdb7f943ce4169f8a1086dba8385e79c65 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Wed, 3 May 2023 11:59:03 -0700 Subject: [PATCH 1/7] Fixed ColumnSpec.editor type - Now properly types the "params" variable of the given editor function --- cmp/grid/Types.ts | 3 ++- cmp/grid/columns/Column.ts | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/cmp/grid/Types.ts b/cmp/grid/Types.ts index f98d9cd39..935f71ccd 100644 --- a/cmp/grid/Types.ts +++ b/cmp/grid/Types.ts @@ -5,7 +5,7 @@ * Copyright © 2022 Extremely Heavy Industries Inc. */ -import {ValueGetterParams} from '@ag-grid-community/core'; +import {ICellEditorParams, ValueGetterParams} from '@ag-grid-community/core'; import {GridFilterFieldSpecConfig} from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec'; import {HSide, PersistOptions, PlainObject, SizingMode, Some} from '@xh/hoist/core'; import {Store, StoreRecord, View} from '@xh/hoist/data'; @@ -303,6 +303,7 @@ export type ColumnEditorFn = (params: { record: StoreRecord; column: Column; gridModel: GridModel; + agParams: ICellEditorParams; }) => ReactElement; /** diff --git a/cmp/grid/columns/Column.ts b/cmp/grid/columns/Column.ts index 91885abca..285cd8ca3 100644 --- a/cmp/grid/columns/Column.ts +++ b/cmp/grid/columns/Column.ts @@ -4,6 +4,7 @@ * * Copyright © 2022 Extremely Heavy Industries Inc. */ +import {ICellEditorParams} from '@ag-grid-community/core'; import {div, li, span, ul} from '@xh/hoist/cmp/layout'; import {HAlign, HSide, PlainObject, Some, XH, Thunkable} from '@xh/hoist/core'; import { @@ -53,8 +54,7 @@ import { ColumnSortValueFn, ColumnTooltipFn } from '../Types'; -import {ExcelFormat} from '../enums/ExcelFormat'; -import {FunctionComponent} from 'react'; +import {ExcelFormat} from '@xh/hoist/cmp/grid'; import {ColumnGroup} from './ColumnGroup'; import type { ColDef, @@ -321,7 +321,7 @@ export interface ColumnSpec { * Cell editor Component or a function to create one. Adding an editor will also * install a cellClassRule and tooltip to display the validation state of the cell in question. */ - editor?: FunctionComponent | ColumnEditorFn; + editor?: ColumnEditorFn; /** * True if this cell editor should be rendered as a popup over the cell instead of within the @@ -939,7 +939,7 @@ export class Column { } if (editor) { - ret.cellEditor = forwardRef((agParams: PlainObject, ref) => { + ret.cellEditor = forwardRef((agParams: ICellEditorParams, ref) => { const props = { record: agParams.data, gridModel, From a0df86b0f1ca5cb1744b691b5b3dae26b632a9a0 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Thu, 11 May 2023 18:19:18 -0700 Subject: [PATCH 2/7] Updated CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1399a8cb..c041effa4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### ⚙️ Typescript API Adjustments * Improved the recommendation for the app `declare` statement within our [TypeScript migration docs](https://github.com/xh/hoist-react/blob/develop/docs/upgrade-to-typescript.md#bootstrapts--service-declarations). +* Corrected the type of `ColumnSpec.editor`. ## 56.2.0 - 2023-04-28 * Expose `margin` property on DashContainerModel. From 1cfea433680ab6672c2da99c24e17b0e089b8f52 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Fri, 12 May 2023 11:47:27 -0700 Subject: [PATCH 3/7] Made EditorProps.inputProps optional --- desktop/cmp/grid/editors/EditorProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desktop/cmp/grid/editors/EditorProps.ts b/desktop/cmp/grid/editors/EditorProps.ts index 8bcd29afb..a62c14e62 100644 --- a/desktop/cmp/grid/editors/EditorProps.ts +++ b/desktop/cmp/grid/editors/EditorProps.ts @@ -23,7 +23,7 @@ export interface EditorProps extends HoistP record: StoreRecord; /** Props to pass through to the underlying HoistInput component */ - inputProps: InputPropsT; + inputProps?: InputPropsT; agParams: ICellEditorParams; } From 7a7333e50b4e2ffdfafe30cea902319f0ffedb0c Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Fri, 12 May 2023 13:20:11 -0700 Subject: [PATCH 4/7] Second attempt at editor typing --- cmp/grid/Types.ts | 14 ++++++++++---- cmp/grid/columns/Column.ts | 18 +++++++++++++----- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/cmp/grid/Types.ts b/cmp/grid/Types.ts index 935f71ccd..8a5503b7b 100644 --- a/cmp/grid/Types.ts +++ b/cmp/grid/Types.ts @@ -295,16 +295,22 @@ export type ColumnEditableFn = (params: { }) => boolean; /** - * Function to return one Grid cell editor. This value will be used to create a new Component - * whenever editing is initiated on a cell. + * Function to return one Grid cell editor. This function will be used to create a new + * Component, whenever editing is initiated on a cell. * @returns the react element to use as the cell editor. */ -export type ColumnEditorFn = (params: { +export type ColumnEditorFn = (props: ColumnEditorProps, nil?: any) => ReactElement; + +/** + * The object passed into the first argument of {@link ColumnSpec.editor}. + * Satisfies the {@link EditorProps} of an editor component. + */ +export type ColumnEditorProps = { record: StoreRecord; column: Column; gridModel: GridModel; agParams: ICellEditorParams; -}) => ReactElement; +}; /** * Function to update the value of a StoreRecord field after inline editing diff --git a/cmp/grid/columns/Column.ts b/cmp/grid/columns/Column.ts index cedfda3ad..6b91ef3ea 100644 --- a/cmp/grid/columns/Column.ts +++ b/cmp/grid/columns/Column.ts @@ -33,7 +33,14 @@ import { keysIn, toString } from 'lodash'; -import {createElement, forwardRef, isValidElement, ReactNode, useImperativeHandle} from 'react'; +import { + createElement, + forwardRef, + FunctionComponent, + isValidElement, + ReactNode, + useImperativeHandle +} from 'react'; import {GridModel} from '../GridModel'; import {GridSorter} from '../GridSorter'; import {managedRenderer} from '../impl/Utils'; @@ -43,6 +50,7 @@ import { ColumnComparator, ColumnEditableFn, ColumnEditorFn, + ColumnEditorProps, ColumnExcelFormatFn, ColumnExportValueFn, ColumnGetValueFn, @@ -318,10 +326,10 @@ export interface ColumnSpec { editable?: boolean | ColumnEditableFn; /** - * Cell editor Component or a function to create one. Adding an editor will also - * install a cellClassRule and tooltip to display the validation state of the cell in question. + * Cell editor Component or a function to create one. Adding an editor will also install a + * cellClassRule and tooltip to display the validation state of the cell in question. */ - editor?: ColumnEditorFn; + editor?: FunctionComponent | ColumnEditorFn; /** * True if this cell editor should be rendered as a popup over the cell instead of within the @@ -455,7 +463,7 @@ export class Column { autosizeBufferPx: number; autoHeight: boolean; editable: boolean | ColumnEditableFn; - editor: ColumnEditorFn; + editor: FunctionComponent | ColumnEditorFn; editorIsPopup: boolean; setValueFn: ColumnSetValueFn; getValueFn: ColumnGetValueFn; From ce03c1cc1d69bf89578c41985cc4d044a0cdf5a0 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Tue, 12 Dec 2023 10:48:20 -0800 Subject: [PATCH 5/7] Fixed type --- cmp/grid/columns/Column.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/cmp/grid/columns/Column.ts b/cmp/grid/columns/Column.ts index 618f82294..621e20e9c 100644 --- a/cmp/grid/columns/Column.ts +++ b/cmp/grid/columns/Column.ts @@ -34,7 +34,6 @@ import { toString } from 'lodash'; import { - Attributes, createElement, forwardRef, FunctionComponent, @@ -971,8 +970,7 @@ export class Column { ref }; // Can be a component or elem factory/ ad-hoc render function. - if ((editor as any).isHoistComponent) - return createElement(editor, props as Attributes); + if ((editor as any).isHoistComponent) return createElement(editor, props); if (isFunction(editor)) return editor(props); throw XH.exception('Column editor must be a HoistComponent or a render function'); }); From 9a4036610ea7bdcb76f6194d2e777814b1419b81 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Tue, 12 Dec 2023 10:52:12 -0800 Subject: [PATCH 6/7] Updated CHANGELOG.md --- CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fab288a30..6d73ec44c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ * Added `xh-bg-intent-xxx` CSS classes, for intent-coloring the `background-color` of elements. +### ⚙️ Typescript API Adjustments + +* Corrected the type of `ColumnSpec.editor`. + ## 59.5.0 - 2023-12-11 ### 🎁 New Features @@ -370,10 +374,6 @@ render beneath that parent's own modal dialog. * Fixed broken `CodeInput` copy-to-clipboard feature. -### ⚙️ Typescript API Adjustments - -* Corrected the type of `ColumnSpec.editor`. - ## v56.4.0 - 2023-05-10 ### 🎁 New Features From 97f7ddbb066097bf6364c0aae28077ef1c6c1826 Mon Sep 17 00:00:00 2001 From: Jakub Kupsik Date: Tue, 12 Dec 2023 11:18:22 -0800 Subject: [PATCH 7/7] CR with Anselm --- cmp/grid/Types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cmp/grid/Types.ts b/cmp/grid/Types.ts index 1eae826f1..b60bd0d2d 100644 --- a/cmp/grid/Types.ts +++ b/cmp/grid/Types.ts @@ -295,9 +295,11 @@ export type ColumnEditableFn = (params: { /** * Function to return one Grid cell editor. This function will be used to create a new * Component, whenever editing is initiated on a cell. + * The never parameter is never provided - it is included to satisfy typescript. See + * discussion in https://github.com/xh/hoist-react/pull/3351. * @returns the react element to use as the cell editor. */ -export type ColumnEditorFn = (props: ColumnEditorProps, nil?: any) => ReactElement; +export type ColumnEditorFn = (props: ColumnEditorProps, never?: any) => ReactElement; /** * The object passed into the first argument of {@link ColumnSpec.editor}.