feat: React-Select

lloydrichards · Jun 30, 2020 · 8de34ea · 8de34ea
1 parent a2f76e5
commit 8de34ea
Show file tree

Hide file tree

Showing 13 changed files with 1,314 additions and 145 deletions.
diff --git a/components/LifePlastic/Buttons.tsx b/components/LifePlastic/Buttons.tsx
diff --git a/components/LifePlastic/UI/NavBar.tsx b/components/LifePlastic/UI/NavBar.tsx
@@ -7,6 +7,7 @@ interface NavProps {
   addRecyclable: (route: string) => void;
   resetState: () => void;
   modeChange: () => void;
+  saveSystem: () => void;
 }
 const randomRecycling = (addItem: (pickedItem: string) => void) => (
   possibleRoutes: Array<string>
@@ -20,9 +21,21 @@ const UIButtons: React.FC<NavProps> = ({
   addRecyclable,
   resetState,
   modeChange,
+  saveSystem,
 }) => {
   return (
-    <div style={{position:"absolute", top:-190}}>
+    <div style={{ position: "absolute", top: -190 }}>
+      <Button
+        style={{
+          top: "1350px",
+          left: "685px",
+          position: "absolute",
+          transform: "rotate(0deg)",
+        }}
+        onClick={() => saveSystem()}
+      >
+        SAVE
+      </Button>
       <Button
         style={{
           top: "1350px",

diff --git a/components/LifePlastic/data/InitializeSystems.tsx b/components/LifePlastic/data/InitializeSystems.tsx
@@ -0,0 +1,68 @@
+import { SystemList } from "../Interfaces/Interfaces";
+
+export const InitializeSystems: SystemList = {
+  MixedBin: true,
+  PETBin: true,
+  HDPEBin: true,
+  PPBin: true,
+  PSBin: true,
+  LDPEBin: true,
+  PVCBin: true,
+  OTHERBin: true,
+  TRASHBin: true,
+
+  PETHandSorting: false,
+  HDPEHandSorting: false,
+  PPHandSorting: false,
+  PSHandSorting: false,
+  LDPEHandSorting: false,
+  PVCHandSorting: false,
+  OTHERHandSorting: false,
+
+  PETMachineSorting: false,
+  HDPEMachineSorting: false,
+  PPMachineSorting: false,
+  PSMachineSorting: false,
+  LDPEMachineSorting: false,
+  OTHERMachineSorting: false,
+
+  PETMixedGrinder: false,
+  PETSeperateGrinder: false,
+  HDPEMixedGrinder: false,
+  HDPESeperateGrinder: false,
+  PPGrinder: false,
+  PSGrinder: false,
+  PVCGrinder: false,
+
+  EPSSmelter: false,
+
+  rPETMixedRefiner: false,
+  rPETSeperateRefiner: false,
+  rHDPEMixedRefiner: false,
+  rHDPESeperateRefiner: false,
+  rPPRefiner: false,
+  rPSRefiner: false,
+  rLDPERefiner: false,
+  rPVCRefiner: false,
+  OtherRefiner: false,
+
+  ProductWindowFrames: false,
+  ProductPETFurniture: false,
+  ProductrPETCloths: false,
+  ProductToys: false,
+  ProductrPETFiber: false,
+  ProductBottleCaps: false,
+  ProductHDPEBottles: false,
+  ProductPETBottles: false,
+  ProductPVCPipes: false,
+  ProductHDPEPipes: false,
+  ProductBuckets: false,
+  ProductOfficeSupplies: false,
+  ProductLandscapeFabric: false,
+  ProductInsulation: false,
+  ProductPictureFrames: false,
+  ProductPlasticBags: false,
+  ProductGardenFurniture: false,
+  ProductConstructionInfill: false,
+  ProductConcrete: false,
+};
diff --git a/components/LifePlastic/examples/example1.tsx b/components/LifePlastic/examples/example1.tsx
@@ -28,9 +28,9 @@ const Example1 = () => {
         <g
           clip-path="url(#clip0)"
           stroke="#434040"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         >
           <path d="M158.801 200.352h14.25M162.76 200.35v-1.583a1.584 1.584 0 011.583-1.583h3.167a1.581 1.581 0 011.583 1.583v1.583m2.375 0v11.084a1.582 1.582 0 01-1.583 1.583h-7.917a1.58 1.58 0 01-1.583-1.583V200.35h11.083zM164.344 204.309v4.75M167.51 204.309v4.75" />
         </g>
@@ -42,7 +42,7 @@ const Example1 = () => {
           d="M173.676 125.102a7.75 7.75 0 11-15.5 0 7.75 7.75 0 0115.5 0zM173.676 43.102a7.75 7.75 0 11-15.5 0 7.75 7.75 0 0115.5 0z"
           fill="#D2E799"
           stroke="#000"
-          stroke-width=".5"
+          strokeWidth=".5"
         />
         <defs>
           <clipPath id="clip0">
@@ -70,7 +70,7 @@ const Example1 = () => {
           <path
             d="M9.276 1.886h-.24V.348h2.675v1.538h-.236m-2.2 0v.75c-.793.246-2.38.966-2.38 1.872v1.664c.054.216 0 .555.6 1.087m1.78-5.373h2.2m-3.98 5.373c-.2.162-.6.67-.6 1.41v10.518a1.16 1.16 0 102.32 0 1.16 1.16 0 102.32 0 1.16 1.16 0 102.321 0V8.67c0-.74-.4-1.248-.601-1.41m-5.76 0h5.76m0 0c.601-.532.547-.871.601-1.087V4.508c0-.906-1.587-1.626-2.381-1.873v-.75"
             stroke="#000"
-            stroke-width=".5"
+            strokeWidth=".5"
           />
         </g>
       </svg>

diff --git a/components/LifePlastic/examples/example2.tsx b/components/LifePlastic/examples/example2.tsx
@@ -26,9 +26,9 @@ const Example2 = () => {
         <path
           d="M158.801 201.195h14.25M162.76 201.194v-1.583a1.584 1.584 0 011.583-1.584h3.167a1.582 1.582 0 011.583 1.584v1.583m2.375 0v11.083a1.584 1.584 0 01-1.583 1.584h-7.917a1.58 1.58 0 01-1.583-1.584v-11.083h11.083zM164.344 205.152v4.75M167.51 205.152v4.75"
           stroke="#434040"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           id="Example2Path"
@@ -43,7 +43,7 @@ const Example2 = () => {
           d="M173.676 125.945a7.75 7.75 0 01-7.75 7.75 7.75 7.75 0 117.75-7.75zM173.676 165.195a7.75 7.75 0 01-7.75 7.75 7.75 7.75 0 117.75-7.75zM173.676 43.945a7.75 7.75 0 11-15.5 0 7.75 7.75 0 0115.5 0z"
           fill="#D2E799"
           stroke="#000"
-          stroke-width=".5"
+          strokeWidth=".5"
         />
       </svg>
       <svg
@@ -62,7 +62,7 @@ const Example2 = () => {
           <path
             d="M9.276 1.886h-.24V.348h2.675v1.538h-.236m-2.2 0v.75c-.793.246-2.38.966-2.38 1.872v1.664c.054.216 0 .555.6 1.087m1.78-5.373h2.2m-3.98 5.373c-.2.162-.6.67-.6 1.41v10.518a1.16 1.16 0 102.32 0 1.16 1.16 0 102.32 0 1.16 1.16 0 102.321 0V8.67c0-.74-.4-1.248-.601-1.41m-5.76 0h5.76m0 0c.601-.532.547-.871.601-1.087V4.508c0-.906-1.587-1.626-2.381-1.873v-.75"
             stroke="#000"
-            stroke-width=".5"
+            strokeWidth=".5"
           />
         </g>
       </svg>

diff --git a/components/LifePlastic/examples/example3.tsx b/components/LifePlastic/examples/example3.tsx
@@ -29,7 +29,7 @@ const Example3 = () => {
     });
   }, []);
   return (
-    <div style={{position: "relative"}}>
+    <div style={{ position: "relative" }}>
       <svg
         width="226"
         height="251"
@@ -40,9 +40,9 @@ const Example3 = () => {
         <path
           d="M158.801 201.195h14.25M162.76 201.194v-1.583a1.584 1.584 0 011.583-1.584h3.167a1.582 1.582 0 011.583 1.584v1.583m2.375 0v11.083a1.584 1.584 0 01-1.583 1.584h-7.917a1.58 1.58 0 01-1.583-1.584v-11.083h11.083zM164.344 205.152v4.75M167.51 205.152v4.75"
           stroke="#434040"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           id="Example3Path1"
@@ -57,7 +57,7 @@ const Example3 = () => {
           d="M173.676 125.945a7.75 7.75 0 01-7.75 7.75 7.75 7.75 0 117.75-7.75zM173.676 165.195a7.75 7.75 0 01-7.75 7.75 7.75 7.75 0 117.75-7.75zM173.676 43.945a7.75 7.75 0 11-15.5 0 7.75 7.75 0 0115.5 0z"
           fill="#D2E799"
           stroke="#000"
-          stroke-width=".5"
+          strokeWidth=".5"
         />
       </svg>
       <svg
@@ -76,7 +76,7 @@ const Example3 = () => {
           <path
             d="M9.276 1.886h-.24V.348h2.675v1.538h-.236m-2.2 0v.75c-.793.246-2.38.966-2.38 1.872v1.664c.054.216 0 .555.6 1.087m1.78-5.373h2.2m-3.98 5.373c-.2.162-.6.67-.6 1.41v10.518a1.16 1.16 0 102.32 0 1.16 1.16 0 102.32 0 1.16 1.16 0 102.321 0V8.67c0-.74-.4-1.248-.601-1.41m-5.76 0h5.76m0 0c.601-.532.547-.871.601-1.087V4.508c0-.906-1.587-1.626-2.381-1.873v-.75"
             stroke="#000"
-            stroke-width=".5"
+            strokeWidth=".5"
           />
         </g>
       </svg>
@@ -96,7 +96,7 @@ const Example3 = () => {
           <path
             d="M9.276 1.886h-.24V.348h2.675v1.538h-.236m-2.2 0v.75c-.793.246-2.38.966-2.38 1.872v1.664c.054.216 0 .555.6 1.087m1.78-5.373h2.2m-3.98 5.373c-.2.162-.6.67-.6 1.41v10.518a1.16 1.16 0 102.32 0 1.16 1.16 0 102.32 0 1.16 1.16 0 102.321 0V8.67c0-.74-.4-1.248-.601-1.41m-5.76 0h5.76m0 0c.601-.532.547-.871.601-1.087V4.508c0-.906-1.587-1.626-2.381-1.873v-.75"
             stroke="#000"
-            stroke-width=".5"
+            strokeWidth=".5"
           />
         </g>
       </svg>