ywana-core8 0.0.658 → 0.0.660

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.658",
+  "version": "0.0.660",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/incubator/wizard.js

@@ -3,11 +3,30 @@ import { Icon } from '../html'
 import { Button } from '../html/button'
 import './wizard.css'
 
+/**
+ * Wizard Context
+ */
+export const WizardContext = React.createContext({})
+
+/**
+ * Wizard Provider
+ */
+export const WizardProvider = (props) => {
+
+    const [form, setForm] = useState(props.form)
+
+    return (
+        <WizardContext.Provider value={{ form, setForm }}>
+            {props.children}
+        </WizardContext.Provider>
+    )
+}
+
 export const Wizard = (props) => {
 
-    const { init = 0, onClose, children  } = props
-    const [current=0, setCurrent] = useState(init)
-    
+    const { form = {}, init = 0, onClose, children } = props
+    const [current = 0, setCurrent] = useState(init)
+
     const steps = React.Children.toArray(children)
     const stepRef = useRef()
 
@@ -17,7 +36,7 @@ export const Wizard = (props) => {
 
     async function next() {
         await stepRef.current.onNext(() => {
-            setCurrent(current + 1) 
+            setCurrent(current + 1)
         })
     }
 
@@ -32,30 +51,32 @@ export const Wizard = (props) => {
     }, [current])
 
     return (
-        <div className="wizard">
-            <div className="wizard-steps">
-                {steps.map((step, index) => {
-                    const active = index === current
-                    const done = index < current
-                    return (
-                        <div key={index} className="wizard-step">
-                            <div className="wizard-step-icon">
-                                {done && <Icon icon="check" />}
-                                {active && <Icon icon="play_arrow" />}
+        <WizardProvider form={form}>
+            <div className="wizard">
+                <div className="wizard-steps">
+                    {steps.map((step, index) => {
+                        const active = index === current
+                        const done = index < current
+                        return (
+                            <div key={index} className="wizard-step">
+                                <div className="wizard-step-icon">
+                                    {done && <Icon icon="check" />}
+                                    {active && <Icon icon="play_arrow" />}
+                                </div>
+                                <div className="wizard-step-label">{step.props.label}</div>
                             </div>
-                            <div className="wizard-step-label">{step.props.label}</div>
-                        </div>
-                    )
-                })}
-            </div>
-            <div className="wizard-content">
-                {currentStep}
-            </div>
-            <div className="wizard-actions">
-                <Button label="Anterior" disabled={current === 0} action={prev} />
-                { current < steps.length -1 ? <Button label="Siguiente" disabled={stepRef.current && stepRef.current.isValid()} action={next} /> : <Button label="Finalizar" disabled={stepRef.current && stepRef.current.isValid()} action={finish} raised /> }
+                        )
+                    })}
+                </div>
+                <div className="wizard-content">
+                    {currentStep}
+                </div>
+                <div className="wizard-actions">
+                    <Button label="Anterior" disabled={current === 0} action={prev} />
+                    {current < steps.length - 1 ? <Button label="Siguiente" disabled={stepRef.current && stepRef.current.isValid()} action={next} /> : <Button label="Finalizar" disabled={stepRef.current && stepRef.current.isValid()} action={finish} raised />}
+                </div>
             </div>
-        </div>
+        </WizardProvider>
     )
 }
 

package/src/incubator/wizard.test.js

@@ -1,10 +1,18 @@
 import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import { Wizard} from './wizard'
+import { Property, TextField } from '../html'
+import { Wizard, WizardContext} from './wizard'
 
 export const Step1 = forwardRef((props, ref) => {
 
     useImperativeHandle(ref, () => ({ onComplete }))
 
+    const wizardContext = React.useContext(WizardContext)
+    const { form } = wizardContext
+
+    function changeForm(id, value) {
+        wizardContext.setForm({ ...form, [id]: value })
+    }
+
     function onComplete (onSuccess, onError) {
         console.log("onComplete", props.label)
         onSuccess()
@@ -13,6 +21,7 @@ export const Step1 = forwardRef((props, ref) => {
     return (
         <div>
             <h1>Step</h1>
+            <TextField id="name" label="Name" value={form.name} onChange={changeForm} />
         </div>
     )
 })
@@ -20,9 +29,14 @@ export const Step1 = forwardRef((props, ref) => {
 
 const WizardTest = (prop) => {
 
+    const initForm = {
+        name: "John",
+        description: "Test Description"
+    }
+
     return (
         <>
-            <Wizard init={0} >
+            <Wizard init={0} form={initForm} >
                 <Step1 label="Paso 1"/>
                 <Step1 label="Paso 2"/>
                 <Step1 label="Paso 3"/>