@chayns-components/core 5.0.0-beta.1058 → 5.0.0-beta.1059
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/lib/cjs/components/file-input/FileInput.js +60 -134
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/cjs/components/file-list/FileList.js +35 -0
- package/lib/cjs/components/file-list/FileList.js.map +1 -0
- package/lib/cjs/components/{file-input/file-list/FileListItem.styles.js → file-list/FileList.styles.js} +3 -3
- package/lib/cjs/components/file-list/FileList.styles.js.map +1 -0
- package/lib/cjs/components/{file-input/file-list/FileListItem.js → file-list/file-item/FileItem.js} +18 -18
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -0
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js +10 -0
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -0
- package/lib/cjs/components/file-select/FileSelect.js +97 -0
- package/lib/cjs/components/file-select/FileSelect.js.map +1 -0
- package/lib/cjs/components/file-select/FileSelect.styles.js +53 -0
- package/lib/cjs/components/file-select/FileSelect.styles.js.map +1 -0
- package/lib/cjs/components/tag-input/TagInput.js +7 -2
- package/lib/cjs/components/tag-input/TagInput.js.map +1 -1
- package/lib/cjs/components/tag-input/TagInput.styles.js +3 -2
- package/lib/cjs/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/cjs/index.js +14 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +55 -126
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/esm/components/file-list/FileList.js +30 -0
- package/lib/esm/components/file-list/FileList.js.map +1 -0
- package/lib/esm/components/file-list/FileList.styles.js +3 -0
- package/lib/esm/components/file-list/FileList.styles.js.map +1 -0
- package/lib/esm/components/file-list/file-item/FileItem.js +28 -0
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -0
- package/lib/esm/components/file-list/file-item/FileItem.styles.js +3 -0
- package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -0
- package/lib/esm/components/file-select/FileSelect.js +89 -0
- package/lib/esm/components/file-select/FileSelect.js.map +1 -0
- package/lib/esm/components/file-select/FileSelect.styles.js +63 -0
- package/lib/esm/components/file-select/FileSelect.styles.js.map +1 -0
- package/lib/esm/components/tag-input/TagInput.js +8 -3
- package/lib/esm/components/tag-input/TagInput.js.map +1 -1
- package/lib/esm/components/tag-input/TagInput.styles.js +3 -2
- package/lib/esm/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/esm/index.js +2 -0
- package/lib/esm/index.js.map +1 -1
- package/lib/types/components/file-input/FileInput.d.ts +3 -3
- package/lib/types/components/file-input/FileInput.styles.d.ts +1 -1
- package/lib/types/components/file-list/FileList.d.ts +19 -0
- package/lib/types/components/file-list/FileList.styles.d.ts +1 -0
- package/lib/types/components/file-list/file-item/FileItem.d.ts +10 -0
- package/lib/types/components/file-list/file-item/FileItem.styles.d.ts +1 -0
- package/lib/types/components/file-select/FileSelect.d.ts +13 -0
- package/lib/types/components/file-select/FileSelect.styles.d.ts +23 -0
- package/lib/types/components/tag-input/TagInput.styles.d.ts +6 -3
- package/lib/types/index.d.ts +2 -0
- package/package.json +2 -2
- package/lib/cjs/components/file-input/file-list/FileListItem.js.map +0 -1
- package/lib/cjs/components/file-input/file-list/FileListItem.styles.js.map +0 -1
- package/lib/esm/components/file-input/file-list/FileListItem.js +0 -28
- package/lib/esm/components/file-input/file-list/FileListItem.js.map +0 -1
- package/lib/esm/components/file-input/file-list/FileListItem.styles.js +0 -3
- package/lib/esm/components/file-input/file-list/FileListItem.styles.js.map +0 -1
- package/lib/types/components/file-input/file-list/FileListItem.d.ts +0 -10
- package/lib/types/components/file-input/file-list/FileListItem.styles.d.ts +0 -1
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
var _react = require("motion/react");
|
|
9
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
8
|
var _file = require("../../utils/file");
|
|
11
|
-
var _fileDialog = require("../../utils/fileDialog");
|
|
12
|
-
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
13
|
-
var _List = _interopRequireDefault(require("../list/List"));
|
|
14
|
-
var _FileListItem = _interopRequireDefault(require("./file-list/FileListItem"));
|
|
15
9
|
var _FileInput = require("./FileInput.styles");
|
|
16
|
-
|
|
10
|
+
var _index = require("../../index");
|
|
17
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
-
const FileInput = /*#__PURE__*/(0,
|
|
13
|
+
const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
20
14
|
fileSelectionIcons = ['fa fa-upload'],
|
|
21
15
|
imageSelectIcons = ['ts-image'],
|
|
22
16
|
fileTypes,
|
|
@@ -30,16 +24,16 @@ const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
30
24
|
fileSelectionPlaceholder = 'Dateien hochladen',
|
|
31
25
|
imageSelectPlaceholder
|
|
32
26
|
}, ref) => {
|
|
33
|
-
const [internalFiles, setInternalFiles] = (0,
|
|
34
|
-
const [internalImages, setInternalImages] = (0,
|
|
27
|
+
const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
|
|
28
|
+
const [internalImages, setInternalImages] = (0, _react.useState)([]);
|
|
35
29
|
const handleInputClear = () => {
|
|
36
30
|
setInternalFiles([]);
|
|
37
31
|
setInternalImages([]);
|
|
38
32
|
};
|
|
39
|
-
(0,
|
|
33
|
+
(0, _react.useImperativeHandle)(ref, () => ({
|
|
40
34
|
clear: handleInputClear
|
|
41
35
|
}), []);
|
|
42
|
-
const handleAddImages = (0,
|
|
36
|
+
const handleAddImages = (0, _react.useCallback)(images => {
|
|
43
37
|
const newImages = [];
|
|
44
38
|
images.forEach(image => {
|
|
45
39
|
if (!(0, _file.filterDuplicateFileUrls)({
|
|
@@ -58,7 +52,7 @@ const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
58
52
|
}
|
|
59
53
|
setInternalImages(prevState => [...prevState, ...tmp]);
|
|
60
54
|
}, [files === null || files === void 0 ? void 0 : files.length, internalFiles.length, internalImages, maxFiles, onAdd]);
|
|
61
|
-
const handleAddFiles = (0,
|
|
55
|
+
const handleAddFiles = (0, _react.useCallback)(newFiles => {
|
|
62
56
|
const newFileItems = [];
|
|
63
57
|
newFiles.forEach(file => {
|
|
64
58
|
if (fileTypes && !(0, _file.isValidFileType)({
|
|
@@ -76,37 +70,46 @@ const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
76
70
|
});
|
|
77
71
|
let tmp = newFileItems;
|
|
78
72
|
if (maxFiles) {
|
|
79
|
-
tmp = newFileItems.slice(0, maxFiles - (internalFiles.length +
|
|
73
|
+
tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + ((files === null || files === void 0 ? void 0 : files.length) ?? 0)));
|
|
80
74
|
}
|
|
81
75
|
if (tmp.length > 0 && typeof onAdd === 'function') {
|
|
82
76
|
onAdd(tmp);
|
|
83
77
|
}
|
|
84
78
|
setInternalFiles(prevState => [...prevState, ...tmp]);
|
|
85
|
-
}, [fileTypes, files === null || files === void 0 ? void 0 : files.length, internalFiles,
|
|
86
|
-
const
|
|
79
|
+
}, [fileTypes, files === null || files === void 0 ? void 0 : files.length, internalFiles, maxFiles, onAdd]);
|
|
80
|
+
const handleAdd = (0, _react.useCallback)(newFiles => {
|
|
81
|
+
if (Array.isArray(newFiles) && newFiles.length > 0) {
|
|
82
|
+
if (typeof newFiles[0] === 'string') {
|
|
83
|
+
handleAddImages(newFiles);
|
|
84
|
+
} else {
|
|
85
|
+
handleAddFiles(newFiles);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}, [handleAddFiles, handleAddImages]);
|
|
89
|
+
const handleDeleteFile = (0, _react.useCallback)(id => {
|
|
87
90
|
let fileToDelete;
|
|
88
91
|
const filteredFiles = internalFiles.filter(file => {
|
|
89
92
|
const {
|
|
90
93
|
name
|
|
91
94
|
} = file;
|
|
92
|
-
if (name ===
|
|
95
|
+
if (name === id) {
|
|
93
96
|
fileToDelete = file;
|
|
94
97
|
}
|
|
95
|
-
return name !==
|
|
98
|
+
return name !== id;
|
|
96
99
|
});
|
|
97
100
|
setInternalFiles(filteredFiles);
|
|
98
101
|
if (!fileToDelete) {
|
|
99
102
|
const filteredImages = internalImages.filter(image => {
|
|
100
|
-
if (image ===
|
|
103
|
+
if (image === id) {
|
|
101
104
|
fileToDelete = image;
|
|
102
105
|
}
|
|
103
|
-
return image !==
|
|
106
|
+
return image !== id;
|
|
104
107
|
});
|
|
105
108
|
setInternalImages(filteredImages);
|
|
106
109
|
}
|
|
107
110
|
if (!fileToDelete) {
|
|
108
111
|
files === null || files === void 0 || files.forEach(file => {
|
|
109
|
-
if (file.
|
|
112
|
+
if (file.id === id || file.name === id) {
|
|
110
113
|
fileToDelete = file;
|
|
111
114
|
}
|
|
112
115
|
});
|
|
@@ -116,7 +119,7 @@ const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
116
119
|
}
|
|
117
120
|
onRemove(fileToDelete);
|
|
118
121
|
}, [files, internalFiles, internalImages, onRemove]);
|
|
119
|
-
const internalIsDisabled = (0,
|
|
122
|
+
const internalIsDisabled = (0, _react.useMemo)(() => {
|
|
120
123
|
if (isDisabled) {
|
|
121
124
|
return true;
|
|
122
125
|
}
|
|
@@ -130,120 +133,43 @@ const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
130
133
|
}
|
|
131
134
|
return false;
|
|
132
135
|
}, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
|
|
133
|
-
const
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}).open();
|
|
152
|
-
if (buttonType === 1 && result !== null && result !== void 0 && result.url) {
|
|
153
|
-
handleAddImages([result.url]);
|
|
154
|
-
}
|
|
155
|
-
}, [handleAddImages, internalIsDisabled]);
|
|
156
|
-
const handleFileSelectionClick = (0, _react2.useCallback)(async () => {
|
|
157
|
-
if (internalIsDisabled) {
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
const newFiles = await (0, _fileDialog.selectFiles)({
|
|
161
|
-
multiple: true,
|
|
162
|
-
type: fileTypes,
|
|
163
|
-
maxFileSizeInMB
|
|
136
|
+
const filesToDisplay = (0, _react.useMemo)(() => {
|
|
137
|
+
const items = internalFiles.map(({
|
|
138
|
+
type,
|
|
139
|
+
name,
|
|
140
|
+
size
|
|
141
|
+
}) => ({
|
|
142
|
+
id: name,
|
|
143
|
+
name,
|
|
144
|
+
size,
|
|
145
|
+
mimeType: type
|
|
146
|
+
}));
|
|
147
|
+
internalImages.forEach(image => {
|
|
148
|
+
items.push({
|
|
149
|
+
id: image,
|
|
150
|
+
name: image,
|
|
151
|
+
size: 0,
|
|
152
|
+
mimeType: 'image/png'
|
|
153
|
+
});
|
|
164
154
|
});
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
const handleDrop = (0, _react2.useCallback)(e => {
|
|
168
|
-
e.preventDefault();
|
|
169
|
-
const draggedFiles = Array.from(e.dataTransfer.files);
|
|
170
|
-
handleAddFiles(draggedFiles);
|
|
171
|
-
}, [handleAddFiles]);
|
|
172
|
-
const content = (0, _react2.useMemo)(() => {
|
|
173
|
-
const combinedFiles = [...internalImages, ...internalFiles];
|
|
174
|
-
const items = combinedFiles.map(file => /*#__PURE__*/_react2.default.createElement(_FileInput.StyledMotionFileInputList, {
|
|
175
|
-
animate: {
|
|
176
|
-
height: 'auto',
|
|
177
|
-
opacity: 1
|
|
178
|
-
},
|
|
179
|
-
exit: {
|
|
180
|
-
height: 0,
|
|
181
|
-
opacity: 0
|
|
182
|
-
},
|
|
183
|
-
key: typeof file === 'string' ? file : file.name,
|
|
184
|
-
transition: {
|
|
185
|
-
duration: 0.25,
|
|
186
|
-
type: 'tween'
|
|
187
|
-
}
|
|
188
|
-
}, /*#__PURE__*/_react2.default.createElement(_FileListItem.default, {
|
|
189
|
-
fileType: typeof file !== 'string' ? file.type : undefined,
|
|
190
|
-
fileName: typeof file !== 'string' ? file.name : undefined,
|
|
191
|
-
fileSize: typeof file !== 'string' ? file.size : undefined,
|
|
192
|
-
url: typeof file === 'string' ? file : undefined,
|
|
193
|
-
onRemove: handleDeleteFile
|
|
194
|
-
})));
|
|
195
|
-
return items;
|
|
196
|
-
}, [handleDeleteFile, internalFiles, internalImages]);
|
|
197
|
-
const uploadedFiles = (0, _react2.useMemo)(() => {
|
|
198
|
-
const items = [];
|
|
199
|
-
const cutFiles = maxFiles ? files === null || files === void 0 ? void 0 : files.splice(0, maxFiles) : files;
|
|
200
|
-
cutFiles === null || cutFiles === void 0 || cutFiles.forEach(({
|
|
201
|
-
url,
|
|
202
|
-
id,
|
|
203
|
-
name
|
|
204
|
-
}) => {
|
|
205
|
-
items.push(/*#__PURE__*/_react2.default.createElement(_FileInput.StyledMotionFileInputList, {
|
|
206
|
-
animate: {
|
|
207
|
-
height: 'auto',
|
|
208
|
-
opacity: 1
|
|
209
|
-
},
|
|
210
|
-
exit: {
|
|
211
|
-
height: 0,
|
|
212
|
-
opacity: 0
|
|
213
|
-
},
|
|
214
|
-
key: id,
|
|
215
|
-
transition: {
|
|
216
|
-
duration: 0.25,
|
|
217
|
-
type: 'tween'
|
|
218
|
-
}
|
|
219
|
-
}, /*#__PURE__*/_react2.default.createElement(_FileListItem.default, {
|
|
220
|
-
url: url,
|
|
221
|
-
onRemove: handleDeleteFile,
|
|
222
|
-
fileName: name
|
|
223
|
-
})));
|
|
155
|
+
files === null || files === void 0 || files.forEach(file => {
|
|
156
|
+
items.push(file);
|
|
224
157
|
});
|
|
225
158
|
return items;
|
|
226
|
-
}, [files,
|
|
227
|
-
return (0,
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
}), /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputText, null, imageSelectPlaceholder))), /*#__PURE__*/_react2.default.createElement(_List.default, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
241
|
-
initial: false
|
|
242
|
-
}, content)), uploadedFiles.length > 0 && /*#__PURE__*/_react2.default.createElement(_FileInput.StyledUploadedFilesList, {
|
|
243
|
-
$shouldShowBorder: content.length > 0
|
|
244
|
-
}, /*#__PURE__*/_react2.default.createElement(_List.default, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
245
|
-
initial: false
|
|
246
|
-
}, uploadedFiles)))), [internalIsDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, uploadedFiles, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
|
|
159
|
+
}, [files, internalFiles, internalImages]);
|
|
160
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react.default.createElement(_index.FileSelect, {
|
|
161
|
+
fileTypes: fileTypes,
|
|
162
|
+
fileSelectionIcons: fileSelectionIcons,
|
|
163
|
+
fileSelectionPlaceholder: fileSelectionPlaceholder,
|
|
164
|
+
imageSelectIcons: imageSelectIcons,
|
|
165
|
+
imageSelectPlaceholder: imageSelectPlaceholder,
|
|
166
|
+
maxFileSizeInMB: maxFileSizeInMB,
|
|
167
|
+
isDisabled: internalIsDisabled,
|
|
168
|
+
onAdd: handleAdd
|
|
169
|
+
}), /*#__PURE__*/_react.default.createElement(_index.FileList, {
|
|
170
|
+
files: filesToDisplay,
|
|
171
|
+
onRemove: handleDeleteFile
|
|
172
|
+
})), [fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile]);
|
|
247
173
|
});
|
|
248
174
|
FileInput.displayName = 'FileInput';
|
|
249
175
|
var _default = exports.default = FileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","internalIsDisabled","useMemo","handleImageSelectionClick","buttonType","result","createDialog","dialogInput","upload","type","DialogType","MODULE","system","scope","module","buttons","open","handleFileSelectionClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","id","StyledFileInput","StyledFileInputWrapper","$isDisabled","StyledFileInputContainer","onClick","onDragOver","onDrop","icons","StyledFileInputText","$isImageSelection","AnimatePresence","initial","StyledUploadedFilesList","$shouldShowBorder","displayName","_default","exports"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n DragEvent,\n forwardRef,\n ReactElement,\n useCallback,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledFileInputWrapper,\n StyledMotionFileInputList,\n StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: FileInputFileItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n upload: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | FileInputFileItem | string | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === fileName) {\n fileToDelete = image;\n }\n\n return image !== fileName;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.url === fileName || file.name === fileName) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const handleImageSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) {\n handleAddImages([result.url]);\n }\n }, [handleAddImages, internalIsDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const newFiles = await selectFiles({\n multiple: true,\n type: fileTypes,\n maxFileSizeInMB,\n });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const combinedFiles = [...internalImages, ...internalFiles];\n\n const items: ReactElement[] = combinedFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={typeof file === 'string' ? file : file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={typeof file !== 'string' ? file.type : undefined}\n fileName={typeof file !== 'string' ? file.name : undefined}\n fileSize={typeof file !== 'string' ? file.size : undefined}\n url={typeof file === 'string' ? file : undefined}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles, internalImages]);\n\n const uploadedFiles = useMemo(() => {\n const items: ReactElement[] = [];\n\n const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n cutFiles?.forEach(({ url, id, name }) => {\n items.push(\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={id}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n </StyledMotionFileInputList>,\n );\n });\n\n return items;\n }, [files, handleDeleteFile, maxFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputWrapper $isDisabled={internalIsDisabled}>\n <StyledFileInputContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n {imageSelectPlaceholder && (\n <StyledFileInputContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n )}\n </StyledFileInputWrapper>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n {uploadedFiles.length > 0 && (\n <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n <List>\n <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n </List>\n </StyledUploadedFilesList>\n )}\n </StyledFileInput>\n ),\n [\n internalIsDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n content,\n uploadedFiles,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["_react","_interopRequireWildcard","require","_file","_FileInput","_index","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","useMemo","filesToDisplay","items","map","type","size","mimeType","createElement","StyledFileInput","FileSelect","FileList","displayName","_default","exports"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport { FileList, FileListItem, FileSelect } from '../../index';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: FileListItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | FileListItem | string) => void;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] | string[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (typeof newFiles[0] === 'string') {\n handleAddImages(newFiles as string[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File | FileListItem | string | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === id) {\n fileToDelete = image;\n }\n\n return image !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id || file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: FileListItem[] = useMemo(() => {\n const items: FileListItem[] = internalFiles.map(({ type, name, size }) => ({\n id: name,\n name,\n size,\n mimeType: type,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image,\n name: image,\n size: 0,\n mimeType: 'image/png',\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList files={filesToDisplay} onRemove={handleDeleteFile} />\n </StyledFileInput>\n ),\n [\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledFileInput","exports","styled","div","StyledFileInputWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileInputContainer","text","$isImageSelection","StyledFileInputText","p","StyledMotionFileInputList","motion"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n $isDisabled
|
|
1
|
+
{"version":3,"file":"FileInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledFileInput","exports","styled","div","StyledFileInputWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","css","headline","StyledFileInputContainer","text","$isImageSelection","StyledFileInputText","p","StyledMotionFileInputList","motion"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n display: flex;\n\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = WithTheme<{\n $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n $shouldShowBorder &&\n css`\n border-top: 1px solid ${theme.headline};\n `}\n`;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 15px;\n justify-content: center;\n width: 100%;\n\n ${({ $isImageSelection }) =>\n $isImageSelection &&\n css`\n border-left: none;\n `}\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGzC,MAAMW,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMpC,MAAMC,sBAAsB,GAAAH,OAAA,CAAAG,sBAAA,GAAGF,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjB,IAAAE,qBAAG;AACX,oCAAoCD,KAAK,CAACE,QAAQ;AAClD,SAAS;AACT,CAAC;AAEM,MAAMC,wBAAwB,GAAAV,OAAA,CAAAU,wBAAA,GAAGT,yBAAM,CAACC,GAAkC;AACjF,cAAc,CAAC;EAAEK;AAAqC,CAAC,KAAKA,KAAK,CAACI,IAAI;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAIM,MAAMK,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACa,CAA2B;AACrE,aAAa,CAAC;EAAEP;AAAgC,CAAC,KAAKA,KAAK,CAACI,IAAI;AAChE,CAAC;AAEM,MAAMI,yBAAyB,GAAAf,OAAA,CAAAe,yBAAA,GAAG,IAAAd,yBAAM,EAACe,aAAM,CAACd,GAAG,CAAqB,EAAE","ignoreList":[]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _List = _interopRequireDefault(require("../list/List"));
|
|
9
|
+
var _FileList = require("./FileList.styles");
|
|
10
|
+
var _FileItem = _interopRequireDefault(require("./file-item/FileItem"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
const FileList = ({
|
|
15
|
+
files,
|
|
16
|
+
onRemove
|
|
17
|
+
}) => {
|
|
18
|
+
const content = (0, _react.useMemo)(() => files === null || files === void 0 ? void 0 : files.map(({
|
|
19
|
+
mimeType,
|
|
20
|
+
size,
|
|
21
|
+
name,
|
|
22
|
+
id
|
|
23
|
+
}) => /*#__PURE__*/_react.default.createElement(_FileItem.default, {
|
|
24
|
+
key: id,
|
|
25
|
+
id: id,
|
|
26
|
+
name: name,
|
|
27
|
+
size: size,
|
|
28
|
+
mimeType: mimeType,
|
|
29
|
+
onRemove: onRemove
|
|
30
|
+
})), [files, onRemove]);
|
|
31
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileList.StyledFileList, null, /*#__PURE__*/_react.default.createElement(_List.default, null, content)), [content]);
|
|
32
|
+
};
|
|
33
|
+
FileList.displayName = 'FileList';
|
|
34
|
+
var _default = exports.default = FileList;
|
|
35
|
+
//# sourceMappingURL=FileList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_List","_interopRequireDefault","_FileList","_FileItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileList","files","onRemove","content","useMemo","map","mimeType","size","name","id","createElement","key","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size: number;\n mimeType: string;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n onRemove={onRemove}\n />\n )),\n [files, onRemove],\n );\n\n return useMemo(\n () => (\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA4C,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAoB5C,MAAMW,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EACzD,MAAMC,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAG,CAAC,kBACpCpC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAAC/B,SAAA,CAAAG,OAAQ;IACL6B,GAAG,EAAEF,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBJ,QAAQ,EAAEA;EAAS,CACtB,CACJ,CAAC,EACN,CAACD,KAAK,EAAEC,QAAQ,CACpB,CAAC;EAED,OAAO,IAAAE,cAAO,EACV,mBACI/B,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAAChC,SAAA,CAAAkC,cAAc,qBACXvC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAAClC,KAAA,CAAAM,OAAI,QAAEqB,OAAc,CACT,CACnB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDH,QAAQ,CAACa,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAEnBkB,QAAQ","ignoreList":[]}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.StyledFileList = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
const
|
|
10
|
-
//# sourceMappingURL=
|
|
9
|
+
const StyledFileList = exports.StyledFileList = _styledComponents.default.div``;
|
|
10
|
+
//# sourceMappingURL=FileList.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileList.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFileList","exports","styled","div"],"sources":["../../../../src/components/file-list/FileList.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileList = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}
|
package/lib/cjs/components/{file-input/file-list/FileListItem.js → file-list/file-item/FileItem.js}
RENAMED
|
@@ -8,29 +8,29 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _file = require("../../../utils/file");
|
|
9
9
|
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
10
10
|
var _ListItem = _interopRequireDefault(require("../../list/list-item/ListItem"));
|
|
11
|
-
var
|
|
11
|
+
var _FileItem = require("./FileItem.styles");
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
14
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
fileSize,
|
|
18
|
-
fileType,
|
|
15
|
+
const FileItem = ({
|
|
16
|
+
mimeType,
|
|
19
17
|
onRemove,
|
|
20
|
-
|
|
18
|
+
size,
|
|
19
|
+
name,
|
|
20
|
+
id
|
|
21
21
|
}) => {
|
|
22
|
-
const humanFileSize = (0, _react.useMemo)(() =>
|
|
23
|
-
const icon = (0, _react.useMemo)(() => (0, _file.getIconByMimeType)(
|
|
24
|
-
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(
|
|
25
|
-
title:
|
|
22
|
+
const humanFileSize = (0, _react.useMemo)(() => (0, _file.getHumanSize)(size), [size]);
|
|
23
|
+
const icon = (0, _react.useMemo)(() => (0, _file.getIconByMimeType)(mimeType), [mimeType]);
|
|
24
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
|
|
25
|
+
title: name,
|
|
26
26
|
subtitle: humanFileSize,
|
|
27
|
-
icons:
|
|
28
|
-
rightElements: /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
27
|
+
icons: [icon],
|
|
28
|
+
rightElements: typeof onRemove === 'function' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
29
29
|
icons: ['ts-wrong'],
|
|
30
|
-
onClick: () => onRemove(
|
|
31
|
-
})
|
|
32
|
-
})), [
|
|
30
|
+
onClick: () => onRemove(id)
|
|
31
|
+
}) : undefined
|
|
32
|
+
})), [humanFileSize, icon, id, name, onRemove]);
|
|
33
33
|
};
|
|
34
|
-
|
|
35
|
-
var _default = exports.default =
|
|
36
|
-
//# sourceMappingURL=
|
|
34
|
+
FileItem.displayName = 'FileList';
|
|
35
|
+
var _default = exports.default = FileItem;
|
|
36
|
+
//# sourceMappingURL=FileItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ListItem","_FileItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileItem","mimeType","onRemove","size","name","id","humanFileSize","useMemo","getHumanSize","icon","getIconByMimeType","createElement","StyledFileItem","title","subtitle","icons","rightElements","onClick","undefined","displayName","_default","exports"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = {\n id: string;\n name: string;\n size: number;\n mimeType: string;\n onRemove?: (name: string) => void;\n};\n\nconst FileItem: FC<FileItemProps> = ({ mimeType, onRemove, size, name, id }) => {\n const humanFileSize = useMemo(() => getHumanSize(size), [size]);\n\n const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={\n typeof onRemove === 'function' ? (\n <Icon icons={['ts-wrong']} onClick={() => onRemove(id)} />\n ) : undefined\n }\n />\n </StyledFileItem>\n ),\n [humanFileSize, icon, id, name, onRemove],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledFileItem = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const StyledFileItem = exports.StyledFileItem = _styledComponents.default.div``;
|
|
10
|
+
//# sourceMappingURL=FileItem.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFileItem","exports","styled","div"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}
|