@reykjavik/hanna-react 0.10.62 → 0.10.65

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.63 – 0.10.65
+
+_2022-08-29_
+
+- feat: Changes to `FileInput`
+  - feat: Add prop `FileList` to suppress (`false`) or customize its rendering
+  - feat: Add props `multiple`, `accept`
+  - feat: Deprecate prop `dropzoneProps`
+  - fix: report deleted when adding files in single-file mode
+  - fix: Make `dropZoneProps` optional, as originally indented
+  - fix: Re-populate the file input on `value` prop change
+  - feat: Explicitly skip rendering input element when `name` is missing
+- fix: Hide `Carousel` mouse-cursor scroll controls at start/end positions
+- fix: Pass `id` and other HTML props to static (span) `TagPill`s
+
 ## 0.10.62
 
 _2022-08-23_

package/FileInput/_FileInput.utils.d.ts

@@ -0,0 +1,36 @@
+export declare type CustomFile = {
+    preview?: string;
+} & File;
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+export declare const addPreview: (file: CustomFile) => void;
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+export declare const releasePreview: (file: CustomFile) => void;
+/**
+ * Small+stupid file size pretty-printer.
+ */
+export declare const formatBytes: (bytes: number, decimals?: number) => string;
+/**
+ * Figures out how to handle adding files to a FileInput
+ * Which files to retaine, which too delete, and
+ * what the updated fileList should look like.
+ *
+ *
+ */
+export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
+    fileList: File[];
+    diff: {
+        added: File[];
+        deleted: File[];
+    } | {
+        added: File[];
+        deleted?: undefined;
+    };
+};

package/FileInput/_FileInput.utils.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileListUpdate = exports.formatBytes = exports.releasePreview = exports.addPreview = void 0;
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+const addPreview = (file) => {
+    if (!('preview' in file)) {
+        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
+    }
+};
+exports.addPreview = addPreview;
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+const releasePreview = (file) => {
+    file.preview && URL.revokeObjectURL(file.preview);
+    delete file.preview;
+};
+exports.releasePreview = releasePreview;
+/**
+ * Small+stupid file size pretty-printer.
+ */
+const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+};
+exports.formatBytes = formatBytes;
+/**
+ * Figures out how to handle adding files to a FileInput
+ * Which files to retaine, which too delete, and
+ * what the updated fileList should look like.
+ *
+ *
+ */
+const getFileListUpdate = (oldFileList, added, 
+/**
+ * `replaceMode: true` is the default "single-file" input behavior.
+ *
+ * Pass `false` to this argument when the "multiple" prop is true.
+ */
+replaceMode) => {
+    const deleted = replaceMode ? oldFileList : [];
+    const retained = [];
+    if (!replaceMode) {
+        oldFileList.forEach((oldFile) => {
+            if (added.find(({ name }) => name === oldFile.name)) {
+                deleted.push(oldFile);
+            }
+            else {
+                retained.push(oldFile);
+            }
+        });
+    }
+    return {
+        fileList: retained.concat(added),
+        diff: deleted.length ? { added, deleted } : { added },
+    };
+};
+exports.getFileListUpdate = getFileListUpdate;

package/FileInput/_FileInputFileList.d.ts

@@ -0,0 +1,11 @@
+import type { formatBytes } from './_FileInput.utils';
+import { CustomFile } from './_FileInput.utils';
+export declare type FileListProps = {
+    files: Array<CustomFile>;
+    showFileSize?: boolean;
+    showImagePreviews?: boolean;
+    removeFileText: string;
+    removeFile: (file: File | string) => void;
+    formatBytes: typeof formatBytes;
+};
+export declare const DefaultFileList: (props: FileListProps) => JSX.Element | null;

