@neo4j-ndl/react 0.10.0 → 0.11.1
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 +17 -0
- package/lib/cjs/drag-and-drop/DragAndDrop.js +38 -6
- package/lib/cjs/drag-and-drop/DragAndDrop.js.map +1 -1
- package/lib/esm/drag-and-drop/DragAndDrop.js +40 -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,22 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 0.11.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f2e981e: Fix browse button when drag-and-drop is disabled
|
|
8
|
+
|
|
9
|
+
## 0.11.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 714082b: Add custom title, change open filepicker behaviour and enable custom file extension
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [714082b]
|
|
18
|
+
- @neo4j-ndl/base@0.11.0
|
|
19
|
+
|
|
3
20
|
## 0.10.0
|
|
4
21
|
|
|
5
22
|
### 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,41 @@ 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
|
-
|
|
90
|
+
const [isRejected, setIsRejected] = (0, react_1.useState)(false);
|
|
91
|
+
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent;
|
|
92
|
+
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = (0, react_dropzone_1.useDropzone)(Object.assign(Object.assign({ onDragEnter: (event) => {
|
|
68
93
|
const { items } = event.dataTransfer;
|
|
69
94
|
if (items.length > 0) {
|
|
70
95
|
console.log(`Type will be ${items[0].type}`);
|
|
71
96
|
setCurrentFileExtension(items[0].type);
|
|
72
97
|
}
|
|
73
|
-
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), {
|
|
98
|
+
}, onDragLeave: () => setCurrentFileExtension(null), noClick: true }, dropZoneOptions), { onDrop: onDropInterceptor, disabled: isDisabled }));
|
|
74
99
|
const [dropZoneRef, { width }] = (0, react_use_1.useMeasure)();
|
|
75
100
|
/**
|
|
76
101
|
* Returns the file extension, and if not supported
|
|
@@ -97,7 +122,14 @@ const DragAndDrop = (props) => {
|
|
|
97
122
|
'drag-active': isDragActive,
|
|
98
123
|
'file-invalid': isDragActive && isDragReject,
|
|
99
124
|
});
|
|
100
|
-
|
|
125
|
+
(0, react_1.useMemo)(() => {
|
|
126
|
+
if (isDragActive && isRejected) {
|
|
127
|
+
setIsRejected(false);
|
|
128
|
+
}
|
|
129
|
+
}, [isDragActive, isRejected]);
|
|
130
|
+
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) &&
|
|
131
|
+
!isTesting &&
|
|
132
|
+
!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(), disabled: isDisabled }, { 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
133
|
};
|
|
102
134
|
exports.default = DragAndDrop;
|
|
103
135
|
//# 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;IACpD,MAAM,UAAU,GAAG,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,CAAC,CAAC,gBAAgB,CAAC;IAEnE,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,EAChD,OAAO,EAAE,IAAI,IACV,eAAe,KAClB,MAAM,EAAE,iBAAiB,EACzB,QAAQ,EAAE,UAAU,IACpB,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,iDACE,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EACrB,QAAQ,EAAE,UAAU,4BAGb,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,41 @@ 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
|
-
|
|
85
|
+
const [isRejected, setIsRejected] = useState(false);
|
|
86
|
+
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent;
|
|
87
|
+
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = useDropzone(Object.assign(Object.assign({ onDragEnter: (event) => {
|
|
63
88
|
const { items } = event.dataTransfer;
|
|
64
89
|
if (items.length > 0) {
|
|
65
90
|
console.log(`Type will be ${items[0].type}`);
|
|
66
91
|
setCurrentFileExtension(items[0].type);
|
|
67
92
|
}
|
|
68
|
-
}, onDragLeave: () => setCurrentFileExtension(null) }, dropZoneOptions), {
|
|
93
|
+
}, onDragLeave: () => setCurrentFileExtension(null), noClick: true }, dropZoneOptions), { onDrop: onDropInterceptor, disabled: isDisabled }));
|
|
69
94
|
const [dropZoneRef, { width }] = useMeasure();
|
|
70
95
|
/**
|
|
71
96
|
* Returns the file extension, and if not supported
|
|
@@ -92,7 +117,14 @@ const DragAndDrop = (props) => {
|
|
|
92
117
|
'drag-active': isDragActive,
|
|
93
118
|
'file-invalid': isDragActive && isDragReject,
|
|
94
119
|
});
|
|
95
|
-
|
|
120
|
+
useMemo(() => {
|
|
121
|
+
if (isDragActive && isRejected) {
|
|
122
|
+
setIsRejected(false);
|
|
123
|
+
}
|
|
124
|
+
}, [isDragActive, isRejected]);
|
|
125
|
+
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) &&
|
|
126
|
+
!isTesting &&
|
|
127
|
+
!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(), disabled: isDisabled }, { 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
128
|
};
|
|
97
129
|
export default DragAndDrop;
|
|
98
130
|
//# 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.1",
|
|
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",
|