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/dist/index.cjs +158 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +58 -0
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +157 -10
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +161 -13
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -1
- package/src/incubator/index.js +1 -0
- package/src/incubator/upload.css +58 -0
- package/src/incubator/upload.js +126 -0
- package/src/widgets/planner/Planner.js +16 -9
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "ywana-core8",
|
3
|
-
"version": "0.0.
|
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",
|
package/src/incubator/index.js
CHANGED
@@ -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
|
-
|
26
|
-
|
27
|
-
|
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
|
|
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
|
|