ywana-core8 0.0.899 → 0.0.901

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.899",
+  "version": "0.0.901",
   "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,52 @@ 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>
     )
+}
+
+export const ActionButton = (props) => {
+
+    const { icon, state = "normal", action, className } = props
+    const [_state, setState] = useState("normal")
+
+    useEffect(() => {
+        setState(state)
+    }, [state])
+
+    function activate() {
+        setState("running")
+        if (action) action()
+    }
+
+    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
+    }
+
+    return (
+        <Button {...props} icon={actionIcon} action={activate} className={`${className} action-btn ${_state}`} />
+    )
+
+}
+
+const ProgressButtonTest = (props) => {
+
+    return (
+        <ActionButton label="Test1" icon="add" action={() => console.log("test")} state="success" 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'

package/src/html/menu.js

@@ -54,7 +54,7 @@ export const MenuIcon = (props) => {
  */
 export const MenuItem = (props) => {
 
-    const { id, icon, label, meta, disabled=false, onSelect } = props
+    const { id, icon, label, meta, disabled=false, size="normal", onSelect } = props
     const [open, setOpen] = useContext(MenuContext)
 
     function select() {
@@ -69,7 +69,7 @@ export const MenuItem = (props) => {
 
     return (
         <li className={`menu-item ${style}`} onClick={select}>
-            {icon ? <Icon icon={icon} /> : null}
+            {icon ? <Icon icon={icon} size={size} /> : null}
             <label>{labelTxt}</label>
             {meta ? <div className="meta">{meta}</div> : null}
         </li>