ywana-core8 0.1.44 → 0.1.45

package/package.json

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

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} />
             }
         }