package/FileInput/_FileInputFileList.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultFileList = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DefaultFileList = (props) => {
+    const { files, showFileSize, showImagePreviews, removeFileText, removeFile, formatBytes, } = props;
+    if (!files.length) {
+        return null;
+    }
+    return (react_1.default.createElement("ul", { className: "FileInput__filelist" }, files.map((file) => (react_1.default.createElement("li", { key: file.name, className: "FileInput__file" },
+        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": removeFileText }, removeFileText),
+        react_1.default.createElement("span", { className: "FileInput__fileinfo" },
+            showImagePreviews && file.preview && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "FileInput__preview" },
+                    react_1.default.createElement("img", { src: file.preview })),
+                ' ')),
+            react_1.default.createElement("span", { className: "FileInput__filename" }, file.name),
+            showFileSize && (react_1.default.createElement("small", { className: "FileInput__filesize" },
+                " - (",
+                formatBytes(file.size),
+                ")"))))))));
+};
+exports.DefaultFileList = DefaultFileList;

package/FileInput.d.ts

@@ -1,14 +1,23 @@
+import { FileListProps } from './FileInput/_FileInputFileList';
 import { FormFieldWrappingProps } from './FormField';
-declare type dropzonePropsProps = {
-    accept?: string;
-    multiple?: boolean;
-};
 export declare type FileInputProps = {
-    dropzoneProps: dropzonePropsProps;
+    /**
+     * Flags if the input should accept multiple, or just a single file at a time.
+     *
+     * Default: `true`
+     */
+    multiple?: boolean;
+    /**
+     * Accepted file mime type(s).
+     *
+     * Default: no restrictions.
+     */
+    accept?: string | Array<string>;
     dropzoneText: string | JSX.Element;
+    removeFileText: string;
     showFileSize?: boolean;
     showImagePreviews?: boolean;
-    removeFileText: string;
+    FileList?: false | ((props: FileListProps) => JSX.Element | null);
     onFilesUpdated?: (
     /** Updated, full list of Files. */
     files: Array<File>, 
@@ -27,6 +36,13 @@ export declare type FileInputProps = {
     }) => void;
     name?: string;
     value?: ReadonlyArray<File>;
+    /**
+     * @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11)
+     */
+    dropzoneProps?: {
+        accept?: string;
+        multiple?: boolean;
+    };
 } & FormFieldWrappingProps;
 declare const FileInput: (props: FileInputProps) => JSX.Element;
 export default FileInput;

package/FileInput.js

@@ -5,26 +5,9 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone"); // https://react-dropzone.js.org/#!/Dropzone
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const _FileInput_utils_1 = require("./FileInput/_FileInput.utils");
+const _FileInputFileList_1 = require("./FileInput/_FileInputFileList");
 const FormField_1 = tslib_1.__importDefault(require("./FormField"));
