@neo4j-ndl/react 0.10.0 → 0.11.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/CHANGELOG.md +11 -0
- package/lib/cjs/drag-and-drop/DragAndDrop.js +37 -6
- package/lib/cjs/drag-and-drop/DragAndDrop.js.map +1 -1
- package/lib/esm/drag-and-drop/DragAndDrop.js +39 -8
- package/lib/esm/drag-and-drop/DragAndDrop.js.map +1 -1
- package/lib/types/drag-and-drop/DragAndDrop.d.ts +13 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 0.11.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 714082b: Add custom title, change open filepicker behaviour and enable custom file extension
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [714082b]
|
|
12
|
+
- @neo4j-ndl/base@0.11.0
|
|
13
|
+
|
|
3
14
|
## 0.10.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
|
@@ -43,6 +43,7 @@ const File_1 = __importDefault(require("./icons/File"));
|
|
|
43
43
|
const InvalidFile_1 = __importDefault(require("./icons/InvalidFile"));
|
|
44
44
|
const react_use_1 = require("react-use");
|
|
45
45
|
const react_dropzone_1 = require("react-dropzone");
|
|
46
|
+
const alert_1 = require("../alert");
|
|
46
47
|
/**
|
|
47
48
|
*
|
|
48
49
|
*
|
|
@@ -60,17 +61,40 @@ const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name
|
|
|
60
61
|
*
|
|
61
62
|
*/
|
|
62
63
|
const DragAndDrop = (props) => {
|
|
63
|
-
const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting } = props, otherProps = __rest(props, ["dropZoneOptions", "supportedFilesDescription", "loadingComponent", "isTesting"]);
|
|
64
|
+
const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting, customTitle, rejectedMessage, acceptedFileExtensions } = props, otherProps = __rest(props, ["dropZoneOptions", "supportedFilesDescription", "loadingComponent", "isTesting", "customTitle", "rejectedMessage", "acceptedFileExtensions"]);
|
|
65
|
+
/**
|
|
66
|
+
* We instercept the onDrop function in order to enforce
|
|
67
|
+
* custom file extensions. Before calling the onDrop props we check
|
|
68
|
+
* if the custom file extensions is acceptable. If the extension
|
|
69
|
+
* conforms to acceptedFileExtensions, we call onDrop. Otherwise, we
|
|
70
|
+
* present an error message.
|
|
71
|
+
*/
|
|
72
|
+
function onDropInterceptor(acceptedFiles, fileRejections, event) {
|
|
73
|
+
var _a;
|
|
74
|
+
if (acceptedFileExtensions && acceptedFileExtensions.length > 0) {
|
|
75
|
+
for (const file of acceptedFiles) {
|
|
76
|
+
const isAccepted = acceptedFileExtensions.some((extension) => {
|
|
77
|
+
if (file.name.endsWith(extension))
|
|
78
|
+
return true;
|
|
79
|
+
});
|
|
80
|
+
if (!isAccepted) {
|
|
81
|
+
setIsRejected(true);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
setIsRejected(false);
|
|
87
|
+
(_a = dropZoneOptions.onDrop) === null || _a === void 0 ? void 0 : _a.call(dropZoneOptions, acceptedFiles, fileRejections, event);
|
|
88
|
+
}
|
|
64
89
|
const [currentFileExtension, setCurrentFileExtension] = (0, react_1.useState)(null);
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
onDrop: () => null, onDragEnter: (event) => {
|
|
90
|
+
const [isRejected, setIsRejected] = (0, react_1.useState)(false);
|
|
91
|
+
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = (0, react_dropzone_1.useDropzone)(Object.assign(Object.assign({ onDragEnter: (event) => {
|
|
68
92
|
const { items } = event.dataTransfer;
|
|
69
93
|
if (items.length > 0) {
|
|
70
94
|
console.log(`Type will be ${items[0].type}`);
|
|
71
95
|
setCurrentFileExtension(items[0].type);
|
|
72
96
|
}
|
|
73
|
-
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), { disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
|
|
97
|
+
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), { onDrop: onDropInterceptor, noClick: true, disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
|
|
74
98
|
const [dropZoneRef, { width }] = (0, react_use_1.useMeasure)();
|
|
75
99
|
/**
|
|
76
100
|
* Returns the file extension, and if not supported
|
|
@@ -97,7 +121,14 @@ const DragAndDrop = (props) => {
|
|
|
97
121
|
'drag-active': isDragActive,
|
|
98
122
|
'file-invalid': isDragActive && isDragReject,
|
|
99
123
|
});
|
|
100
|
-
|
|
124
|
+
(0, react_1.useMemo)(() => {
|
|
125
|
+
if (isDragActive && isRejected) {
|
|
126
|
+
setIsRejected(false);
|
|
127
|
+
}
|
|
128
|
+
}, [isDragActive, isRejected]);
|
|
129
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRejected && ((0, jsx_runtime_1.jsx)(alert_1.Alert, { className: "drag-and-drop-error-alert", description: rejectedMessage || 'Error. File extension not supported.', type: "danger" })), (0, jsx_runtime_1.jsx)("div", Object.assign({}, otherProps, { ref: dropZoneRef, className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-drag-and-drop-inner-content" }, getRootProps(), { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-drag-and-drop-inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-drag-and-drop-header" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "upload-img-wrapper" }, { children: width > 230 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(isDragActive || isUploading) &&
|
|
130
|
+
!isTesting &&
|
|
131
|
+
!isSafari && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr() }))), (isUploading || isDragActive) && !isSafari ? (computedFileImage) : ((0, jsx_runtime_1.jsx)(Cloud_1.default, {}))] })) })), !isUploading && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dnd-title-container" }, { children: [(0, jsx_runtime_1.jsx)("h5", Object.assign({ className: "dnd-title" }, { children: customTitle || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Drag ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "n-font-light" }, { children: "&" })), " Drop"] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dnd-subtitle" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "or" }), ' ', (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dnd-browse-link", onClick: () => open() }, { children: "browse" }))] }))] })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-drag-and-drop-footer" }, { children: [isUploading && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingComponent }), !isUploading && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-file-support-text" }, { children: supportedFilesDescription })))] }))] }))] })) }))] }));
|
|
101
132
|
};
|
|
102
133
|
exports.default = DragAndDrop;
|
|
103
134
|
//# sourceMappingURL=DragAndDrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,
|
|
1
|
+
{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iCAAuD;AACvD,mDAAwC;AACxC,4DAAoC;AACpC,0DAAuC;AACvC,wDAAqC;AACrC,sEAAmD;AACnD,yCAAuC;AACvC,mDAKwB;AAExB,oCAAiC;AAqCjC;;;;;;GAMG;AAEH,MAAM,OAAO,GAAG,IAAA,uBAAM,GAAE,CAAC;AAEzB,MAAM,QAAQ,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,QAAQ,CAAC;AAC5C;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EACJ,eAAe,EACf,yBAAyB,EACzB,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,eAAe,EACf,sBAAsB,KAEpB,KAAK,EADJ,UAAU,UACX,KAAK,EATH,6IASL,CAAQ,CAAC;IAEV;;;;;;OAMG;IACH,SAAS,iBAAiB,CACxB,aAAkB,EAClB,cAA+B,EAC/B,KAAgB;;QAEhB,IAAI,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/D,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;gBAChC,MAAM,UAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE;oBAC3D,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;wBAAE,OAAO,IAAI,CAAC;gBACjD,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,UAAU,EAAE;oBACf,aAAa,CAAC,IAAI,CAAC,CAAC;oBACpB,OAAO;iBACR;aACF;SACF;QACD,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,MAAA,eAAe,CAAC,MAAM,gEAAG,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACjE,CAAC;IAED,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GACnD,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAEhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EACJ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,GAAG,IAAA,4BAAW,gCACb,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACrB,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC;YACrC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,OAAO,CAAC,GAAG,CAAC,gBAAgB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC7C,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACxC;QACH,CAAC,EACD,WAAW,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAC7C,eAAe,KAClB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,CAAC,CAAC,gBAAgB,IACzD,CAAC;IAEH,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,IAAA,sBAAU,GAAE,CAAC;IAE9C;;;OAGG;IACH,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;;QACvC;;;;;WAKG;QACH,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,KAAK,CAAC;SACd;aAAM;YACL,OAAO,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,0CAAE,WAAW,EAAE,CAAC;SACxE;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEzC,MAAM,WAAW,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAEvC,MAAM,iBAAiB,GACrB,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAC9C,uBAAC,cAAS,KAAG,CACd,CAAC,CAAC,CAAC,CACF,uBAAC,qBAAgB,KAAG,CACrB,CAAC;IAEJ,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,EAAE;QACtE,aAAa,EAAE,YAAY;QAC3B,cAAc,EAAE,YAAY,IAAI,YAAY;KAC7C,CAAC,CAAC;IAEH,IAAA,eAAO,EAAC,GAAG,EAAE;QACX,IAAI,YAAY,IAAI,UAAU,EAAE;YAC9B,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,6DACG,UAAU,IAAI,CACb,uBAAC,aAAK,IACJ,SAAS,EAAC,2BAA2B,EACrC,WAAW,EACT,eAAe,IAAI,sCAAsC,EAE3D,IAAI,EAAC,QAAQ,GACb,CACH,EACD,gDACM,UAAU,IACd,GAAG,EAAE,WAAyD,EAC9D,SAAS,EAAE,cAAc,gBAEzB,+CAAK,SAAS,EAAC,iCAAiC,IAAK,YAAY,EAAE,eACjE,kDAAW,aAAa,EAAE,EAAI,EAC9B,+CAAK,SAAS,EAAC,yBAAyB,iBACtC,+CAAK,SAAS,EAAC,0BAA0B,iBACvC,8CAAK,SAAS,EAAC,oBAAoB,gBAEhC,KAAK,GAAG,GAAG,IAAI,CACd,6DACG,CAAC,YAAY,IAAI,WAAW,CAAC;wDAC5B,CAAC,SAAS;wDACV,CAAC,QAAQ,IAAI,CACX,+CAAM,SAAS,EAAC,kBAAkB,gBAC/B,eAAe,EAAE,IACb,CACR,EAEF,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5C,iBAAiB,CAClB,CAAC,CAAC,CAAC,CACF,uBAAC,eAAU,KAAG,CACf,IACA,CACJ,IACG,EACL,CAAC,WAAW,IAAI,CACf,+CAAK,SAAS,EAAC,qBAAqB,iBAClC,6CAAI,SAAS,EAAC,WAAW,gBACtB,WAAW,IAAI,CACd,sEACO,+CAAM,SAAS,EAAC,cAAc,uBAAS,aAC3C,CACJ,IACE,EACL,+CAAK,SAAS,EAAC,cAAc,iBAC3B,kDAAe,EAAC,GAAG,EACnB,iDAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,4BAEhD,KACL,KACF,CACP,KACG,EACN,+CAAK,SAAS,EAAC,0BAA0B,iBACtC,WAAW,IAAI,2DAAG,gBAAgB,GAAI,EACtC,CAAC,WAAW,IAAI,CACf,8CAAK,SAAS,EAAC,uBAAuB,gBACnC,yBAAyB,IACtB,CACP,KACG,KACF,KACF,IACF,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}
|
|
@@ -30,14 +30,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
30
30
|
* You should have received a copy of the GNU General Public License
|
|
31
31
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
32
32
|
*/
|
|
33
|
-
import { useCallback, useState } from 'react';
|
|
33
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
34
34
|
import { detect } from 'detect-browser';
|
|
35
35
|
import classnames from 'classnames';
|
|
36
36
|
import CloudImage from './icons/Cloud';
|
|
37
37
|
import FileImage from './icons/File';
|
|
38
38
|
import InvalidFileImage from './icons/InvalidFile';
|
|
39
39
|
import { useMeasure } from 'react-use';
|
|
40
|
-
import { useDropzone } from 'react-dropzone';
|
|
40
|
+
import { useDropzone, } from 'react-dropzone';
|
|
41
|
+
import { Alert } from '../alert';
|
|
41
42
|
/**
|
|
42
43
|
*
|
|
43
44
|
*
|
|
@@ -55,17 +56,40 @@ const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name
|
|
|
55
56
|
*
|
|
56
57
|
*/
|
|
57
58
|
const DragAndDrop = (props) => {
|
|
58
|
-
const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting } = props, otherProps = __rest(props, ["dropZoneOptions", "supportedFilesDescription", "loadingComponent", "isTesting"]);
|
|
59
|
+
const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting, customTitle, rejectedMessage, acceptedFileExtensions } = props, otherProps = __rest(props, ["dropZoneOptions", "supportedFilesDescription", "loadingComponent", "isTesting", "customTitle", "rejectedMessage", "acceptedFileExtensions"]);
|
|
60
|
+
/**
|
|
61
|
+
* We instercept the onDrop function in order to enforce
|
|
62
|
+
* custom file extensions. Before calling the onDrop props we check
|
|
63
|
+
* if the custom file extensions is acceptable. If the extension
|
|
64
|
+
* conforms to acceptedFileExtensions, we call onDrop. Otherwise, we
|
|
65
|
+
* present an error message.
|
|
66
|
+
*/
|
|
67
|
+
function onDropInterceptor(acceptedFiles, fileRejections, event) {
|
|
68
|
+
var _a;
|
|
69
|
+
if (acceptedFileExtensions && acceptedFileExtensions.length > 0) {
|
|
70
|
+
for (const file of acceptedFiles) {
|
|
71
|
+
const isAccepted = acceptedFileExtensions.some((extension) => {
|
|
72
|
+
if (file.name.endsWith(extension))
|
|
73
|
+
return true;
|
|
74
|
+
});
|
|
75
|
+
if (!isAccepted) {
|
|
76
|
+
setIsRejected(true);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
setIsRejected(false);
|
|
82
|
+
(_a = dropZoneOptions.onDrop) === null || _a === void 0 ? void 0 : _a.call(dropZoneOptions, acceptedFiles, fileRejections, event);
|
|
83
|
+
}
|
|
59
84
|
const [currentFileExtension, setCurrentFileExtension] = useState(null);
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
onDrop: () => null, onDragEnter: (event) => {
|
|
85
|
+
const [isRejected, setIsRejected] = useState(false);
|
|
86
|
+
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = useDropzone(Object.assign(Object.assign({ onDragEnter: (event) => {
|
|
63
87
|
const { items } = event.dataTransfer;
|
|
64
88
|
if (items.length > 0) {
|
|
65
89
|
console.log(`Type will be ${items[0].type}`);
|
|
66
90
|
setCurrentFileExtension(items[0].type);
|
|
67
91
|
}
|
|
68
|
-
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), { disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
|
|
92
|
+
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), { onDrop: onDropInterceptor, noClick: true, disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
|
|
69
93
|
const [dropZoneRef, { width }] = useMeasure();
|
|
70
94
|
/**
|
|
71
95
|
* Returns the file extension, and if not supported
|
|
@@ -92,7 +116,14 @@ const DragAndDrop = (props) => {
|
|
|
92
116
|
'drag-active': isDragActive,
|
|
93
117
|
'file-invalid': isDragActive && isDragReject,
|
|
94
118
|
});
|
|
95
|
-
|
|
119
|
+
useMemo(() => {
|
|
120
|
+
if (isDragActive && isRejected) {
|
|
121
|
+
setIsRejected(false);
|
|
122
|
+
}
|
|
123
|
+
}, [isDragActive, isRejected]);
|
|
124
|
+
return (_jsxs(_Fragment, { children: [isRejected && (_jsx(Alert, { className: "drag-and-drop-error-alert", description: rejectedMessage || 'Error. File extension not supported.', type: "danger" })), _jsx("div", Object.assign({}, otherProps, { ref: dropZoneRef, className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: "ndl-drag-and-drop-inner-content" }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsxs("div", Object.assign({ className: "ndl-drag-and-drop-inner" }, { children: [_jsxs("div", Object.assign({ className: "ndl-drag-and-drop-header" }, { children: [_jsx("div", Object.assign({ className: "upload-img-wrapper" }, { children: width > 230 && (_jsxs(_Fragment, { children: [(isDragActive || isUploading) &&
|
|
125
|
+
!isTesting &&
|
|
126
|
+
!isSafari && (_jsx("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr() }))), (isUploading || isDragActive) && !isSafari ? (computedFileImage) : (_jsx(CloudImage, {}))] })) })), !isUploading && (_jsxs("div", Object.assign({ className: "dnd-title-container" }, { children: [_jsx("h5", Object.assign({ className: "dnd-title" }, { children: customTitle || (_jsxs(_Fragment, { children: ["Drag ", _jsx("span", Object.assign({ className: "n-font-light" }, { children: "&" })), " Drop"] })) })), _jsxs("div", Object.assign({ className: "dnd-subtitle" }, { children: [_jsx("span", { children: "or" }), ' ', _jsx("button", Object.assign({ className: "dnd-browse-link", onClick: () => open() }, { children: "browse" }))] }))] })))] })), _jsxs("div", Object.assign({ className: "ndl-drag-and-drop-footer" }, { children: [isUploading && _jsx(_Fragment, { children: loadingComponent }), !isUploading && (_jsx("div", Object.assign({ className: "ndl-file-support-text" }, { children: supportedFilesDescription })))] }))] }))] })) }))] }));
|
|
96
127
|
};
|
|
97
128
|
export default DragAndDrop;
|
|
98
129
|
//# sourceMappingURL=DragAndDrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,14 +29,24 @@ import { ElementBase } from '../helpers';
|
|
|
29
29
|
*
|
|
30
30
|
*/
|
|
31
31
|
export interface DragAndDropProps extends ElementBase<HTMLDivElement> {
|
|
32
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* See here - https://react-dropzone.js.org/#src. Don't use 'accept'
|
|
34
|
+
* if using custom file extensions as this option is broken.
|
|
35
|
+
* Instead use the acceptedFileExtensions property.
|
|
36
|
+
*/
|
|
33
37
|
dropZoneOptions: DropzoneOptions;
|
|
34
38
|
/** Supported file text in the footer */
|
|
35
|
-
supportedFilesDescription?: string;
|
|
39
|
+
supportedFilesDescription?: React.ReactNode | string;
|
|
36
40
|
/** Element to display when uploading the file. When passed, drag&drop zone is disabled */
|
|
37
|
-
loadingComponent?:
|
|
41
|
+
loadingComponent?: React.ReactNode | string;
|
|
38
42
|
/** To be used when want to test loadingComponent UI without actualy draging and uploading the files */
|
|
39
43
|
isTesting?: boolean;
|
|
44
|
+
/** Use when wanting a custom title. */
|
|
45
|
+
customTitle?: React.ReactNode | string;
|
|
46
|
+
/** Message to be shown when file is rejected. */
|
|
47
|
+
rejectedMessage?: React.ReactNode | string;
|
|
48
|
+
/** The accepted file extensions for the Drag-and-Drop. */
|
|
49
|
+
acceptedFileExtensions?: string[];
|
|
40
50
|
}
|
|
41
51
|
/**
|
|
42
52
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "React implementation of Neo4j Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"button",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"@heroicons/react": "^1.0.5",
|
|
72
|
-
"@neo4j-ndl/base": "^0.
|
|
72
|
+
"@neo4j-ndl/base": "^0.11.0",
|
|
73
73
|
"classnames": "^2.3.1",
|
|
74
74
|
"detect-browser": "^5.3.0",
|
|
75
75
|
"react-dropzone": "^14.0.0",
|