@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
121 lines • 7.84 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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/>.
*/
import { detect } from 'detect-browser';
import { useCallback, useMemo, useState } from 'react';
import { useDropzone, } from 'react-dropzone';
import { useMeasure } from 'react-use';
import { classNames } from '../_common/defaultImports';
import { Banner } from '../banner';
import { ProgressBar } from '../progress-bar';
import { Typography } from '../typography';
import CloudImage from './icons/Cloud';
import FileImage from './icons/File';
import InvalidFileImage from './icons/InvalidFile';
/**
*
*
* Helpers
*
*
*/
const browser = 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] = useState(null);
const [isRejected, setIsRejected] = useState(false);
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || !!loadingComponent;
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = 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 }] = useMeasure();
/**
* Returns the file extension, and if not supported
* returns "???" to be displayed in the file icon.
*/
const getFileTypeAbbr = 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 ? (_jsx(FileImage, {})) : (_jsx(InvalidFileImage, {}));
const wrapperClasses = 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,
});
useMemo(() => {
if (isDragActive && isRejected) {
setIsRejected(false);
}
}, [isDragActive, isRejected]);
return (_jsxs(_Fragment, { children: [isRejected && (_jsx(Banner, { className: "ndl-dropzone-error-alert", description: rejectedMessage || 'Error. File extension not supported.', type: "danger" })), _jsx("div", Object.assign({ ref: dropZoneRef, className: wrapperClasses, style: style }, htmlAttributes, { children: _jsxs("div", Object.assign({ className: "ndl-dropzone-inner-content" }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsxs("div", { className: "ndl-dropzone-inner", children: [_jsxs("div", { className: "ndl-dropzone-header", children: [_jsx("div", { className: "ndl-upload-img-wrapper", children: width > 230 && (_jsxs(_Fragment, { children: [(isDragActive || isUploading) &&
!isTesting &&
!isSafari && (_jsx("span", { className: "ndl-upload-img-label", children: getFileTypeAbbr() })), (isUploading || isDragActive) && !isSafari ? (computedFileImage) : (_jsx(CloudImage, {}))] })) }), !isUploading && (_jsxs("div", { className: "ndl-dnd-title-container", children: [_jsx("h5", { className: "ndl-dnd-title", children: customTitle || (_jsxs(_Fragment, { children: ["Drag ", _jsx("span", { className: "n-font-light", children: "&" }), " Drop"] })) }), _jsxs("div", { className: "ndl-dnd-subtitle", children: [_jsx("span", { children: "or" }), ' ', _jsx("button", { className: "ndl-dnd-browse-link", onClick: () => open(), disabled: isDisabled, children: "browse" })] })] }))] }), _jsxs("div", { className: "ndl-dropzone-footer", children: [isUploading && _jsx(_Fragment, { children: loadingComponent }), !isUploading && (_jsx("div", { className: "ndl-file-support-text", children: supportedFilesDescription }))] })] })] })) }))] }));
};
const DropzoneLoadingProgressBarComponent = (props) => {
const { progressBarPrecentage, progressBarMinute, htmlAttributes } = props;
return (_jsxs("div", { className: "ndl-dropzone-loading-progress-bar-wrapper", children: [_jsx(Typography, { variant: "h5", children: "Uploading..." }), _jsxs("div", { className: "ndl-dropzone-loading-progress-bar-indicators", children: [_jsx(Typography, { className: "ndl-dropzone-loading-progress-bar-precentage", variant: "subheading-small", children: progressBarPrecentage + '%' }), progressBarMinute && (_jsx(Typography, { className: "ndl-dropzone-loading-progress-bar-minute", variant: "body-medium", children: `(${progressBarMinute} minutes left)` }))] }), _jsx(ProgressBar, { className: "ndl-dropzone-loading-progress-bar", value: progressBarPrecentage, size: "large", htmlAttributes: htmlAttributes })] }));
};
const Dropzone = Object.assign(DropzoneComponent, {
LoadingProgressBar: DropzoneLoadingProgressBarComponent,
});
export { Dropzone };
//# sourceMappingURL=Dropzone.js.map