-/**
- * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
- *
- * The preview's value is either a data URI (for image-type files) or `undefined`
- */
-const addPreview = (file) => {
-    if (!('preview' in file)) {
-        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
-    }
-};
-/**
- * Revokes `preview` data URIs to avoid memory leaks
- *
- * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
- */
-const releasePreview = (file) => {
-    file.preview && URL.revokeObjectURL(file.preview);
-    delete file.preview;
-};
 const arrayToFileList = (arr) => {
     const fileList = new DataTransfer();
     arr.forEach((item) => {
@@ -32,114 +15,108 @@ const arrayToFileList = (arr) => {
     });
     return fileList.files;
 };
-const formatBytes = (bytes, decimals = 2) => {
-    if (bytes === 0) {
-        return '0 Bytes';
-    }
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
-};
 const FileInput = (props) => {
-    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
+    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_1.DefaultFileList, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
     const domid = (0, hooks_1.useDomid)(id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
     const files = value;
     const [isHover, setIsHover] = (0, react_1.useState)(false);
-    const { getRootProps, getInputProps, isDragReject, inputRef } = (0, react_dropzone_1.useDropzone)(Object.assign({ onDrop: (acceptedFiles) => {
+    const { getRootProps, getInputProps, isDragReject, inputRef } = (0, react_dropzone_1.useDropzone)({
+        onDrop: (acceptedFiles) => {
             acceptedFiles = acceptedFiles.map((file) => {
-                addPreview(file);
+                (0, _FileInput_utils_1.addPreview)(file);
                 return file;
             });
-            addFiles(acceptedFiles); // eslint-disable-line
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            addFiles(acceptedFiles);
             setIsHover(false);
-        }, onDropRejected: (rejectedFiles) => {
+        },
+        onDropRejected: (rejectedFiles) => {
             window.alert('Error:\n' +
                 rejectedFiles
                     .map((elm) => {
                     return elm.name;
                 })
                     .join(', '));
-        }, onDragEnter: () => {
+        },
+        onDragEnter: () => {
             // 'dragLeave' always fires right after 'dragEnter', use 'dragOver' instead
             // console.log('enter');
             // setIsHover(true);
-        }, onDragLeave: () => {
+        },
+        onDragLeave: () => {
             // console.log('leave');
             setIsHover(false);
-        }, onDragOver: () => {
+        },
+        onDragOver: () => {
             // TODO: add error icon? 'isDragReject' gives unstable results
             // console.log(isDragReject);
             setIsHover(true);
-        } }, dropzoneProps));
-    // Add previews on incoming files
+        },
+        multiple,
+        accept,
+    });
+    // Synchronoyusly add previews on incoming files
     // (NOTE: `addPreview` ignores files that already have preview.)
-    files.forEach(addPreview);
-    (0, react_1.useEffect)(() => () => {
-        // Make sure to revoke the data uris on unmount to avoid memory leaks
-        files.forEach(releasePreview);
+    files.forEach(_FileInput_utils_1.addPreview);
+    (0, react_1.useEffect)(() => {
+        if (fileInput.current) {
+            fileInput.current.files = arrayToFileList(files);
+        }
+        return () => {
+            // Make sure to revoke the data uris on unmount to avoid memory leaks
+            files.forEach(_FileInput_utils_1.releasePreview);
+        };
     }, [files]);
-    const removeFile = (name) => {
+    const removeFile = (removeTarget) => {
+        const deleted = [];
+        const targetName = typeof removeTarget !== 'string' ? removeTarget.name : removeTarget;
+        const fileList = files.filter((file) => {
+            if (file.name !== targetName) {
+                return true;
+            }
+            deleted.push(file);
+            (0, _FileInput_utils_1.releasePreview)(file);
+            return false;
+        });
         if (fileInput.current) {
-            const deleted = [];
-            const newFileList = files.filter((file) => {
-                if (file.name !== name) {
-                    return true;
-                }
-                deleted.push(file);
-                releasePreview(file);
-                return false;
-            });
-            fileInput.current.files = arrayToFileList(newFileList);
-            onFilesUpdated(newFileList, { deleted });
+            fileInput.current.files = arrayToFileList(fileList);
         }
+        onFilesUpdated(fileList, { deleted });
     };
     const addFiles = (added) => {
+        const { fileList, diff } = (0, _FileInput_utils_1.getFileListUpdate)(files, added, !multiple);
         if (fileInput.current) {
-            const deleted = [];
-            const retained = [];
-            const oldFiles = dropzoneProps.multiple ? files : [];
-            oldFiles.forEach((oldFile) => {
-                if (added.find(({ name }) => name === oldFile.name)) {
-                    deleted.push(oldFile);
-                }
-                else {
-                    retained.push(oldFile);
-                }
-            });
-            const newFileList = retained.concat(added);
-            fileInput.current.files = arrayToFileList(newFileList);
-            const diff = deleted.length ? { added, deleted } : { added };
-            onFilesUpdated(newFileList, diff);
+            fileInput.current.files = arrayToFileList(fileList);
         }
         if (inputRef.current) {
             // Empty on every add
             inputRef.current.files = arrayToFileList([]);
         }
+        onFilesUpdated(fileList, diff);
     };
-    const filesList = files.map((file) => (react_1.default.createElement("li", { key: file.name, className: "FileInput__file" },
-        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file.name), "aria-label": removeFileText }, removeFileText),
-        react_1.default.createElement("span", { className: "FileInput__fileinfo" },
-            showImagePreviews && file.preview && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: "FileInput__preview" },
-                    react_1.default.createElement("img", { src: file.preview })),
-                ' ')),
-            react_1.default.createElement("span", { className: "FileInput__filename" }, file.name),
-            showFileSize && (react_1.default.createElement("small", { className: "FileInput__filesize" },
-                " - (",
-                formatBytes(file.size),
-                ")"))))));
-    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('FileInput', [dropzoneProps.multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
+    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('FileInput', [multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },
-                react_1.default.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: dropzoneProps.multiple || undefined, required: inputProps.required }),
-                ' ',
-                react_1.default.createElement("input", Object.assign({ className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: dropzoneProps.multiple || undefined }, inputProps, { required: undefined })),
+                // Explicitly skip rendering of input element if no
+                // name prop is provided. This is implicitly what the
+                // browser does on form submit.
+                // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+                inputElementProps.name ? (react_1.default.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: multiple || undefined, required: inputProps.required })) : null,
+                react_1.default.createElement("input", Object.assign({ 
+                    // fa
+                    className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
                 ' ',
                 react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
                     react_1.default.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
-                filesList.length ? react_1.default.createElement("ul", { className: "FileInput__filelist" }, filesList) : ''));
+                FileList && (react_1.default.createElement(FileList, Object.assign({}, {
+                    files,
+                    showFileSize,
+                    showImagePreviews,
+                    removeFileText,
+                    removeFile,
+                    formatBytes: _FileInput_utils_1.formatBytes,
+                })))));
         } }));
 };
 exports.default = FileInput;

