From 7fab83f66969402b4bb7e7bac33aee0000660159 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Mon, 3 Oct 2022 15:32:06 -0400 Subject: [PATCH] [core,select] chore: deprecate .ofType() helper methods --- packages/core/src/components/tree/tree.tsx | 5 +- .../core/src/components/tree/treeNode.tsx | 1 + .../timezone-select/timezoneSelect.tsx | 6 +- .../test/components/timezoneSelectTests.tsx | 4 +- .../core-examples/common/iconSelect.tsx | 6 +- .../select-examples/multiSelectExample.tsx | 4 +- .../select-examples/omnibarExample.tsx | 4 +- .../docs-theme/src/components/navigator.tsx | 3 +- .../components/multi-select/multiSelect.tsx | 4 +- .../components/multi-select/multiSelect2.tsx | 5 +- .../select/src/components/omnibar/omnibar.tsx | 4 +- .../src/components/query-list/query-list.md | 2 +- .../src/components/query-list/queryList.tsx | 1 + .../select/src/components/select/select.tsx | 4 +- .../select/src/components/select/select2.md | 77 ++++++++++--------- .../select/src/components/select/select2.tsx | 5 +- .../select/src/components/suggest/suggest.tsx | 4 +- .../src/components/suggest/suggest2.tsx | 5 +- packages/select/test/multiSelect2Tests.tsx | 5 +- packages/select/test/multiSelectTests.tsx | 5 +- packages/select/test/queryListTests.tsx | 37 ++++----- packages/select/test/suggest2Tests.tsx | 9 +-- packages/select/test/suggestTests.tsx | 8 +- 23 files changed, 92 insertions(+), 116 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 30466a7b73..d37f0f3869 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -126,9 +126,8 @@ export class Tree extends React.Component> { const nodeItems = treeNodes.map((node, i) => { const elementPath = currentPath!.concat(i); - const TypedTreeNode = TreeNode.ofType(); return ( - {...node} key={node.id} contentRef={this.handleContentRef} @@ -143,7 +142,7 @@ export class Tree extends React.Component> { path={elementPath} > {this.renderNodes(node.childNodes, elementPath)} - + ); }); diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx index 981f9107ed..5bbcb3a003 100644 --- a/packages/core/src/components/tree/treeNode.tsx +++ b/packages/core/src/components/tree/treeNode.tsx @@ -105,6 +105,7 @@ export interface ITreeNodeProps extends TreeNodeInfo { export class TreeNode extends React.Component> { public static displayName = `${DISPLAYNAME_PREFIX}.TreeNode`; + /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */ public static ofType() { return TreeNode as new (props: ITreeNodeProps) => TreeNode; } diff --git a/packages/datetime2/src/components/timezone-select/timezoneSelect.tsx b/packages/datetime2/src/components/timezone-select/timezoneSelect.tsx index 83a0743f9c..ce24d31970 100644 --- a/packages/datetime2/src/components/timezone-select/timezoneSelect.tsx +++ b/packages/datetime2/src/components/timezone-select/timezoneSelect.tsx @@ -117,8 +117,6 @@ export interface TimezoneSelectState { query: string; } -const TypedSelect = Select2.ofType(); - export class TimezoneSelect extends AbstractPureComponent2 { public static displayName = `${DISPLAYNAME_PREFIX}.TimezoneSelect`; @@ -150,7 +148,7 @@ export class TimezoneSelect extends AbstractPureComponent2 className={classNames(Classes.TIMEZONE_SELECT, className)} disabled={disabled} fill={fill} @@ -172,7 +170,7 @@ export class TimezoneSelect extends AbstractPureComponent2 {children ?? this.renderButton()} - + ); } diff --git a/packages/datetime2/test/components/timezoneSelectTests.tsx b/packages/datetime2/test/components/timezoneSelectTests.tsx index b36b2d698b..9a1213b4f4 100644 --- a/packages/datetime2/test/components/timezoneSelectTests.tsx +++ b/packages/datetime2/test/components/timezoneSelectTests.tsx @@ -169,11 +169,11 @@ describe("", () => { } function findSelect(timezoneSelect: ReactWrapper) { - return timezoneSelect.find(Select2.ofType()); + return timezoneSelect.find>(Select2); } function findQueryList(timezoneSelect: ReactWrapper) { - return findSelect(timezoneSelect).find(QueryList.ofType()); + return findSelect(timezoneSelect).find>(QueryList); } function findPopover(timezoneSelect: ReactWrapper) { diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx index 716be3f291..bf7334fdbf 100644 --- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx +++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx @@ -31,15 +31,13 @@ export interface IIconSelectProps { onChange: (iconName?: IconName) => void; } -const TypedSelect = Select2.ofType(); - export class IconSelect extends React.PureComponent { public render() { const { disabled, iconName } = this.props; return ( ); } diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx index b6c1097092..01dfae74b4 100644 --- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx +++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx @@ -35,8 +35,6 @@ import { import { PropCodeTooltip } from "../../common/propCodeTooltip"; -const FilmMultiSelect = MultiSelect2.ofType(); - const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING]; export interface IMultiSelectExampleState { @@ -113,7 +111,7 @@ export class MultiSelectExample extends React.PureComponent - {...flags} createNewItemFromQuery={allowCreate ? createFilms : undefined} createNewItemRenderer={allowCreate ? renderCreateFilmsMenuItem : null} diff --git a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx index 53782139f7..e18423d74b 100644 --- a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx +++ b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx @@ -27,8 +27,6 @@ import { TOP_100_FILMS, } from "@blueprintjs/select/examples"; -const FilmOmnibar = Omnibar.ofType(); - export interface IOmnibarExampleState { allowCreate: boolean; isOpen: boolean; @@ -78,7 +76,7 @@ export class OmnibarExample extends React.PureComponent - {...this.state} createNewItemFromQuery={maybeCreateNewItemFromQuery} createNewItemRenderer={maybeCreateNewItemRenderer} diff --git a/packages/docs-theme/src/components/navigator.tsx b/packages/docs-theme/src/components/navigator.tsx index 2f084e4fec..3618936347 100644 --- a/packages/docs-theme/src/components/navigator.tsx +++ b/packages/docs-theme/src/components/navigator.tsx @@ -46,7 +46,6 @@ export interface INavigationSection { title: string; } -const NavOmnibar = Omnibar.ofType(); export class Navigator extends React.PureComponent { private sections: INavigationSection[]; @@ -68,7 +67,7 @@ export class Navigator extends React.PureComponent { return null; } return ( - className="docs-navigator-menu" inputProps={{ placeholder: "Search documentation pages and sections..." }} itemListPredicate={this.filterMatches} diff --git a/packages/select/src/components/multi-select/multiSelect.tsx b/packages/select/src/components/multi-select/multiSelect.tsx index 8ab1873607..dd52a2a10f 100644 --- a/packages/select/src/components/multi-select/multiSelect.tsx +++ b/packages/select/src/components/multi-select/multiSelect.tsx @@ -120,8 +120,6 @@ export class MultiSelect extends AbstractPureComponent2, isOpen: (this.props.popoverProps && this.props.popoverProps.isOpen) || false, }; - private TypedQueryList = QueryList.ofType(); - public input: HTMLInputElement | null = null; public queryList: QueryList | null = null; @@ -147,7 +145,7 @@ export class MultiSelect extends AbstractPureComponent2, const { openOnKeyDown, popoverProps, tagInputProps, ...restProps } = this.props; return ( - {...restProps} onItemSelect={this.handleItemSelect} onQueryChange={this.handleQueryChange} diff --git a/packages/select/src/components/multi-select/multiSelect2.tsx b/packages/select/src/components/multi-select/multiSelect2.tsx index ada0c4cc5d..dac946aa78 100644 --- a/packages/select/src/components/multi-select/multiSelect2.tsx +++ b/packages/select/src/components/multi-select/multiSelect2.tsx @@ -131,6 +131,7 @@ export class MultiSelect2 extends AbstractPureComponent2 placeholder: "Search...", }; + /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */ public static ofType() { return MultiSelect2 as new (props: MultiSelect2Props) => MultiSelect2; } @@ -139,8 +140,6 @@ export class MultiSelect2 extends AbstractPureComponent2 isOpen: (this.props.popoverProps && this.props.popoverProps.isOpen) || false, }; - private TypedQueryList = QueryList.ofType(); - public input: HTMLInputElement | null = null; public queryList: QueryList | null = null; @@ -174,7 +173,7 @@ export class MultiSelect2 extends AbstractPureComponent2 const { menuProps, openOnKeyDown, popoverProps, tagInputProps, ...restProps } = this.props; return ( - {...restProps} menuProps={{ "aria-label": "selectable options", diff --git a/packages/select/src/components/omnibar/omnibar.tsx b/packages/select/src/components/omnibar/omnibar.tsx index f35e9b5aa9..5320f1bae5 100644 --- a/packages/select/src/components/omnibar/omnibar.tsx +++ b/packages/select/src/components/omnibar/omnibar.tsx @@ -62,14 +62,12 @@ export class Omnibar extends React.PureComponent> { return Omnibar as new (props: OmnibarProps) => Omnibar; } - private TypedQueryList = QueryList.ofType(); - public render() { // omit props specific to this component, spread the rest. const { isOpen, inputProps, overlayProps, ...restProps } = this.props; const initialContent = "initialContent" in this.props ? this.props.initialContent : null; - return ; + return {...restProps} initialContent={initialContent} renderer={this.renderQueryList} />; } private renderQueryList = (listProps: QueryListRendererProps) => { diff --git a/packages/select/src/components/query-list/query-list.md b/packages/select/src/components/query-list/query-list.md index 114040c8e0..7d01aa405b 100644 --- a/packages/select/src/components/query-list/query-list.md +++ b/packages/select/src/components/query-list/query-list.md @@ -2,7 +2,7 @@ `QueryList` is a higher-order component that provides interactions between a query string and a list of items. Specifically, it implements the two predicate props described above and provides keyboard selection. It does not render anything on its own, instead deferring to a `renderer` prop to perform the actual composition of components. -`QueryList` is a generic component where `` represents the type of one item in the array of `items`. The static method `QueryList.ofType()` is available to simplify the TypeScript usage. +`QueryList` is a generic component where `` represents the type of one item in the array of `items`. If the `Select` interactions are not sufficient for your use case, you can use `QueryList` directly to render your own components while leveraging basic interactions for keyboard selection and filtering. The `Select` source code is a great place to start when implementing a custom `QueryList` `renderer`. diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx index ce2a2989a7..e82e678fb3 100644 --- a/packages/select/src/components/query-list/queryList.tsx +++ b/packages/select/src/components/query-list/queryList.tsx @@ -157,6 +157,7 @@ export class QueryList extends AbstractComponent2, IQueryLi resetOnQuery: true, }; + /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */ public static ofType() { return QueryList as new (props: QueryListProps) => QueryList; } diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx index 2d77bb814e..fe5fc39f16 100644 --- a/packages/select/src/components/select/select.tsx +++ b/packages/select/src/components/select/select.tsx @@ -114,8 +114,6 @@ export class Select extends AbstractPureComponent2, ISelectSta public state: ISelectState = { isOpen: false }; - private TypedQueryList = QueryList.ofType(); - public inputElement: HTMLInputElement | null = null; private queryList: QueryList | null = null; @@ -135,7 +133,7 @@ export class Select extends AbstractPureComponent2, ISelectSta const { filterable, inputProps, popoverProps, ...restProps } = this.props; return ( - {...restProps} onItemSelect={this.handleItemSelect} ref={this.handleQueryListRef} diff --git a/packages/select/src/components/select/select2.md b/packages/select/src/components/select/select2.md index 0075596314..b54991c521 100644 --- a/packages/select/src/components/select/select2.md +++ b/packages/select/src/components/select/select2.md @@ -91,7 +91,7 @@ const FilmSelect: React.FC = () => { ReactDOM.render( document.querySelector("#root")); ``` -In TypeScript, `Select2` is a _generic component_ so you must define a local type that specifies ``, the type of one item in `items`. The props on this local type will now operate on your data type (speak your language) so you can easily define handlers without transformation steps, but most props are required as a result. The static `Select2.ofType()` method is available to streamline this process. (Note that this has no effect on JavaScript usage: the `Select2` export is a perfectly valid React component class.) +In TypeScript, `Select2` is a _generic component_ so you must define a local type that specifies ``, the type of one item in `items`. The props on this local type will now operate on your data type so you can easily define handlers without transformation steps, but most props are required as a result. @## Querying @@ -112,13 +112,11 @@ Since Select2 accepts arbitrary children, disabling a Select2 componet requires _and also_ disabling its children. For example: ```tsx -const FilmSelect = Select2.ofType(); - -// many props omitted here for brevity -return ( - +const FilmSelect: React.FC = () => ( + // many props omitted here for brevity + disabled={true}>