@payloadcms/ui 3.0.0-beta.7 → 3.0.0-beta.71

package/dist/elements/EditUpload/index.js

@@ -1,78 +1,99 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import React, { forwardRef, useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
-import { Plus } from '../../icons/Plus/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import './index.scss';
 const baseClass = 'edit-upload';
-const Input = ({ name, onChange, value })=>/*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__input`
-    }, name, /*#__PURE__*/ React.createElement("input", {
-        name: name,
-        onChange: (e)=>onChange(e.target.value),
-        type: "number",
-        value: value
-    }));
-export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint })=>{
-    const { Modal, useModal } = facelessUIImport;
+const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { name, onChange, value } = props;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${baseClass}__input`,
+        children: [
+            name,
+            /*#__PURE__*/ _jsx("input", {
+                name: name,
+                onChange: (e)=>onChange(e.target.value),
+                ref: ref,
+                type: "number",
+                value: value
+            })
+        ]
+    });
+});
+const defaultCrop = {
+    height: 100,
+    unit: '%',
+    width: 100,
+    x: 0,
+    y: 0
+};
+export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
     const { closeModal } = useModal();
     const { t } = useTranslation();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
-    const { uploadEdits } = formQueryParams || {};
-    const [crop, setCrop] = useState({
-        height: uploadEdits?.crop?.height || 100,
-        unit: '%',
-        width: uploadEdits?.crop?.width || 100,
-        x: uploadEdits?.crop?.x || 0,
-        y: uploadEdits?.crop?.y || 0
-    });
-    const [pointPosition, setPointPosition] = useState({
-        x: uploadEdits?.focalPoint?.x || 50,
-        y: uploadEdits?.focalPoint?.y || 50
-    });
+    const [crop, setCrop] = useState(()=>({
+            ...defaultCrop,
+            ...initialCrop || {}
+        }));
+    const defaultFocalPosition = {
+        x: 50,
+        y: 50
+    };
+    const [focalPosition, setFocalPosition] = useState(()=>({
+            ...defaultFocalPosition,
+            ...initialFocalPoint
+        }));
     const [checkBounds, setCheckBounds] = useState(false);
-    const [originalHeight, setOriginalHeight] = useState(0);
-    const [originalWidth, setOriginalWidth] = useState(0);
-    const focalWrapRef = useRef();
-    const imageRef = useRef();
-    const cropRef = useRef();
+    const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState(0);
+    const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState(0);
+    const focalWrapRef = useRef(undefined);
+    const imageRef = useRef(undefined);
+    const cropRef = useRef(undefined);
+    const heightInputRef = useRef(null);
+    const widthInputRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const onImageLoad = (e)=>{
+        // set the default image height/width on load
+        setUncroppedPixelHeight(e.currentTarget.naturalHeight);
+        setUncroppedPixelWidth(e.currentTarget.naturalWidth);
+        setImageLoaded(true);
+    };
     const fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
-        if (dimension === 'width' && intValue >= originalWidth) return null;
-        if (dimension === 'height' && intValue >= originalHeight) return null;
-        const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight));
+        if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null;
+        if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null;
+        const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
         if (percentage === 100 || percentage === 0) return null;
         setCrop({
             ...crop,
             [dimension]: percentage
         });
     };
-    const fineTuneFocalPoint = ({ coordinate, value })=>{
+    const fineTuneFocalPosition = ({ coordinate, value })=>{
         const intValue = parseInt(value);
         if (intValue >= 0 && intValue <= 100) {
-            setPointPosition((prevPosition)=>({
+            setFocalPosition((prevPosition)=>({
                     ...prevPosition,
                     [coordinate]: intValue
                 }));
         }
     };
     const saveEdits = ()=>{
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || pointPosition ? {
-                    crop: crop || null,
-                    focalPoint: pointPosition ? pointPosition : null
-                } : null
-            }
+        if (typeof onSave === 'function') onSave({
+            crop: crop ? crop : undefined,
+            focalPoint: focalPosition,
+            heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
+            widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
         });
         closeModal(editDrawerSlug);
     };
     const onDragEnd = React.useCallback(({ x, y })=>{
-        setPointPosition({
+        setFocalPosition({
             x,
             y
         });
@@ -83,136 +104,205 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFoc
         const boundsRect = showCrop ? cropRef.current.getBoundingClientRect() : imageRef.current.getBoundingClientRect();
         const xCenter = (boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width * 100;
         const yCenter = (boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height * 100;
-        setPointPosition({
+        setFocalPosition({
             x: xCenter,
             y: yCenter
         });
     };
     const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__header`
-    }, /*#__PURE__*/ React.createElement("h2", {
-        title: `${t('general:editing')} ${fileName}`
-    }, t('general:editing'), " ", fileName), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, /*#__PURE__*/ React.createElement(Button, {
-        "aria-label": t('general:cancel'),
-        buttonStyle: "secondary",
-        className: `${baseClass}__cancel`,
-        onClick: ()=>closeModal(editDrawerSlug)
-    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
-        "aria-label": t('general:applyChanges'),
-        buttonStyle: "primary",
-        className: `${baseClass}__save`,
-        onClick: ()=>saveEdits()
-    }, t('general:applyChanges')))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__toolWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__crop`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__focal-wrapper`,
-        ref: focalWrapRef,
-        style: {
-            aspectRatio: `${originalWidth / originalHeight}`
-        }
-    }, showCrop ? /*#__PURE__*/ React.createElement(ReactCrop, {
-        className: `${baseClass}__reactCrop`,
-        crop: crop,
-        onChange: (_, c)=>setCrop(c),
-        onComplete: ()=>setCheckBounds(true),
-        renderSelectionAddon: ()=>{
-            return /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__crop-window`,
-                ref: cropRef
-            });
-        }
-    }, /*#__PURE__*/ React.createElement("img", {
-        alt: t('upload:setCropArea'),
-        onLoad: (e)=>{
-            setOriginalHeight(e.currentTarget.naturalHeight);
-            setOriginalWidth(e.currentTarget.naturalWidth);
-        },
-        ref: imageRef,
-        src: fileSrcToUse
-    })) : /*#__PURE__*/ React.createElement("img", {
-        alt: t('upload:setFocalPoint'),
-        onLoad: (e)=>{
-            setOriginalHeight(e.currentTarget.naturalHeight);
-            setOriginalWidth(e.currentTarget.naturalWidth);
-        },
-        ref: imageRef,
-        src: fileSrcToUse
-    }), showFocalPoint && /*#__PURE__*/ React.createElement(DraggableElement, {
-        boundsRef: showCrop ? cropRef : imageRef,
-        checkBounds: showCrop ? checkBounds : false,
-        className: `${baseClass}__focalPoint`,
-        containerRef: focalWrapRef,
-        initialPosition: pointPosition,
-        onDragEnd: onDragEnd,
-        setCheckBounds: showCrop ? setCheckBounds : false
-    }, /*#__PURE__*/ React.createElement(Plus, null)))), (showCrop || showFocalPoint) && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sidebar`
-    }, showCrop && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__groupWrap`
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__titleWrap`
-    }, /*#__PURE__*/ React.createElement("h3", null, t('upload:crop')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "none",
-        className: `${baseClass}__reset`,
-        onClick: ()=>setCrop({
-                height: 100,
-                unit: '%',
-                width: 100,
-                x: 0,
-                y: 0
-            })
-    }, t('general:reset')))), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__description`
-    }, t('upload:cropToolDescription')), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__inputsWrap`
-    }, /*#__PURE__*/ React.createElement(Input, {
-        name: `${t('upload:width')} (px)`,
-        onChange: (value)=>fineTuneCrop({
-                dimension: 'width',
-                value
-            }),
-        value: (crop.width / 100 * originalWidth).toFixed(0)
-    }), /*#__PURE__*/ React.createElement(Input, {
-        name: `${t('upload:height')} (px)`,
-        onChange: (value)=>fineTuneCrop({
-                dimension: 'height',
-                value
-            }),
-        value: (crop.height / 100 * originalHeight).toFixed(0)
-    }))), showFocalPoint && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__groupWrap`
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__titleWrap`
-    }, /*#__PURE__*/ React.createElement("h3", null, t('upload:focalPoint')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "none",
-        className: `${baseClass}__reset`,
-        onClick: centerFocalPoint
-    }, t('general:reset')))), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__description`
-    }, t('upload:focalPointDescription')), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__inputsWrap`
-    }, /*#__PURE__*/ React.createElement(Input, {
-        name: "X %",
-        onChange: (value)=>fineTuneFocalPoint({
-                coordinate: 'x',
-                value
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxs("h2", {
+                        title: `${t('general:editing')} ${fileName}`,
+                        children: [
+                            t('general:editing'),
+                            " ",
+                            fileName
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                "aria-label": t('general:cancel'),
+                                buttonStyle: "secondary",
+                                className: `${baseClass}__cancel`,
+                                onClick: ()=>closeModal(editDrawerSlug),
+                                children: t('general:cancel')
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                "aria-label": t('general:applyChanges'),
+                                buttonStyle: "primary",
+                                className: `${baseClass}__save`,
+                                disabled: !imageLoaded,
+                                onClick: saveEdits,
+                                children: t('general:applyChanges')
+                            })
+                        ]
+                    })
+                ]
             }),
