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

package/dist/fthry_index.DQuVxHkp.js

@@ -0,0 +1,253 @@
+import { j as jsxs, a as __assign, b as jsx, _ as __read, a6 as isEmptyArray, a7 as toList, a8 as useThumbnailData, a4 as __spreadArray, f as imgMaxSizeStyles, c as __awaiter, d as __generator, a9 as downloadFile, aa as CloseIcon, i as iosScrollOnFocus, k as FORM_Z_INDEX, ab as justRemove } from './fthry_index.CdIRvNp8.js';
+import { useRef, useState, useEffect } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+
+function FileUploadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '48px' : _b, style = _a.style;
+    return (jsxs("svg", __assign({ width: width, viewBox: '0 0 48 48', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: style }, { children: [jsx("path", { d: 'm18.101 30.078 5.9-5.888 5.898 5.888M24 40.3V24.19', stroke: '#414859' }), 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 (jsx("svg", __assign({ width: width, height: height, viewBox: '0 0 26 26', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, { children: 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 = useRef(null);
+    var _g = __read(useState([]), 2), rawFiles = _g[0], setRawFiles = _g[1];
+    var _h = __read(useState(-1), 2), hoverDownload = _h[0], setHoverDownload = _h[1];
+    var _j = __read(useState(new Set()), 2), failedThumbnails = _j[0], setFailedThumbnails = _j[1];
+    useEffect(function () {
+        // Prevent infinite loop of setting a new empty array as the value
+        if (isEmptyArray(rawFiles) && isEmptyArray(initialFiles))
+            return;
+        // Normalize placeholders like [null] to an empty list
+        setRawFiles(toList(initialFiles).filter(Boolean));
+    }, [initialFiles]);
+    // Reset failed thumbnails when file list changes
+    useEffect(function () {
+        setFailedThumbnails(new Set());
+    }, [rawFiles.length]);
+    // Thumbnails derived from current files; rawFiles is normalized to exclude nulls
+    var thumbnailData = 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 = __spreadArray([], __read(servar.metadata.file_types), false);
+    if (servar.metadata.custom_file_types)
+        allowedFileTypes.push.apply(allowedFileTypes, __spreadArray([], __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 __awaiter(_this, void 0, void 0, function () {
+        var files, existingCount, uploadedFiles, newRawFiles, length_1;
+        var _a, _b, _c;
+        return __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 = __spreadArray(__spreadArray([], __read(rawFiles), false), __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) {
+        return function () {
+            var newRawFiles = justRemove(rawFiles, index);
+            setRawFiles(newRawFiles);
+            customOnChange(newRawFiles, -1);
+        };
+    }
+    var imgStyles = __assign(__assign({}, imgMaxSizeStyles), responsiveStyles.getTarget('img'));
+    var icon = element.properties.icon ? (jsx("img", { src: element.properties.icon, style: __assign(__assign({}, imgStyles), { maxWidth: '100%', height: 'auto' }), alt: '' })) : (jsx(FileUploadIcon, { width: imgStyles.width && imgStyles.width !== 'px'
+            ? imgStyles.width
+            : undefined, style: { maxHeight: '100%' } }));
+    return (jsxs("div", __assign({ css: __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) {
+                    var filename = _a.filename, thumbnail = _a.thumbnail;
+                    return index < rawFiles.length ? (jsxs("div", __assign({ css: __assign(__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); }, onMouseLeave: function () { return setHoverDownload(-1); } }, { children: [hoverDownload === index && (jsx("div", __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 __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            _a = downloadFile;
+                                            return [4 /*yield*/, rawFiles[index]];
+                                        case 1: return [2 /*return*/, _a.apply(void 0, [(_b.sent())])];
+                                    }
+                                }); }); } }, { children: jsx(DownloadIcon, {}) }))), thumbnail && !failedThumbnails.has(index) ? (jsx("img", { src: thumbnail, onError: function () {
+                                    return setFailedThumbnails(function (prev) { return new Set(prev).add(index); });
+                                }, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'contain'
+                                }, alt: filename || '' })) : (jsx("span", __assign({ style: {
+                                    height: '100%',
+                                    width: '100%',
+                                    wordBreak: 'break-all',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    textAlign: 'center'
+                                } }, { children: filename || 'File' }))), jsx("div", __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)();
+                                } }, { children: jsx(CloseIcon, { fill: 'white', width: 12, height: 12 }) }))] }), index)) : null;
+                }), (allowMoreFiles || hidePreview) && (jsxs("div", __assign({ onClick: onClick, css: __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 && (jsx("div", __assign({ css: responsiveStyles.getTarget('add') }, { children: servar.name })))] }))), 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: iosScrollOnFocus, style: {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    opacity: 0,
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: FORM_Z_INDEX - 2
+                } })] })));
+}
+
+export { FileUploadField as default };

