web client v0.6 (add dish)

src/components/Input/Checkboxes.js

@@ -0,0 +1,175 @@
+import React, { useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    "& .MuiFormLabel-root": {
+      color: "#e99800",
+      marginBottom: theme.spacing(2),
+      marginLeft: "auto",
+      marginRight: "auto",
+    },
+    "& .MuiFormHelperText-root": {
+      color: "#7e7e7e",
+    },
+    "& .MuiFormGroup-root": {
+      display: "inline",
+    },
+    border: "1px solid #1c1c1c",
+    borderRadius: "6px",
+    marginBottom: theme.spacing(2),
+  },
+  formControl: {
+    margin: theme.spacing(2),
+    alignItems: "center",
+  },
+}));
+
+export default function Checkboxes(props) {
+  const classes = useStyles();
+  const initialState = {
+    gluten: props.allergens.gluten,
+    lactose: props.allergens.lactose,
+    soy: props.allergens.soy,
+    eggs: props.allergens.eggs,
+    seaFood: props.allergens.seaFood,
+    peanuts: props.allergens.peanuts,
+    sesame: props.allergens.sesame,
+  };
+  const [state, setState] = useState(initialState);
+
+  return (
+    <div className={classes.root}>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Alergeny</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.gluten}
+                onChange={() => {
+                  setState({ ...state, gluten: !state.gluten });
+                  props.onUpdate(state);
+                }}
+                name="gluten"
+              />
+            }
+            label="Gluten"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.lactose}
+                onChange={() => {
+                  setState({ ...state, lactose: !state.lactose });
+                  props.onUpdate(state);
+                }}
+                name="lactose"
+              />
+            }
+            label="Laktoza"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.soy}
+                onChange={() => {
+                  setState({ ...state, soy: !state.soy });
+                  props.onUpdate(state);
+                }}
+                name="soy"
+              />
+            }
+            label="Soja"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.eggs}
+                onChange={() => {
+                  setState({ ...state, eggs: !state.eggs });
+                  props.onUpdate(state);
+                }}
+                name="eggs"
+              />
+            }
+            label="Jaja"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.seaFood}
+                onChange={() => {
+                  setState({ ...state, seaFood: !state.seaFood });
+                  props.onUpdate(state);
+                }}
+                name="seaFood"
+              />
+            }
+            label="Owoce morza"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.peanuts}
+                onChange={() => {
+                  setState({ ...state, peanuts: !state.peanuts });
+                  props.onUpdate(state);
+                }}
+                name="peanuts"
+              />
+            }
+            label="Orzechy"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.sesame}
+                onChange={() => {
+                  setState({ ...state, sesame: !state.sesame });
+                  props.onUpdate(state);
+                }}
+                name="sesame"
+              />
+            }
+            label="Sezam"
+          />
+        </FormGroup>
+        <FormHelperText>
+          Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :)
+        </FormHelperText>
+      </FormControl>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Inne</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={props.vegan}
+                onChange={() => props.onVegan()}
+                name="vegan"
+              />
+            }
+            label="Danie wegańskie"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={props.vegetarian}
+                onChange={() => props.onVegetarian()}
+                name="vegetarian"
+              />
+            }
+            label="Danie wegetariańskie"
+          />
+        </FormGroup>
+      </FormControl>
+    </div>
+  );
+}