@veracity/vui 2.24.0-beta.0 → 2.24.0-beta.2
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/cjs/dragAndDrop/dragAndDrop.d.ts.map +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.js +41 -6
- package/dist/cjs/dragAndDrop/dragAndDrop.js.map +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.types.d.ts +4 -2
- package/dist/cjs/dragAndDrop/dragAndDrop.types.d.ts.map +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.d.ts.map +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.js +41 -6
- package/dist/esm/dragAndDrop/dragAndDrop.js.map +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts +4 -2
- package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts.map +1 -1
- package/dist/tsconfig.legacy.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/dragAndDrop/dragAndDrop.tsx +47 -7
- package/src/dragAndDrop/dragAndDrop.types.ts +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DAgHtB,CAAA;AAGF,eAAe,WAAW,CAAA"}
|
|
@@ -32,13 +32,10 @@ const DragAndDropBase = core_1.styled.labelBox `
|
|
|
32
32
|
`;
|
|
33
33
|
/** Prepares uploading files by selecting or dragging. */
|
|
34
34
|
exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
|
|
35
|
-
const _a = (0, core_1.omitThemingProps)(props), { accept, className, icon = defaultIcon,
|
|
35
|
+
const _a = (0, core_1.omitThemingProps)(props), { accept, className, icon = defaultIcon, selectFolderOnClick, selectFolderOnDrop, onFilesAdded, multiple = true, text = defaultText, children, disabled } = _a, rest = __rest(_a, ["accept", "className", "icon", "selectFolderOnClick", "selectFolderOnDrop", "onFilesAdded", "multiple", "text", "children", "disabled"]);
|
|
36
36
|
const fileInput = (0, react_1.useRef)(null);
|
|
37
37
|
const styles = (0, core_1.useStyleConfig)('DragAndDrop', props);
|
|
38
|
-
const processFiles = (files) =>
|
|
39
|
-
console.log('files', files);
|
|
40
|
-
return Array.from(files).map(file => file);
|
|
41
|
-
};
|
|
38
|
+
const processFiles = (files) => Array.from(files).map(file => file);
|
|
42
39
|
const handleFileInput = (e) => {
|
|
43
40
|
var _a;
|
|
44
41
|
e.preventDefault();
|
|
@@ -52,16 +49,54 @@ exports.DragAndDrop = (0, core_1.vui)((props, ref) => {
|
|
|
52
49
|
e.currentTarget.type = inputType;
|
|
53
50
|
}
|
|
54
51
|
};
|
|
52
|
+
const getFilesWebkitDataTransferItems = (dataTransferItems) => {
|
|
53
|
+
const traverseFileTreePromise = (item, path = '') => new Promise(resolve => {
|
|
54
|
+
if (item.isFile) {
|
|
55
|
+
const fileEntry = item;
|
|
56
|
+
fileEntry.file(file => {
|
|
57
|
+
;
|
|
58
|
+
file.filepath = path + file.name; // Save full path with type casting
|
|
59
|
+
files.push(file);
|
|
60
|
+
resolve([file]);
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
else if (item.isDirectory) {
|
|
64
|
+
const dirEntry = item;
|
|
65
|
+
const dirReader = dirEntry.createReader();
|
|
66
|
+
dirReader.readEntries(entries => {
|
|
67
|
+
const entriesPromises = entries.map(entry => traverseFileTreePromise(entry, path + dirEntry.name + '/'));
|
|
68
|
+
resolve(Promise.all(entriesPromises).then(entries => [].concat(...entries)));
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
const files = [];
|
|
73
|
+
return new Promise((resolve, reject) => {
|
|
74
|
+
const entriesPromises = [];
|
|
75
|
+
for (let i = 0; i < dataTransferItems.length; i++) {
|
|
76
|
+
const item = dataTransferItems[i].webkitGetAsEntry();
|
|
77
|
+
if (item)
|
|
78
|
+
entriesPromises.push(traverseFileTreePromise(item));
|
|
79
|
+
}
|
|
80
|
+
Promise.all(entriesPromises)
|
|
81
|
+
.then(() => resolve(files))
|
|
82
|
+
.catch(reject);
|
|
83
|
+
});
|
|
84
|
+
};
|
|
55
85
|
const handleDrop = (e) => {
|
|
56
86
|
var _a;
|
|
57
87
|
e.preventDefault();
|
|
58
88
|
if (disabled)
|
|
59
89
|
return undefined;
|
|
90
|
+
if (selectFolderOnDrop) {
|
|
91
|
+
const items = e.dataTransfer.items;
|
|
92
|
+
getFilesWebkitDataTransferItems(items).then(files => (files === null || files === void 0 ? void 0 : files.length) && (onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files)));
|
|
93
|
+
return undefined;
|
|
94
|
+
}
|
|
60
95
|
const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? processFiles(e.dataTransfer.files) : [];
|
|
61
96
|
if (files === null || files === void 0 ? void 0 : files.length)
|
|
62
97
|
onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files);
|
|
63
98
|
};
|
|
64
|
-
return ((0, jsx_runtime_1.jsxs)(DragAndDropBase, Object.assign({ className: (0, utils_1.cs)('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref }, styles, rest, { children: [children || ((0, jsx_runtime_1.jsxs)(t_1.default, { display: "flex", children: [(0, jsx_runtime_1.jsx)(icon_1.default, { mr: 1, name: icon }), text] })), (0, jsx_runtime_1.jsx)("input", Object.assign({ accept: accept, className: "vui-drag-and-drop-hidden-input", multiple: multiple, onChange: handleFileInput, ref: fileInput, style: { display: 'none' }, type: inputType }, (
|
|
99
|
+
return ((0, jsx_runtime_1.jsxs)(DragAndDropBase, Object.assign({ className: (0, utils_1.cs)('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref }, styles, rest, { children: [children || ((0, jsx_runtime_1.jsxs)(t_1.default, { display: "flex", children: [(0, jsx_runtime_1.jsx)(icon_1.default, { mr: 1, name: icon }), text] })), (0, jsx_runtime_1.jsx)("input", Object.assign({ accept: accept, className: "vui-drag-and-drop-hidden-input", multiple: multiple, onChange: handleFileInput, ref: fileInput, style: { display: 'none' }, type: inputType }, (selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })))] })));
|
|
65
100
|
});
|
|
66
101
|
exports.DragAndDrop.displayName = 'DragAndDrop';
|
|
67
102
|
exports.default = exports.DragAndDrop;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.js","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.js","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,8 +8,10 @@ export type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAnd
|
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
/** The message icon. @default `falCloudUpload` */
|
|
10
10
|
icon?: IconProp;
|
|
11
|
-
/**
|
|
12
|
-
|
|
11
|
+
/** Allows folder selection using click @default `false` */
|
|
12
|
+
selectFolderOnClick?: boolean;
|
|
13
|
+
/** Allows folder selection using drag and drop @default `false` */
|
|
14
|
+
selectFolderOnDrop?: boolean;
|
|
13
15
|
/** Allows to select multiple files when the drop zone is clicked.. @default `true` */
|
|
14
16
|
multiple?: boolean;
|
|
15
17
|
/** The message text. @default `Click or drag files to this area` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAetD,yDAAyD;AACzD,eAAO,MAAM,WAAW,2DAgHtB,CAAA;AAGF,eAAe,WAAW,CAAA"}
|
|
@@ -15,13 +15,10 @@ const DragAndDropBase = styled.labelBox `
|
|
|
15
15
|
`;
|
|
16
16
|
/** Prepares uploading files by selecting or dragging. */
|
|
17
17
|
export const DragAndDrop = vui((props, ref) => {
|
|
18
|
-
const { accept, className, icon = defaultIcon,
|
|
18
|
+
const { accept, className, icon = defaultIcon, selectFolderOnClick, selectFolderOnDrop, onFilesAdded, multiple = true, text = defaultText, children, disabled, ...rest } = omitThemingProps(props);
|
|
19
19
|
const fileInput = useRef(null);
|
|
20
20
|
const styles = useStyleConfig('DragAndDrop', props);
|
|
21
|
-
const processFiles = (files) =>
|
|
22
|
-
console.log('files', files);
|
|
23
|
-
return Array.from(files).map(file => file);
|
|
24
|
-
};
|
|
21
|
+
const processFiles = (files) => Array.from(files).map(file => file);
|
|
25
22
|
const handleFileInput = (e) => {
|
|
26
23
|
e.preventDefault();
|
|
27
24
|
if (disabled)
|
|
@@ -34,15 +31,53 @@ export const DragAndDrop = vui((props, ref) => {
|
|
|
34
31
|
e.currentTarget.type = inputType;
|
|
35
32
|
}
|
|
36
33
|
};
|
|
34
|
+
const getFilesWebkitDataTransferItems = (dataTransferItems) => {
|
|
35
|
+
const traverseFileTreePromise = (item, path = '') => new Promise(resolve => {
|
|
36
|
+
if (item.isFile) {
|
|
37
|
+
const fileEntry = item;
|
|
38
|
+
fileEntry.file(file => {
|
|
39
|
+
;
|
|
40
|
+
file.filepath = path + file.name; // Save full path with type casting
|
|
41
|
+
files.push(file);
|
|
42
|
+
resolve([file]);
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
else if (item.isDirectory) {
|
|
46
|
+
const dirEntry = item;
|
|
47
|
+
const dirReader = dirEntry.createReader();
|
|
48
|
+
dirReader.readEntries(entries => {
|
|
49
|
+
const entriesPromises = entries.map(entry => traverseFileTreePromise(entry, path + dirEntry.name + '/'));
|
|
50
|
+
resolve(Promise.all(entriesPromises).then(entries => [].concat(...entries)));
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const files = [];
|
|
55
|
+
return new Promise((resolve, reject) => {
|
|
56
|
+
const entriesPromises = [];
|
|
57
|
+
for (let i = 0; i < dataTransferItems.length; i++) {
|
|
58
|
+
const item = dataTransferItems[i].webkitGetAsEntry();
|
|
59
|
+
if (item)
|
|
60
|
+
entriesPromises.push(traverseFileTreePromise(item));
|
|
61
|
+
}
|
|
62
|
+
Promise.all(entriesPromises)
|
|
63
|
+
.then(() => resolve(files))
|
|
64
|
+
.catch(reject);
|
|
65
|
+
});
|
|
66
|
+
};
|
|
37
67
|
const handleDrop = (e) => {
|
|
38
68
|
e.preventDefault();
|
|
39
69
|
if (disabled)
|
|
40
70
|
return undefined;
|
|
71
|
+
if (selectFolderOnDrop) {
|
|
72
|
+
const items = e.dataTransfer.items;
|
|
73
|
+
getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files));
|
|
74
|
+
return undefined;
|
|
75
|
+
}
|
|
41
76
|
const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : [];
|
|
42
77
|
if (files?.length)
|
|
43
78
|
onFilesAdded?.(files);
|
|
44
79
|
};
|
|
45
|
-
return (_jsxs(DragAndDropBase, { className: cs('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref, ...styles, ...rest, children: [children || (_jsxs(T, { display: "flex", children: [_jsx(Icon, { mr: 1, name: icon }), text] })), _jsx("input", { accept: accept, className: "vui-drag-and-drop-hidden-input", multiple: multiple, onChange: handleFileInput, ref: fileInput, style: { display: 'none' }, type: inputType, ...(
|
|
80
|
+
return (_jsxs(DragAndDropBase, { className: cs('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), opacity: disabled ? 0.5 : 1, p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref, ...styles, ...rest, children: [children || (_jsxs(T, { display: "flex", children: [_jsx(Icon, { mr: 1, name: icon }), text] })), _jsx("input", { accept: accept, className: "vui-drag-and-drop-hidden-input", multiple: multiple, onChange: handleFileInput, ref: fileInput, style: { display: 'none' }, type: inputType, ...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' }) })] }));
|
|
46
81
|
});
|
|
47
82
|
DragAndDrop.displayName = 'DragAndDrop';
|
|
48
83
|
export default DragAndDrop;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.js","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.js","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,8 +8,10 @@ export type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAnd
|
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
/** The message icon. @default `falCloudUpload` */
|
|
10
10
|
icon?: IconProp;
|
|
11
|
-
/**
|
|
12
|
-
|
|
11
|
+
/** Allows folder selection using click @default `false` */
|
|
12
|
+
selectFolderOnClick?: boolean;
|
|
13
|
+
/** Allows folder selection using drag and drop @default `false` */
|
|
14
|
+
selectFolderOnDrop?: boolean;
|
|
13
15
|
/** Allows to select multiple files when the drop zone is clicked.. @default `true` */
|
|
14
16
|
multiple?: boolean;
|
|
15
17
|
/** The message text. @default `Click or drag files to this area` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,
|
|
1
|
+
{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GACtD,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}
|