Skip to content

Commit

Permalink
fix(component): allow 0 as values in selects (#257)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya committed Nov 12, 2019
1 parent 1d91e4f commit 92c6238
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 117 deletions.
4 changes: 2 additions & 2 deletions packages/big-design/src/components/Select/Select.tsx
View file
Expand Up @@ -228,7 +228,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
const { filterChildren, highlightedItem, inputText } = this.state;

return options.map((option, index) => {
if (!option.content || !option.value) {
if (!option.content || typeof option.value === 'undefined') {
return null;
}

Expand Down Expand Up @@ -466,7 +466,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
private updatedSelectedItem() {
const { multi, value } = this.props;

if (!value || multi) {
if (typeof value === 'undefined' || multi) {
return this.setState({ inputText: '', selectedElement: null, selectedOptionContent: '' });
}

Expand Down
233 changes: 118 additions & 115 deletions packages/docs/pages/Select/SelectPage.tsx
View file
Expand Up @@ -24,41 +24,43 @@ export default () => (
const handleChange = val => setValue(val);

return (
<Form.Group>
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
filterable={true}
label="Countries"
maxHeight={300}
onItemChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
{ value: 'fr', content: 'France' },
{ value: 'gr', content: 'Germany' },
{ value: 'ar', content: 'Argentina' },
{ value: 'ru', content: 'Russia', disabled: true },
{ value: 'ch', content: 'Chile' },
{ value: 'bo', content: 'Bolivia' },
{ value: 'jp', content: 'Japan' },
{ value: 'cn', content: 'China' },
{ value: 'sk', content: 'South Korea' },
{ value: 'au', content: 'Australia' },
{ value: 'ug', content: 'Uganda' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
</Form.Group>
<Form>
<Form.Group>
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
filterable={true}
label="Countries"
maxHeight={300}
onItemChange={handleChange}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
{ value: 'fr', content: 'France' },
{ value: 'gr', content: 'Germany' },
{ value: 'ar', content: 'Argentina' },
{ value: 'ru', content: 'Russia', disabled: true },
{ value: 'ch', content: 'Chile' },
{ value: 'bo', content: 'Bolivia' },
{ value: 'jp', content: 'Japan' },
{ value: 'cn', content: 'China' },
{ value: 'sk', content: 'South Korea' },
{ value: 'au', content: 'Australia' },
{ value: 'ug', content: 'Uganda' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
</Form.Group>
</Form>
);
}}
{/* jsx-to-string:end */}
Expand All @@ -83,25 +85,27 @@ export default () => (
const handleChange = val => setValue(val);

return (
<Form.Group>
<Select
label="States"
maxHeight={300}
multi={true}
onItemChange={handleChange}
options={[
{ value: 'tx', content: 'Texas' },
{ value: 'ca', content: 'California' },
{ value: 'or', content: 'Oregon' },
{ value: 'ar', content: 'Arkansas' },
{ value: 'nv', content: 'Nevada', disabled: true },
]}
placeholder={'Choose states'}
placement={'bottom-start'}
required
value={value}
/>
</Form.Group>
<Form>
<Form.Group>
<Select
label="States"
maxHeight={300}
multi={true}
onItemChange={handleChange}
options={[
{ value: 'tx', content: 'Texas' },
{ value: 'ca', content: 'California' },
{ value: 'or', content: 'Oregon' },
{ value: 'ar', content: 'Arkansas' },
{ value: 'nv', content: 'Nevada', disabled: true },
]}
placeholder={'Choose states'}
placement={'bottom-start'}
required
value={value}
/>
</Form.Group>
</Form>
);
}}
{/* jsx-to-string:end */}
Expand Down Expand Up @@ -195,18 +199,6 @@ export default () => (
placeholder="Default"
required
/>
<Select
label="Select"
onItemChange={() => null}
options={[
{ value: 1, content: 'Option' },
{ value: 2, content: 'Option' },
{ value: 3, content: 'Option' },
{ value: 4, content: 'Option' },
]}
placeholder="Default"
required
/>
<Select
label="Select"
maxHeight={150}
Expand Down Expand Up @@ -246,20 +238,25 @@ export default () => (

<CodePreview>
{/* jsx-to-string:start */}
<Select
disabled
label="Select"
maxHeight={350}
onItemChange={() => null}
options={[
{ value: 1, content: 'Option' },
{ value: 2, content: 'Option' },
{ value: 3, content: 'Option' },
{ value: 4, content: 'Option' },
]}
placeholder="Larger"
required
/>
<Form>
<Form.Group>
<Select
disabled
label="Select"
maxHeight={350}
onItemChange={() => null}
options={[
{ value: 1, content: 'Option' },
{ value: 2, content: 'Option' },
{ value: 3, content: 'Option' },
{ value: 4, content: 'Option' },
]}
placeholder="Larger"
required
/>
</Form.Group>
</Form>

{/* jsx-to-string:end */}
</CodePreview>

Expand All @@ -271,25 +268,29 @@ export default () => (

<CodePreview>
{/* jsx-to-string:start */}
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
label="Countries"
onItemChange={() => null}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
/>
<Form>
<Form.Group>
<Select
action={{
actionType: 'destructive',
content: 'Remove Country',
icon: <DeleteIcon />,
onClick: () => null,
}}
label="Countries"
onItemChange={() => null}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
/>
</Form.Group>
</Form>
{/* jsx-to-string:end */}
</CodePreview>

Expand All @@ -301,22 +302,24 @@ export default () => (

<CodePreview>
{/* jsx-to-string:start */}
<Form.Group>
<Select
label="Countries"
error="Need to choose a country before proceeding"
onItemChange={() => null}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
/>
</Form.Group>
<Form>
<Form.Group>
<Select
label="Countries"
error="Need to choose a country before proceeding"
onItemChange={() => null}
options={[
{ value: 'us', content: 'United States' },
{ value: 'mx', content: 'Mexico' },
{ value: 'ca', content: 'Canada' },
{ value: 'en', content: 'England' },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
/>
</Form.Group>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
Expand Down

0 comments on commit 92c6238

Please sign in to comment.