@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
123 lines • 9.21 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;
};
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 react_1 = require("@floating-ui/react");
const classnames_1 = __importDefault(require("classnames"));
const detect_browser_1 = require("detect-browser");
const react_2 = require("react");
const react_dropzone_1 = require("react-dropzone");
const usehooks_ts_1 = require("usehooks-ts");
const banner_1 = require("../banner");
const DocumentArrowUpIconOutline_1 = require("../icons/generated/heroIcons/DocumentArrowUpIconOutline");
const DocumentArrowUpIconSolid_1 = require("../icons/generated/heroIcons/DocumentArrowUpIconSolid");
const XCircleIconSolid_1 = require("../icons/generated/heroIcons/XCircleIconSolid");
const progress_bar_1 = require("../progress-bar");
const typography_1 = require("../typography");
/**
*
*
* Helpers
*
*
*/
const browser = (0, detect_browser_1.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] = (0, react_2.useState)(false);
const dropZoneRef = (0, react_2.useRef)(null);
const mergedRef = (0, react_1.useMergeRefs)([dropZoneRef, ref]);
const isDisabled = (dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled) || Boolean(loadingElement);
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, open, } = (0, react_dropzone_1.useDropzone)(Object.assign(Object.assign({}, dropZoneOptions), { disabled: isDisabled, noClick: true, onDrop: onDropInterceptor }));
const { width } = (0, usehooks_ts_1.useResizeObserver)({
ref: dropZoneRef,
});
const isUploading = Boolean(loadingElement);
const titleText = isDragActive && isDragReject
? 'Format not supported'
: isDragActive && !isDragReject
? 'Drop file'
: null;
const computedFileImage = (isDragActive && isDragAccept) || isUploading ? ((0, jsx_runtime_1.jsx)(DocumentArrowUpIconSolid_1.DocumentArrowUpIconSolid, { className: "n-size-token-48 n-text-primary-bg-strong" })) : ((0, jsx_runtime_1.jsx)(XCircleIconSolid_1.XCircleIconSolid, { className: "n-size-token-48 n-text-danger-bg-strong" }));
const wrapperClasses = (0, classnames_1.default)('ndl-dropzone', className, {
'ndl-drag-active': isDragActive,
'ndl-drag-disabled': dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.disabled,
'ndl-file-invalid': isDragActive && isDragReject,
});
(0, react_2.useMemo)(() => {
if (isDragActive && isRejected) {
setIsRejected(false);
}
}, [isDragActive, isRejected]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRejected && ((0, jsx_runtime_1.jsxs)(banner_1.Banner, { className: "ndl-dropzone-error-alert", variant: "danger", children: [(0, jsx_runtime_1.jsx)(banner_1.Banner.Header, { children: "Error" }), (0, jsx_runtime_1.jsx)(banner_1.Banner.Description, { children: Boolean(rejectedText) || 'File extension not supported.' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: mergedRef, className: wrapperClasses, style: style }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-dropzone-inner-wrapper" }, getRootProps(), { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ "aria-label": "Drag and drop area" }, getInputProps())), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-inner", children: [width !== undefined && width > 230 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDragActive && !isSafari ? (computedFileImage) : ((0, jsx_runtime_1.jsx)(DocumentArrowUpIconOutline_1.DocumentArrowUpIconOutline, { className: "ndl-dropzone-upload-icon" })) })), !isUploading && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-dnd-title-container", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-medium", children: titleText ||
(heading !== null && heading !== void 0 ? heading : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Drag ", (0, jsx_runtime_1.jsx)("span", { className: "n-font-light", children: "&" }), " Drop"] }))) }), !isDragReject && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-dnd-subtitle", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: "or" }), ' ', (0, jsx_runtime_1.jsx)("button", { className: "ndl-dnd-browse-link", onClick: () => open(), disabled: isDisabled, type: "button", children: "Browse" })] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-footer", children: [isUploading && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingElement }), !isUploading && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-dropzone-loading-progress-bar-wrapper", children: [(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}%` }), Boolean(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, Object.assign({ className: (0, classnames_1.default)('ndl-dropzone-loading-progress-bar', className), value: progressBarPrecentage, size: "large", htmlAttributes: htmlAttributes, ref: ref, style: style }, restProps))] }));
};
const Dropzone = Object.assign(DropzoneComponent, {
LoadingProgressBar: DropzoneLoadingProgressBarComponent,
});
exports.Dropzone = Dropzone;
//# sourceMappingURL=Dropzone.js.map