ywana-core8 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.44",
+  "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;

package/src/widgets/upload/Upload.test.js

@@ -7,7 +7,7 @@ import { UPLOAD_STATES } from './UploadStates'
 const UploadAreaTest = (props) => {
     return (
         <div style={{ padding: "1rem" }}>
-            <UploadArea icon="cloud_upload" label="UploadArea Test" />
+            <UploadArea icon="cloud_upload" label="UploadArea Test" disabled={true} />
         </div>
     )
 }

package/src/widgets/upload/UploadArea.css

@@ -0,0 +1,6 @@
+.upload-area6.disabled {
+    background-color: #f5f5f5;
+    border-color: #e0e0e0;
+    color: #9e9e9e;
+    cursor: not-allowed;
+}

package/src/widgets/upload/UploadArea.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Icon } from '../../html'
-
+import './UploadArea.css'
 /**
  * Upload Area
  */
 export const UploadArea = (props) => {
 
-    const { icon, label = 'Add file or drop file here...' } = props
+    const { icon, label = 'Add file or drop file here...', disabled= false } = props
     const areaElement = useRef()
     const [drag, setDrag] = useState(false)
     const { resumable } = props
@@ -18,22 +18,25 @@ export const UploadArea = (props) => {
     }, [])
 
     const onDragOver = () => {
+        if (disabled) return
         setDrag(true)
     }
 
     const onDragLeave = () => {
+        if (disabled) return
         setDrag(false)
     }
 
     const dragging = drag === true ? 'drag-over' : ''
+    const disabledStyle = disabled === true ? 'disabled' : ''
 
     return (
-        <div className={`upload-area6 ${dragging}`}
+        <div className={`upload-area6 ${dragging} ${disabledStyle}`}
             onDragOver={onDragOver}
             onDragLeave={onDragLeave}
             ref={areaElement}
         >
-            <UploadIcon resumable={resumable}/>
+            <UploadIcon icon={icon} resumable={resumable} disabled={disabled}/>
             <label>{label}</label>
         </div>
     )
@@ -42,7 +45,7 @@ export const UploadArea = (props) => {
 /**
  * Upload Icon
  */
-export const UploadIcon = ({ icon = "folder_open", resumable }) => {
+export const UploadIcon = ({ icon = "folder_open", resumable, disabled=false }) => {
 
     const iconElement = useRef()
 
@@ -54,7 +57,7 @@ export const UploadIcon = ({ icon = "folder_open", resumable }) => {
 
     return (
         <div className="upload-icon" ref={iconElement}>
-            <Icon icon={icon} clickable/>
+            <Icon icon={icon} clickable disabled={disabled}/>
         </div>
     )
 }

package/src/widgets/upload/UploadDialog.js

@@ -6,7 +6,7 @@ import { SiteContext, Dialog } from '../../site';
 /**
  * Upload Dialog
  */
-export const UploadDialog = ({ label, target, accept, onSuccess, onComplete, onClose, children, className, disabled, onCanClose, overlayCanClose = true }) => {
+export const UploadDialog = ({ label, target, accept, onSuccess, onComplete, onClose, children, className, disabled=false, onCanClose, overlayCanClose = true }) => {
 
     const site = useContext(SiteContext);
 
@@ -38,7 +38,7 @@ export const UploadDialog = ({ label, target, accept, onSuccess, onComplete, onC
     const title = <Text use="headline6">{label}</Text>
     return (
         <Dialog title={title} open={true} onAction={onAction} actions={actions} className={className} overlayCanClose={overlayCanClose}>
-            { disabled ? "" :  <Uploader label={label} accept={accept} target={target} onSuccess={success} onComplete={complete} /> }
+            <Uploader label={label} accept={accept} target={target} onSuccess={success} onComplete={complete} disabled={disabled} />
             {children}
         </Dialog>
     )

package/src/widgets/upload/Uploader.js

@@ -9,7 +9,7 @@ import './Uploader.css'
 /**
  * Uploader
  */
-export const Uploader = ({ icon, label, view="area", target, accept, simultaneousUploads = 1, className, onProgress, onSuccess, onError, onComplete }) => {
+export const Uploader = ({ icon, label, view="area", target, accept, simultaneousUploads = 1, className, onProgress, onSuccess, onError, onComplete, disabled = false }) => {
 
         const resumable = useMemo(() => {
             const config = {
@@ -65,9 +65,9 @@ export const Uploader = ({ icon, label, view="area", target, accept, simultaneou
 
         function renderView() {
             switch (view) {
-                case "area": return <UploadArea resumable={resumable} icon={icon} label={label} />
-                case "icon": return <UploadIcon resumable={resumable} icon={icon} />
-                default: return <UploadArea resumable={resumable} icon={icon} label={label} />
+                case "area": return <UploadArea resumable={resumable} icon={icon} label={label} disabled={disabled} />
+                case "icon": return <UploadIcon resumable={resumable} icon={icon} disabled={disabled} />
+                default: return <UploadArea resumable={resumable} icon={icon} label={label} disabled={disabled} />
             }
         }