Update example

seasonedcc · Sep 19, 2019 · 3feddad · 3feddad
1 parent 5ebb902
commit 3feddad
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 589 deletions.
diff --git a/example/package.json b/example/package.json
@@ -7,7 +7,6 @@
   "dependencies": {
     "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.2.1",
-    "@material-ui/pickers": "^3.2.2",
     "@reach/router": "latest",
     "@seasonedsoftware/stoopy": "link:..",
     "prop-types": "latest",
@@ -16,7 +15,9 @@
     "react-scripts": "latest",
     "react-syntax-highlighter": "^11.0.2",
     "firebase": "^6.3.4",
-    "uploods": "^0.5.1"
+    "uploods": "^0.5.1",
+    "react-use-form-state": "^0.11.0"
+
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/example/src/Example.js b/example/src/Example.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'
 import { Card, CardHeader, CardContent } from '@material-ui/core'
-
+import { DropPicture } from 'uploods'
 import { Stoopy } from '@seasonedsoftware/stoopy'
 
 const BookInfo = props => {
@@ -54,10 +54,22 @@ const Example = () => {
               name: 'Google Play and Apple Store',
               type: 'checkbox',
             },
-            { name: 'Published year', type: 'year' },
-            { name: 'Year/month', type: 'yearMonth' },
-            { name: 'Release Date', type: 'date' },
-            { name: 'cover', type: 'avatar' },
+            { name: 'cover',
+              type: 'raw',
+              Component: ({ setValue, ...props }) => (
+                  <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+                    <DropPicture
+                      maxDimension={200}
+                      config={{
+                        apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+                        storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET ,
+                      }}
+                      {...props}
+                      />
+                  </div>
+                ),
+                onChange: file => file.url,
+              },
           ]}
           onNext={({ value, values }) => {
             setBook({ ...book, value })
@@ -98,27 +110,40 @@ import { Stoopy } from '@seasonedsoftware/stoopy'
 const [book, setBook] = useState({ author: 'You'});
 <Stoopy
   fields={[
-    "author",
-    "bookName",
+    'author',
+    'bookName',
     {
-      name: "genre",
-      type: "select",
-      choices: ["sci-fi", "drama", "fantasy"]
+      name: 'genre',
+      type: 'select',
+      choices: ['sci-fi', 'drama', 'fantasy'],
+      optional: true
     },
-    { name: "Resume", type: "text" },
+    { name: 'Resume', type: 'text' },
     {
-      name: "What kind of cover should we print",
-      type: "radio",
-      choices: ["hardCover", "paperBack"]
+      name: 'What kind of cover should we print',
+      type: 'radio',
+      choices: ['hardCover', 'paperBack'],
     },
     {
-      name: "Google Play and Apple Store",
-      type: "checkbox"
+      name: 'Google Play and Apple Store',
+      type: 'checkbox',
     },
-    { name: "Published year", type: "year" },
-    { name: "Year/month", type: "yearMonth" },
-    { name: "Release Date", type: "date" },
-    { name: "cover", type: "avatar" }
+    { name: 'cover',
+      type: 'raw',
+      Component: ({ setValue, ...props }) => (
+          <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <DropPicture
+              maxDimension={200}
+              config={{
+                apiKey,
+                storageBucket,
+              }}
+              {...props}
+              />
+          </div>
+        ),
+        onChange: file => file.url,
+      },
   ]}
   initialState={book} // Any field in here will be skiped (but still considered in step counting)
   onNext={({ value, values}) => console.log('onNext -->', value, values)}