ywana-core8 0.0.824 → 0.0.826

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ywana-core8",
3
- "version": "0.0.824",
3
+ "version": "0.0.826",
4
4
  "description": "ywana-core8",
5
5
  "homepage": "https://ywana.github.io/workspace",
6
6
  "author": "Ernesto Roldan Garcia",
@@ -30,6 +30,7 @@
30
30
  "react-dom": "^17.0.2"
31
31
  },
32
32
  "dependencies": {
33
+ "axios": "^1.3.4",
33
34
  "crypto-js": "^4.1.1",
34
35
  "deep-equal": "^2.0.5",
35
36
  "material-design-icons-iconfont": "^6.1.1",
@@ -1,3 +1,4 @@
1
1
  export { Wizard, WizardContext } from './wizard'
2
2
  export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
3
+ export { UploadForm } from './upload'
3
4
  export * from './password'
@@ -0,0 +1,58 @@
1
+ .upload-form {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ background: transparent;
6
+ margin: 2rem;
7
+ }
8
+
9
+ .upload-form input[type="file"] {
10
+ display: none;
11
+ }
12
+
13
+ .upload-area {
14
+ border: dashed 2px rgb(195, 195, 195);
15
+ display: flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ justify-content: center;
19
+ overflow: hidden;
20
+ padding: 1rem 2rem 2rem 2rem;
21
+ }
22
+
23
+ .upload-area-text {
24
+ font-size: 1.5rem;
25
+ color: gray;
26
+ margin: 1.5rem;
27
+ }
28
+
29
+ .upload-label {
30
+ background-color: rgb(137, 137, 249);
31
+ color: white;
32
+ border-radius: 5px;
33
+ padding: .5rem 2rem;
34
+ cursor: pointer;
35
+ }
36
+
37
+ .upload-file {
38
+ padding: 0.5rem;
39
+ }
40
+
41
+ .upload-file-info {
42
+ display: flex;
43
+ align-items: center;
44
+ padding: 0.5rem 0;
45
+ }
46
+
47
+ .upload-file-info>label {
48
+ flex: 1;
49
+ }
50
+
51
+ .upload-progress-bar {
52
+ background-color: rgb(232, 232, 232);
53
+ }
54
+
55
+ .upload-progress-bar-inner {
56
+ min-height: .5rem;
57
+ background-color: rgb(137, 137, 249);
58
+ }
@@ -0,0 +1,126 @@
1
+ import React, { useState, useEffect } from 'react'
2
+ import axios from 'axios'
3
+ import './upload.css'
4
+
5
+ /*
6
+ * Upload Form
7
+ */
8
+ export const UploadForm = (props) => {
9
+
10
+ const { label = "Browse", text = "Drag and drop here", url, headers = {}, children, onSuccess, onError } = props
11
+
12
+ const [file, setFile] = useState(null)
13
+ const [progress, setProgress] = useState(0)
14
+
15
+ useEffect(() => {
16
+ if (file) {
17
+ uploadFile(file)
18
+ }
19
+ }, [file])
20
+
21
+ function onDragOver(e) {
22
+ e.stopPropagation();
23
+ e.preventDefault();
24
+ }
25
+
26
+ function onDragEnter(e) {
27
+ e.preventDefault();
28
+ e.stopPropagation();
29
+ if (e.type === "dragenter" || e.type === "dragover") {
30
+ console.log("dragenter")
31
+ } else if (e.type === "dragleave") {
32
+ console.log("dragleave")
33
+ }
34
+ }
35
+
36
+ function onFileDrop(e) {
37
+ e.preventDefault();
38
+ e.stopPropagation();
39
+ if (e.dataTransfer.files && e.dataTransfer.files[0]) {
40
+ const { files } = e.dataTransfer
41
+ handleFiles(files);
42
+ }
43
+ }
44
+
45
+ function handleFiles(files) {
46
+ const file = files[0]
47
+ console.log("handleFiles", files, file)
48
+ setFile(file)
49
+ }
50
+
51
+ function handleFile(e) {
52
+ let file = e.target.files[0]
53
+ setFile(file)
54
+ }
55
+
56
+ function uploadFile(file) {
57
+ const formData = new FormData()
58
+ formData.append('file', file)
59
+ const config = {
60
+ onUploadProgress: progressEvent => {
61
+ setProgress(Math.round(progressEvent.loaded / progressEvent.total * 100))
62
+ },
63
+ headers: {
64
+ 'content-type': 'multipart/form-data',
65
+ ...headers
66
+ }
67
+ }
68
+ axios.post(url, formData, config)
69
+ .then(response => {
70
+ if (onSuccess) onSuccess(response)
71
+ }).catch(error => {
72
+ if (onError) onError(error)
73
+ })
74
+ }
75
+
76
+ return (
77
+ <div className='upload-form' onDragEnter={onDragEnter} onDragOver={onDragOver} onDrop={onFileDrop} >
78
+ <div className="upload-area" >
79
+ <div className='upload-area-text'>{text}</div>
80
+ <label htmlFor="upload"><span className="upload-label">{label}</span></label>
81
+ <input id="upload" type="file" onChange={handleFile} />
82
+ </div>
83
+ {file ? <UploadFile name={file.name} progress={progress} /> : null}
84
+ </div>
85
+ )
86
+ }
87
+
88
+ /**
89
+ * Upload File
90
+ */
91
+ const UploadFile = (props) => {
92
+
93
+ const { name, progress = 0 } = props
94
+
95
+ return (
96
+ <div className='upload-file'>
97
+ <div className='upload-file-info'>
98
+ <label>{name}</label>
99
+ <span>{progress} %</span>
100
+ </div>
101
+ <UploadProgressBar progress={progress} />
102
+ </div>
103
+ )
104
+ }
105
+
106
+ /**
107
+ * Upload Progress Bar
108
+ */
109
+ const UploadProgressBar = (props) => {
110
+
111
+ const { progress } = props
112
+
113
+ return (
114
+ <div className='upload-progress-bar'>
115
+ <div className='upload-progress-bar-inner' style={{ width: `${progress}%` }}></div>
116
+ </div>
117
+ )
118
+ }
119
+
120
+ const UploadTest = (props) => {
121
+ return (
122
+ <div>
123
+ <UploadForm url={"http://localhost:3000/upload"} />
124
+ </div>
125
+ )
126
+ }
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useMemo, useState, useRef } from "react";
1
+ import React, { useEffect, useMemo, useState, useRef, useCallback } from "react";
2
2
  import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
