1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { WrappedFieldProps } from 'redux-form';
7 import { ArvadosTheme } from 'common/custom-theme';
8 import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, FormHelperText } from '@material-ui/core';
10 type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
17 backgroundColor: theme.palette.common.white,
19 borderBottomColor: 'rgba(0, 0, 0, 0.42)'
28 backgroundColor: 'rgba(0, 0, 0, 0.0)'
33 backgroundColor: theme.palette.common.white,
38 interface NativeSelectFieldProps {
42 export const NativeSelectField = withStyles(styles)
43 ((props: WrappedFieldProps & NativeSelectFieldProps & WithStyles<CssRules> & { items: any[] }) =>
44 <FormControl className={props.classes.formControl}>
45 <Select className={props.classes.selectWrapper}
47 value={props.input.value}
48 onChange={props.input.onChange}
49 disabled={props.meta.submitting || props.disabled}
50 name={props.input.name}
52 id: `id-${props.input.name}`,
53 className: props.classes.select
55 {props.items.map(item => (
56 <option key={item.key} value={item.key} className={props.classes.option}>
64 interface SelectFieldProps {
65 children: React.ReactNode;
69 type SelectFieldCssRules = 'formControl';
71 const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
73 marginBottom: theme.spacing.unit * 3
76 export const SelectField = withStyles(selectFieldStyles)(
77 (props: WrappedFieldProps & SelectFieldProps & WithStyles<SelectFieldCssRules>) =>
78 <FormControl error={props.meta.invalid} className={props.classes.formControl}>
86 <FormHelperText>{props.meta.error}</FormHelperText>