ywana-core8 0.0.654 → 0.0.656

package/package.json

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

package/src/incubator/wizard.css

@@ -1,5 +1,4 @@
 .wizard {
-    border: solid 1px red;
 }
 
 .wizard-steps {

package/src/incubator/wizard.js

@@ -1,33 +1,36 @@
-import React, { useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Icon } from '../html'
 import { Button } from '../html/button'
 import './wizard.css'
 
 export const Wizard = (props) => {
 
-    const { steps = [], init = 0, onClose  } = props
+    const { init = 0, onClose, children  } = props
     const [current=0, setCurrent] = useState(init)
+    
+    const steps = React.Children.toArray(children)
+    const stepRef = useRef()
 
     function prev() {
         if (current > 0) setCurrent(current - 1)
     }
 
-    function next() {
-        const step = steps[current]
-        if (step.onComplete) {
-            step.onComplete(() => { setCurrent(current + 1) })
-        } else {
-            setCurrent(current + 1)
-        }
+    async function next() {
+        await stepRef.current.onNext(() => {
+            setCurrent(current + 1) 
+        })
     }
 
-    function finish() {
-        const step = steps[current]
-        if (step.onComplete) step.onComplete(() => {
+    async function finish() {
+        await stepRef.current.onNext(() => {
             if (onClose) onClose()
         })
     }
 
+    const currentStep = useMemo(() => {
+        return React.cloneElement(steps[current], { ref: stepRef })
+    }, [current])
+
     return (
         <div className="wizard">
             <div className="wizard-steps">
@@ -40,18 +43,19 @@ export const Wizard = (props) => {
                                 {done && <Icon icon="check" />}
                                 {active && <Icon icon="play_arrow" />}
                             </div>
-                            <div className="wizard-step-label">{step.label}</div>
+                            <div className="wizard-step-label">{step.props.label}</div>
                         </div>
                     )
                 })}
             </div>
             <div className="wizard-content">
-                {steps[current].content}
+                {currentStep}
             </div>
             <div className="wizard-actions">
                 <Button label="Anterior" disabled={current === 0} action={prev} />
-                { current < steps.length -1 ? <Button label="Siguiente" disabled={current === steps.length - 1} action={next} /> : <Button label="Finalizar" action={finish} raised /> }
+                { current < steps.length -1 ? <Button label="Siguiente" disabled={stepRef.current.isValid()} action={next} /> : <Button label="Finalizar" disabled={stepRef.current.isValid()} action={finish} raised /> }
             </div>
         </div>
     )
 }
+

package/src/incubator/wizard.test.js

@@ -1,16 +1,32 @@
-import React, { useState } from 'react'
-import { Wizard } from './wizard'
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import { Wizard} from './wizard'
+
+export const Step1 = forwardRef((props, ref) => {
+
+    useImperativeHandle(ref, () => ({ onComplete }))
+
+    function onComplete (onSuccess, onError) {
+        console.log("onComplete", props.label)
+        onSuccess()
+    }
+
+    return (
+        <div>
+            <h1>Step</h1>
+        </div>
+    )
+})
+
 
 const WizardTest = (prop) => {
 
     return (
-        <>sa
-            <Wizard steps={[
-                { label: "Paso 1", content: <div>Contenido 1</div>, onComplete: (onSuccess, onError) => { console.log("complete 1"); onSuccess() } },
-                { label: "Paso 2", content: <div>Contenido 2</div>, onComplete: (onSuccess, onError) => { console.log("complete 2"); onSuccess() } },
-                { label: "Paso 3", content: <div>Contenido 3</div>, onComplete: (onSuccess, onError) => { console.log("complete 3"); onSuccess() } },
-                { label: "Paso 4", content: <div>Contenido 4</div>, onComplete: (onSuccess, onError) => { console.log("complete 4"); onSuccess() } },
-            ]} init={0} /> 
+        <>
+            <Wizard init={0} >
+                <Step1 label="Paso 1"/>
+                <Step1 label="Paso 2"/>
+                <Step1 label="Paso 3"/>
+            </Wizard> 
         </>
     )
 }