-        value: pointPosition.x.toFixed(0)
-    }), /*#__PURE__*/ React.createElement(Input, {
-        name: "Y %",
-        onChange: (value)=>fineTuneFocalPoint({
-                coordinate: 'y',
-                value
-            }),
-        value: pointPosition.y.toFixed(0)
-    }))))));
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__toolWrap`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__crop`,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__focal-wrapper`,
+                            ref: focalWrapRef,
+                            style: {
+                                aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
+                            },
+                            children: [
+                                showCrop ? /*#__PURE__*/ _jsx(ReactCrop, {
+                                    className: `${baseClass}__reactCrop`,
+                                    crop: crop,
+                                    onChange: (_, c)=>setCrop(c),
+                                    onComplete: ()=>setCheckBounds(true),
+                                    renderSelectionAddon: ()=>{
+                                        return /*#__PURE__*/ _jsx("div", {
+                                            className: `${baseClass}__crop-window`,
+                                            ref: cropRef
+                                        });
+                                    },
+                                    children: /*#__PURE__*/ _jsx("img", {
+                                        alt: t('upload:setCropArea'),
+                                        onLoad: onImageLoad,
+                                        ref: imageRef,
+                                        src: fileSrcToUse
+                                    })
+                                }) : /*#__PURE__*/ _jsx("img", {
+                                    alt: t('upload:setFocalPoint'),
+                                    onLoad: onImageLoad,
+                                    ref: imageRef,
+                                    src: fileSrcToUse
+                                }),
+                                showFocalPoint && /*#__PURE__*/ _jsx(DraggableElement, {
+                                    boundsRef: showCrop ? cropRef : imageRef,
+                                    checkBounds: showCrop ? checkBounds : false,
+                                    className: `${baseClass}__focalPoint`,
+                                    containerRef: focalWrapRef,
+                                    initialPosition: focalPosition,
+                                    onDragEnd: onDragEnd,
+                                    setCheckBounds: showCrop ? setCheckBounds : false,
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                })
+                            ]
+                        })
+                    }),
+                    (showCrop || showFocalPoint) && /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__sidebar`,
+                        children: [
+                            showCrop && /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h3", {
+                                                    children: t('upload:crop')
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: ()=>setCrop({
+                                                            height: 100,
+                                                            unit: '%',
+                                                            width: 100,
+                                                            x: 0,
+                                                            y: 0
+                                                        }),
+                                                    children: t('general:reset')
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:cropToolDescription')
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: `${t('upload:width')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'width',
+                                                        value
+                                                    }),
+                                                ref: widthInputRef,
+                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: `${t('upload:height')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'height',
+                                                        value
+                                                    }),
+                                                ref: heightInputRef,
+                                                value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            showFocalPoint && /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h3", {
+                                                    children: t('upload:focalPoint')
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: centerFocalPoint,
+                                                    children: t('general:reset')
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:focalPointDescription')
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: "X %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'x',
+                                                        value
+                                                    }),
+                                                value: focalPosition.x.toFixed(0)
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: "Y %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'y',
+                                                        value
+                                                    }),
+                                                value: focalPosition.y.toFixed(0)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
 const DraggableElement = ({ boundsRef, checkBounds, children, className, containerRef, initialPosition = {
     x: 50,
@@ -223,7 +313,7 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         y: initialPosition.y
     });
     const [isDragging, setIsDragging] = useState(false);
-    const dragRef = useRef();
+    const dragRef = useRef(undefined);
     const getCoordinates = React.useCallback((mouseXArg, mouseYArg, recenter)=>{
         const containerRect = containerRef.current.getBoundingClientRect();
         const boundsRect = boundsRef.current.getBoundingClientRect();
@@ -310,26 +400,31 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         initialPosition.x,
         initialPosition.y
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             `${baseClass}__draggable-container`,
             isDragging && `${baseClass}__draggable-container--dragging`
         ].filter(Boolean).join(' '),
-        onMouseMove: handleMouseMove
-    }, /*#__PURE__*/ React.createElement("button", {
-        className: [
-            `${baseClass}__draggable`,
-            className
-        ].filter(Boolean).join(' '),
-        onMouseDown: handleMouseDown,
-        onMouseUp: onDrop,
-        ref: dragRef,
-        style: {
-            left: `${position.x}%`,
-            top: `${position.y}%`
-        },
-        type: "button"
-    }, children), /*#__PURE__*/ React.createElement("div", null));
+        onMouseMove: handleMouseMove,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                className: [
+                    `${baseClass}__draggable`,
+                    className
+                ].filter(Boolean).join(' '),
+                onMouseDown: handleMouseDown,
+                onMouseUp: onDrop,
+                ref: dragRef,
+                style: {
+                    left: `${position.x}%`,
+                    top: `${position.y}%`
+                },
+                type: "button",
+                children: children
+            }),
+            /*#__PURE__*/ _jsx("div", {})
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map