ywana-core8 0.0.653 → 0.0.655

package/package.json

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

package/src/incubator/index.js

@@ -0,0 +1 @@
+export {Wizard } from './wizard'

package/src/incubator/wizard.css

@@ -0,0 +1,30 @@
+.wizard {
+    border: solid 1px red;
+}
+
+.wizard-steps {
+    display: flex;
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.wizard-step {
+    flex: 1;
+    padding: 0 .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.wizard-step:not(:last-child) {
+    border-right: solid 1px var(--divider-color);
+}
+
+.wizard-content {
+    min-height: 10rem;
+}
+
+.wizard-actions {
+    border-top: solid 1px var(--divider-color);
+    display: flex;
+    justify-content: space-between;
+    padding: .5rem;
+}

package/src/incubator/wizard.js

@@ -0,0 +1,61 @@
+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 { 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() {
+        stepRef.current.onComplete(() => {
+            setCurrent(current + 1) 
+        })
+    }
+
+    function finish() {
+        stepRef.current.onComplete(() => {
+            if (onClose) onClose()
+        })
+    }
+
+    const currentStep = useMemo(() => {
+        return React.cloneElement(steps[current], { ref: stepRef })
+    }, [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" />}
+                            </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={current === steps.length - 1} action={next} /> : <Button label="Finalizar" action={finish} raised /> }
+            </div>
+        </div>
+    )
+}
+

package/src/incubator/wizard.test.js

@@ -0,0 +1,32 @@
+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 (
+        <>
+            <Wizard init={0} >
+                <Step1 label="Paso 1"/>
+                <Step1 label="Paso 2"/>
+                <Step1 label="Paso 3"/>
+            </Wizard> 
+        </>
+    )
+}

package/src/index.js

@@ -7,4 +7,7 @@ export * from './widgets'
 export * from './site'
 export * from './domain'
 
+
+export * from './incubator'
+
 export const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);