Merge branch '14365-sharing-dialog'

[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 dda58c08305e3b183d112b6c49afa7d23ff745b9..4a25ea7019f86bc7a9391f6c269e8d10a9c2e865 100644 (file)
--- a/src/components/select-field/select-field.tsx
+++ b/src/components/select-field/select-field.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { WrappedFieldProps } from 'redux-form';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@material-ui/core';
 
 type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
 
@@ -14,7 +14,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: '100%'
     },
     selectWrapper: {
-        backgroundColor: 'white',
+        backgroundColor: theme.palette.common.white,
         '&:before': {
             borderBottomColor: 'rgba(0, 0, 0, 0.42)'
         },
@@ -30,7 +30,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     option: {
         fontSize: '0.875rem',
-        backgroundColor: 'white',
+        backgroundColor: theme.palette.common.white,
         height: '30px'
     }
 });
@@ -55,4 +55,30 @@ export const NativeSelectField = withStyles(styles)
                 ))}
             </Select>
         </FormControl>
-    );
\ No newline at end of file
+    );
+
+interface SelectFieldProps {
+    children: React.ReactNode;
+    label: string;
+}
+
+type SelectFieldCssRules = 'formControl';
+
+const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
+    formControl: {
+        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