services/workbench2/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 { CustomStyleRulesCallback } from 'common/custom-theme';
   9 import { FormControl, InputLabel, Select, FormHelperText } from '@mui/material';
  10
  11 import { WithStyles } from '@mui/styles';
  12 import withStyles from '@mui/styles/withStyles';
  13
  14 type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
  15
  16 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     formControl: {
  18         width: '100%',
  19     },
  20     selectWrapper: {
  21         backgroundColor: theme.palette.common.white,
  22         '&:before': {
  23             borderBottomColor: 'rgba(0, 0, 0, 0.42)',
  24         },
  25         '&:focus': {
  26             outline: 'none',
  27         },
  28     },
  29     select: {
  30         fontSize: '0.875rem',
  31         '&:focus': {
  32             backgroundColor: 'rgba(0, 0, 0, 0.0)',
  33         },
  34     },
  35     option: {
  36         fontSize: '0.875rem',
  37         backgroundColor: theme.palette.common.white,
  38         height: '30px',
  39     },
  40 });
  41
  42 interface NativeSelectFieldProps {
  43     disabled?: boolean;
  44 }
  45
  46 export const NativeSelectField = withStyles(styles)((props: WrappedFieldProps & NativeSelectFieldProps & WithStyles<CssRules> & { items: any[] }) => (
  47     <FormControl variant="standard" className={props.classes.formControl}>
  48         <Select
  49             variant="standard"
  50             className={props.classes.selectWrapper}
  51             native
  52             value={props.input.value}
  53             onChange={props.input.onChange}
  54             disabled={props.meta.submitting || props.disabled}
  55             name={props.input.name}
  56             inputProps={{
  57                 id: `id-${props.input.name}`,
  58                 className: props.classes.select,
  59             }}>
  60             {props.items.map(item => (
  61                 <option
  62                     key={item.key}
  63                     value={item.key}
  64                     className={props.classes.option}>
  65                     {item.value}
  66                 </option>
  67             ))}
  68         </Select>
  69     </FormControl>
  70 ));
  71
  72 interface SelectFieldProps {
  73     children: React.ReactNode;
  74     label: string;
  75 }
  76
  77 type SelectFieldCssRules = 'formControl';
  78
  79 const selectFieldStyles: CustomStyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
  80     formControl: {
  81         marginBottom: theme.spacing(3),
  82     },
  83 });
  84 export const SelectField = withStyles(selectFieldStyles)((props: WrappedFieldProps & SelectFieldProps & WithStyles<SelectFieldCssRules>) => (
  85     <FormControl
  86         variant="standard"
  87         error={props.meta.invalid}
  88         className={props.classes.formControl}>
  89         <InputLabel>{props.label}</InputLabel>
  90         <Select variant="standard" {...props.input}>{props.children}</Select>
  91         <FormHelperText>{props.meta.error}</FormHelperText>
  92     </FormControl>
  93 ));