From a07dac6ea1eab9da3c2ee563f3502d3a5168eb03 Mon Sep 17 00:00:00 2001 From: bozdoz Date: Wed, 24 Feb 2021 12:00:52 -0400 Subject: [PATCH 1/2] fix: updates select types --- packages/react-select/src/Select.js | 23 +++++++++++++++++-- packages/react-select/src/components/Group.js | 2 +- packages/react-select/src/components/Menu.js | 12 +++++----- .../react-select/src/components/MultiValue.js | 4 ++-- .../react-select/src/components/Option.js | 6 ++--- .../src/components/Placeholder.js | 2 +- .../src/components/SingleValue.js | 2 +- .../react-select/src/components/indicators.js | 6 ++--- 8 files changed, 38 insertions(+), 19 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 1d4a0513ca..cc84f7bc3d 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -313,6 +313,25 @@ type CategorizedGroup = { type CategorizedGroupOrOption = CategorizedGroup | CategorizedOption; +type CommonProps = { + cx(...args: any): string, + clearValue(): void, + getStyles(key: string, props: {}): {}, + getValue(): OptionsType, + hasValue: boolean, + isMulti: boolean, + isRtl: boolean, + options: OptionsType, + selectOption(newValue: OptionType): void, + setValue( + newValue: ValueType, + action?: ActionTypes, + option?: OptionType + ): void, + selectProps: Props, + theme: typeof defaultTheme, +} + function toCategorizedOption( props: Props, option: OptionType, @@ -488,7 +507,7 @@ export default class Select extends Component { blockOptionHover: boolean = false; isComposing: boolean = false; - commonProps: any; // TODO + commonProps: CommonProps; initialTouchX: number = 0; initialTouchY: number = 0; instancePrefix: string = ''; @@ -929,7 +948,7 @@ export default class Select extends Component { cx = (...args: any) => classNames(this.props.classNamePrefix, ...args); - getCommonProps() { + getCommonProps(): $Exact { const { clearValue, cx, diff --git a/packages/react-select/src/components/Group.js b/packages/react-select/src/components/Group.js index 31602dd90c..c6bcb01a04 100644 --- a/packages/react-select/src/components/Group.js +++ b/packages/react-select/src/components/Group.js @@ -13,7 +13,7 @@ type ComponentProps = { /** Props to pass to Heading. */ headingProps: any, /** Props to be passed to the group element. */ - innerProps: {}, + innerProps?: {}, /** Label to be displayed in the heading component. */ label: Node, }; diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js index 605b8a79f4..6a899fdf0f 100644 --- a/packages/react-select/src/components/Menu.js +++ b/packages/react-select/src/components/Menu.js @@ -209,9 +209,9 @@ export function getMenuPlacement({ export type MenuAndPlacerCommon = CommonProps & { /** Callback to update the portal after possible flip. */ - getPortalPlacement: MenuState => void, + getPortalPlacement?: MenuState => void, /** Props to be passed to the menu wrapper. */ - innerProps: {}, + innerProps?: {}, /** Set the maximum height of the menu. */ maxMenuHeight: number, /** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */ @@ -231,7 +231,7 @@ export type MenuProps = MenuAndPlacerCommon & { }; export type MenuPlacerProps = MenuAndPlacerCommon & { /** The children to be rendered. */ - children: ({}) => Node, + children: ({ ref: any, placerProps: any }) => Node, }; function alignToControl(placement) { @@ -351,7 +351,7 @@ export type MenuListProps = { /** Inner ref to DOM Node */ innerRef: InnerRef, /** Props to be passed to the menu-list wrapper. */ - innerProps: {}, + innerProps?: {}, }; export type MenuListComponentProps = CommonProps & MenuListProps & @@ -418,7 +418,7 @@ export type NoticeProps = CommonProps & { /** The children to be rendered. */ children: Node, /** Props to be passed on to the wrapper. */ - innerProps: {}, + innerProps?: {}, }; export const NoOptionsMessage = (props: NoticeProps) => { @@ -473,7 +473,7 @@ export type MenuPortalProps = CommonProps & { appendTo: HTMLElement, children: Node, // ideally Menu controlElement: HTMLElement, - innerProps: {}, + innerProps?: {}, menuPlacement: MenuPlacement, menuPosition: MenuPosition, }; diff --git a/packages/react-select/src/components/MultiValue.js b/packages/react-select/src/components/MultiValue.js index 8bdbb25402..5f44da2882 100644 --- a/packages/react-select/src/components/MultiValue.js +++ b/packages/react-select/src/components/MultiValue.js @@ -8,9 +8,9 @@ import type { CommonProps } from '../types'; export type MultiValueProps = CommonProps & { children: Node, components: any, - cropWithEllipsis: boolean, + cropWithEllipsis?: boolean, data: any, - innerProps: any, + innerProps?: {}, isFocused: boolean, isDisabled: boolean, removeProps: { diff --git a/packages/react-select/src/components/Option.js b/packages/react-select/src/components/Option.js index deff63038a..342aef3684 100644 --- a/packages/react-select/src/components/Option.js +++ b/packages/react-select/src/components/Option.js @@ -15,9 +15,9 @@ type State = { }; type InnerProps = { id: string, - key: string, - onClick: MouseEventHandler, - onMouseOver: MouseEventHandler, + key?: string, + onClick?: MouseEventHandler, + onMouseOver?: MouseEventHandler, tabIndex: number, }; export type OptionProps = PropsWithStyles & diff --git a/packages/react-select/src/components/Placeholder.js b/packages/react-select/src/components/Placeholder.js index 71800825f6..feed3cf021 100644 --- a/packages/react-select/src/components/Placeholder.js +++ b/packages/react-select/src/components/Placeholder.js @@ -8,7 +8,7 @@ export type PlaceholderProps = CommonProps & { /** The children to be rendered. */ children: Node, /** props passed to the wrapping element for the group. */ - innerProps: { [string]: any }, + innerProps?: {}, }; export const placeholderCSS = ({ diff --git a/packages/react-select/src/components/SingleValue.js b/packages/react-select/src/components/SingleValue.js index 9a23e8b2b0..8c59c7682a 100644 --- a/packages/react-select/src/components/SingleValue.js +++ b/packages/react-select/src/components/SingleValue.js @@ -13,7 +13,7 @@ type ValueProps = { /* The data of the selected option rendered in the Single Value component. */ data: any, /** Props passed to the wrapping element for the group. */ - innerProps: any, + innerProps?: {}, }; export type SingleValueProps = CommonProps & ValueProps & State; diff --git a/packages/react-select/src/components/indicators.js b/packages/react-select/src/components/indicators.js index 24bc99937e..999336545e 100644 --- a/packages/react-select/src/components/indicators.js +++ b/packages/react-select/src/components/indicators.js @@ -44,9 +44,9 @@ export const DownChevron = (props: any) => ( export type IndicatorProps = CommonProps & { /** The children to be rendered inside the indicator. */ - children: Node, + children?: Node, /** Props that will be passed on to the children. */ - innerProps: any, + innerProps?: {}, /** The focused state of the select. */ isFocused: boolean, /** Whether the text is right to left */ @@ -202,7 +202,7 @@ export type LoadingIconProps = { isRtl: boolean, } & CommonProps & { /** Set size of the container. */ - size: number, + size?: number, }; export const LoadingIndicator = (props: LoadingIconProps) => { const { className, cx, getStyles, innerProps, isRtl } = props; From a4929f04c55182273572faec2f58938db0143e79 Mon Sep 17 00:00:00 2001 From: bozdoz Date: Wed, 24 Feb 2021 12:51:28 -0400 Subject: [PATCH 2/2] fix prettier --- packages/react-select/src/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index cc84f7bc3d..93c0e66dd0 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -330,7 +330,7 @@ type CommonProps = { ): void, selectProps: Props, theme: typeof defaultTheme, -} +}; function toCategorizedOption( props: Props,