From 7cdb8a6b4d9de89a599b3aee8b6d90a44a931ea6 Mon Sep 17 00:00:00 2001 From: Eric Bonow Date: Thu, 21 Jan 2021 15:58:02 -0800 Subject: [PATCH] Pass and sanitize CommonProps passed to Group and Input --- .changeset/shy-onions-repeat.md | 5 ++ packages/react-select/src/Select.js | 14 ++---- packages/react-select/src/components/Group.js | 10 ++-- packages/react-select/src/components/Input.js | 46 +++++++++---------- packages/react-select/src/types.js | 3 +- packages/react-select/src/utils.js | 26 +++++++++++ 6 files changed, 66 insertions(+), 38 deletions(-) create mode 100644 .changeset/shy-onions-repeat.md diff --git a/.changeset/shy-onions-repeat.md b/.changeset/shy-onions-repeat.md new file mode 100644 index 0000000000..8559e7b083 --- /dev/null +++ b/.changeset/shy-onions-repeat.md @@ -0,0 +1,5 @@ +--- +'react-select': minor +--- + +Pass and sanitize CommonProps passed to Group and Input components diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 711a9f54b8..9016d0a7bd 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -771,16 +771,16 @@ export default class Select extends Component { cx, getStyles, getValue, - setValue, selectOption, + setValue, props, } = this; const { isMulti, isRtl, options } = props; const hasValue = this.hasValue(); return { - cx, clearValue, + cx, getStyles, getValue, hasValue, @@ -788,8 +788,8 @@ export default class Select extends Component { isRtl, options, selectOption, - setValue, selectProps: props, + setValue, theme: this.getTheme(), }; } @@ -1446,6 +1446,7 @@ export default class Select extends Component { } = this.props; const { Input } = this.components; const { inputIsHidden } = this.state; + const { commonProps } = this; const id = inputId || this.getElementId('input'); @@ -1475,15 +1476,12 @@ export default class Select extends Component { ); } - const { cx, theme, selectProps } = this.commonProps; - return ( { onBlur={this.onInputBlur} onChange={this.handleInputChange} onFocus={this.onInputFocus} - selectProps={selectProps} spellCheck="false" tabIndex={tabIndex} form={form} - theme={theme} type="text" value={inputValue} {...ariaAttributes} diff --git a/packages/react-select/src/components/Group.js b/packages/react-select/src/components/Group.js index f100091509..ba29dd1398 100644 --- a/packages/react-select/src/components/Group.js +++ b/packages/react-select/src/components/Group.js @@ -2,6 +2,7 @@ /** @jsx jsx */ import { type Node, type ComponentType } from 'react'; import { jsx } from '@emotion/core'; +import { cleanCommonProps } from '../utils'; import type { CommonProps } from '../types'; @@ -14,6 +15,8 @@ type ComponentProps = { headingProps: any, /** Label to be displayed in the heading component. */ label: Node, + /* The data of the group. */ + data: any, }; export type GroupProps = CommonProps & ComponentProps; @@ -67,12 +70,13 @@ export const groupHeadingCSS = ({ theme: { spacing } }: GroupProps) => ({ }); export const GroupHeading = (props: any) => { - const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props; + const { getStyles, cx, className } = props; + const { data, ...innerProps } = cleanCommonProps(props); return (
); }; diff --git a/packages/react-select/src/components/Input.js b/packages/react-select/src/components/Input.js index 34564a70a1..0a6b44f62f 100644 --- a/packages/react-select/src/components/Input.js +++ b/packages/react-select/src/components/Input.js @@ -4,17 +4,16 @@ import { type ElementRef } from 'react'; import { jsx } from '@emotion/core'; import AutosizeInput from 'react-input-autosize'; -import type { PropsWithStyles, ClassNamesState } from '../types'; +import type { CommonProps } from '../types'; +import { cleanCommonProps } from '../utils'; -export type InputProps = PropsWithStyles & { - cx: (?ClassNamesState, ?string) => string | void, +export type InputProps = CommonProps & { /** Reference to the internal element */ innerRef: (ElementRef<*>) => void, /** Set whether the input should be visible. Does not affect input size. */ isHidden: boolean, /** Whether the input is disabled */ isDisabled?: boolean, - className?: string, /** The ID of the form that the input belongs to */ form?: string, }; @@ -40,26 +39,23 @@ const inputStyle = isHidden => ({ color: 'inherit', }); -const Input = ({ - className, - cx, - getStyles, - innerRef, - isHidden, - isDisabled, - theme, - selectProps, - ...props -}: InputProps) => ( -
- -
-); +const Input = (props: InputProps) => { + const { className, cx, getStyles } = props; + const { innerRef, isDisabled, isHidden, ...innerProps } = cleanCommonProps( + props + ); + + return ( +
+ +
+ ); +}; export default Input; diff --git a/packages/react-select/src/types.js b/packages/react-select/src/types.js index f7394034a7..2c7e3497fa 100644 --- a/packages/react-select/src/types.js +++ b/packages/react-select/src/types.js @@ -64,14 +64,15 @@ export type CommonProps = { See the `styles` object for the properties available. */ getStyles: (string, any) => {}, - theme: Theme, getValue: () => ValueType, hasValue: boolean, isMulti: boolean, + isRtl: boolean, options: OptionsType, selectOption: OptionType => void, selectProps: any, setValue: (ValueType, ActionTypes) => void, + theme: Theme, }; export type ActionTypes = diff --git a/packages/react-select/src/utils.js b/packages/react-select/src/utils.js index a5baffbbf4..0d4c481725 100644 --- a/packages/react-select/src/utils.js +++ b/packages/react-select/src/utils.js @@ -3,6 +3,7 @@ import { type ElementRef } from 'react'; import type { ClassNamesState, + CommonProps, InputActionMeta, OptionsType, ValueType, @@ -67,6 +68,31 @@ export const cleanValue = (value: ValueType): OptionsType => { return []; }; +// ============================== +// Clean Common Props +// ============================== + +export const cleanCommonProps = (props: CommonProps): any => { + //className + const { + className, // not listed in commonProps documentation, needs to be removed to allow Emotion to generate classNames + clearValue, + cx, + getStyles, + getValue, + hasValue, + isMulti, + isRtl, + options, // not listed in commonProps documentation + selectOption, + selectProps, + setValue, + theme, // not listed in commonProps documentation + ...innerProps + } = props; + return { ...innerProps }; +}; + // ============================== // Handle Input Change // ==============================