From 135d115688b907ea3b714be83f8508ef45ae0f5a Mon Sep 17 00:00:00 2001 From: Jon Freedman Date: Mon, 6 Aug 2018 20:01:51 +0100 Subject: [PATCH] [react-select] switch DOM Node for ReactNode as per other files (#27871) * as elsewhere Node type should refer to ReactNode not a DOM node * lint fix :( * remove ReactNode -> Node alias and use ReactNode type throughout --- types/react-select/lib/Creatable.d.ts | 4 ++-- types/react-select/lib/Select.d.ts | 24 +++++++++---------- types/react-select/lib/builtins.d.ts | 4 ++-- .../react-select/lib/components/Control.d.ts | 4 ++-- types/react-select/lib/components/Group.d.ts | 6 ++--- types/react-select/lib/components/Menu.d.ts | 8 +++---- .../lib/components/MultiValue.d.ts | 10 ++++---- types/react-select/lib/components/Option.d.ts | 4 ++-- .../lib/components/Placeholder.d.ts | 4 ++-- .../lib/components/containers.d.ts | 8 +++---- 10 files changed, 38 insertions(+), 38 deletions(-) diff --git a/types/react-select/lib/Creatable.d.ts b/types/react-select/lib/Creatable.d.ts index ac67bf039c..5cae63021c 100644 --- a/types/react-select/lib/Creatable.d.ts +++ b/types/react-select/lib/Creatable.d.ts @@ -11,13 +11,13 @@ export interface CreatableProps { allowCreateWhileLoading?: boolean; /* Gets the label for the "create new ..." option in the menu. Is given the current input value. */ - formatCreateLabel?: (inputValue: string) => Node; + formatCreateLabel?: (inputValue: string) => React.ReactNode; /* Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array. */ isValidNewOption?: (inputValue: string, value: ValueType, options: OptionsType) => boolean; /* Returns the data for the new option when it is created. Used to display the value, and is passed to `onChange`. */ - getNewOptionData?: (inputValue: string, optionLabel: Node) => OptionType; + getNewOptionData?: (inputValue: string, optionLabel: React.ReactNode) => OptionType; /* If provided, this will be called with the input value when a new option is created, and `onChange` will **not** be called. Use this when you need more control over what happens when new options are created. */ diff --git a/types/react-select/lib/Select.d.ts b/types/react-select/lib/Select.d.ts index 3e89a139ac..aa8524103e 100644 --- a/types/react-select/lib/Select.d.ts +++ b/types/react-select/lib/Select.d.ts @@ -107,7 +107,7 @@ export interface Props { /* Formats group labels in the menu as React components */ formatGroupLabel?: typeof formatGroupLabel; /* Formats option labels in the menu and control as React components */ - formatOptionLabel?: (option: OptionType, labelMeta: FormatOptionLabelMeta) => Node; + formatOptionLabel?: (option: OptionType, labelMeta: FormatOptionLabelMeta) => React.ReactNode; /* Resolves option data to a string to be displayed as the label by components */ getOptionLabel?: typeof getOptionLabel; /* Resolves option data to a string to compare options and specify value attributes */ @@ -311,7 +311,7 @@ export default class Select extends React.Component void; setValue: (newValue: ValueType, action: ActionTypes, option?: OptionType) => void; selectProps: Readonly<{ - children?: Node; + children?: React.ReactNode; }> & Readonly>; }; @@ -343,8 +343,8 @@ export default class Select extends React.Component): boolean; isOptionSelected(option: OptionType, selectValue: OptionsType): boolean; filterOption(option: {}, inputValue: string): boolean; - formatOptionLabel(data: OptionType, context: FormatOptionLabelContext): Node; - formatGroupLabel(data: GroupType): Node; + formatOptionLabel(data: OptionType, context: FormatOptionLabelContext): React.ReactNode; + formatGroupLabel(data: GroupType): React.ReactNode; // ============================== // Mouse Handlers @@ -406,14 +406,14 @@ export default class Select extends React.Component | null; - renderClearIndicator(): Node; - renderLoadingIndicator(): Node; - renderIndicatorSeparator(): Node; - renderDropdownIndicator(): Node; - renderMenu(): Node; - renderFormField(): Node; + renderClearIndicator(): React.ReactNode; + renderLoadingIndicator(): React.ReactNode; + renderIndicatorSeparator(): React.ReactNode; + renderDropdownIndicator(): React.ReactNode; + renderMenu(): React.ReactNode; + renderFormField(): React.ReactNode; - renderLiveRegion(): Node; + renderLiveRegion(): React.ReactNode; } diff --git a/types/react-select/lib/builtins.d.ts b/types/react-select/lib/builtins.d.ts index b1e1c37cc8..5d404230cd 100644 --- a/types/react-select/lib/builtins.d.ts +++ b/types/react-select/lib/builtins.d.ts @@ -1,7 +1,7 @@ -import { ReactNode as Node } from 'react'; +import { ReactNode } from 'react'; import { GroupType } from './types'; -export function formatGroupLabel(group: GroupType): Node; +export function formatGroupLabel(group: GroupType): ReactNode; export function getOptionLabel(option: any): string; diff --git a/types/react-select/lib/components/Control.d.ts b/types/react-select/lib/components/Control.d.ts index c48dee76d4..8a9513197b 100644 --- a/types/react-select/lib/components/Control.d.ts +++ b/types/react-select/lib/components/Control.d.ts @@ -1,4 +1,4 @@ -import { ComponentType, ReactNode as Node, Ref as ElementRef } from 'react'; +import { ComponentType, ReactNode, Ref as ElementRef } from 'react'; import { borderRadius, colors, spacing } from '../theme'; import { CommonProps, PropsWithStyles } from '../types'; @@ -14,7 +14,7 @@ export type ControlProps = CommonProps & PropsWithStyles & State & { /** Children to render. */ - children: Node, + children: ReactNode, innerRef: ElementRef, /** The mouse down event and the innerRef to pass down to the controller element. */ innerProps: { diff --git a/types/react-select/lib/components/Group.d.ts b/types/react-select/lib/components/Group.d.ts index 9e05263224..39c3489bce 100644 --- a/types/react-select/lib/components/Group.d.ts +++ b/types/react-select/lib/components/Group.d.ts @@ -1,15 +1,15 @@ -import { ReactNode as Node, ComponentType } from 'react'; +import { ReactNode, ComponentType } from 'react'; import { spacing } from '../theme'; import { CommonProps } from '../types'; interface ComponentProps { /** The children to be rendered. */ - children: Node; + children: ReactNode; /** Component to wrap the label, recieves headingProps. */ Heading: ComponentType; /** Label to be displayed in the heading component. */ - label: Node; + label: ReactNode; } export type GroupProps = CommonProps & ComponentProps; diff --git a/types/react-select/lib/components/Menu.d.ts b/types/react-select/lib/components/Menu.d.ts index d91288cdeb..0af2bf16c1 100644 --- a/types/react-select/lib/components/Menu.d.ts +++ b/types/react-select/lib/components/Menu.d.ts @@ -2,7 +2,7 @@ import { Component, ReactElement, Ref as ElementRef, - ReactNode as Node, + ReactNode, ComponentType } from 'react'; import { createPortal } from 'react-dom'; @@ -89,7 +89,7 @@ interface MenuListState { export interface MenuListProps { /** The children to be rendered. */ - children: Node; + children: ReactNode; /** Inner ref to DOM Node */ innerRef: InnerRef; } @@ -108,7 +108,7 @@ export function loadingMessageCSS(): React.CSSProperties; export type NoticeProps = CommonProps & { /** The children to be rendered. */ - children: Node, + children: ReactNode, /** Props to be passed on to the wrapper. */ innerProps: { [key: string]: any }, }; @@ -129,7 +129,7 @@ export const LoadingMessage: ComponentType>; export type MenuPortalProps = CommonProps & { appendTo: HTMLElement, - children: Node, // ideally Menu + children: ReactNode, // ideally Menu controlElement: HTMLElement, menuPlacement: MenuPlacement, menuPosition: MenuPosition, diff --git a/types/react-select/lib/components/MultiValue.d.ts b/types/react-select/lib/components/MultiValue.d.ts index ac304bd42a..59974fbc46 100644 --- a/types/react-select/lib/components/MultiValue.d.ts +++ b/types/react-select/lib/components/MultiValue.d.ts @@ -1,10 +1,10 @@ -import { ComponentType, Component, ReactNode as Node } from 'react'; +import { ComponentType, Component, ReactNode } from 'react'; import { borderRadius, colors, spacing } from '../theme'; import { CommonProps } from '../types'; export type MultiValueProps = CommonProps &{ - children: Node, + children: ReactNode, components: any, cropWithEllipsis: boolean, data: OptionType, @@ -23,7 +23,7 @@ export function multiValueLabelCSS(props: MultiValueProps): React.CSSProper export function multiValueRemoveCSS(props: MultiValueProps): React.CSSProperties; export interface MultiValueGenericProps { - children: Node; + children: ReactNode; data: OptionType; innerProps: { className?: string }; selectProps: any; @@ -33,7 +33,7 @@ export const MultiValueGeneric: ComponentType>; export const MultiValueContainer: typeof MultiValueGeneric; export const MultiValueLabel: typeof MultiValueGeneric; export type MultiValueRemoveProps = CommonProps & { - children: Node, + children: ReactNode, innerProps: { className: string, onTouchEnd: (event: any) => void, @@ -44,7 +44,7 @@ export type MultiValueRemoveProps = CommonProps & { }; export class MultiValueRemove extends Component> { static defaultProps: { - children: Node, + children: ReactNode, }; } diff --git a/types/react-select/lib/components/Option.d.ts b/types/react-select/lib/components/Option.d.ts index 81ab38e401..defe37711a 100644 --- a/types/react-select/lib/components/Option.d.ts +++ b/types/react-select/lib/components/Option.d.ts @@ -1,4 +1,4 @@ -import { ComponentType, ReactNode as Node, MouseEventHandler } from 'react'; +import { ComponentType, ReactNode, MouseEventHandler } from 'react'; import { colors, spacing } from '../theme'; import { CommonProps, PropsWithStyles, InnerRef } from '../types'; @@ -22,7 +22,7 @@ export type OptionProps = PropsWithStyles & CommonProps & State & { /** The children to be rendered. */ - children: Node, + children: ReactNode, /** Inner ref to DOM Node */ innerRef: InnerRef, /** props passed to the wrapping element for the group. */ diff --git a/types/react-select/lib/components/Placeholder.d.ts b/types/react-select/lib/components/Placeholder.d.ts index 6f674d70a8..1a72bd69a7 100644 --- a/types/react-select/lib/components/Placeholder.d.ts +++ b/types/react-select/lib/components/Placeholder.d.ts @@ -1,11 +1,11 @@ -import { ComponentType, ReactNode as Node } from 'react'; +import { ComponentType, ReactNode } from 'react'; import { colors, spacing } from '../theme'; import { CommonProps } from '../types'; export type PlaceholderProps = CommonProps & { /** The children to be rendered. */ - children: Node, + children: ReactNode, /** props passed to the wrapping element for the group. */ innerProps: { [key: string]: any }, }; diff --git a/types/react-select/lib/components/containers.d.ts b/types/react-select/lib/components/containers.d.ts index e75de6d756..c72609bf31 100644 --- a/types/react-select/lib/components/containers.d.ts +++ b/types/react-select/lib/components/containers.d.ts @@ -1,4 +1,4 @@ -import { Component, ReactNode as Node, ComponentType } from 'react'; +import { Component, ReactNode, ComponentType } from 'react'; import { spacing } from '../theme'; import { CommonProps, KeyboardEventHandler } from '../types'; @@ -16,7 +16,7 @@ export interface ContainerState { export type ContainerProps = CommonProps & ContainerState & { /** The children to be rendered. */ - children: Node, + children: ReactNode, /** Inner props to be passed down to the container. */ innerProps: { onKeyDown: KeyboardEventHandler }, }; @@ -33,7 +33,7 @@ export type ValueContainerProps = CommonProps & { /** Whether the value container currently holds a value. */ hasValue: boolean, /** The children to be rendered. */ - children: Node, + children: ReactNode, }; export function valueContainerCSS(): React.CSSProperties; export class ValueContainer extends Component> {} @@ -50,7 +50,7 @@ export interface IndicatorsState { export type IndicatorContainerProps = CommonProps & IndicatorsState & { /** The children to be rendered. */ - children: Node, + children: ReactNode, }; export function indicatorsContainerCSS(): React.CSSProperties;