ywana-core8 0.0.34 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/upload/UploadArea.js

@@ -59,4 +59,22 @@ const UploadIcon = ({ resumable }) => {
             <Icon icon="folder_open" clickable/>
         </div>
     )
+}
+
+/**
+ * Upload Button
+ */
+ export function UploadButton({ resumable, icon="file_upload", label="Upload"}) {
+
+    const buttonElement = useRef();
+
+    useEffect(() => {
+        if (resumable && buttonElement) resumable.assignBrowse(buttonElement.current);
+    }, []);
+
+    return (
+        <div className="upload-button" ref={buttonElement}>
+            <Button icon={icon} label={label} outlined/>
+        </div>
+    )
 }

package/src/upload/uploader.css

@@ -1,6 +1,7 @@
 .uploader {
     display: flex;
     flex-direction: column;
+    flex: 1;
 }
 
 .demo-uploader {

package/src/upload/uploader.js

@@ -1,68 +1,85 @@
 import React, { useState, useMemo } from 'react'
 import ResumableJS from 'resumablejs'
-import { UploadArea } from './UploadArea'
+import { UploadArea } from "./UploadArea";
+import { UploadFile } from "./UploadFile";
 import './uploader.css'
 
+const STATES = {
+    IDLE: 0, RUNNING: 1, SUCCESS: 2, ERROR': 3, COMPLETED: 4 }
 /**
  * Uploader
  */
-export const Uploader = ({ label, target, accept, className, onSuccess, onError, onComplete, errors = [] }) => {
+export const Uploader = ({ label, target, accept, simultaneousUploads = 1, className, onSuccess, onError, onComplete, errors = [] }) => {
 
-    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3, 'COMPLETED': 4 }
 
-    const resumable = useMemo(() => {
-        const config = {
-            target: target,
-            chunkSize: 1 * 1024 * 1024,
-            simultaneousUploads: 1,
-            testChunks: false,
-            throttleProgressCallbacks: 1,
-            fileType: accept
-        }
-        const resumable = new ResumableJS(config)
-        resumable.on('fileAdded', onFileAdded)
-        resumable.on('fileProgress', onFileProgress)
-        resumable.on('fileSuccess', onFileSuccess)
-        resumable.on('fileError', onFileError)
-        resumable.on('complete', onAllComplete)
-        return resumable
-    }, [])
+        const resumable = useMemo(() => {
+            const config = {
+                target: target,
+                chunkSize: 1 * 1024 * 1024,
+                simultaneousUploads,
+                testChunks: false,
+                throttleProgressCallbacks: 1,
+                fileType: accept
+            }
+            const resumable = new ResumableJS(config)
+            resumable.on('fileAdded', onFileAdded)
+            resumable.on('fileProgress', onFileProgress)
+            resumable.on('fileSuccess', onFileSuccess)
+            resumable.on('fileError', onFileError)
+            resumable.on('complete', onAllComplete)
+            return resumable
+        }, [])
 
-    const [progress, setProgress] = useState(0)
-    const [state, setState] = useState(STATES.IDLE)
-    const [error, setError] = useState()
-    const [files, setFiles] = useState([])
+        const [progress, setProgress] = useState(0)
+        const [state, setState] = useState(STATES.IDLE)
+        const [error, setError] = useState()
+        const [files, setFiles] = useState([])
 
-    function onFileAdded(file) {
-        files.push(file)
-        setFiles(files)
-        resumable.upload()
-    }
+        function onFileAdded(file) {
+            files.push(file)
+            setFiles(files)
+            setState(STATES.RUNNING)
+            resumable.upload()
+        }
 
-    function onFileProgress(file) {
-        const progress = file.progress()
-        setProgress(progress)
-    }
+        function onFileProgress(file) {
+            const progress = file.progress()
+            setProgress(progress)
+            if (onProgress) onProgress(files);
+        }
 
-    function onFileSuccess(file, message) {
-        setState(STATES.SUCCESS)
-        if (onSuccess) onSuccess(file, message)
-    }
+        function onFileSuccess(file, message) {
+            setState(STATES.SUCCESS)
+            if (onSuccess) onSuccess(file, message)
+        }
 
-    function onFileError(file, message) {
-        setError(message)
-        setState(STATES.ERROR)
-        if (onError) onError(file, message)
-    }
+        function onFileError(file, message) {
+            setError(message)
+            setState(STATES.ERROR)
+            if (onError) onError(file, message)
+        }
+
+        function onAllComplete() {
+            setState(STATES.IDLE)
+            if (onComplete) onComplete(files)
+        }
 
-    function onAllComplete() {
-        setState(STATES.IDLE)
-        if (onComplete) onComplete(files)
+        return (
+            <div className={`uploader ${className}`}>
+                {state === STATES.IDLE ? <UploadArea resumable={resumable} state={state} label={label} error={error} progress={progress} /> : null}
+                {state === STATES.RUNNING || STATES.SUCCESS || STATES.ERROR ? <UploadProgress files={files} errors={errors} /> : null}
+            </div>
+        )
     }
 
-    return (
-        <div className={`uploader ${className}`}>
-            <UploadArea resumable={resumable} state={state} label={label} error={error}/>
-        </div>
-    )
-}
+const UploadProgress = ({ files = [], errors }) => {
+        return (
+            <div>
+                {files.map((file) => {
+                    const error2 = errors.some((e) => e === file.fileName) ? "Fichero Mal Nombrado" : "";
+                    const progress = 1
+                    return <UploadFile file={file} state={STATES.RUNNING} progress={file.progress()} />;
+                })}
+            </div>
+        );
+    };