ywana-core8 0.0.824 → 0.0.826

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.824",
+  "version": "0.0.826",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -30,6 +30,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",

package/src/incubator/index.js

@@ -1,3 +1,4 @@
 export { Wizard, WizardContext } from './wizard'
 export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
+export { UploadForm } from './upload'
 export * from './password'

package/src/incubator/upload.css

@@ -0,0 +1,58 @@
+.upload-form {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    margin: 2rem;
+}
+
+.upload-form input[type="file"] {
+    display: none;
+}
+
+.upload-area {
+    border: dashed 2px rgb(195, 195, 195);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: 1rem 2rem 2rem 2rem;
+}
+
+.upload-area-text {
+    font-size: 1.5rem;
+    color: gray;
+    margin: 1.5rem;
+}
+
+.upload-label {
+    background-color: rgb(137, 137, 249);
+    color: white;
+    border-radius: 5px;
+    padding: .5rem 2rem;
+    cursor: pointer;
+}
+
+.upload-file {
+    padding: 0.5rem;
+}
+
+.upload-file-info {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
+}
+
+.upload-file-info>label {
+    flex: 1;
+}
+
+.upload-progress-bar {
+    background-color: rgb(232, 232, 232);
+}
+
+.upload-progress-bar-inner {
+    min-height: .5rem;
+    background-color: rgb(137, 137, 249);
+}

package/src/incubator/upload.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import './upload.css'
+
+/*
+ * Upload Form
+ */
+export const UploadForm = (props) => {
+
+    const { label = "Browse", text = "Drag and drop here", url, headers = {}, children, onSuccess, onError } = props
+
+    const [file, setFile] = useState(null)
+    const [progress, setProgress] = useState(0)
+
+    useEffect(() => {
+        if (file) {
+            uploadFile(file)
+        }
+    }, [file])
+
+    function onDragOver(e) {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    function onDragEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            console.log("dragenter")
+        } else if (e.type === "dragleave") {
+            console.log("dragleave")
+        }
+    }
+
+    function onFileDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            const { files } = e.dataTransfer
+            handleFiles(files);
+        }
+    }
+
+    function handleFiles(files) {
+        const file = files[0]
+        console.log("handleFiles", files, file)
+        setFile(file)
+    }
+
+    function handleFile(e) {
+        let file = e.target.files[0]
+        setFile(file)
+    }
+
+    function uploadFile(file) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const config = {
+            onUploadProgress: progressEvent => {
+                setProgress(Math.round(progressEvent.loaded / progressEvent.total * 100))
+            },
+            headers: {
+                'content-type': 'multipart/form-data',
+                ...headers
+            }
+        }
+        axios.post(url, formData, config)
+            .then(response => {
+                if (onSuccess) onSuccess(response)
+            }).catch(error => {
+                if (onError) onError(error)
+            })
+    }
+
+    return (
+        <div className='upload-form' onDragEnter={onDragEnter} onDragOver={onDragOver} onDrop={onFileDrop} >
+            <div className="upload-area" >
+                <div className='upload-area-text'>{text}</div>
+                <label htmlFor="upload"><span className="upload-label">{label}</span></label>
+                <input id="upload" type="file" onChange={handleFile} />
+            </div>
+            {file ? <UploadFile name={file.name} progress={progress} /> : null}
+        </div>
+    )
+}
+
+/**
+ * Upload File
+ */
+const UploadFile = (props) => {
+
+    const { name, progress = 0 } = props
+
+    return (
+        <div className='upload-file'>
+            <div className='upload-file-info'>
+                <label>{name}</label>
+                <span>{progress} %</span>
+            </div>
+            <UploadProgressBar progress={progress} />
+        </div>
+    )
+}
+
+/**
+ * Upload Progress Bar
+ */
+const UploadProgressBar = (props) => {
+
+    const { progress } = props
+
+    return (
+        <div className='upload-progress-bar'>
+            <div className='upload-progress-bar-inner' style={{ width: `${progress}%` }}></div>
+        </div>
+    )
+}
+
+const UploadTest = (props) => {
+    return (
+        <div>
+            <UploadForm url={"http://localhost:3000/upload"} />
+        </div>
+    )
+}

package/src/widgets/planner/Planner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from "react";
+import React, { useEffect, useMemo, useState, useRef, useCallback } from "react";
 import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
@@ -20,11 +20,18 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     const [dateRange, setDateRange] = useState(config.range);
     const [from, setFrom] = useState(config.from);
     const [to, setTo] = useState(config.to);
-    const thisMondayElement = useRef(null)
     
-    useEffect(() => {
-        if (thisMondayElement.current) { showThisWeek() }
-    }, [thisMondayElement])
+    const thisMondayElement = useRef(null)
+
+    const gotoMonday = useCallback(node => {
+        const element = node
+        console.log("goto monday", element)
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'start',
+        })
+    }, [])
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
@@ -68,6 +75,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     function showThisWeek() {
         const element = thisMondayElement.current
         //const element = document.querySelector(".thisMonday")
+        console.log("Show this week", element)
         if (element) element.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
@@ -135,16 +143,15 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                             const today = moment()
                             var weekStart = today.clone().startOf('week')
                             const isThisMonday = (date.moment.isSame(weekStart))
-
                             return (
-                                <div key={`column-${date.moment.dayOfYear()}`} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
-                                    <div className={`date-header ${weekend} ${thisWeek}`}>
+                                <div key={`column-${date.moment.dayOfYear()}`} id={isThisMonday ? "thisMonday" : ""} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
+                                    <div className={`date-header ${weekend} ${thisWeek}`} ref={isThisMonday ? gotoMonday : null}>
                                         <Text use="headline6">{date.moment.format("DD")}</Text>
                                         &nbsp;
                                         <Text use="caption">{date.moment.format("ddd")}</Text>
                                     </div>
                                 </div>
-                            );
+                            )
                         })}
                     </div>