ywana-core8 0.0.901 → 0.0.902

package/package.json

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

package/src/html/button.js

@@ -26,46 +26,74 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     )
 }
 
+/**
+ * Action Button
+ */
 export const ActionButton = (props) => {
 
-    const { icon, state = "normal", action, className } = props
-    const [_state, setState] = useState("normal")
+    const { states, state, className } = props
+
+    const [_state, setState] = useState()
 
     useEffect(() => {
         setState(state)
     }, [state])
 
-    function activate() {
-        setState("running")
-        if (action) action()
-    }
+    useEffect(() => {
+        if (states[_state] && states[_state].autoexec) execute()
+    }, [_state])
 
-    let actionIcon = icon
-
-    switch(_state) {
-        case "normal":
-            actionIcon = icon
-            break
-        case "running":
-            actionIcon = "rotate_right"
-            break
-        case "success":
-            actionIcon = "task_alt"
-            break
-        case "error":
-            actionIcon = "error"
-            break
+    async function execute() {
+        if (states[_state]) {
+            const newState = await states[_state].action()
+            if (newState) setState(newState)
+        }
     }
 
+    if (!_state) return null
+    const { icon, label } = states[_state]
+
     return (
-        <Button {...props} icon={actionIcon} action={activate} className={`${className} action-btn ${_state}`} />
+        <Button {...props} icon={icon} label={label} action={execute} className={`${className} action-btn ${_state}`} />
     )
 
 }
 
-const ProgressButtonTest = (props) => {
+const ActionButtonTest = (props) => {
+
+    const states = {
+        normal: {
+            icon: "add",
+            label: "Create Job",
+            action: () => { 
+                return "running"
+            },
+        },
+        running: {
+            icon: "rotate_right",
+            label: "Creating Job",
+            autoexec: true,
+            action: () => { 
+                console.log("Creating Job")
+                return new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        resolve("success")
+                    }, 5000)
+                })
+            },
+        },
+        success: {
+            icon: "task_alt",
+            label: "Job Created"
+
+        },
+        error: {
+            icon: "error",
+            label: "Error"
+        }
+    }
 
     return (
-        <ActionButton label="Test1" icon="add" action={() => console.log("test")} state="success" raised/>
+        <ActionButton states={states} state="normal" raised/>
     )
 }