package/TagPill.js

@@ -18,10 +18,11 @@ const TagPill = (props) => {
         removable &&
         isStatic &&
         !onRemove &&
-        console.warn('static (non-button) `TagPill`s must not be removable');
+        console.warn('Removable static (non-button) `TagPill`s ' +
+            'must have an `onRemove` handler defined');
     const modifiers = [modifier, large && 'large', colors[color]];
     const removeBtn = removable && (react_1.default.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
-    return isStatic ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },
+    return isStatic ? (react_1.default.createElement("span", Object.assign({ className: (0, getBemClass_1.default)('TagPill', modifiers) }, buttonProps),
         label,
         " ",
         removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },

package/_abstract/_AbstractCarousel.js

@@ -95,14 +95,14 @@ const AbstractCarousel = (props) => {
         title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
         isBrowser ? (react_1.default.createElement("div", { className: bem + '__itemlist-wrapper' },
             itemList,
-            react_1.default.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
+            activeItem > 0 && (react_1.default.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
                     delayedScrollLeft.cancel();
                     scrollToItem(activeItem - 1);
-                }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() }),
-            react_1.default.createElement("div", { className: bem + '__itemlist-goRight', onClick: () => {
+                }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() })),
+            activeItem < itemCount - 1 && (react_1.default.createElement("div", { className: bem + '__itemlist-goRight', onClick: () => {
                     delayedScrollRight.cancel();
                     scrollToItem(activeItem + 1);
-                }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() }))) : (itemList),
+                }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() })))) : (itemList),
         isBrowser && (react_1.default.createElement(CarouselStepper_1.default, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
 };
 exports.default = AbstractCarousel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.62",
+	"version": "0.10.65",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -15,8 +15,8 @@
 	"dependencies": {
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.17",
-		"@reykjavik/hanna-css": "^0.3.3",
-		"@reykjavik/hanna-utils": "^0.1.7",
+		"@reykjavik/hanna-css": "^0.3.7",
+		"@reykjavik/hanna-utils": "^0.1.11",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",