Create Select component

recipes/package.json

@@ -11,6 +11,7 @@
     "@material/react-layout-grid": "^0.11.0",
     "@material/react-list": "^0.11.0",
     "@material/react-material-icon": "^0.12.0",
+    "@material/react-select": "^0.12.1",
     "@material/react-text-field": "^0.11.0",
     "@types/jest": "^24.0.11",
     "@types/node": "^11.13.0",

recipes/src/components/Select/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Select, { Option } from '@material/react-select';
+
+import '@material/react-select/dist/select.min.css';
+import './styles.scss';
+
+type CBKSelectProps = {
+  label?: string,
+  value?: string,
+  options: {
+    label: string,
+    value: string,
+    disabled?: boolean,
+  }[],
+  disabled?: boolean,
+  onChange?: (x: any) => void
+}
+class CBKSelect extends React.Component<CBKSelectProps> {
+  state = {
+    value: this.props.value || ''
+  }
+
+  onChange = (index:number) => {
+    this.setState({
+      value: this.props.options[index].value
+    })
+    if (this.props.onChange) {
+      this.props.onChange(this.props.options[index]);
+    }
+  }
+
+  render() {
+    return (
+      <Select
+        className='cbk-select'
+        enhanced
+        disabled={this.props.disabled}
+        label={this.props.label}
+        value={this.state.value}
+        onEnhancedChange={this.onChange}
+        options={this.props.options}
+      >
+
+      </Select>
+    )
+  }
+}
+
+export default CBKSelect

recipes/src/components/Select/styles.scss

@@ -0,0 +1,20 @@
+@import 'styles/_variables.scss';
+
+.cbk-select.mdc-select {
+  width: 100%;
+  
+  label,
+  ::placeholder {
+    text-transform: capitalize;
+  }
+}
+
+.cbk-select.mdc-select--focused,
+.cbk-select.mdc-select:not(.mdc-select--disabled),
+.cbk-select.mdc-select:hover,
+.cbk-select.mdc-select__selected-text,
+.cbk-select.mdc-select__selected-text:hover,
+.mdc-select:before,
+.mdc-select:after {
+  background-color: white;
+}

recipes/src/containers/Recipes/Create.tsx

@@ -6,6 +6,7 @@ import Btn from 'components/Button';
 
 import Input from 'components/Input';
 import TagInput from 'components/TagInput';
+import Select from 'components/Select';
 
 import './styles.scss';
 
@@ -270,10 +271,19 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                             />
                           </Cell>
                           <Cell columns={3}>
-                            <Input
+                            {/* <Input
                               label="unit"
                               value={ingredient.unit}
                               onChange={this.updateField(['ingredients', i, 'ingredients', j, 'unit'])}
+                            /> */}
+                            <Select
+                              label='unit'
+                              options={[
+                                {label: 'grams', value: 'gr'},
+                                {label: 'cups', value: 'cup'},
+                                {label: 'mililiters', value: 'ml'},
+                              ]}
+                              onChange={(x) => {console.log('selected', x)}}
                             />
                           </Cell>
                           <Cell columns={3}>

recipes/src/containers/Recipes/styles.scss

@@ -5,7 +5,8 @@
     padding: $spacing-small;
     background-color: white;
 
-    .mdc-text-field {
+    .mdc-text-field,
+    .mdc-select {
         width: 100%;
     }