src/components/select-field/select-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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';
   9
  10 type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     formControl: {
  14         width: '100%'
  15     },
  16     selectWrapper: {
  17         backgroundColor: theme.palette.common.white,
  18         '&:before': {
  19             borderBottomColor: 'rgba(0, 0, 0, 0.42)'
  20         },
  21         '&:focus': {
  22             outline: 'none'
  23         }
  24     },
  25     select: {
  26         fontSize: '0.875rem',
  27         '&:focus': {
  28             backgroundColor: 'rgba(0, 0, 0, 0.0)'
  29         }
  30     },
  31     option: {
  32         fontSize: '0.875rem',
  33         backgroundColor: theme.palette.common.white,
  34         height: '30px'
  35     }
  36 });
  37
  38 interface NativeSelectFieldProps {
  39     disabled?: boolean;
  40 }
  41
  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}
  46                 native
  47                 value={props.input.value}
  48                 onChange={props.input.onChange}
  49                 disabled={props.meta.submitting || props.disabled}
  50                 name={props.input.name}
  51                 inputProps={{
  52                     id: `id-${props.input.name}`,
  53                     className: props.classes.select
  54                 }}>
  55                 {props.items.map(item => (
  56                     <option key={item.key} value={item.key} className={props.classes.option}>
  57                         {item.value}
  58                     </option>
  59                 ))}
  60             </Select>
  61         </FormControl>
  62     );
  63
  64 interface SelectFieldProps {
  65     children: React.ReactNode;
  66     label: string;
  67 }
  68
  69 type SelectFieldCssRules = 'formControl';
  70
  71 const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
  72     formControl: {
  73         marginBottom: theme.spacing.unit * 3
  74     },
  75 });
  76 export const SelectField = withStyles(selectFieldStyles)(
  77     (props: WrappedFieldProps & SelectFieldProps &  WithStyles<SelectFieldCssRules>) =>
  78         <FormControl error={props.meta.invalid} className={props.classes.formControl}>
  79             <InputLabel>
  80                 {props.label}
  81             </InputLabel>
  82             <Select
  83                 {...props.input}>
  84                 {props.children}
  85             </Select>
  86             <FormHelperText>{props.meta.error}</FormHelperText>
  87         </FormControl>
  88 );