@visns-studio/visns-components 2.6.5 → 2.6.6

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.
Files changed (3) hide show
  1. package/components/cms/DropZone.jsx +80 -48
  2. package/components/cms/sorting/Item.jsx +11 -1
  3. package/package.json +6 -6
package/components/cms/DropZone.jsx CHANGED
@@ -1,17 +1,25 @@
1
- import React, { useState, useCallback } from 'react';
2
- import { calcLength, motion } from 'framer-motion';
1
+ import React, { useEffect, useState, useCallback } from 'react';
2
+ import { motion } from 'framer-motion';
3
3
  import { useDropzone } from 'react-dropzone';
4
4
  import { confirmAlert } from 'react-confirm-alert';
5
5
  import { File, TrashCan } from 'akar-icons';
6
6
  import { toast } from 'react-toastify';
7
+ import { arrayMoveImmutable } from 'array-move';
7
8
 
8
9
  import 'react-confirm-alert/src/react-confirm-alert.css';
9
10
 
10
11
  import CustomFetch from '../crm/Fetch';
12
+ import SortableList from './sorting/List';
11
13
 
12
14
  function VisnsDropZone({ fetchData, files, settings }) {
15
+ const [data, setData] = useState(files);
16
+
13
17
  const [loadingProgress, setLoadingProgress] = useState(0);
14
18
 
19
+ const onSortEnd = ({ oldIndex, newIndex }) => {
20
+ setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
21
+ };
22
+
15
23
  const onDrop = useCallback((acceptedFiles) => {
16
24
  acceptedFiles.forEach((a) => {
17
25
  Vapor.store(a, {
@@ -62,52 +70,66 @@ function VisnsDropZone({ fetchData, files, settings }) {
62
70
  }
63
71
  };
64
72
 
65
- const handleDelete = (e, id, name) => {
66
- if (e) {
67
- e.preventDefault();
68
- e.stopPropagation();
69
-
70
- if (id && id > 0) {
71
- confirmAlert({
72
- title: 'Confirm to Delete File',
73
- message: 'Are you sure you want to delete ' + name,
74
- buttons: [
75
- {
76
- label: 'Yes',
77
- onClick: () => {
78
- CustomFetch(
79
- `/ajax/file/delete`,
80
- 'POST',
81
- {
82
- file_id: id,
83
- },
84
- function (result) {
85
- if (result.error === '') {
86
- if (fetchData) {
87
- fetchData();
88
- }
73
+ const handleDelete = (id, name) => {
74
+ console.info(id, name);
75
+ if (id && id > 0) {
76
+ confirmAlert({
77
+ title: 'Confirm to Delete File',
78
+ message: 'Are you sure you want to delete ' + name,
79
+ buttons: [
80
+ {
81
+ label: 'Yes',
82
+ onClick: () => {
83
+ CustomFetch(
84
+ `/ajax/file/delete`,
85
+ 'POST',
86
+ {
87
+ file_id: id,
88
+ },
89
+ function (result) {
90
+ if (result.error === '') {
91
+ if (fetchData) {
92
+ fetchData();
89
93
  }
90
94
  }
91
- );
92
- },
93
- },
94
- {
95
- label: 'No',
96
- onClick: () => close(),
95
+ }
96
+ );
97
97
  },
98
- ],
99
- });
100
- } else {
101
- toast.error('Issue with deleting the selected file.');
102
- }
98
+ },
99
+ {
100
+ label: 'No',
101
+ onClick: () => close(),
102
+ },
103
+ ],
104
+ });
105
+ } else {
106
+ toast.error('Issue with deleting the selected file.');
103
107
  }
104
108
  };
105
109
 
110
+ useEffect(() => {
111
+ if (data.length > 0) {
112
+ CustomFetch(
113
+ '/ajax/file/sort_update',
114
+ 'POST',
115
+ {
116
+ list: data,
117
+ },
118
+ function (result) {
119
+ if (result.error === '') {
120
+ } else {
121
+ toast.error(String(result.error));
122
+ }
123
+ }
124
+ );
125
+ }
126
+ }, [data]);
127
+
106
128
  return (
107
129
  <>
108
130
  {settings.type === 'gallery' ? (
109
- <div class="image-container">
110
- {files && files.length > 0
131
+ <div className="image-container">
132
+ {/* {files && files.length > 0
111
133
  ? files.map((a) => (
112
134
  <div class="image-with-close">
113
135
  <img src={a.file_url} />
@@ -125,7 +147,18 @@ function VisnsDropZone({ fetchData, files, settings }) {
125
147
  </span>
126
148
  </div>
127
149
  ))
128
- : null}
150
+ : null} */}
151
+ {data && data.length > 0 ? (
152
+ <SortableList
153
+ items={data}
154
+ onSortEnd={onSortEnd}
155
+ axis="xy"
156
+ helperClass="dragitem"
157
+ transitionDuration={250}
158
+ handleDelete={handleDelete}
159
+ pressDelay={200}
160
+ />
161
+ ) : null}
129
162
  </div>
130
163
  ) : null}
131
164
  <div className="progress">
@@ -155,8 +188,8 @@ function VisnsDropZone({ fetchData, files, settings }) {
155
188
  </div>
156
189
  {settings.type !== 'gallery' ? (
157
190
  <ul className="dropzone__files">
158
- {files && files.length > 0
159
- ? files.map((a, b) => (
191
+ {data && data.length > 0
192
+ ? data.map((a, b) => (
160
193
  <li
161
194
  onClick={() => {
162
195
  handleDownload(a.id);
@@ -166,12 +199,11 @@ function VisnsDropZone({ fetchData, files, settings }) {
166
199
  <File strokeWidth={2} size={18} />
167
200
  {a.file_name}
168
201
  <button
169
- onClick={(event) => {
170
- handleDelete(
171
- event,
172
- a.id,
173
- a.file_name
174
- );
202
+ onClick={(e) => {
203
+ e.preventDefault();
204
+ e.stopPropagation();
205
+
206
+ handleDelete(a.id, a.file_name);
175
207
  }}
176
208
  >
177
209
  <TrashCan strokeWidth={2} size={18} />
package/components/cms/sorting/Item.jsx CHANGED
@@ -15,11 +15,18 @@ const SortableItem = ({ containerIndex, handleClick, handleDelete, value }) => {
15
15
  >
16
16
  <ChevronVertical strokeWidth={1} size={26} />
17
17
  {value.label}
18
+
18
19
  {value.hasOwnProperty('image_url') && value.image_url !== '' ? (
19
20
  <div className="sortimg">
20
21
  <img src={value.image_url} />
21
22
  </div>
22
23
  ) : null}
24
+
25
+ {value.hasOwnProperty('file_url') && value.file_url !== '' ? (
26
+ <div className="sortimg">
27
+ <img src={value.file_url} />
28
+ </div>
29
+ ) : null}
23
30
  {handleDelete && (
24
31
  <TrashCan
25
32
  className="delete"
@@ -29,7 +36,10 @@ const SortableItem = ({ containerIndex, handleClick, handleDelete, value }) => {
29
36
  e.preventDefault();
30
37
  e.stopPropagation();
31
38
 
32
- handleDelete(containerIndex, value.label);
39
+ handleDelete(
40
+ value.id ? value.id : containerIndex,
41
+ value.label ? value.label : value.file_name
42
+ );
33
43
  }}
34
44
  />
35
45
  )}
package/package.json CHANGED
@@ -5,30 +5,30 @@
5
5
  "akar-icons": "^1.9.29",
6
6
  "array-move": "^4.0.0",
7
7
  "awesome-debounce-promise": "^2.1.0",
8
- "axios": "^1.5.0",
8
+ "axios": "^1.5.1",
9
9
  "framer-motion": "^10.16.4",
10
10
  "html-react-parser": "^4.2.2",
11
11
  "lodash": "^4.17.21",
12
12
  "moment": "^2.29.4",
13
- "motion": "^10.16.2",
13
+ "motion": "^10.16.4",
14
14
  "numeral": "^2.0.6",
15
15
  "quill-image-uploader": "^1.3.0",
16
16
  "react-color": "^2.19.3",
17
17
  "react-confirm-alert": "^3.0.6",
18
18
  "react-copy-to-clipboard": "^5.1.0",
19
- "react-datepicker": "^4.16.0",
19
+ "react-datepicker": "^4.19.0",
20
20
  "react-dropzone": "^14.2.3",
21
21
  "react-number-format": "^5.3.1",
22
22
  "react-password-strength-bar": "^0.4.1",
23
23
  "react-promise-tracker": "^2.1.1",
24
24
  "react-quill": "^2.0.0",
25
25
  "react-reveal": "^1.2.2",
26
- "react-select": "^5.7.4",
26
+ "react-select": "^5.7.7",
27
27
  "react-slugify": "^3.0.2",
28
28
  "react-sortable-hoc": "^2.0.0",
29
29
  "react-toastify": "^9.1.3",
30
30
  "react-toggle": "^4.1.3",
31
- "react-tooltip": "^5.21.3",
31
+ "react-tooltip": "^5.21.5",
32
32
  "react-window": "^1.8.9",
33
33
  "reactjs-popup": "^2.0.6",
34
34
  "truncate": "^3.0.0",
@@ -44,7 +44,7 @@
44
44
  "react-dom": "^17.0.1"
45
45
  },
46
46
  "name": "@visns-studio/visns-components",
47
- "version": "2.6.5",
47
+ "version": "2.6.6",
48
48
  "description": "Various packages to assist in the development of our Custom Applications.",
49
49
  "main": "index.js",
50
50
  "scripts": {