ywana-core8 0.1.45 → 0.1.46

package/package.json

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

package/src/html/checkbox.css

@@ -8,7 +8,7 @@
 
 .checkbox .checkmark {
   width: 1.5rem;
-  height: 1.4rem;
+  height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -18,6 +18,10 @@
   padding-bottom: .1rem;
 }
 
+.checkbox.readonly>.checkmark {
+  border: solid 1px var(--text-color-light);
+}
+
 .checkbox .checkmark:after {
   content: "";
   width: 0.3rem;
@@ -31,7 +35,12 @@
   z-index: 0;
 }
 
-.checkbox > input {
+.checkbox.readonly .checkmark:after {
+  border-color: var(--text-color-lighter);
+}
+
+
+.checkbox>input {
   position: absolute;
   flex: 1;
   width: 2rem;
@@ -40,16 +49,16 @@
   z-index: 1;
 }
 
-input:checked ~ .checkmark:after {
-    display: block;
-  }
+input:checked~.checkmark:after {
+  display: block;
+}
 
-.checkbox > label {
-  color: var(--text-color-light);
+.checkbox>label {
+  color: var(--text-color);
   font-size: 1rem;
   font-weight: normal;
 }
 
-.checkbox .icon {
-  position: absolute;
+.checkbox.readonly>label {
+  color: var(--text-color-light);
 }

package/src/html/checkbox.js

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Text } from './text'
-import { Icon } from './icon'
 import './checkbox.css'
 
 /**
@@ -8,58 +7,51 @@ import './checkbox.css'
  */
 export const CheckBox = (props) => {
 
-    const { id, label, placeholder, value, readOnly=false, onChange } = props
+    const { id, label, value = false, readOnly = false, onChange } = props
+
+    const [checked, setChecked] = React.useState(value)
+
+    useEffect(() => {
+        setChecked(value)
+    }, [value])
 
     function change(event) {
         event.stopPropagation()
-        event.preventDefault()
-        const value = event.target.checked
-        if (onChange) onChange(id, value)
+        const nextValue = event.target.checked
+        setChecked(nextValue)
+        if (onChange) onChange(id, nextValue)
     }
 
-    const labelTxt = <Text>{label}</Text>
-    const placeholderTxt = <Text>{placeholder}</Text>
+    const labelTxt = label && <Text>{label}</Text>
 
-
-    if (readOnly===true) {
-        return value === true ? (
-            <div className="checkbox" key={`${id}1`}>
-                <Icon id={id} icon="check" size="small" />
-                <span className="checkmark" />
-                <label htmlFor={id}>{labelTxt}</label>
-            </div>
-        ) : (
-            <div className="checkbox" key={`${id}0`}>
-                <span className="checkmark" />
-                <label htmlFor={id}>{labelTxt}</label>
-            </div>
-        )
-    }
-
-    return value === true ? (
-        <div className="checkbox" key={`${id}1`}>
-            <input id={id} type="checkbox" placeholder={placeholderTxt} checked value={value} onChange={change} readOnly />
-            <span className="checkmark" />
-            <label htmlFor={id}>{labelTxt}</label>
-        </div>
-    ) : (
-        <div className="checkbox" key={`${id}0`}>
-            <input id={id} type="checkbox" placeholder={placeholderTxt} value={value} onChange={change} readOnly />
+    return (
+        <div className={`checkbox ${readOnly ? "readonly" : ""}`} key={`${id}1`}>
+            <input id={id} key={`${id}_${checked}`} type="checkbox" checked={checked} onChange={change} disabled={readOnly} />
             <span className="checkmark" />
             <label htmlFor={id}>{labelTxt}</label>
         </div>
     )
 }
 
-
 const CheckBoxTest = (props) => {
 
+    const [checked, setChecked] = React.useState({
+        check1: true,
+        check2: false,
+        check3: true,
+        check4: false
+    })
+
+    function change(id, value) {
+        setChecked({ ...checked, [id]: value })
+    }
+
     return (
         <div>
-            <CheckBox id="check1" label="Check 1" placeholder="Check 1" value={true} />
-            <CheckBox id="check2" label="Check 2" placeholder="Check 2" value={false} />
-            <CheckBox id="check3" label="Check 3" placeholder="Check 3" value={true} readOnly />
-            <CheckBox id="check4" label="Check 4" placeholder="Check 4" value={false} readOnly />
+            <CheckBox id="check1" label="Check 1" value={checked.check1} onChange={change} />
+            <CheckBox id="check2" label="Check 2" value={checked.check2} onChange={change} />
+            <CheckBox id="check3" label="Check 3" value={checked.check3} onChange={change} readOnly/>
+            <CheckBox id="check4" label="Check 4" value={checked.check4} onChange={change} readOnly/>
         </div>
     )
 }

package/src/html/textfield.css

@@ -46,6 +46,10 @@
   color: rgba(150,150,150,1);
 }
 
+.textfield-outlined.no-label > .icon {
+  top: .5rem;
+}
+
 .textfield-date>.icon,
 .textfield-DATE>.icon {
   right: 2.5rem;