3
3
  import moment from "moment";
4
4
  import { extendMoment } from "moment-range";
@@ -20,11 +20,18 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
20
20
  const [dateRange, setDateRange] = useState(config.range);
21
21
  const [from, setFrom] = useState(config.from);
22
22
  const [to, setTo] = useState(config.to);
23
- const thisMondayElement = useRef(null)
24
23
 
25
- useEffect(() => {
26
- if (thisMondayElement.current) { showThisWeek() }
27
- }, [thisMondayElement])
24
+ const thisMondayElement = useRef(null)
25
+
26
+ const gotoMonday = useCallback(node => {
27
+ const element = node
28
+ console.log("goto monday", element)
29
+ if (element) element.scrollIntoView({
30
+ behavior: 'smooth',
31
+ block: 'start',
32
+ inline: 'start',
33
+ })
34
+ }, [])
28
35
 
29
36
  useEffect(() => {
30
37
  const element = document.getElementById(focusEvent)
@@ -68,6 +75,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
68
75
  function showThisWeek() {
69
76
  const element = thisMondayElement.current
70
77
  //const element = document.querySelector(".thisMonday")
78
+ console.log("Show this week", element)
71
79
  if (element) element.scrollIntoView({
72
80
  behavior: 'smooth',
73
81
  block: 'start',
@@ -135,16 +143,15 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
135
143
  const today = moment()
136
144
  var weekStart = today.clone().startOf('week')
137
145
  const isThisMonday = (date.moment.isSame(weekStart))
138
-
139
146
  return (
140
- <div key={`column-${date.moment.dayOfYear()}`} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
141
- <div className={`date-header ${weekend} ${thisWeek}`}>
147
+ <div key={`column-${date.moment.dayOfYear()}`} id={isThisMonday ? "thisMonday" : ""} className="column-header" ref={isThisMonday ? thisMondayElement : null}>
148
+ <div className={`date-header ${weekend} ${thisWeek}`} ref={isThisMonday ? gotoMonday : null}>
142
149
  <Text use="headline6">{date.moment.format("DD")}</Text>
143
150
  &nbsp;
144
151
  <Text use="caption">{date.moment.format("ddd")}</Text>
145
152
  </div>
146
153
  </div>
147
- );
154
+ )
148
155
  })}
149
156
  </div>
150
157