ywana-core8 0.0.900 → 0.0.902

package/package.json

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

package/src/css/theme_light.css

@@ -84,4 +84,5 @@
   --shadow-top: 0px -3px 5px 0px rgba(150, 150, 150, 0.3);
 
   --curtains-closed-width: 4rem;
+
 }

package/src/html/button.css

@@ -1,79 +1,106 @@
 .btn {
-    position: relative;
-    padding: .2rem .5rem;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    border-width: 0;
-    outline: none;
-    transition: background-color .3s;
-    display: flex;
-    color: var(--primary-color);
-    background-color: var(--paper-color);
-    min-height: 2.5rem;
-  }
-  
-  .btn.outlined {
-    color: var(--primary-color);
-    border: solid 1px var(--primary-color);
-  }
-  
-  .btn.outlined.disabled {
-    border: solid 1px rgba(200,200,200,.3) !important;
-    color: rgba(100,100,100,.5) !important;
-    cursor: not-allowed;
-  }
+  position: relative;
+  padding: .2rem .5rem;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-width: 0;
+  outline: none;
+  transition: background-color .3s;
+  display: flex;
+  color: var(--primary-color);
+  background-color: var(--paper-color);
+  min-height: 2.5rem;
+}
 
-  .btn.raised {
-    color: var(--primary-color-text);
-    background-color: var(--primary-color)
-  }
+.btn.outlined {
+  color: var(--primary-color);
+  border: solid 1px var(--primary-color);
+}
 
-  .btn.raised.disabled {
-    background-color: rgba(200,200,200,.3) !important;
-    color: rgba(100,100,100,.5) !important;
-    cursor: not-allowed;
-  }
-  
-  .btn:hover, .btn:focus {
-    background-color: rgba(171, 171, 171, 0.3);
-    cursor: pointer;
-  }
+.btn.outlined.disabled {
+  border: solid 1px rgba(200, 200, 200, .3) !important;
+  color: rgba(100, 100, 100, .5) !important;
+  cursor: not-allowed;
+}
 
-  .btn.raised:hover, .btn.raised:focus {
-    background-color: var(--primary-color-dark);
-    cursor: pointer;
-  }
-  
-  .btn > * {
-    position: relative;
+.btn.raised {
+  color: var(--primary-color-text);
+  background-color: var(--primary-color)
+}
+
+.btn.raised.disabled {
+  background-color: rgba(200, 200, 200, .3) !important;
+  color: rgba(100, 100, 100, .5) !important;
+  cursor: not-allowed;
+}
+
+.btn:hover,
+.btn:focus {
+  background-color: rgba(171, 171, 171, 0.3);
+  cursor: pointer;
+}
+
+.btn.raised:hover,
+.btn.raised:focus {
+  background-color: var(--primary-color-dark);
+  cursor: pointer;
+}
+
+.btn>* {
+  position: relative;
+}
+
+.btn span {
+  flex: 1;
+  display: block;
+}
+
+.btn:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0;
+  padding-top: 0;
+  border-radius: 100%;
+  background-color: rgba(236, 240, 241, .3);
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.btn:active:before {
+  width: 120%;
+  padding-top: 120%;
+  transition: width .2s ease-out, padding-top .2s ease-out;
+}
+
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+    font-size: 1.3rem;
   }
-  
-  .btn span {
-    flex: 1;
-    display: block;
+
+  50% {
+    font-size: 1.8rem;
   }
-  
-  .btn:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    width: 0;
-    padding-top: 0;
-    border-radius: 100%;
-    background-color: rgba(236, 240, 241, .3);
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+
+  100% {
+    transform: rotate(359deg);
+    font-size: 1.3rem;
   }
-  
-  .btn:active:before {
-    width: 120%;
-    padding-top: 120%;
-    transition: width .2s ease-out, padding-top .2s ease-out;
+}
+
+.action-btn {
+  &.running {
+    .icon {
+      font-weight: 600;
+      animation: rotation 2s linear infinite;
+    }
   }
-  
+}

package/src/html/button.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Icon } from './icon'
 import { Text } from './text'
 import './button.css'
@@ -6,7 +6,7 @@ import './button.css'
 /**
  * HTML Button
  */
-export const Button = ({ label, icon, action, disabled = false, outlined, raised, className }) => {
+export const Button = ({ label, icon, action, disabled = false, outlined, raised, className, progress = 0 }) => {
 
     function click(event) {
         if (!disabled) {
@@ -20,8 +20,80 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     if (disabled) style = `${style} disabled`
     return (
         <button className={`btn ${style} ${className}`} onClick={click}>
-            { icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
-            <Text>{ label }</Text>
+            {icon ? <Icon icon={icon} size="small" clickable action={click} /> : null}
+            <Text>{label}</Text>
         </button>
     )
+}
+
+/**
+ * Action Button
+ */
+export const ActionButton = (props) => {
+
+    const { states, state, className } = props
+
+    const [_state, setState] = useState()
+
+    useEffect(() => {
+        setState(state)
+    }, [state])
+
+    useEffect(() => {
+        if (states[_state] && states[_state].autoexec) execute()
+    }, [_state])
+
+    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={icon} label={label} action={execute} className={`${className} action-btn ${_state}`} />
+    )
+
+}
+
+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 states={states} state="normal" raised/>
+    )
 }

package/src/html/index.js

@@ -1,5 +1,5 @@
 export { Accordion } from './accordion'
-export { Button } from './button'
+export { Button, ActionButton } from './button'
 export { CheckBox } from './checkbox'
 export { Chips, Chip } from './chip'
 export { Form } from './form'