package/dist/fthry_index.Dd5mpmpk.js

@@ -0,0 +1,39 @@
+import { b as jsx, a as __assign, _ as __read, j as jsxs, E as ErrorInput } from './fthry_index.CdIRvNp8.js';
+import { useState } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+
+function RatingStar(props) {
+    return (jsx("svg", __assign({ width: '32', viewBox: '0 0 32 31', fill: '#D9D9D9', xmlns: 'http://www.w3.org/2000/svg' }, props, { children: jsx("path", { d: 'M24.9576 20.3922C24.8671 19.8489 25.0482 19.2875 25.4466 18.9072L31.2598 13.1846C31.6401 12.8224 31.7849 12.3515 31.7668 11.8988C31.7668 11.8263 31.7668 11.7539 31.7487 11.6815C31.6763 11.3555 31.5314 11.0476 31.296 10.8122L31.2055 10.7216C31.1873 10.7126 31.1738 10.699 31.1602 10.6854C31.1466 10.6718 31.133 10.6583 31.1149 10.6492C30.8976 10.4862 30.6259 10.3595 30.3181 10.3232L30.137 10.3051L22.2593 9.16422C21.9514 9.1099 21.6798 8.98313 21.4444 8.80203C21.2633 8.65715 21.1003 8.45795 20.9916 8.24063L17.3878 0.942454C17.098 0.344836 16.5367 0.0188638 15.9571 0.000754181C15.3414 -0.0173554 14.7076 0.290508 14.3816 0.942454L10.7778 8.24063C10.5424 8.7477 10.0534 9.09179 9.51012 9.16422L1.45135 10.3413C0.0569115 10.5406 -0.48639 12.2429 0.509634 13.2208L6.34093 18.9072C6.73936 19.2875 6.92044 19.8489 6.8299 20.3922L5.45356 28.4148C5.43547 28.5595 5.43546 28.6862 5.43546 28.8129C5.47167 29.3018 5.70711 29.7186 6.05118 30.0084C6.54014 30.4068 7.24642 30.5336 7.89837 30.1895L13.0053 27.5093L15.1241 26.4046C15.4139 26.2597 15.7398 26.1873 16.0658 26.2235C16.2831 26.2416 16.5004 26.2959 16.6996 26.4046L16.7358 26.4227L23.527 29.9903L23.8892 30.1895C25.1206 30.8414 26.5694 29.7911 26.3339 28.4148L24.9576 20.3922Z' }) })));
+}
+
+function Heart(props) {
+    return (jsx("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', width: '32', viewBox: '0 0 24 24', fill: '#000000' }, props, { children: jsx("path", { d: 'M12 5.881C12.981 4.729 14.484 4 16.05 4C18.822 4 21 6.178 21 8.95C21 12.3492 17.945 15.1195 13.3164 19.3167L13.305 19.327L12 20.515L10.695 19.336L10.6595 19.3037C6.04437 15.1098 3 12.3433 3 8.95C3 6.178 5.178 4 7.95 4C9.516 4 11.019 4.729 12 5.881Z' }) })));
+}
+
+function RatingField(_a) {
+    var _b;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, fieldVal = _a.fieldVal, editMode = _a.editMode, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
+    var _f = __read(useState(null), 2), hoverIndex = _f[0], setHoverIndex = _f[1];
+    var servar = element.servar;
+    var numRatings = (_b = servar.max_length) !== null && _b !== void 0 ? _b : 5;
+    // If no field value, default to 1 less than the max
+    fieldVal = fieldVal !== null && fieldVal !== void 0 ? fieldVal : numRatings - 1;
+    var Icon = element.styles.icon_type === 'heart' ? Heart : RatingStar;
+    return (jsxs("div", __assign({ css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: { display: 'flex', justifyContent: 'space-around' } }, { children: [Array(numRatings)
+                        .fill(null)
+                        .map(function (_, index) {
+                        var activeStyles = {};
+                        if (hoverIndex === null) {
+                            if (index <= fieldVal - 1)
+                                activeStyles = responsiveStyles.getTarget('selectedRating');
+                        }
+                        else if (index <= hoverIndex)
+                            activeStyles = responsiveStyles.getTarget('hoverRating');
+                        return (jsx(Icon, { onClick: function () { return onChange(index + 1); }, onMouseEnter: function () { return setHoverIndex(index); }, onMouseLeave: function () { return setHoverIndex(null); }, css: __assign(__assign({ pointerEvents: editMode || disabled ? 'none' : 'auto', cursor: editMode || disabled ? 'default' : 'pointer', width: "".concat(100 / numRatings, "%"), paddingRight: '5px' }, responsiveStyles.getTarget('field')), activeStyles) }, index));
+                    }), jsx(ErrorInput, { id: servar.key, name: servar.key, "aria-label": element.properties.aria_label })] }))] })));
+}
+
+export { RatingField as default };