const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
formControl: {
- width: '100%'
+ width: '100%',
},
selectWrapper: {
backgroundColor: theme.palette.common.white,
'&:before': {
- borderBottomColor: 'rgba(0, 0, 0, 0.42)'
+ borderBottomColor: 'rgba(0, 0, 0, 0.42)',
},
'&:focus': {
- outline: 'none'
- }
+ outline: 'none',
+ },
},
select: {
fontSize: '0.875rem',
'&:focus': {
- backgroundColor: 'rgba(0, 0, 0, 0.0)'
- }
+ backgroundColor: 'rgba(0, 0, 0, 0.0)',
+ },
},
option: {
fontSize: '0.875rem',
backgroundColor: theme.palette.common.white,
- height: '30px'
- }
+ height: '30px',
+ },
});
interface NativeSelectFieldProps {
disabled?: boolean;
}
-export const NativeSelectField = withStyles(styles)
- ((props: WrappedFieldProps & NativeSelectFieldProps & WithStyles<CssRules> & { items: any[] }) =>
- <FormControl className={props.classes.formControl}>
- <Select className={props.classes.selectWrapper}
- native
- value={props.input.value}
- onChange={props.input.onChange}
- disabled={props.meta.submitting || props.disabled}
- name={props.input.name}
- inputProps={{
- id: `id-${props.input.name}`,
- className: props.classes.select
- }}>
- {props.items.map(item => (
- <option key={item.key} value={item.key} className={props.classes.option}>
- {item.value}
- </option>
- ))}
- </Select>
- </FormControl>
- );
+export const NativeSelectField = withStyles(styles)((props: WrappedFieldProps & NativeSelectFieldProps & WithStyles<CssRules> & { items: any[] }) => (
+ <FormControl className={props.classes.formControl}>
+ <Select
+ className={props.classes.selectWrapper}
+ native
+ value={props.input.value}
+ onChange={props.input.onChange}
+ disabled={props.meta.submitting || props.disabled}
+ name={props.input.name}
+ inputProps={{
+ id: `id-${props.input.name}`,
+ className: props.classes.select,
+ }}>
+ {props.items.map(item => (
+ <option
+ key={item.key}
+ value={item.key}
+ className={props.classes.option}>
+ {item.value}
+ </option>
+ ))}
+ </Select>
+ </FormControl>
+));
interface SelectFieldProps {
children: React.ReactNode;
const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
formControl: {
- marginBottom: theme.spacing.unit * 3
+ marginBottom: theme.spacing.unit * 3,
},
});
-export const SelectField = withStyles(selectFieldStyles)(
- (props: WrappedFieldProps & SelectFieldProps & WithStyles<SelectFieldCssRules>) =>
- <FormControl error={props.meta.invalid} className={props.classes.formControl}>
- <InputLabel>
- {props.label}
- </InputLabel>
- <Select
- {...props.input}>
- {props.children}
- </Select>
- <FormHelperText>{props.meta.error}</FormHelperText>
- </FormControl>
-);
+export const SelectField = withStyles(selectFieldStyles)((props: WrappedFieldProps & SelectFieldProps & WithStyles<SelectFieldCssRules>) => (
+ <FormControl
+ error={props.meta.invalid}
+ className={props.classes.formControl}>
+ <InputLabel>{props.label}</InputLabel>
+ <Select {...props.input}>{props.children}</Select>
+ <FormHelperText>{props.meta.error}</FormHelperText>
+ </FormControl>
+));