@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

package/dist/elements/EditUpload/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useModal } from '@faceless-ui/modal';
 import React, { useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
@@ -11,10 +12,27 @@ import './index.scss';
 const baseClass = 'edit-upload';
 const Input = (props)=>{
     const { name, onChange, ref, value } = props;
-    return <div className={`${baseClass}__input`}>
-      {name}
-      <input name={name} onChange={(e)=>onChange(e.target.value)} ref={ref} type="number" value={value}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass}__input`,
+        children: [
+            name,
+            /*#__PURE__*/ _jsxDEV("input", {
+                name: name,
+                onChange: (e)=>onChange(e.target.value),
+                ref: ref,
+                type: "number",
+                value: value
+            }, void 0, false, {
+                fileName: "src/elements/EditUpload/index.tsx",
+                lineNumber: 31,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/EditUpload/index.tsx",
+        lineNumber: 29,
+        columnNumber: 5
+    }, this);
 };
 const defaultCrop = {
     height: 100,
@@ -108,92 +126,335 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
         });
     };
     const fileSrcToUse = imageCacheTag ? `${fileSrc}?${encodeURIComponent(imageCacheTag)}` : fileSrc;
-    return <div className={baseClass}>
-      <div className={`${baseClass}__header`}>
-        <h2 title={`${t('general:editing')} ${fileName}`}>
-          {t('general:editing')} {fileName}
-        </h2>
-        <div className={`${baseClass}__actions`}>
-          <Button aria-label={t('general:cancel')} buttonStyle="secondary" className={`${baseClass}__cancel`} onClick={()=>closeModal(editDrawerSlug)}>
-            {t('general:cancel')}
-          </Button>
-          <Button aria-label={t('general:applyChanges')} buttonStyle="primary" className={`${baseClass}__save`} disabled={!imageLoaded} onClick={saveEdits}>
-            {t('general:applyChanges')}
-          </Button>
-        </div>
-      </div>
-      <div className={`${baseClass}__toolWrap`}>
-        <div className={`${baseClass}__crop`}>
-          <div className={`${baseClass}__focal-wrapper`} ref={focalWrapRef} style={{
-        aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
-    }}>
-            {showCrop ? <ReactCrop className={`${baseClass}__reactCrop`} crop={crop} onChange={(_, c)=>setCrop(c)} onComplete={()=>setCheckBounds(true)} renderSelectionAddon={()=>{
-        return <div className={`${baseClass}__crop-window`} ref={cropRef}/>;
-    }}>
-                <img alt={t('upload:setCropArea')} onLoad={onImageLoad} ref={imageRef} src={fileSrcToUse}/>
-              </ReactCrop> : <img alt={t('upload:setFocalPoint')} onLoad={onImageLoad} ref={imageRef} src={fileSrcToUse}/>}
-            {showFocalPoint && <DraggableElement boundsRef={showCrop ? cropRef : imageRef} checkBounds={showCrop ? checkBounds : false} className={`${baseClass}__focalPoint`} containerRef={focalWrapRef} initialPosition={focalPosition} onDragEnd={onDragEnd} setCheckBounds={showCrop ? setCheckBounds : false}>
-                <PlusIcon/>
-              </DraggableElement>}
-          </div>
-        </div>
-        {(showCrop || showFocalPoint) && <div className={`${baseClass}__sidebar`}>
-            {showCrop && <div className={`${baseClass}__groupWrap`}>
-                <div>
-                  <div className={`${baseClass}__titleWrap`}>
-                    <h3>{t('upload:crop')}</h3>
-                    <Button buttonStyle="none" className={`${baseClass}__reset`} onClick={()=>setCrop({
-            height: 100,
-            unit: '%',
-            width: 100,
-            x: 0,
-            y: 0
-        })}>
-                      {t('general:reset')}
-                    </Button>
-                  </div>
-                </div>
-                <span className={`${baseClass}__description`}>
-                  {t('upload:cropToolDescription')}
-                </span>
-                <div className={`${baseClass}__inputsWrap`}>
-                  <Input name={`${t('upload:width')} (px)`} onChange={(value)=>fineTuneCrop({
-            dimension: 'width',
-            value
-        })} ref={widthInputRef} value={(crop.width / 100 * uncroppedPixelWidth).toFixed(0)}/>
-                  <Input name={`${t('upload:height')} (px)`} onChange={(value)=>fineTuneCrop({
-            dimension: 'height',
-            value
-        })} ref={heightInputRef} value={(crop.height / 100 * uncroppedPixelHeight).toFixed(0)}/>
-                </div>
-              </div>}
-
-            {showFocalPoint && <div className={`${baseClass}__groupWrap`}>
-                <div>
-                  <div className={`${baseClass}__titleWrap`}>
-                    <h3>{t('upload:focalPoint')}</h3>
-                    <Button buttonStyle="none" className={`${baseClass}__reset`} onClick={centerFocalPoint}>
-                      {t('general:reset')}
-                    </Button>
-                  </div>
-                </div>
-                <span className={`${baseClass}__description`}>
-                  {t('upload:focalPointDescription')}
-                </span>
-                <div className={`${baseClass}__inputsWrap`}>
-                  <Input name="X %" onChange={(value)=>fineTuneFocalPosition({
-            coordinate: 'x',
-            value
-        })} value={focalPosition.x.toFixed(0)}/>
-                  <Input name="Y %" onChange={(value)=>fineTuneFocalPosition({
-            coordinate: 'y',
-            value
-        })} value={focalPosition.y.toFixed(0)}/>
-                </div>
-              </div>}
-          </div>}
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("h2", {
+                        title: `${t('general:editing')} ${fileName}`,
+                        children: [
+                            t('general:editing'),
+                            " ",
+                            fileName
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/EditUpload/index.tsx",
+                        lineNumber: 183,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV(Button, {
+                                "aria-label": t('general:cancel'),
+                                buttonStyle: "secondary",
+                                className: `${baseClass}__cancel`,
+                                onClick: ()=>closeModal(editDrawerSlug),
+                                children: t('general:cancel')
+                            }, void 0, false, {
+                                fileName: "src/elements/EditUpload/index.tsx",
+                                lineNumber: 187,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(Button, {
+                                "aria-label": t('general:applyChanges'),
+                                buttonStyle: "primary",
+                                className: `${baseClass}__save`,
+                                disabled: !imageLoaded,
+                                onClick: saveEdits,
+                                children: t('general:applyChanges')
+                            }, void 0, false, {
+                                fileName: "src/elements/EditUpload/index.tsx",
+                                lineNumber: 195,
+                                columnNumber: 11
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/EditUpload/index.tsx",
+                        lineNumber: 186,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/EditUpload/index.tsx",
+                lineNumber: 182,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__toolWrap`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__crop`,
+                        children: /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__focal-wrapper`,
+                            ref: focalWrapRef,
+                            style: {
+                                aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
+                            },
+                            children: [
+                                showCrop ? /*#__PURE__*/ _jsxDEV(ReactCrop, {
+                                    className: `${baseClass}__reactCrop`,
+                                    crop: crop,
+                                    onChange: (_, c)=>setCrop(c),
+                                    onComplete: ()=>setCheckBounds(true),
+                                    renderSelectionAddon: ()=>{
+                                        return /*#__PURE__*/ _jsxDEV("div", {
+                                            className: `${baseClass}__crop-window`,
+                                            ref: cropRef
+                                        }, void 0, false, {
+                                            fileName: "src/elements/EditUpload/index.tsx",
+                                            lineNumber: 222,
+                                            columnNumber: 26
+                                        }, void 0);
+                                    },
+                                    children: /*#__PURE__*/ _jsxDEV("img", {
+                                        alt: t('upload:setCropArea'),
+                                        onLoad: onImageLoad,
+                                        ref: imageRef,
+                                        src: fileSrcToUse
+                                    }, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 225,
+                                        columnNumber: 17
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/elements/EditUpload/index.tsx",
+                                    lineNumber: 216,
+                                    columnNumber: 15
+                                }, this) : /*#__PURE__*/ _jsxDEV("img", {
+                                    alt: t('upload:setFocalPoint'),
+                                    onLoad: onImageLoad,
+                                    ref: imageRef,
+                                    src: fileSrcToUse
+                                }, void 0, false, {
+                                    fileName: "src/elements/EditUpload/index.tsx",
+                                    lineNumber: 233,
+                                    columnNumber: 15
+                                }, this),
+                                showFocalPoint && /*#__PURE__*/ _jsxDEV(DraggableElement, {
+                                    boundsRef: showCrop ? cropRef : imageRef,
+                                    checkBounds: showCrop ? checkBounds : false,
+                                    className: `${baseClass}__focalPoint`,
+                                    containerRef: focalWrapRef,
+                                    initialPosition: focalPosition,
+                                    onDragEnd: onDragEnd,
+                                    setCheckBounds: showCrop ? setCheckBounds : false,
+                                    children: /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 250,
+                                        columnNumber: 17
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/elements/EditUpload/index.tsx",
+                                    lineNumber: 241,
+                                    columnNumber: 15
+                                }, this)
+                            ]
+                        }, void 0, true, {
+                            fileName: "src/elements/EditUpload/index.tsx",
+                            lineNumber: 208,
+                            columnNumber: 11
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/EditUpload/index.tsx",
+                        lineNumber: 207,
+                        columnNumber: 9
+                    }, this),
+                    (showCrop || showFocalPoint) && /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__sidebar`,
+                        children: [
+                            showCrop && /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsxDEV("div", {
+                                        children: /*#__PURE__*/ _jsxDEV("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsxDEV("h3", {
+                                                    children: t('upload:crop')
+                                                }, void 0, false, {
+                                                    fileName: "src/elements/EditUpload/index.tsx",
+                                                    lineNumber: 261,
+                                                    columnNumber: 21
+                                                }, this),
+                                                /*#__PURE__*/ _jsxDEV(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: ()=>setCrop({
+                                                            height: 100,
+                                                            unit: '%',
+                                                            width: 100,
+                                                            x: 0,
+                                                            y: 0
+                                                        }),
+                                                    children: t('general:reset')
+                                                }, void 0, false, {
+                                                    fileName: "src/elements/EditUpload/index.tsx",
+                                                    lineNumber: 262,
+                                                    columnNumber: 21
+                                                }, this)
+                                            ]
+                                        }, void 0, true, {
+                                            fileName: "src/elements/EditUpload/index.tsx",
+                                            lineNumber: 260,
+                                            columnNumber: 19
+                                        }, this)
+                                    }, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 259,
+                                        columnNumber: 17
+                                    }, this),
+                                    /*#__PURE__*/ _jsxDEV("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:cropToolDescription')
+                                    }, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 279,
+                                        columnNumber: 17
+                                    }, this),
+                                    /*#__PURE__*/ _jsxDEV("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsxDEV(Input, {
+                                                name: `${t('upload:width')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'width',
+                                                        value
+                                                    }),
+                                                ref: widthInputRef,
+                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
+                                            }, void 0, false, {
+                                                fileName: "src/elements/EditUpload/index.tsx",
+                                                lineNumber: 283,
+                                                columnNumber: 19
+                                            }, this),
+                                            /*#__PURE__*/ _jsxDEV(Input, {
+                                                name: `${t('upload:height')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'height',
+                                                        value
+                                                    }),
+                                                ref: heightInputRef,
+                                                value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
+                                            }, void 0, false, {
+                                                fileName: "src/elements/EditUpload/index.tsx",
+                                                lineNumber: 289,
+                                                columnNumber: 19
+                                            }, this)
+                                        ]
+                                    }, void 0, true, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 282,
+                                        columnNumber: 17
+                                    }, this)
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/elements/EditUpload/index.tsx",
+                                lineNumber: 258,
+                                columnNumber: 15
+                            }, this),
+                            showFocalPoint && /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsxDEV("div", {
+                                        children: /*#__PURE__*/ _jsxDEV("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsxDEV("h3", {
+                                                    children: t('upload:focalPoint')
+                                                }, void 0, false, {
+                                                    fileName: "src/elements/EditUpload/index.tsx",
+                                                    lineNumber: 303,
+                                                    columnNumber: 21
+                                                }, this),
+                                                /*#__PURE__*/ _jsxDEV(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: centerFocalPoint,
+                                                    children: t('general:reset')
+                                                }, void 0, false, {
+                                                    fileName: "src/elements/EditUpload/index.tsx",
+                                                    lineNumber: 304,
+                                                    columnNumber: 21
+                                                }, this)
+                                            ]
+                                        }, void 0, true, {
+                                            fileName: "src/elements/EditUpload/index.tsx",
+                                            lineNumber: 302,
+                                            columnNumber: 19
+                                        }, this)
+                                    }, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 301,
+                                        columnNumber: 17
+                                    }, this),
+                                    /*#__PURE__*/ _jsxDEV("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:focalPointDescription')
+                                    }, void 0, false, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 313,
+                                        columnNumber: 17
+                                    }, this),
+                                    /*#__PURE__*/ _jsxDEV("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsxDEV(Input, {
+                                                name: "X %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'x',
+                                                        value
+                                                    }),
+                                                value: focalPosition.x.toFixed(0)
+                                            }, void 0, false, {
+                                                fileName: "src/elements/EditUpload/index.tsx",
+                                                lineNumber: 317,
+                                                columnNumber: 19
+                                            }, this),
+                                            /*#__PURE__*/ _jsxDEV(Input, {
+                                                name: "Y %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'y',
+                                                        value
+                                                    }),
+                                                value: focalPosition.y.toFixed(0)
+                                            }, void 0, false, {
+                                                fileName: "src/elements/EditUpload/index.tsx",
+                                                lineNumber: 322,
+                                                columnNumber: 19
+                                            }, this)
+                                        ]
+                                    }, void 0, true, {
+                                        fileName: "src/elements/EditUpload/index.tsx",
+                                        lineNumber: 316,
+                                        columnNumber: 17
+                                    }, this)
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/elements/EditUpload/index.tsx",
+                                lineNumber: 300,
+                                columnNumber: 15
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/EditUpload/index.tsx",
+                        lineNumber: 256,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/EditUpload/index.tsx",
+                lineNumber: 206,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/EditUpload/index.tsx",
+        lineNumber: 181,
+        columnNumber: 5
+    }, this);
 };
 const DraggableElement = ({ boundsRef, checkBounds, children, className, containerRef, initialPosition = {
     x: 50,
@@ -295,21 +556,43 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         initialPosition.x,
         initialPosition.y
     ]);
-    return <div className={[
-        `${baseClass}__draggable-container`,
-        isDragging && `${baseClass}__draggable-container--dragging`
-    ].filter(Boolean).join(' ')} onMouseMove={handleMouseMove}>
-      <button className={[
-        `${baseClass}__draggable`,
-        className
-    ].filter(Boolean).join(' ')} onMouseDown={handleMouseDown} onMouseUp={onDrop} ref={dragRef} style={{
-        left: `${position.x}%`,
-        top: `${position.y}%`
-    }} type="button">
-        {children}
-      </button>
-      <div/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            `${baseClass}__draggable-container`,
+            isDragging && `${baseClass}__draggable-container--dragging`
+        ].filter(Boolean).join(' '),
+        onMouseMove: handleMouseMove,
+        children: [
+            /*#__PURE__*/ _jsxDEV("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
+            }, void 0, false, {
+                fileName: "src/elements/EditUpload/index.tsx",
+                lineNumber: 445,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {}, void 0, false, {
+                fileName: "src/elements/EditUpload/index.tsx",
+                lineNumber: 455,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/EditUpload/index.tsx",
+        lineNumber: 436,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map