ywana-core8 0.0.825 → 0.0.827

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.825",
+  "version": "0.0.827",
   "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/html/tree.css

@@ -28,6 +28,7 @@
 }
 
 .tree-item.selected {
+    color: var(--accent-color-text);
     background-color: var(--accent-color);
     font-weight: 500;
 } 

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/kanban/Kanban.css

@@ -63,6 +63,12 @@
     color: var(--primary-color-light);
 }
 
+.kanban-column>footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
 .kanban-card {
     margin: 2rem;
     box-shadow: var(--shadow1);

package/src/widgets/kanban/Kanban.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Icon, Text } from '../../html'
+import { Icon, MenuIcon, Text } from '../../html'
 import './Kanban.css'
 
 /**
@@ -16,7 +16,7 @@ export const Kanban = ({ children }) => {
 /**
  * Kanban Column
  */
-export const KanbanColumn = ({ id, accept = [], icon, title, subtitle, badge, children, minified = false, disabled = false }) => {
+export const KanbanColumn = ({ id, actions, icon, title, subtitle, badge, children, minified = false, disabled = false }) => {
 
     const [min, setMin] = useState(minified)
 
@@ -48,6 +48,7 @@ export const KanbanColumn = ({ id, accept = [], icon, title, subtitle, badge, ch
             </main>
             <footer>
                 <Icon icon="toggle_off" onIcon="toggle_on" clickable action={toggle} />
+                {actions}
             </footer>
         </div>
     )

package/src/widgets/kanban/Kanban.test.js

@@ -1,16 +1,17 @@
 import React from 'react'
 import { Kanban, KanbanCard, KanbanColumn } from './Kanban'
+import { Button } from '../../html'
 
 const KanbanTest = (prop) => {
     return (
         <Kanban>
-            <KanbanColumn title="TODO" badge="1">
+            <KanbanColumn icon="inbox" title="TODO" badge="1">
                 <KanbanCard />
             </KanbanColumn>
-            <KanbanColumn title="IN PROGRESS" badge="0">
+            <KanbanColumn icon="inbox" title="IN PROGRESS" badge="0">
 
             </KanbanColumn>
-            <KanbanColumn title="DONE" badge="2">
+            <KanbanColumn icon="inbox" title="DONE" badge="2" actions={<Button label="Archive" raised />}>
                 <KanbanCard />
                 <KanbanCard />
             </KanbanColumn>