ywana-core8 0.0.662 → 0.0.664

package/package.json

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

package/src/incubator/wizard.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Icon } from '../html'
 import { Button } from '../html/button'
 import './wizard.css'
@@ -26,10 +26,14 @@ export const Wizard = (props) => {
 
     const { form = {}, init = 0, onClose, children } = props
     const [current = 0, setCurrent] = useState(init)
-
+    const [valid, setValid] = useState(true)
     const steps = React.Children.toArray(children)
     const stepRef = useRef()
 
+    function validate(form, isValid) {
+        setValid(isValid)
+    }
+
     function prev() {
         if (current > 0) setCurrent(current - 1)
     }
@@ -46,13 +50,14 @@ export const Wizard = (props) => {
         })
     }
 
-    const currentStep = useMemo(() => {
-        return React.cloneElement(steps[current], { ref: stepRef })
-    }, [current])
+    const currentStep = React.cloneElement(steps[current], { ref: stepRef, onChange: validate })
+    const nextButton = current < steps.length - 1 ? <Button label="Siguiented" action={next} raised disabled={!valid}/> : <Button label="Finish" action={finish} />
+    const prevButton = current > 0 ? <Button label="Atrás" action={prev} /> : null
 
     return (
         <WizardProvider form={form}>
             <div className="wizard">
+                {current}
                 <div className="wizard-steps">
                     {steps.map((step, index) => {
                         const active = index === current
@@ -72,8 +77,9 @@ export const Wizard = (props) => {
                     {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 />}
+                    {prevButton}
+                    <div></div>
+                    {nextButton}
                 </div>
             </div>
         </WizardProvider>

package/src/incubator/wizard.test.js

@@ -1,45 +1,122 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
 import { Property, TextField } from '../html'
 import { Wizard, WizardContext} from './wizard'
 
 export const Step1 = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ id: 1, onNext }))
 
-    useImperativeHandle(ref, () => ({ onComplete }))
+    const wizardContext = React.useContext(WizardContext)
+    const { form } = wizardContext
+    const { onChange } = props
+    
+    useEffect(() => {
+        onChange(form, isValid(form)) 
+    }, [form])
+    
+    function changeForm(id, value) {
+        wizardContext.setForm({ ...form, [id]: value })
+    }
+
+    function isValid(form) {
+        console.log("isValid1")
+        return form.name && form.name.length > 0
+    }
+
+    function onNext (onSuccess, onError) {
+        console.log("onNext1", props.label)
+        onSuccess()
+    }
 
+    return (
+        <div>
+            <h1>Step</h1>
+            <TextField id="name" label="Name" value={form.name} onChange={changeForm} />
+        </div>
+    )
+})
+
+export const Step2 = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ id:2, isValid, onNext }))
+    
     const wizardContext = React.useContext(WizardContext)
     const { form } = wizardContext
+    const { onChange } = props
+    
+    useEffect(() => {
+        onChange(form, isValid(form)) 
+    }, [form])
 
     function changeForm(id, value) {
         wizardContext.setForm({ ...form, [id]: value })
+        props.onChange(form, isValid())
+    }
+
+    function isValid() {
+        console.log("isValid2")
+        return form.description && form.description.length > 0
     }
 
-    function onComplete (onSuccess, onError) {
-        console.log("onComplete", props.label)
+    function onNext (onSuccess, onError) {
+        console.log("onNext2", props.label)
         onSuccess()
     }
 
     return (
         <div>
             <h1>Step</h1>
-            <TextField id="name" label="Name" value={form.name} onChange={changeForm} />
+            <TextField id="description" label="Name" value={form.description} onChange={changeForm} />
         </div>
     )
 })
 
+export const Step3 = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ id:3, isValid, onNext }))
+
+    const wizardContext = React.useContext(WizardContext)
+    const { form } = wizardContext
+    const { onChange } = props
+    
+    useEffect(() => {
+        onChange(form, isValid(form)) 
+    }, [form])
+
+    function changeForm(id, value) {
+        wizardContext.setForm({ ...form, [id]: value })
+        props.onChange(form, isValid())
+    }
+
+    function isValid() {
+        console.log("isValid3")
+        return form.address && form.address.length > 0
+    }
+
+    function onNext (onSuccess, onError) {
+        console.log("onNExt3", props.label)
+        onSuccess()
+    }
+
+    return (
+        <div>
+            <h1>Step</h1>
+            <TextField id="address" label="Name" value={form.address} onChange={changeForm} />
+        </div>
+    )
+})
 
 const WizardTest = (prop) => {
 
     const initForm = {
         name: "John",
-        description: "Test Description"
+        description: "Test Description",
+        address: "Test Address"
     }
 
     return (
         <>
             <Wizard init={0} form={initForm} >
                 <Step1 label="Paso 1"/>
-                <Step1 label="Paso 2"/>
-                <Step1 label="Paso 3"/>
+                <Step2 label="Paso 2"/>
+                <Step3 label="Paso 3"/>
             </Wizard> 
         </>
     )