@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/elements/EditUpload/index.js

@@ -1,5 +1,4 @@
 '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';
@@ -12,27 +11,10 @@ import './index.scss';
 const baseClass = 'edit-upload';
 const Input = (props)=>{
     const { name, onChange, ref, value } = props;
-    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);
+    return <div className={`${baseClass}__input`}>
+      {name}
+      <input name={name} onChange={(e)=>onChange(e.target.value)} ref={ref} type="number" value={value}/>
+    </div>;
 };
 const defaultCrop = {
     height: 100,
@@ -126,335 +108,92 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
         });
     };
     const fileSrcToUse = imageCacheTag ? `${fileSrc}?${encodeURIComponent(imageCacheTag)}` : fileSrc;
-    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);
+    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>;
 };
 const DraggableElement = ({ boundsRef, checkBounds, children, className, containerRef, initialPosition = {
     x: 50,
@@ -556,43 +295,21 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         initialPosition.x,
         initialPosition.y
     ]);
-    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);
+    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>;
 };
 
 //# sourceMappingURL=index.js.map