Support number inputs

recipes/src/components/Input/index.tsx

@@ -11,19 +11,22 @@ type InputProps = {
 	onChange: (e: any) => void,
 	textarea?: boolean,
 	onKeyDown? : (e: any) => void,
+	type?: "text"|"number"
 };
 
-const Input = (props: InputProps) => (
+const Input = ({label, helperText, textarea, value, onChange, onKeyDown, type = "text"}: InputProps) => (
 	<TextField
-		label={props.label}
-		helperText={props.helperText ? (<HelperText>{props.helperText || ''}</HelperText>) : undefined}
-		textarea={props.textarea}
+		label={label}
+		helperText={helperText ? (<HelperText>{helperText || ''}</HelperText>) : undefined}
+		textarea={textarea}
 	>
 		<Field
-			value={props.value}
+			value={value}
 			//@ts-ignore
-			onChange={props.onChange}
-			onKeyDown={props.onKeyDown}
+			onChange={onChange}
+			onKeyDown={onKeyDown}
+			type={type}
+			min={0}
 		/>
 	</TextField>
 );

recipes/src/containers/Recipes/Create.tsx

@@ -20,7 +20,7 @@ type CreateRecipeState = {
     summary: string,
     preparationTime: string,
     cookingTime: string,
-    servings: number,
+    servings: string|number,
   }
 
 };
@@ -48,7 +48,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
         summary: '',
         preparationTime: '',
         cookingTime: '',
-        servings: 0,
+        servings: '',
       }
     }
   }
@@ -109,16 +109,17 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
               </Cell>
               <Cell columns={3}>
                 <Input
-                  label='Preparation time'
+                  label='Cooking time'
                   value={this.state.form.cookingTime}
                   onChange={this.updateField('cookingTime')}
                 />
               </Cell>
               <Cell columns={3}>
                 <Input
-                  label='Preparation time'
+                  label='servings'
                   value={this.state.form.servings}
                   onChange={this.updateField('servings')}
+                  type='number'
                 />
               </Cell>
               <Cell columns={3}>