diff --git a/src/components/MultiSelect/index.d.ts b/src/components/MultiSelect/index.d.ts index 770408447..2e7a44387 100644 --- a/src/components/MultiSelect/index.d.ts +++ b/src/components/MultiSelect/index.d.ts @@ -2,7 +2,7 @@ import { ReactNode, FocusEvent } from 'react'; import { BaseProps } from '../types'; export interface MultiSelectOption { - name?: string; + name?: string | number; label?: string; value?: any; } diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js index 74edf8dc9..3a1a97ffe 100644 --- a/src/components/MultiSelect/index.js +++ b/src/components/MultiSelect/index.js @@ -297,7 +297,7 @@ MultiSelect.propTypes = { /** Specifies the value of an input element. */ value: PropTypes.arrayOf( PropTypes.shape({ - name: PropTypes.string, + name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), label: PropTypes.string, value: PropTypes.any, }), diff --git a/src/components/Option/__test__/option.spec.js b/src/components/Option/__test__/option.spec.js index 5fa3789f7..a06b22416 100644 --- a/src/components/Option/__test__/option.spec.js +++ b/src/components/Option/__test__/option.spec.js @@ -32,6 +32,20 @@ describe('', () => { const component = mount(); expect(component.find(StyledItem).exists()).toBe(true); }); + it('should render a regular option when type name is string or number', () => { + const names = ['option 1', 1]; + names.forEach(name => { + const component = mount(); + expect(component.find(StyledItem).exists()).toBe(true); + }); + }); + it('should return null when type name is not string or number', () => { + const names = [{}, [], undefined, null, true, new Date()]; + names.forEach(name => { + const component = mount(); + expect(component).toEqual({}); + }); + }); it('should not register when is disabled', () => { mount(); expect(optionRegisterFn).not.toHaveBeenCalled(); diff --git a/src/components/Option/index.d.ts b/src/components/Option/index.d.ts index fcbdb24d8..03a76cd8c 100644 --- a/src/components/Option/index.d.ts +++ b/src/components/Option/index.d.ts @@ -3,7 +3,7 @@ import { BaseProps, IconPosition } from '../types'; export interface OptionProps extends BaseProps { label?: string; - name?: string; + name?: string | number; variant?: 'default' | 'header'; icon?: ReactNode; iconPosition?: IconPosition; diff --git a/src/components/Option/index.js b/src/components/Option/index.js index 00a213b64..fb5005a2a 100644 --- a/src/components/Option/index.js +++ b/src/components/Option/index.js @@ -28,7 +28,7 @@ class OptionItem extends Component { componentDidMount() { const { disabled, variant, name } = this.props; const isHeader = variant === 'header'; - if (disabled || isHeader || typeof name !== 'string') { + if (disabled || isHeader || (typeof name !== 'string' && typeof name !== 'number')) { return null; } return this.register(); @@ -201,7 +201,7 @@ Option.propTypes = { /** Text of the PicklistOption. */ label: PropTypes.string, /** The name of the PicklistOption. */ - name: PropTypes.string, + name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** The variant changes the type of PicklistOption. * Accepted variants include default and header. * This value defaults to default. */ diff --git a/src/components/Option/readme.md b/src/components/Option/readme.md index b20fe5359..227898594 100644 --- a/src/components/Option/readme.md +++ b/src/components/Option/readme.md @@ -69,3 +69,39 @@ initialState = { value: null }; ``` + +##### Option accept number on name prop + +```js +import React from 'react'; +import { Picklist, Option } from 'react-rainbow-components'; + +const containerStyles = { + width: '200px', +}; + +initialState = { value: { name: 1, label: 'Experimental Building' } }; + +