Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / components / select-field / select-field.tsx

diff --git a/src/components/select-field/select-field.tsx b/src/components/select-field/select-field.tsx
index e4dcad6c109fdd75cfb2cb14102d161272ceb649..bea0649632ecdafbb25fe81a467d03e3a15b5008 100644 (file)
--- a/src/components/select-field/select-field.tsx
+++ b/src/components/select-field/select-field.tsx
@@ -11,51 +11,58 @@ type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
 
 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',
+    },
 });
 
-export const NativeSelectField = withStyles(styles)
-    ((props: WrappedFieldProps & 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}
-                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 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>
+));
 
 interface SelectFieldProps {
     children: React.ReactNode;
@@ -66,19 +73,15 @@ type SelectFieldCssRules = 'formControl';
 
 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>
-);
\ No newline at end of file
+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>
+));