Skip to content

Commit

Permalink
Merge d433fc9 into 4c50869
Browse files Browse the repository at this point in the history
  • Loading branch information
@cliedeman
cliedeman committed Jun 30, 2019
2 parents 4c50869 + d433fc9 commit 2be58b7
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 78 deletions.
23 changes: 22 additions & 1 deletion src/Select.tsx
View file
Expand Up @@ -11,14 +11,35 @@ export interface SelectProps

export const fieldToSelect = ({
field,
form: { isSubmitting },
form: { isSubmitting, setFieldValue },
disabled = false,
...props
}: SelectProps): MuiSelectProps => {
const onChange = React.useCallback(
(event: React.ChangeEvent<{ value: unknown }>) => {
// Special case for multiple and native
if (props.multiple && props.native) {
const { options } = event.target as HTMLSelectElement;
const value: string[] = [];
for (let i = 0, l = options.length; i < l; i += 1) {
if (options[i].selected) {
value.push(options[i].value);
}
}

setFieldValue(field.name, value);
} else {
field.onChange(event);
}
},
[field.name, props.multiple, props.native]
);

return {
disabled: isSubmitting || disabled,
...props,
...field,
onChange,
};
};

Expand Down
195 changes: 118 additions & 77 deletions stories/Select.story.tsx
View file
Expand Up @@ -29,80 +29,121 @@ interface Values {
pets: string[];
}

export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
<Wrapper title="Select">
<Formik<Values>
validationSchema={schema}
initialValues={{ age: '', pets: [] }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
action('submit')(values);
}, 2000);
}}
render={({ submitForm, values }) => (
<Form>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Field
name="age"
component={Select}
inputProps={{
id: 'age-simple',
}}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple-empty" shrink>
Age (Empty)
</InputLabel>
<Field
name="age"
component={Select}
displayEmpty
inputProps={{
id: 'age-simple-empty',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel htmlFor="pets">Pets</InputLabel>
<Field
name="pets"
component={Select}
multiple={true}
inputProps={{
name: 'pets',
id: 'pets',
}}
>
<MenuItem value="dogs">Dogs</MenuItem>
<MenuItem value="cats">Cats</MenuItem>
<MenuItem value="rats">Rats</MenuItem>
<MenuItem value="snakes">Snakes</MenuItem>
</Field>
</FormControl>
<br />
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
<FormValues values={values} />
</Form>
)}
/>
</Wrapper>
));
export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => {
return (
<Wrapper title="Select">
<Formik<Values>
validationSchema={schema}
initialValues={{ age: '', pets: [] }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
action('submit')(values);
}, 2000);
}}
render={({ submitForm, values }) => (
<Form>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Field
name="age"
component={Select}
inputProps={{
id: 'age-simple',
}}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple-empty" shrink>
Age (Empty)
</InputLabel>
<Field
name="age"
component={Select}
displayEmpty
inputProps={{
id: 'age-simple-empty',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel htmlFor="pets">Pets</InputLabel>
<Field
name="pets"
component={Select}
multiple={true}
inputProps={{
name: 'pets',
id: 'pets',
}}
>
<MenuItem value="dogs">Dogs</MenuItem>
<MenuItem value="cats">Cats</MenuItem>
<MenuItem value="rats">Rats</MenuItem>
<MenuItem value="snakes">Snakes</MenuItem>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel shrink htmlFor="age-native">
Native Age
</InputLabel>
<Field
name="age"
native
component={Select}
inputProps={{
id: 'age-native',
}}
>
<option value="">None</option>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Field>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<InputLabel shrink htmlFor="pets-native">
Native Pets
</InputLabel>
<Field
name="pets"
native={true}
multiple={true}
component={Select}
inputProps={{
id: 'pets-native',
}}
>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="rats">Rats</option>
<option value="snakes">Snakes</option>
</Field>
</FormControl>
<br />
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
<FormValues values={values} />
</Form>
)}
/>
</Wrapper>
);
});

0 comments on commit 2be58b7

Please sign in to comment.