@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
127 lines • 8.91 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dropzone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const detect_browser_1 = require("detect-browser");
const react_1 = require("react");
const react_dropzone_1 = require("react-dropzone");
const react_use_1 = require("react-use");
const defaultImports_1 = require("../_common/defaultImports");
const banner_1 = require("../banner");
const progress_bar_1 = require("../progress-bar");
const typography_1 = require("../typography");
const Cloud_1 = __importDefault(require("./icons/Cloud"));
const File_1 = __importDefault(require("./icons/File"));
const InvalidFile_1 = __importDefault(require("./icons/InvalidFile"));
/**
*
*
* Helpers
*
*
*/
const browser = (0, detect_browser_1.detect)();
const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name) === 'safari';
const DropzoneComponent = (props) => {
const { dropZoneOptions, supportedFilesDescription, loadingComponent, isTesting, customTitle, rejectedMessage, acceptedFileExtensions, htmlAttributes, style, } = props;
/**
* We intercept the onDrop function in order to enforce
* custom file extensions. Before calling the onDrop props we check
* if the custom file extensions is acceptable. If the extension
* conforms to acceptedFileExtensions, we call onDrop. Otherwise, we
* present an error message.
*/
function onDropInterceptor(acceptedFiles, fileRejections, event) {
var _a;
if (acceptedFileExtensions && acceptedFileExtensions.length > 0) {
for (const file of acceptedFiles) {
const isAccepted = acceptedFileExtensions.some((extension) => {
if (file.name.endsWith(extension))
return true;
});
if (!isAccepted) {
setIsRejected(true);
return;
}
}
}
setIsRejected(false);
(_a = dropZoneOptions.onDrop) === null || _a === void 0 ? void 0 : _a.call(dropZoneOptions, acceptedFiles, fileRejections, event);
}
const [currentFileExtension, setCurrentFileExtension] = (0, react_1.useState)(null);
const [isRejected, setIsRejected] = (0, react_1.useState)(false);
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent;
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = (0, react_dropzone_1.useDropzone)(Object.assign(Object.assign({ onDragEnter: (event) => {
const { items } = event.dataTransfer;
if (items.length > 0) {
setCurrentFileExtension(items[0].type);
}
}, onDragLeave: () => setCurrentFileExtension(null), noClick: true }, dropZoneOptions), { onDrop: onDropInterceptor, disabled: isDisabled }));
const [dropZoneRef, { width }] = (0, react_use_1.useMeasure)();
/**
* Returns the file extension, and if not supported
* returns "???" to be displayed in the file icon.
*/
const getFileTypeAbbr = (0, react_1.useCallback)(() => {
var _a;
/**
* File API is not consistent across browsers.
* We will strive to support the best user experience possible
* in Chrome and Firefox and provide basic working functionality in Safari.
* Source: https://react-dropzone.js.org/#browser-limitations
*/
if (!isDragAccept) {
return '???';
}
else {
return (_a = currentFileExtension === null || currentFileExtension === void 0 ? void 0 : currentFileExtension.split('/').slice(-1).pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase();
}
}, [isDragAccept, currentFileExtension]);
const isUploading = !!loadingComponent;
const computedFileImage = (isDragActive && isDragAccept) || isUploading ? ((0, jsx_runtime_1.jsx)(File_1.default, {})) : ((0, jsx_runtime_1.jsx)(InvalidFile_1.default, {}));
const wrapperClasses = (0, defaultImports_1.classNames)('ndl-dropzone', props.className, {
'ndl-drag-active': isDragActive,
'ndl-file-invalid': isDragActive && isDragReject,
'ndl-drag-disabled': dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled,
});
(0, react_1.useMemo)(() => {
if (isDragActive && isRejected) {
setIsRejected(false);
}
}, [isDragActive, isRejected]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRejected && ((0, jsx_runtime_1.jsx)(banner_1.Banner, { className: "ndl-dropzone-error-alert", description: rejectedMessage || 'Error. File extension not supported.', type: "danger" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: dropZoneRef, className: wrapperClasses, style: style }, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-dropzone-inner-content" }, getRootProps(), { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-inner", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-upload-img-wrapper", children: width > 230 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(isDragActive || isUploading) &&
!isTesting &&
!isSafari && ((0, jsx_runtime_1.jsx)("span", { className: "ndl-upload-img-label", children: getFileTypeAbbr() })), (isUploading || isDragActive) && !isSafari ? (computedFileImage) : ((0, jsx_runtime_1.jsx)(Cloud_1.default, {}))] })) }), !isUploading && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-dnd-title-container", children: [(0, jsx_runtime_1.jsx)("h5", { className: "ndl-dnd-title", children: customTitle || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Drag ", (0, jsx_runtime_1.jsx)("span", { className: "n-font-light", children: "&" }), " Drop"] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dnd-subtitle", children: [(0, jsx_runtime_1.jsx)("span", { children: "or" }), ' ', (0, jsx_runtime_1.jsx)("button", { className: "ndl-dnd-browse-link", onClick: () => open(), disabled: isDisabled, children: "browse" })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-footer", children: [isUploading && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingComponent }), !isUploading && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-file-support-text", children: supportedFilesDescription }))] })] })] })) }))] }));
};
const DropzoneLoadingProgressBarComponent = (props) => {
const { progressBarPrecentage, progressBarMinute, htmlAttributes } = props;
return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-loading-progress-bar-wrapper", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "h5", children: "Uploading..." }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-loading-progress-bar-indicators", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-dropzone-loading-progress-bar-precentage", variant: "subheading-small", children: progressBarPrecentage + '%' }), progressBarMinute && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-dropzone-loading-progress-bar-minute", variant: "body-medium", children: `(${progressBarMinute} minutes left)` }))] }), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, { className: "ndl-dropzone-loading-progress-bar", value: progressBarPrecentage, size: "large", htmlAttributes: htmlAttributes })] }));
};
const Dropzone = Object.assign(DropzoneComponent, {
LoadingProgressBar: DropzoneLoadingProgressBarComponent,
});
exports.Dropzone = Dropzone;
//# sourceMappingURL=Dropzone.js.map