@visns-studio/visns-components 2.5.17 → 2.6.0
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/components/cms/DropZone.jsx +79 -51
- package/components/cms/Field.jsx +33 -6
- package/components/cms/Form.jsx +4 -2
- package/package.json +4 -4
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import React, { useState, useCallback } from
|
|
2
|
-
import { motion } from
|
|
3
|
-
import { useDropzone } from
|
|
4
|
-
import { confirmAlert } from
|
|
5
|
-
import { File, TrashCan } from
|
|
6
|
-
import { toast } from
|
|
1
|
+
import React, { useState, useCallback } from 'react';
|
|
2
|
+
import { calcLength, motion } from 'framer-motion';
|
|
3
|
+
import { useDropzone } from 'react-dropzone';
|
|
4
|
+
import { confirmAlert } from 'react-confirm-alert';
|
|
5
|
+
import { File, TrashCan } from 'akar-icons';
|
|
6
|
+
import { toast } from 'react-toastify';
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
9
9
|
|
|
10
|
-
import CustomFetch from
|
|
10
|
+
import CustomFetch from '../crm/Fetch';
|
|
11
11
|
|
|
12
|
-
function VisnsDropZone(
|
|
13
|
-
const { fetchData, files, settings } = props;
|
|
12
|
+
function VisnsDropZone({ fetchData, files, settings }) {
|
|
14
13
|
const [loadingProgress, setLoadingProgress] = useState(0);
|
|
15
14
|
|
|
16
15
|
const onDrop = useCallback((acceptedFiles) => {
|
|
@@ -34,12 +33,14 @@ function VisnsDropZone(props) {
|
|
|
34
33
|
...settings.data,
|
|
35
34
|
},
|
|
36
35
|
function (result) {
|
|
37
|
-
if (result.error ===
|
|
38
|
-
fetchData
|
|
36
|
+
if (result.error === '') {
|
|
37
|
+
if (fetchData) {
|
|
38
|
+
fetchData();
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
toast.success(
|
|
41
|
+
'File has been successfully uploaded.'
|
|
42
|
+
);
|
|
43
|
+
}
|
|
43
44
|
} else {
|
|
44
45
|
toast.error(String(result.error));
|
|
45
46
|
}
|
|
@@ -54,10 +55,10 @@ function VisnsDropZone(props) {
|
|
|
54
55
|
});
|
|
55
56
|
|
|
56
57
|
const handleDownload = (id) => {
|
|
57
|
-
if (id && id > 0) {
|
|
58
|
+
if (id && id > 0 && settings.model && settings.model !== '') {
|
|
58
59
|
window.open(`/ajax/file/download/${id}/${settings.model}`);
|
|
59
60
|
} else {
|
|
60
|
-
toast.warning(
|
|
61
|
+
toast.warning('Issue with downloading the selected file.');
|
|
61
62
|
}
|
|
62
63
|
};
|
|
63
64
|
|
|
@@ -68,46 +69,71 @@ function VisnsDropZone(props) {
|
|
|
68
69
|
|
|
69
70
|
if (id && id > 0) {
|
|
70
71
|
confirmAlert({
|
|
71
|
-
title:
|
|
72
|
-
message:
|
|
72
|
+
title: 'Confirm to Delete File',
|
|
73
|
+
message: 'Are you sure you want to delete ' + name,
|
|
73
74
|
buttons: [
|
|
74
75
|
{
|
|
75
|
-
label:
|
|
76
|
+
label: 'Yes',
|
|
76
77
|
onClick: () => {
|
|
77
78
|
CustomFetch(
|
|
78
79
|
`/ajax/file/delete`,
|
|
79
|
-
|
|
80
|
+
'POST',
|
|
80
81
|
{
|
|
81
82
|
file_id: id,
|
|
82
83
|
},
|
|
83
84
|
function (result) {
|
|
84
|
-
if (result.error ===
|
|
85
|
-
fetchData
|
|
85
|
+
if (result.error === '') {
|
|
86
|
+
if (fetchData) {
|
|
87
|
+
fetchData();
|
|
88
|
+
}
|
|
86
89
|
}
|
|
87
90
|
}
|
|
88
91
|
);
|
|
89
92
|
},
|
|
90
93
|
},
|
|
91
94
|
{
|
|
92
|
-
label:
|
|
95
|
+
label: 'No',
|
|
93
96
|
onClick: () => close(),
|
|
94
97
|
},
|
|
95
98
|
],
|
|
96
99
|
});
|
|
97
100
|
} else {
|
|
98
|
-
toast.error(
|
|
101
|
+
toast.error('Issue with deleting the selected file.');
|
|
99
102
|
}
|
|
100
103
|
}
|
|
101
104
|
};
|
|
102
105
|
|
|
103
106
|
return (
|
|
104
107
|
<>
|
|
108
|
+
{settings.type === 'gallery' ? (
|
|
109
|
+
<div class="image-container">
|
|
110
|
+
{files && files.length > 0
|
|
111
|
+
? files.map((a) => (
|
|
112
|
+
<div class="image-with-close">
|
|
113
|
+
<img src={a.file_url} />
|
|
114
|
+
<span
|
|
115
|
+
class="close-icon"
|
|
116
|
+
onClick={(event) => {
|
|
117
|
+
handleDelete(
|
|
118
|
+
event,
|
|
119
|
+
a.id,
|
|
120
|
+
a.file_name
|
|
121
|
+
);
|
|
122
|
+
}}
|
|
123
|
+
>
|
|
124
|
+
×
|
|
125
|
+
</span>
|
|
126
|
+
</div>
|
|
127
|
+
))
|
|
128
|
+
: null}
|
|
129
|
+
</div>
|
|
130
|
+
) : null}
|
|
105
131
|
<div className="progress">
|
|
106
132
|
<motion.div
|
|
107
133
|
className="progress__bar"
|
|
108
|
-
initial={{ width:
|
|
134
|
+
initial={{ width: '0%' }}
|
|
109
135
|
animate={{
|
|
110
|
-
width: loadingProgress +
|
|
136
|
+
width: loadingProgress + '%',
|
|
111
137
|
}}
|
|
112
138
|
transition={{
|
|
113
139
|
duration: 1,
|
|
@@ -127,32 +153,34 @@ function VisnsDropZone(props) {
|
|
|
127
153
|
</p>
|
|
128
154
|
)}
|
|
129
155
|
</div>
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
key={"tf-" + b}
|
|
138
|
-
>
|
|
139
|
-
<File strokeWidth={2} size={18} />
|
|
140
|
-
{a.file_name}
|
|
141
|
-
<button
|
|
142
|
-
onClick={(event) => {
|
|
143
|
-
handleDelete(
|
|
144
|
-
event,
|
|
145
|
-
a.id,
|
|
146
|
-
a.file_name
|
|
147
|
-
);
|
|
156
|
+
{settings.type !== 'gallery' ? (
|
|
157
|
+
<ul className="dropzone__files">
|
|
158
|
+
{files && files.length > 0
|
|
159
|
+
? files.map((a, b) => (
|
|
160
|
+
<li
|
|
161
|
+
onClick={() => {
|
|
162
|
+
handleDownload(a.id);
|
|
148
163
|
}}
|
|
164
|
+
key={'tf-' + b}
|
|
149
165
|
>
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
166
|
+
<File strokeWidth={2} size={18} />
|
|
167
|
+
{a.file_name}
|
|
168
|
+
<button
|
|
169
|
+
onClick={(event) => {
|
|
170
|
+
handleDelete(
|
|
171
|
+
event,
|
|
172
|
+
a.id,
|
|
173
|
+
a.file_name
|
|
174
|
+
);
|
|
175
|
+
}}
|
|
176
|
+
>
|
|
177
|
+
<TrashCan strokeWidth={2} size={18} />
|
|
178
|
+
</button>
|
|
179
|
+
</li>
|
|
180
|
+
))
|
|
181
|
+
: null}
|
|
182
|
+
</ul>
|
|
183
|
+
) : null}
|
|
156
184
|
</section>
|
|
157
185
|
</>
|
|
158
186
|
);
|
package/components/cms/Field.jsx
CHANGED
|
@@ -17,6 +17,7 @@ import CustomFetch from '../crm/Fetch';
|
|
|
17
17
|
import Select from '../crm/Select';
|
|
18
18
|
import MultiSelect from '../crm/MultiSelect';
|
|
19
19
|
import VisnsAutocomplete from '../crm/Autocomplete';
|
|
20
|
+
import VisnsDropZone from './DropZone';
|
|
20
21
|
import moment from 'moment';
|
|
21
22
|
|
|
22
23
|
Quill.register('modules/imageUploader', ImageUploader);
|
|
@@ -60,7 +61,8 @@ const modules = {
|
|
|
60
61
|
};
|
|
61
62
|
|
|
62
63
|
const Field = ({
|
|
63
|
-
|
|
64
|
+
baseData,
|
|
65
|
+
fetchData,
|
|
64
66
|
inputValue,
|
|
65
67
|
inputClass,
|
|
66
68
|
onChange,
|
|
@@ -70,6 +72,7 @@ const Field = ({
|
|
|
70
72
|
onChangeSelect,
|
|
71
73
|
onChangeToggle,
|
|
72
74
|
setFormData,
|
|
75
|
+
settings,
|
|
73
76
|
uploadProgress,
|
|
74
77
|
}) => {
|
|
75
78
|
const inputFile = useRef(null);
|
|
@@ -238,9 +241,9 @@ const Field = ({
|
|
|
238
241
|
<div className={formItemClass} style={formItemStyle}>
|
|
239
242
|
<label
|
|
240
243
|
className={
|
|
241
|
-
settings.type === 'image'
|
|
242
|
-
|
|
243
|
-
|
|
244
|
+
settings.type === 'image' ||
|
|
245
|
+
settings.type === 'richeditor' ||
|
|
246
|
+
settings.type === 'gallery'
|
|
244
247
|
? 'fi__flabel'
|
|
245
248
|
: 'fi__label'
|
|
246
249
|
}
|
|
@@ -266,7 +269,8 @@ const Field = ({
|
|
|
266
269
|
{(() => {
|
|
267
270
|
if (
|
|
268
271
|
settings.type === 'image' ||
|
|
269
|
-
settings.type === 'richeditor'
|
|
272
|
+
settings.type === 'richeditor' ||
|
|
273
|
+
settings.type === 'gallery'
|
|
270
274
|
) {
|
|
271
275
|
return (
|
|
272
276
|
<>
|
|
@@ -542,7 +546,8 @@ const Field = ({
|
|
|
542
546
|
settings.type !== 'multi-dropdown-ajax' &&
|
|
543
547
|
settings.type !== 'toggle' &&
|
|
544
548
|
settings.type !== 'richeditor' &&
|
|
545
|
-
settings.type !== 'image'
|
|
549
|
+
settings.type !== 'image' &&
|
|
550
|
+
settings.type !== 'gallery'
|
|
546
551
|
) {
|
|
547
552
|
return (
|
|
548
553
|
<span className="fi__span">
|
|
@@ -739,6 +744,28 @@ const Field = ({
|
|
|
739
744
|
</>
|
|
740
745
|
);
|
|
741
746
|
break;
|
|
747
|
+
case 'gallery':
|
|
748
|
+
if (
|
|
749
|
+
baseData[settings.key] &&
|
|
750
|
+
baseData[settings.key] > 0
|
|
751
|
+
) {
|
|
752
|
+
const dropzoneUrl = `${settings.url}/${
|
|
753
|
+
baseData[settings.key]
|
|
754
|
+
}`;
|
|
755
|
+
|
|
756
|
+
htmlContainer = (
|
|
757
|
+
<VisnsDropZone
|
|
758
|
+
fetchData={fetchData}
|
|
759
|
+
files={baseData[settings.id]}
|
|
760
|
+
settings={{
|
|
761
|
+
url: dropzoneUrl,
|
|
762
|
+
method: settings.method,
|
|
763
|
+
type: 'gallery',
|
|
764
|
+
}}
|
|
765
|
+
/>
|
|
766
|
+
);
|
|
767
|
+
}
|
|
768
|
+
break;
|
|
742
769
|
default:
|
|
743
770
|
htmlContainer = '';
|
|
744
771
|
break;
|
package/components/cms/Form.jsx
CHANGED
|
@@ -392,7 +392,6 @@ function Form(props) {
|
|
|
392
392
|
<div className="dynamicform">
|
|
393
393
|
{form.fields.map((a, b) => (
|
|
394
394
|
<Field
|
|
395
|
-
settings={a}
|
|
396
395
|
key={
|
|
397
396
|
b +
|
|
398
397
|
'-fields-' +
|
|
@@ -400,6 +399,9 @@ function Form(props) {
|
|
|
400
399
|
? a.id + '-' + a.key
|
|
401
400
|
: a.id)
|
|
402
401
|
}
|
|
402
|
+
baseData={data}
|
|
403
|
+
fetchData={fetchData}
|
|
404
|
+
inputClass={dataClass}
|
|
403
405
|
inputValue={
|
|
404
406
|
a.hasOwnProperty('key')
|
|
405
407
|
? data[a.key]
|
|
@@ -410,7 +412,6 @@ function Form(props) {
|
|
|
410
412
|
: ''
|
|
411
413
|
: data[a.id]
|
|
412
414
|
}
|
|
413
|
-
inputClass={dataClass}
|
|
414
415
|
onChange={handleChange}
|
|
415
416
|
onChangeDate={handleChangeDate}
|
|
416
417
|
onChangeFile={handleChangeFile}
|
|
@@ -418,6 +419,7 @@ function Form(props) {
|
|
|
418
419
|
onChangeSelect={handleChangeSelect}
|
|
419
420
|
onChangeToggle={handleChangeToggle}
|
|
420
421
|
setFormData={setData}
|
|
422
|
+
settings={a}
|
|
421
423
|
uploadProgress={uploadProgress}
|
|
422
424
|
/>
|
|
423
425
|
))}
|
package/package.json
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
"dependencies": {
|
|
3
3
|
"@inovua/reactdatagrid-community": "^5.10.2",
|
|
4
4
|
"add": "^2.0.6",
|
|
5
|
-
"akar-icons": "^1.9.
|
|
5
|
+
"akar-icons": "^1.9.29",
|
|
6
6
|
"array-move": "^4.0.0",
|
|
7
7
|
"awesome-debounce-promise": "^2.1.0",
|
|
8
8
|
"axios": "^1.5.0",
|
|
9
|
-
"framer-motion": "^10.16.
|
|
10
|
-
"html-react-parser": "^4.2.
|
|
9
|
+
"framer-motion": "^10.16.2",
|
|
10
|
+
"html-react-parser": "^4.2.2",
|
|
11
11
|
"lodash": "^4.17.21",
|
|
12
12
|
"moment": "^2.29.4",
|
|
13
13
|
"motion": "^10.16.2",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react-dom": "^17.0.1"
|
|
43
43
|
},
|
|
44
44
|
"name": "@visns-studio/visns-components",
|
|
45
|
-
"version": "2.
|
|
45
|
+
"version": "2.6.0",
|
|
46
46
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
47
47
|
"main": "index.js",
|
|
48
48
|
"scripts": {
|