Home Verkennen Help
Inloggen
tati
/
kitchn
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Add Suggestions component. Use material icons outlined as default

Tatiana Inama 7 jaren geleden
bovenliggende
769d4665e3
commit
91ca0c89b8
5 gewijzigde bestanden met toevoegingen van 77 en 31 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 1 1
      recipes/public/index.html
  2. 1 1
      recipes/src/components/Icon/index.tsx
  3. 36 29
      recipes/src/components/Ingredient/Form/index.tsx
  4. 25 0
      recipes/src/components/Ingredient/Suggestions/index.tsx
  5. 14 0
      recipes/src/components/Ingredient/Suggestions/styles.scss

+ 1 - 1
recipes/public/index.html
Bestand weergeven 

@@ -26,7 +26,7 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lekton">
 
     <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
 
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 1 - 1
recipes/src/components/Icon/index.tsx
Bestand weergeven 

@@ -22,7 +22,7 @@ export function Icon({ width, height, fill, icon, className, material }: IconPro
 
   };
 
 
   return material ? (
 
-    <MaterialIcon icon={icon} />
 
+    <MaterialIcon icon={icon} className='material-icons-outlined' />
 
   ) : (
 
     <ReactSVG
 
       // @ts-ignore

+ 36 - 29
recipes/src/components/Ingredient/Form/index.tsx
Bestand weergeven 

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Input from 'components/Input';
 
 import Select from 'components/Select';
 
 import TabBar from 'components/TabBar';
 
+import Suggestions from 'components/Ingredient/Suggestions';
 
 
 import { SubRecipe, _recipe, _subRecipe, _ingredient } from 'types/recipes';
 
 
@@ -52,35 +53,41 @@ class IngredientForm extends React.Component<IngredientFormProps, { activeGroup:
 
           </div>
 
           {
 
             components[activeGroup].ingredients.map((ingredient, index) => (
 
-              <div className='cbk-ingredients-component-item' key={index}>
 
-                <Input
 
-                  label=''
 
-                  value={ingredient.name}
 
-                  onChange={updateField(['ingredients', activeGroup, 'ingredients', index, 'name'])}
 
-                />
 
-                <Input
 
-                  label=''
 
-                  value={ingredient.quantity}
 
-                  onChange={updateField(['ingredients', activeGroup, 'ingredients', index, 'quantity'])}
 
-                />
 
-                <Select
 
-                  label=''
 
-                  options={[
 
-                    {label: 'grams', value: 'gr'},
 
-                    {label: 'cups', value: 'cup'},
 
-                    {label: 'mililiters', value: 'ml'},
 
-                  ]}
 
-                  onChange={(x) => {console.log('selected', x)}}
 
-                />
 
-                <Input
 
-                  label=''
 
-                  value={''}
 
-                  onChange={updateField(['ingredients', activeGroup, 'ingredients', index, '_original'])}
 
-                />
 
-                <Input
 
-                  label=''
 
-                  value={ingredient._original}
 
-                  onChange={updateField(['ingredients', activeGroup, 'ingredients', index, '_original'])}
 
+              <div key={index}>
 
+                <div className='cbk-ingredients-component-item'>
 
+                  <Input
 
+                    label=''
 
+                    value={ingredient.name}
 
+                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, 'name'])}
 
+                  />
 
+                  <Input
 
+                    label=''
 
+                    value={ingredient.quantity}
 
+                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, 'quantity'])}
 
+                  />
 
+                  <Select
 
+                    label=''
 
+                    options={[
 
+                      {label: 'grams', value: 'gr'},
 
+                      {label: 'cups', value: 'cup'},
 
+                      {label: 'mililiters', value: 'ml'},
 
+                    ]}
 
+                    onChange={(x) => {console.log('selected', x)}}
 
+                  />
 
+                  <Input
 
+                    label=''
 
+                    value={''}
 
+                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, '_original'])}
 
+                  />
 
+                  <Input
 
+                    label=''
 
+                    value={ingredient._original}
 
+                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, '_original'])}
 
+                  />
 
+                </div>
 
+                <Suggestions
 
+                  suggestions={ingredient.suggestions}
 
+                  onSelect={(idx) => console.log('selected', idx)}
 
                 />
 
               </div>
 
             ))

+ 25 - 0
recipes/src/components/Ingredient/Suggestions/index.tsx
Bestand weergeven 

@@ -0,0 +1,25 @@
 
+import React from 'react';
 
+import { Suggestion } from 'types/recipes';
 
+import Icon from 'components/Icon';
 
+import Button from 'components/Button';
 
+import './styles.scss';
 
+
 
+type SuggestionsProps = {
 
+  suggestions?: Suggestion[],
 
+  onSelect: (index: number) => void  
+}
 
+
 
+const Suggestions = ({ suggestions, onSelect }: SuggestionsProps) => {
 
+  return suggestions && suggestions.length > 1 ? (
 
+    <div className='cbk-suggestions'>
 
+      <Icon material icon={'new_releases'} />
 
+      {
 
+        suggestions.map((suggestion, index) => (
 
+          <Button onClick={() => onSelect(index)} key={index}>{suggestion.name}</Button>
 
+        ))
 
+      }
 
+    </div>
 
+  ) : null
 
+};
 
+
 
+export default Suggestions;

+ 14 - 0
recipes/src/components/Ingredient/Suggestions/styles.scss
Bestand weergeven 

@@ -0,0 +1,14 @@
 
+@import 'styles/_variables.scss';
 
+
 
+.cbk-suggestions {
 
+  display: flex;
 
+  align-items: center;
 
+  padding: 6px 0;
 
+  i.material-icons {
 
+    color: $grey-500;
 
+  }
 
+  .mdc-button {
 
+    font-size: 12px;
 
+    height: 24px;
 
+  }
 
+}