@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
115 lines • 7.93 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useMergeRefs } from '@floating-ui/react';
import classNames from 'classnames';
import { detect } from 'detect-browser';
import { useMemo, useRef, useState } from 'react';
import { useDropzone, } from 'react-dropzone';
import { useResizeObserver } from 'usehooks-ts';
import { Banner } from '../banner';
import { DocumentArrowUpIconOutline, DocumentArrowUpIconSolid, XCircleIconSolid, } from '../icons';
import { ProgressBar } from '../progress-bar';
import { Typography } from '../typography';
/**
*
*
* Helpers
*
*
*/
const browser = detect();
const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name) === 'safari';
const DropzoneComponent = (_a) => {
var { dropZoneOptions, supportedFilesDescription, loadingElement, heading, rejectedText, acceptedFileExtensions, htmlAttributes, style, className, ref } = _a, restProps = __rest(_a, ["dropZoneOptions", "supportedFilesDescription", "loadingElement", "heading", "rejectedText", "acceptedFileExtensions", "htmlAttributes", "style", "className", "ref"]);
/**
* 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 [isRejected, setIsRejected] = useState(false);
const dropZoneRef = useRef(null);
const mergedRef = useMergeRefs([dropZoneRef, ref]);
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || Boolean(loadingElement);
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = useDropzone(Object.assign(Object.assign({}, dropZoneOptions), { disabled: isDisabled, noClick: true, onDrop: onDropInterceptor }));
const { width } = useResizeObserver({
ref: dropZoneRef,
});
const isUploading = Boolean(loadingElement);
const titleText = isDragActive && isDragReject
? 'Format not supported'
: isDragActive && !isDragReject
? 'Drop file'
: null;
const computedFileImage = (isDragActive && isDragAccept) || isUploading ? (_jsx(DocumentArrowUpIconSolid, { className: "n-size-token-48 n-text-primary-bg-strong" })) : (_jsx(XCircleIconSolid, { className: "n-size-token-48 n-text-danger-bg-strong" }));
const wrapperClasses = classNames('ndl-dropzone', className, {
'ndl-drag-active': isDragActive,
'ndl-drag-disabled': dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled,
'ndl-file-invalid': isDragActive && isDragReject,
});
useMemo(() => {
if (isDragActive && isRejected) {
setIsRejected(false);
}
}, [isDragActive, isRejected]);
return (_jsxs(_Fragment, { children: [isRejected && (_jsxs(Banner, { className: "ndl-dropzone-error-alert", variant: "danger", children: [_jsx(Banner.Header, { children: "Error" }), _jsx(Banner.Description, { children: Boolean(rejectedText) || 'File extension not supported.' })] })), _jsx("div", Object.assign({ ref: mergedRef, className: wrapperClasses, style: style }, restProps, htmlAttributes, { children: _jsxs("div", Object.assign({ className: "ndl-dropzone-inner-wrapper" }, getRootProps(), { children: [_jsx("input", Object.assign({ "aria-label": "Drag and drop area" }, getInputProps())), _jsxs("div", { className: "ndl-dropzone-inner", children: [width !== undefined && width > 230 && (_jsx(_Fragment, { children: isDragActive && !isSafari ? (computedFileImage) : (_jsx(DocumentArrowUpIconOutline, { className: "ndl-dropzone-upload-icon" })) })), !isUploading && (_jsxs("div", { className: "ndl-dnd-title-container", children: [_jsx(Typography, { variant: "subheading-medium", children: titleText ||
(heading !== null && heading !== void 0 ? heading : (_jsxs(_Fragment, { children: ["Drag ", _jsx("span", { className: "n-font-light", children: "&" }), " Drop"] }))) }), !isDragReject && (_jsxs("div", { className: "ndl-dnd-subtitle", children: [_jsx(Typography, { variant: "body-medium", children: "or" }), ' ', _jsx("button", { className: "ndl-dnd-browse-link", onClick: () => open(), disabled: isDisabled, type: "button", children: "Browse" })] }))] })), _jsxs("div", { className: "ndl-dropzone-footer", children: [isUploading && _jsx(_Fragment, { children: loadingElement }), !isUploading && (_jsx("div", { className: "ndl-file-support-text", children: supportedFilesDescription }))] })] })] })) }))] }));
};
const DropzoneLoadingProgressBarComponent = (_a) => {
var { progressBarPrecentage, progressBarMinute, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["progressBarPrecentage", "progressBarMinute", "htmlAttributes", "className", "style", "ref"]);
return (_jsxs("div", { className: "ndl-dropzone-loading-progress-bar-wrapper", children: [_jsxs("div", { className: "ndl-dropzone-loading-progress-bar-indicators", children: [_jsx(Typography, { className: "ndl-dropzone-loading-progress-bar-precentage", variant: "subheading-small", children: `${progressBarPrecentage}%` }), Boolean(progressBarMinute) && (_jsx(Typography, { className: "ndl-dropzone-loading-progress-bar-minute", variant: "body-medium", children: `(${progressBarMinute} minutes left)` }))] }), _jsx(ProgressBar, Object.assign({ className: classNames('ndl-dropzone-loading-progress-bar', className), value: progressBarPrecentage, size: "large", htmlAttributes: htmlAttributes, ref: ref, style: style }, restProps))] }));
};
const Dropzone = Object.assign(DropzoneComponent, {
LoadingProgressBar: DropzoneLoadingProgressBarComponent,
});
export { Dropzone };
//# sourceMappingURL=Dropzone.js.map