@neo4j-ndl/react 0.5.1 → 0.5.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.
@@ -8,6 +8,7 @@ const classnames_1 = __importDefault(require("classnames"));
8
8
  const Cloud_1 = __importDefault(require("./icons/Cloud"));
9
9
  const File_1 = __importDefault(require("./icons/File"));
10
10
  const InvalidFile_1 = __importDefault(require("./icons/InvalidFile"));
11
+ const react_use_1 = require("react-use");
11
12
  const react_dropzone_1 = require("react-dropzone");
12
13
  /**
13
14
  *
@@ -31,12 +32,14 @@ const isFileValid = (fileType, paramAcceptedFiles) => {
31
32
  * DragAndDrop Component
32
33
  *
33
34
  *
34
- */ const DragAndDrop = (props) => {
35
+ */
36
+ const DragAndDrop = (props) => {
35
37
  var _a, _b, _c;
36
38
  const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting, } = props;
37
39
  const { getRootProps, getInputProps, isDragActive, draggedFiles, acceptedFiles, } = (0, react_dropzone_1.useDropzone)(Object.assign(Object.assign({
38
40
  // If the developer does not pass this function, then the browser will automatically download the dragged file. To empty function avoids that.
39
41
  onDrop: () => null }, dropZoneOptions), { disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
42
+ const [dropZoneRef, { width }] = (0, react_use_1.useMeasure)();
40
43
  /**
41
44
  * Returns the file extension, and if not supported
42
45
  * returns "???" to be displayed in the file icon.
@@ -56,11 +59,13 @@ const isFileValid = (fileType, paramAcceptedFiles) => {
56
59
  isFileValid((_a = draggedFiles[0]) === null || _a === void 0 ? void 0 : _a.type, dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.accept);
57
60
  const isUploading = !!loadingComponent;
58
61
  const computedFileImage = (isDragActive && isDraggedFileValid) || isUploading ? ((0, jsx_runtime_1.jsx)(File_1.default, {})) : ((0, jsx_runtime_1.jsx)(InvalidFile_1.default, {}));
59
- const wrapperClasses = (0, classnames_1.default)(`ndl-drag-and-drop`, {
62
+ const wrapperClasses = (0, classnames_1.default)(`ndl-drag-and-drop`, props.className, {
60
63
  'drag-active': isDragActive,
61
64
  'file-invalid': isDragActive && !isDraggedFileValid,
62
65
  });
63
- return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, getRootProps(), { style: { minWidth: 320 } }, { 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.jsxs)("div", Object.assign({ className: "upload-img-wrapper" }, { children: [(isDragActive || isUploading) && !isTesting && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr(isUploading ? (_b = acceptedFiles[0]) === null || _b === void 0 ? void 0 : _b.type : (_c = draggedFiles[0]) === null || _c === void 0 ? void 0 : _c.type) }))), isUploading || isDragActive ? 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.jsxs)("h5", Object.assign({ className: "dnd-title" }, { 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)("span", Object.assign({ className: "dnd-browse-link" }, { 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 })))] }))] }))] })) })));
66
+ return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { 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) && !isTesting && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr(isUploading
67
+ ? (_b = acceptedFiles[0]) === null || _b === void 0 ? void 0 : _b.type
68
+ : (_c = draggedFiles[0]) === null || _c === void 0 ? void 0 : _c.type) }))), isUploading || isDragActive ? (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.jsxs)("h5", Object.assign({ className: "dnd-title" }, { 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)("span", Object.assign({ className: "dnd-browse-link" }, { 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 })))] }))] }))] })) })));
64
69
  };
65
70
  exports.default = DragAndDrop;
66
71
  //# sourceMappingURL=DragAndDrop.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":"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"}
@@ -1,8 +1,9 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import classnames from 'classnames';
3
3
  import CloudImage from './icons/Cloud';
4
4
  import FileImage from './icons/File';
5
5
  import InvalidFileImage from './icons/InvalidFile';
6
+ import { useMeasure } from 'react-use';
6
7
  import { useDropzone } from 'react-dropzone';
7
8
  /**
8
9
  *
@@ -26,12 +27,14 @@ const isFileValid = (fileType, paramAcceptedFiles) => {
26
27
  * DragAndDrop Component
27
28
  *
28
29
  *
29
- */ const DragAndDrop = (props) => {
30
+ */
31
+ const DragAndDrop = (props) => {
30
32
  var _a, _b, _c;
31
33
  const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting, } = props;
32
34
  const { getRootProps, getInputProps, isDragActive, draggedFiles, acceptedFiles, } = useDropzone(Object.assign(Object.assign({
33
35
  // If the developer does not pass this function, then the browser will automatically download the dragged file. To empty function avoids that.
34
36
  onDrop: () => null }, dropZoneOptions), { disabled: (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent }));
37
+ const [dropZoneRef, { width }] = useMeasure();
35
38
  /**
36
39
  * Returns the file extension, and if not supported
37
40
  * returns "???" to be displayed in the file icon.
@@ -51,11 +54,13 @@ const isFileValid = (fileType, paramAcceptedFiles) => {
51
54
  isFileValid((_a = draggedFiles[0]) === null || _a === void 0 ? void 0 : _a.type, dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.accept);
52
55
  const isUploading = !!loadingComponent;
53
56
  const computedFileImage = (isDragActive && isDraggedFileValid) || isUploading ? (_jsx(FileImage, {})) : (_jsx(InvalidFileImage, {}));
54
- const wrapperClasses = classnames(`ndl-drag-and-drop`, {
57
+ const wrapperClasses = classnames(`ndl-drag-and-drop`, props.className, {
55
58
  'drag-active': isDragActive,
56
59
  'file-invalid': isDragActive && !isDraggedFileValid,
57
60
  });
58
- return (_jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({}, getRootProps(), { style: { minWidth: 320 } }, { 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: [_jsxs("div", Object.assign({ className: "upload-img-wrapper" }, { children: [(isDragActive || isUploading) && !isTesting && (_jsx("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr(isUploading ? (_b = acceptedFiles[0]) === null || _b === void 0 ? void 0 : _b.type : (_c = draggedFiles[0]) === null || _c === void 0 ? void 0 : _c.type) }))), isUploading || isDragActive ? computedFileImage : _jsx(CloudImage, {})] })), !isUploading && (_jsxs("div", Object.assign({ className: "dnd-title-container" }, { children: [_jsxs("h5", Object.assign({ className: "dnd-title" }, { 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("span", Object.assign({ className: "dnd-browse-link" }, { 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 })))] }))] }))] })) })));
61
+ return (_jsx("div", Object.assign({}, props, { 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) && !isTesting && (_jsx("span", Object.assign({ className: "upload-img-label" }, { children: getFileTypeAbbr(isUploading
62
+ ? (_b = acceptedFiles[0]) === null || _b === void 0 ? void 0 : _b.type
63
+ : (_c = draggedFiles[0]) === null || _c === void 0 ? void 0 : _c.type) }))), isUploading || isDragActive ? (computedFileImage) : (_jsx(CloudImage, {}))] })) })), !isUploading && (_jsxs("div", Object.assign({ className: "dnd-title-container" }, { children: [_jsxs("h5", Object.assign({ className: "dnd-title" }, { 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("span", Object.assign({ className: "dnd-browse-link" }, { 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 })))] }))] }))] })) })));
59
64
  };
60
65
  export default DragAndDrop;
61
66
  //# sourceMappingURL=DragAndDrop.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/drag-and-drop/DragAndDrop.tsx"],"names":[],"mappings":"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"}
@@ -20,6 +20,7 @@
20
20
  */
21
21
  import React from 'react';
22
22
  import { DropzoneOptions } from 'react-dropzone';
23
+ import { ElementBase } from '../helpers';
23
24
  /**
24
25
  *
25
26
  *
@@ -27,7 +28,7 @@ import { DropzoneOptions } from 'react-dropzone';
27
28
  *
28
29
  *
29
30
  */
30
- export declare type DragAndDropProps = {
31
+ export interface DragAndDropProps extends ElementBase<HTMLDivElement> {
31
32
  /** See here - https://react-dropzone.js.org/#src */
32
33
  dropZoneOptions: DropzoneOptions;
33
34
  /** Supported file text in the footer */
@@ -36,12 +37,13 @@ export declare type DragAndDropProps = {
36
37
  loadingComponent?: string | React.ReactElement;
37
38
  /** To be used when want to test loadingComponent UI without actualy draging and uploading the files */
38
39
  isTesting?: boolean;
39
- };
40
+ }
40
41
  /**
41
42
  *
42
43
  *
43
44
  * DragAndDrop Component
44
45
  *
45
46
  *
46
- */ declare const DragAndDrop: (props: DragAndDropProps) => JSX.Element;
47
+ */
48
+ declare const DragAndDrop: (props: DragAndDropProps) => JSX.Element;
47
49
  export default DragAndDrop;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/react",
3
- "version": "0.5.1",
3
+ "version": "0.5.2",
4
4
  "description": "React implementation of Neo4j Design System",
5
5
  "keywords": [
6
6
  "button",
@@ -67,9 +67,10 @@
67
67
  },
68
68
  "dependencies": {
69
69
  "@heroicons/react": "^1.0.5",
70
- "@neo4j-ndl/base": "^0.5.0",
70
+ "@neo4j-ndl/base": "^0.5.1",
71
71
  "classnames": "^2.3.1",
72
72
  "react-dropzone": "^12.0.4",
73
- "react-table": "^7.7.0"
73
+ "react-table": "^7.7.0",
74
+ "react-use": "^17.4.0"
74
75
  }
75
76
  }