ywana-core8 0.0.652 → 0.0.654

package/package.json

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

package/src/html/button.js

@@ -6,7 +6,7 @@ import './button.css'
 /**
  * HTML Button
  */
-export const Button = ({ label, icon, action, disabled = false, outlined, raised }) => {
+export const Button = ({ label, icon, action, disabled = false, outlined, raised, className }) => {
 
     function click(event) {
         if (!disabled) {
@@ -19,7 +19,7 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
     if (disabled) style = `${style} disabled`
     return (
-        <button className={`btn ${style}`} onClick={click}>
+        <button className={`btn ${style} ${className}`} onClick={click}>
             { icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
             <Text>{ label }</Text>
         </button>

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,57 @@
+import React, { 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 [current=0, setCurrent] = useState(init)
+
+    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)
+        }
+    }
+
+    function finish() {
+        const step = steps[current]
+        if (step.onComplete) step.onComplete(() => {
+            if (onClose) onClose()
+        })
+    }
+
+    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.label}</div>
+                        </div>
+                    )
+                })}
+            </div>
+            <div className="wizard-content">
+                {steps[current].content}
+            </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,16 @@
+import React, { useState } from 'react'
+import { Wizard } from './wizard'
+
+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} /> 
+        </>
+    )
+}

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);