@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/cjs/fthry_index.CFas_RaG.js

@@ -0,0 +1,255 @@
+'use strict';
+
+var index = require('./fthry_index.YHxFZskW.js');
+var React = require('react');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+function FileUploadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '48px' : _b, style = _a.style;
+    return (index.jsxs("svg", index.__assign({ width: width, viewBox: '0 0 48 48', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: style }, { children: [index.jsx("path", { d: 'm18.101 30.078 5.9-5.888 5.898 5.888M24 40.3V24.19', stroke: '#414859' }), index.jsx("path", { d: 'M34.988 36.336c5 0 9.012-4.056 9.012-9.112s-4.012-9.112-9.012-9.112c0-5.585-4.476-10.112-10-10.112-4.244 0-7.848 2.646-9.302 6.408-.232 0-.465-.059-.698-.059C8.942 14.35 4 19.288 4 25.46c0 6.114 4.884 11.111 10.988 11.111', stroke: '#414859' })] })));
+}
+
+function DownloadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 26 : _b, _c = _a.height, height = _c === void 0 ? 26 : _c;
+    return (index.jsx("svg", index.__assign({ width: width, height: height, viewBox: '0 0 26 26', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, { children: index.jsx("path", { d: 'M1 19.3529V22.1765C1 22.9253 1.31607 23.6435 1.87868 24.173C2.44129 24.7025 3.20435 25 4 25H22C22.7956 25 23.5587 24.7025 24.1213 24.173C24.6839 23.6435 25 22.9253 25 22.1765V19.3529M5.5 10.8824L13 17.9412M13 17.9412L20.5 10.8824M13 17.9412V1', stroke: 'white', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) })));
+}
+
+var DEFAULT_FILE_SIZE_LIMIT = 1024 * 1024 * 10;
+var NUM_FILES_LIMIT = 20;
+function FileUploadField(_a) {
+    var _this = this;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, editMode = _a.editMode, _d = _a.onChange, customOnChange = _d === void 0 ? function () { } : _d, _e = _a.initialFiles, initialFiles = _e === void 0 ? [] : _e, _f = _a.elementProps, elementProps = _f === void 0 ? {} : _f, children = _a.children;
+    var servar = element.servar;
+    var showLabel = servar.name !== '';
+    var isMultiple = servar.metadata.multiple;
+    var fileInput = React.useRef(null);
+    var _g = index.__read(React.useState([]), 2), rawFiles = _g[0], setRawFiles = _g[1];
+    var _h = index.__read(React.useState(-1), 2), hoverDownload = _h[0], setHoverDownload = _h[1];
+    var _j = index.__read(React.useState(new Set()), 2), failedThumbnails = _j[0], setFailedThumbnails = _j[1];
+    React.useEffect(function () {
+        // Prevent infinite loop of setting a new empty array as the value
+        if (index.isEmptyArray(rawFiles) && index.isEmptyArray(initialFiles))
+            return;
+        // Normalize placeholders like [null] to an empty list
+        setRawFiles(index.toList(initialFiles).filter(Boolean));
+    }, [initialFiles]);
+    // Reset failed thumbnails when file list changes
+    React.useEffect(function () {
+        setFailedThumbnails(new Set());
+    }, [rawFiles.length]);
+    // Thumbnails derived from current files; rawFiles is normalized to exclude nulls
+    var thumbnailData = index.useThumbnailData(rawFiles);
+    var hasFiles = rawFiles.length > 0;
+    var allowMoreFiles = isMultiple || !hasFiles;
+    var hidePreview = element.styles.hide_file_preview;
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var files = e.dataTransfer.files;
+        if (allowMoreFiles)
+            handleFiles(files);
+    };
+    var handleChange = function (event) {
+        var files = event.target.files;
+        if (files && allowMoreFiles)
+            handleFiles(files);
+    };
+    var onClick = function () {
+        var _a;
+        if (!allowMoreFiles && !hidePreview)
+            return;
+        if (disabled)
+            return;
+        (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var allowedFileTypes = index.__spreadArray([], index.__read(servar.metadata.file_types), false);
+    if (servar.metadata.custom_file_types)
+        allowedFileTypes.push.apply(allowedFileTypes, index.__spreadArray([], index.__read(servar.metadata.custom_file_types.map(function (type) { return ".".concat(type); })), false));
+    var isFileTypeMatch = function (file, allowedType) {
+        var _a;
+        // handle image/* or video/* etc.
+        if (allowedType.endsWith('/*')) {
+            var typeCategory = allowedType.split('/')[0];
+            return file.type.startsWith(typeCategory + '/');
+        }
+        // handle specific file types like application/pdf
+        if (allowedType.includes('/')) {
+            return file.type === allowedType;
+        }
+        var extension = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        return allowedType.toLowerCase() === extension;
+    };
+    var validateFileTypes = function (files) {
+        if (allowedFileTypes.length === 0)
+            return;
+        var individualTypes = allowedFileTypes.flatMap(function (str) {
+            return str.split(',').map(function (item) { return item.trim(); });
+        });
+        var invalidFiles = files.filter(function (file) { return !individualTypes.some(function (type) { return isFileTypeMatch(file, type); }); });
+        if (invalidFiles.length > 0) {
+            throw new Error("Invalid file type. Allowed types: ".concat(allowedFileTypes.join(', ')));
+        }
+    };
+    var fileSizeLimit = servar.max_length
+        ? servar.max_length * 1024
+        : DEFAULT_FILE_SIZE_LIMIT;
+    var validateFileSizes = function (files) {
+        if (files.some(function (file) { return file.size > fileSizeLimit; })) {
+            var sizeLabel = '';
+            if (fileSizeLimit < 1024)
+                sizeLabel = "".concat(fileSizeLimit, " bytes");
+            else if (fileSizeLimit <= 1024 * 1024) {
+                var kbSize = Math.floor(fileSizeLimit / 1024);
+                sizeLabel = "".concat(kbSize, " kb");
+            }
+            else {
+                var mbSize = Math.floor(fileSizeLimit / (1024 * 1024));
+                sizeLabel = "".concat(mbSize, " mb");
+            }
+            throw new Error("File exceeds max size of ".concat(sizeLabel));
+        }
+    };
+    // When the user uploads files to the multi-file upload, we just append to the existing set
+    // By default the input element would just replace all the uploaded files (we don't want that)
+    var handleFiles = function (filelist) { return index.__awaiter(_this, void 0, void 0, function () {
+        var files, existingCount, uploadedFiles, newRawFiles, length_1;
+        var _a, _b, _c;
+        return index.__generator(this, function (_d) {
+            if (disabled)
+                return [2 /*return*/];
+            files = Array.from(filelist);
+            if (!isMultiple) {
+                files = [files[0]];
+            }
+            try {
+                if (files.some(function (file) { return !file || !(file instanceof File) || file.size <= 0; })) {
+                    throw new Error('Some files are invalid');
+                }
+                validateFileTypes(files);
+                validateFileSizes(files);
+                existingCount = hidePreview ? 0 : rawFiles.length;
+                if (files.length + existingCount > NUM_FILES_LIMIT) {
+                    // Splice off the uploaded files past the upload limit
+                    files.splice(NUM_FILES_LIMIT - existingCount);
+                }
+                uploadedFiles = files.map(function (file) { return Promise.resolve(file); });
+                newRawFiles = void 0;
+                if (hidePreview) {
+                    newRawFiles = uploadedFiles;
+                    length_1 = 0;
+                }
+                else {
+                    newRawFiles = index.__spreadArray(index.__spreadArray([], index.__read(rawFiles), false), index.__read(uploadedFiles), false);
+                    length_1 = existingCount;
+                }
+                setRawFiles(newRawFiles);
+                customOnChange(newRawFiles, length_1);
+                (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
+                // Wipe the value of the upload element so we can upload multiple copies of the same file
+                // If we didn't do this, then uploading the same file wouldn't re-trigger onChange
+                if (fileInput.current) {
+                    fileInput.current.value = '';
+                }
+            }
+            catch (error) {
+                (_b = fileInput.current) === null || _b === void 0 ? void 0 : _b.setCustomValidity(error.message);
+                (_c = fileInput.current) === null || _c === void 0 ? void 0 : _c.reportValidity();
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    function onClear(index$1) {
+        return function () {
+            var newRawFiles = index.justRemove(rawFiles, index$1);
+            setRawFiles(newRawFiles);
+            customOnChange(newRawFiles, -1);
+        };
+    }
+    var imgStyles = index.__assign(index.__assign({}, index.imgMaxSizeStyles), responsiveStyles.getTarget('img'));
+    var icon = element.properties.icon ? (index.jsx("img", { src: element.properties.icon, style: index.__assign(index.__assign({}, imgStyles), { maxWidth: '100%', height: 'auto' }), alt: '' })) : (index.jsx(FileUploadIcon, { width: imgStyles.width && imgStyles.width !== 'px'
+            ? imgStyles.width
+            : undefined, style: { maxHeight: '100%' } }));
+    return (index.jsxs("div", index.__assign({ css: index.__assign({ display: 'flex', flexWrap: 'wrap', position: 'relative', pointerEvents: editMode ? 'none' : 'auto', width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { onDragOver: handleDragOver, onDrop: disabled ? undefined : handleDrop }, { children: [children, !hidePreview &&
+                thumbnailData.map(function (_a, index$1) {
+                    var filename = _a.filename, thumbnail = _a.thumbnail;
+                    return index$1 < rawFiles.length ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({ position: 'relative', width: '100%', maxHeight: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box' }, (thumbnail
+                            ? {}
+                            : { paddingLeft: '20px', paddingRight: '20px' })), responsiveStyles.getTarget('field')), onMouseEnter: function () { return setHoverDownload(index$1); }, onMouseLeave: function () { return setHoverDownload(-1); } }, { children: [hoverDownload === index$1 && (index.jsx("div", index.__assign({ css: {
+                                    position: 'absolute',
+                                    margin: 'auto',
+                                    left: 0,
+                                    right: 0,
+                                    top: 0,
+                                    bottom: 0,
+                                    width: '48px',
+                                    height: '48px',
+                                    borderRadius: '8px',
+                                    backgroundColor: '#3E414D80',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center'
+                                }, onClick: function () { return index.__awaiter(_this, void 0, void 0, function () { var _a; return index.__generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            _a = index.downloadFile;
+                                            return [4 /*yield*/, rawFiles[index$1]];
+                                        case 1: return [2 /*return*/, _a.apply(void 0, [(_b.sent())])];
+                                    }
+                                }); }); } }, { children: index.jsx(DownloadIcon, {}) }))), thumbnail && !failedThumbnails.has(index$1) ? (index.jsx("img", { src: thumbnail, onError: function () {
+                                    return setFailedThumbnails(function (prev) { return new Set(prev).add(index$1); });
+                                }, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'contain'
+                                }, alt: filename || '' })) : (index.jsx("span", index.__assign({ style: {
+                                    height: '100%',
+                                    width: '100%',
+                                    wordBreak: 'break-all',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    textAlign: 'center'
+                                } }, { children: filename || 'File' }))), index.jsx("div", index.__assign({ css: {
+                                    position: 'absolute',
+                                    top: '4px',
+                                    right: '4px',
+                                    color: 'white',
+                                    background: '#AAA',
+                                    height: '16px',
+                                    width: '16px',
+                                    borderRadius: '50%',
+                                    pointerEvents: disabled ? 'none' : 'auto',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    transition: '0.2s ease all',
+                                    '&:hover': { backgroundColor: '#BBB' }
+                                }, role: 'button', "aria-label": 'Clear file', onClick: function (event) {
+                                    var _a;
+                                    // Stop propagation so window doesn't open up to pick another file to upload
+                                    event.stopPropagation();
+                                    (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
+                                    onClear(index$1)();
+                                } }, { children: index.jsx(index.CloseIcon, { fill: 'white', width: 12, height: 12 }) }))] }), index$1)) : null;
+                }), (allowMoreFiles || hidePreview) && (index.jsxs("div", index.__assign({ onClick: onClick, css: index.__assign({ position: 'relative', pointerEvents: disabled ? 'none' : 'auto', cursor: 'pointer', maxHeight: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', overflow: 'hidden', boxSizing: 'border-box', width: '100%' }, responsiveStyles.getTarget('ac')) }, { children: [icon, showLabel && (index.jsx("div", index.__assign({ css: responsiveStyles.getTarget('add') }, { children: servar.name })))] }))), index.jsx("input", { id: servar.key, name: servar.key, ref: fileInput, type: 'file', onChange: handleChange, required: required && !hasFiles, accept: allowedFileTypes.join(',') || undefined, disabled: disabled, "aria-label": element.properties.aria_label, multiple: isMultiple, onFocus: index.iosScrollOnFocus, style: {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    opacity: 0,
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: index.FORM_Z_INDEX - 2
+                } })] })));
+}
+
+exports.default = FileUploadField;