@greatapps/common 1.1.787 → 1.1.788
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -162,7 +162,7 @@ function ImageCropModal({
|
|
|
162
162
|
const translate = useTranslations();
|
|
163
163
|
const imgRef = useRef(null);
|
|
164
164
|
const [crop, setCrop] = useState();
|
|
165
|
-
const [
|
|
165
|
+
const [displayScale, setDisplayScale] = useState(0);
|
|
166
166
|
const [imageStatus, setImageStatus] = useState("loading");
|
|
167
167
|
const onImageLoadCallbackRef = useRef(onImageLoadCallback);
|
|
168
168
|
useEffect(() => {
|
|
@@ -179,7 +179,6 @@ function ImageCropModal({
|
|
|
179
179
|
img.onload = () => {
|
|
180
180
|
if (cancelled) return;
|
|
181
181
|
const { naturalWidth, naturalHeight } = img;
|
|
182
|
-
setImageSize({ width: naturalWidth, height: naturalHeight });
|
|
183
182
|
onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight);
|
|
184
183
|
const tooSmall = minWidth !== void 0 && naturalWidth < minWidth || minHeight !== void 0 && naturalHeight < minHeight;
|
|
185
184
|
setImageStatus(tooSmall ? "too-small" : "ok");
|
|
@@ -194,7 +193,8 @@ function ImageCropModal({
|
|
|
194
193
|
};
|
|
195
194
|
}, [open, imageSrc, minWidth, minHeight]);
|
|
196
195
|
const onCropImgLoad = (e) => {
|
|
197
|
-
const { naturalWidth, naturalHeight } = e.currentTarget;
|
|
196
|
+
const { naturalWidth, naturalHeight, width } = e.currentTarget;
|
|
197
|
+
setDisplayScale(width / naturalWidth);
|
|
198
198
|
const initialCrop = centerCrop(
|
|
199
199
|
makeAspectCrop(
|
|
200
200
|
{ unit: "%", width: 90 },
|
|
@@ -207,8 +207,8 @@ function ImageCropModal({
|
|
|
207
207
|
);
|
|
208
208
|
setCrop(initialCrop);
|
|
209
209
|
};
|
|
210
|
-
const minCropWidth = minWidth &&
|
|
211
|
-
const minCropHeight = minHeight &&
|
|
210
|
+
const minCropWidth = minWidth && displayScale > 0 ? minWidth * displayScale : void 0;
|
|
211
|
+
const minCropHeight = minHeight && displayScale > 0 ? minHeight * displayScale : void 0;
|
|
212
212
|
const handleConfirm = () => {
|
|
213
213
|
if (imgRef.current && crop) {
|
|
214
214
|
onConfirm(imgRef.current, crop);
|
|
@@ -246,7 +246,7 @@ function ImageCropModal({
|
|
|
246
246
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
247
247
|
/* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: translate("common.imageUpload.cropTitle") }) }),
|
|
248
248
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-5 pb-5", children: [
|
|
249
|
-
/* @__PURE__ */ jsx("div", { className: "flex justify-center overflow-hidden rounded-lg min-h-[200px]", children: imageStatus === "ok" && /* @__PURE__ */ jsx(
|
|
249
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center overflow-hidden rounded-lg min-h-[200px]", children: imageStatus === "ok" && /* @__PURE__ */ jsx(
|
|
250
250
|
ReactCrop,
|
|
251
251
|
{
|
|
252
252
|
crop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { useTranslations } from 'next-intl'\nimport ReactCrop, {\n type Crop,\n centerCrop,\n makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n Dialog,\n DialogContent,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n .custom-crop-area .ReactCrop__crop-selection {\n border: 2px solid white !important;\n box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n }\n\n /* Grid de 9 quadrados - linhas pontilhadas finas */\n .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n position: absolute;\n background: repeating-linear-gradient(\n to right,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n left: 0;\n right: 0;\n height: 1px;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n top: 0;\n bottom: 0;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n /* Círculo inscrito */\n .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n position: absolute;\n inset: 0;\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n pointer-events: none;\n }\n\n /* Ocultar handles das laterais (manter só os 4 cantos) */\n .custom-crop-area .ReactCrop__drag-handle.ord-n,\n .custom-crop-area .ReactCrop__drag-handle.ord-s,\n .custom-crop-area .ReactCrop__drag-handle.ord-e,\n .custom-crop-area .ReactCrop__drag-handle.ord-w {\n display: none !important;\n }\n\n /* Estilizar handles dos cantos — indicador preto em L nos cantos */\n .custom-crop-area .ReactCrop__drag-handle.ord-nw,\n .custom-crop-area .ReactCrop__drag-handle.ord-ne,\n .custom-crop-area .ReactCrop__drag-handle.ord-sw,\n .custom-crop-area .ReactCrop__drag-handle.ord-se {\n width: 20px;\n height: 20px;\n background: transparent !important;\n border: none !important;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n content: '';\n position: absolute;\n width: 22px;\n height: 22px;\n border-color: white;\n border-style: solid;\n border-width: 0;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {\n top: -2px; left: -2px;\n border-top-width: 4px;\n border-left-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {\n top: -2px; right: -2px;\n border-top-width: 4px;\n border-right-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {\n bottom: -2px; left: -2px;\n border-bottom-width: 4px;\n border-left-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n bottom: -2px; right: -2px;\n border-bottom-width: 4px;\n border-right-width: 4px;\n }\n\n /* Desabilitar drag da imagem de fundo */\n .custom-crop-area img {\n pointer-events: none;\n user-select: none;\n -webkit-user-drag: none;\n /* Xadrez de transparência: fica atrás dos pixels da imagem, então só\n aparece onde a imagem é transparente. Imagens opacas cobrem o padrão. */\n background-color: #fff;\n background-image:\n linear-gradient(45deg, #ccc 25%, transparent 25%),\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #ccc 75%),\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n }\n`\n\ninterface ImageCropModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n imageSrc: string\n aspectRatio: number\n onConfirm: (image: HTMLImageElement, crop: Crop) => void\n onCancel?: () => void\n onImageLoad?: (naturalWidth: number, naturalHeight: number) => void\n showCircleGuide?: boolean\n minWidth?: number\n minHeight?: number\n /**\n * Nome do arquivo atual, usado na mensagem da variante \"imagem muito pequena\".\n * Opcional — se ausente, a mensagem cai num texto genérico.\n */\n fileName?: string\n /**\n * Callback disparado quando o usuário clica em \"Enviar outra\" na variante\n * \"imagem muito pequena\". Normalmente abre um file input. Se não for passado,\n * o botão \"Enviar outra\" é escondido.\n */\n onSelectAnother?: () => void\n}\n\ntype ImageStatus = 'loading' | 'too-small' | 'ok'\n\nexport function ImageCropModal({\n open,\n onOpenChange,\n imageSrc,\n aspectRatio,\n onConfirm,\n onCancel,\n onImageLoad: onImageLoadCallback,\n showCircleGuide,\n minWidth,\n minHeight,\n fileName,\n onSelectAnother,\n}: ImageCropModalProps) {\n const translate = useTranslations()\n const imgRef = useRef<HTMLImageElement>(null)\n const [crop, setCrop] = useState<Crop>()\n const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')\n\n // Ref pra callback externo — evita re-rodar o effect de preload toda vez que\n // a identidade do callback muda.\n const onImageLoadCallbackRef = useRef(onImageLoadCallback)\n useEffect(() => {\n onImageLoadCallbackRef.current = onImageLoadCallback\n })\n\n // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar\n // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a\n // variante \"imagem muito pequena\" sem flash de UI.\n useEffect(() => {\n if (!open || !imageSrc) {\n setImageStatus('loading')\n return\n }\n\n setImageStatus('loading')\n let cancelled = false\n\n const img = new window.Image()\n img.onload = () => {\n if (cancelled) return\n const { naturalWidth, naturalHeight } = img\n setImageSize({ width: naturalWidth, height: naturalHeight })\n onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)\n\n const tooSmall =\n (minWidth !== undefined && naturalWidth < minWidth) ||\n (minHeight !== undefined && naturalHeight < minHeight)\n setImageStatus(tooSmall ? 'too-small' : 'ok')\n }\n img.onerror = () => {\n if (cancelled) return\n setImageStatus('too-small')\n }\n img.src = imageSrc\n\n return () => {\n cancelled = true\n }\n }, [open, imageSrc, minWidth, minHeight])\n\n // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em\n // cache vinda do preload, então carrega instantâneo.\n const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n const { naturalWidth, naturalHeight } = e.currentTarget\n const initialCrop = centerCrop(\n makeAspectCrop(\n { unit: '%', width: 90 },\n aspectRatio,\n naturalWidth,\n naturalHeight\n ),\n naturalWidth,\n naturalHeight\n )\n setCrop(initialCrop)\n }\n\n // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n const minCropWidth = minWidth && imageSize.width > 0\n ? Math.min((minWidth / imageSize.width) * 100, 100)\n : undefined\n const minCropHeight = minHeight && imageSize.height > 0\n ? Math.min((minHeight / imageSize.height) * 100, 100)\n : undefined\n\n const handleConfirm = () => {\n if (imgRef.current && crop) {\n onConfirm(imgRef.current, crop)\n }\n }\n\n const handleCancel = () => {\n onCancel?.()\n onOpenChange(false)\n }\n\n // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n // Renderiza grid, círculo e bolinhas dentro da área de crop\n const renderSelectionAddon = () => (\n <>\n {/* Grid de 9 quadrados com linhas pontilhadas */}\n <div className=\"crop-grid\">\n <div className=\"crop-grid-line horizontal h1\" />\n <div className=\"crop-grid-line horizontal h2\" />\n <div className=\"crop-grid-line vertical v1\" />\n <div className=\"crop-grid-line vertical v2\" />\n </div>\n {/* Círculo inscrito */}\n {shouldShowCircle && <div className=\"crop-circle\" />}\n </>\n )\n\n const dimensionText =\n minWidth !== undefined && minHeight !== undefined\n ? `${minWidth}x${minHeight}px`\n : null\n\n const isTooSmall = imageStatus === 'too-small'\n\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <style>{baseCropStyles}</style>\n <DialogContent\n className={\n isTooSmall\n ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0'\n : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0'\n }\n >\n {isTooSmall ? (\n <>\n <DialogHeader className=\"p-5\">\n <DialogTitle className=\"text-center text-[16px]!\">\n {dimensionText\n ? translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })\n : translate('common.imageUpload.tooSmallTitleGeneric')}\n </DialogTitle>\n </DialogHeader>\n\n <div className=\"px-5 pb-5\">\n <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n {fileName && dimensionText\n ? translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })\n : fileName && !dimensionText\n ? translate('common.imageUpload.tooSmallBodyFileGeneric', { fileName })\n : !fileName && dimensionText\n ? translate('common.imageUpload.tooSmallBodyNoFileWithDimension', { dimensionText })\n : translate('common.imageUpload.tooSmallBodyNoFileGeneric')}\n </p>\n </div>\n\n <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n {onSelectAnother && <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>}\n <Button variant=\"secondary\" onClick={handleCancel}>\n {translate('common.actions.cancel')}\n </Button>\n </DialogFooter>\n </>\n ) : (\n <>\n <DialogHeader className=\"p-5\">\n <DialogTitle className=\"text-center text-[16px]!\">\n {translate('common.imageUpload.cropTitle')}\n </DialogTitle>\n </DialogHeader>\n\n <div className=\"flex flex-col gap-4 px-5 pb-5\">\n <div className=\"flex justify-center overflow-hidden rounded-lg min-h-[200px]\">\n {imageStatus === 'ok' && (\n <ReactCrop\n crop={crop}\n onChange={(c: Crop) => setCrop(c)}\n aspect={aspectRatio}\n className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n keepSelection\n minWidth={minCropWidth}\n minHeight={minCropHeight}\n renderSelectionAddon={renderSelectionAddon}\n >\n <img\n ref={imgRef}\n src={imageSrc}\n alt={translate('common.imageUpload.cropAlt')}\n onLoad={onCropImgLoad}\n draggable={false}\n className=\"max-h-[50vh] object-contain select-none\"\n />\n </ReactCrop>\n )}\n </div>\n\n <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n {translate('common.imageUpload.cropHint')}\n </p>\n </div>\n\n <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>\n {translate('common.actions.confirm')}\n </Button>\n <Button variant=\"secondary\" onClick={handleCancel}>\n {translate('common.actions.cancel')}\n </Button>\n </DialogFooter>\n </>\n )}\n </DialogContent>\n </Dialog>\n )\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { useTranslations } from 'next-intl'\nimport ReactCrop, {\n type Crop,\n centerCrop,\n makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n Dialog,\n DialogContent,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n .custom-crop-area .ReactCrop__crop-selection {\n border: 2px solid white !important;\n box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n }\n\n /* Grid de 9 quadrados - linhas pontilhadas finas */\n .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n position: absolute;\n background: repeating-linear-gradient(\n to right,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n left: 0;\n right: 0;\n height: 1px;\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n top: 0;\n bottom: 0;\n width: 1px;\n background: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.5) 0,\n rgba(255, 255, 255, 0.5) 4px,\n transparent 4px,\n transparent 8px\n );\n }\n\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n /* Círculo inscrito */\n .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n position: absolute;\n inset: 0;\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n pointer-events: none;\n }\n\n /* Ocultar handles das laterais (manter só os 4 cantos) */\n .custom-crop-area .ReactCrop__drag-handle.ord-n,\n .custom-crop-area .ReactCrop__drag-handle.ord-s,\n .custom-crop-area .ReactCrop__drag-handle.ord-e,\n .custom-crop-area .ReactCrop__drag-handle.ord-w {\n display: none !important;\n }\n\n /* Estilizar handles dos cantos — indicador preto em L nos cantos */\n .custom-crop-area .ReactCrop__drag-handle.ord-nw,\n .custom-crop-area .ReactCrop__drag-handle.ord-ne,\n .custom-crop-area .ReactCrop__drag-handle.ord-sw,\n .custom-crop-area .ReactCrop__drag-handle.ord-se {\n width: 20px;\n height: 20px;\n background: transparent !important;\n border: none !important;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,\n .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n content: '';\n position: absolute;\n width: 22px;\n height: 22px;\n border-color: white;\n border-style: solid;\n border-width: 0;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {\n top: -2px; left: -2px;\n border-top-width: 4px;\n border-left-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {\n top: -2px; right: -2px;\n border-top-width: 4px;\n border-right-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {\n bottom: -2px; left: -2px;\n border-bottom-width: 4px;\n border-left-width: 4px;\n }\n\n .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n bottom: -2px; right: -2px;\n border-bottom-width: 4px;\n border-right-width: 4px;\n }\n\n /* Desabilitar drag da imagem de fundo */\n .custom-crop-area img {\n pointer-events: none;\n user-select: none;\n -webkit-user-drag: none;\n /* Xadrez de transparência: fica atrás dos pixels da imagem, então só\n aparece onde a imagem é transparente. Imagens opacas cobrem o padrão. */\n background-color: #fff;\n background-image:\n linear-gradient(45deg, #ccc 25%, transparent 25%),\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #ccc 75%),\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n }\n`\n\ninterface ImageCropModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n imageSrc: string\n aspectRatio: number\n onConfirm: (image: HTMLImageElement, crop: Crop) => void\n onCancel?: () => void\n onImageLoad?: (naturalWidth: number, naturalHeight: number) => void\n showCircleGuide?: boolean\n minWidth?: number\n minHeight?: number\n /**\n * Nome do arquivo atual, usado na mensagem da variante \"imagem muito pequena\".\n * Opcional — se ausente, a mensagem cai num texto genérico.\n */\n fileName?: string\n /**\n * Callback disparado quando o usuário clica em \"Enviar outra\" na variante\n * \"imagem muito pequena\". Normalmente abre um file input. Se não for passado,\n * o botão \"Enviar outra\" é escondido.\n */\n onSelectAnother?: () => void\n}\n\ntype ImageStatus = 'loading' | 'too-small' | 'ok'\n\nexport function ImageCropModal({\n open,\n onOpenChange,\n imageSrc,\n aspectRatio,\n onConfirm,\n onCancel,\n onImageLoad: onImageLoadCallback,\n showCircleGuide,\n minWidth,\n minHeight,\n fileName,\n onSelectAnother,\n}: ImageCropModalProps) {\n const translate = useTranslations()\n const imgRef = useRef<HTMLImageElement>(null)\n const [crop, setCrop] = useState<Crop>()\n const [displayScale, setDisplayScale] = useState(0)\n const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')\n\n // Ref pra callback externo — evita re-rodar o effect de preload toda vez que\n // a identidade do callback muda.\n const onImageLoadCallbackRef = useRef(onImageLoadCallback)\n useEffect(() => {\n onImageLoadCallbackRef.current = onImageLoadCallback\n })\n\n // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar\n // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a\n // variante \"imagem muito pequena\" sem flash de UI.\n useEffect(() => {\n if (!open || !imageSrc) {\n setImageStatus('loading')\n return\n }\n\n setImageStatus('loading')\n let cancelled = false\n\n const img = new window.Image()\n img.onload = () => {\n if (cancelled) return\n const { naturalWidth, naturalHeight } = img\n onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)\n\n const tooSmall =\n (minWidth !== undefined && naturalWidth < minWidth) ||\n (minHeight !== undefined && naturalHeight < minHeight)\n setImageStatus(tooSmall ? 'too-small' : 'ok')\n }\n img.onerror = () => {\n if (cancelled) return\n setImageStatus('too-small')\n }\n img.src = imageSrc\n\n return () => {\n cancelled = true\n }\n }, [open, imageSrc, minWidth, minHeight])\n\n // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em\n // cache vinda do preload, então carrega instantâneo.\n const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n const { naturalWidth, naturalHeight, width } = e.currentTarget\n setDisplayScale(width / naturalWidth)\n const initialCrop = centerCrop(\n makeAspectCrop(\n { unit: '%', width: 90 },\n aspectRatio,\n naturalWidth,\n naturalHeight\n ),\n naturalWidth,\n naturalHeight\n )\n setCrop(initialCrop)\n }\n\n // minWidth/minHeight do ReactCrop são pixels da imagem já renderizada na tela.\n const minCropWidth = minWidth && displayScale > 0 ? minWidth * displayScale : undefined\n const minCropHeight = minHeight && displayScale > 0 ? minHeight * displayScale : undefined\n\n const handleConfirm = () => {\n if (imgRef.current && crop) {\n onConfirm(imgRef.current, crop)\n }\n }\n\n const handleCancel = () => {\n onCancel?.()\n onOpenChange(false)\n }\n\n // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n // Renderiza grid, círculo e bolinhas dentro da área de crop\n const renderSelectionAddon = () => (\n <>\n {/* Grid de 9 quadrados com linhas pontilhadas */}\n <div className=\"crop-grid\">\n <div className=\"crop-grid-line horizontal h1\" />\n <div className=\"crop-grid-line horizontal h2\" />\n <div className=\"crop-grid-line vertical v1\" />\n <div className=\"crop-grid-line vertical v2\" />\n </div>\n {/* Círculo inscrito */}\n {shouldShowCircle && <div className=\"crop-circle\" />}\n </>\n )\n\n const dimensionText =\n minWidth !== undefined && minHeight !== undefined\n ? `${minWidth}x${minHeight}px`\n : null\n\n const isTooSmall = imageStatus === 'too-small'\n\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <style>{baseCropStyles}</style>\n <DialogContent\n className={\n isTooSmall\n ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0'\n : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0'\n }\n >\n {isTooSmall ? (\n <>\n <DialogHeader className=\"p-5\">\n <DialogTitle className=\"text-center text-[16px]!\">\n {dimensionText\n ? translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })\n : translate('common.imageUpload.tooSmallTitleGeneric')}\n </DialogTitle>\n </DialogHeader>\n\n <div className=\"px-5 pb-5\">\n <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n {fileName && dimensionText\n ? translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })\n : fileName && !dimensionText\n ? translate('common.imageUpload.tooSmallBodyFileGeneric', { fileName })\n : !fileName && dimensionText\n ? translate('common.imageUpload.tooSmallBodyNoFileWithDimension', { dimensionText })\n : translate('common.imageUpload.tooSmallBodyNoFileGeneric')}\n </p>\n </div>\n\n <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n {onSelectAnother && <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>}\n <Button variant=\"secondary\" onClick={handleCancel}>\n {translate('common.actions.cancel')}\n </Button>\n </DialogFooter>\n </>\n ) : (\n <>\n <DialogHeader className=\"p-5\">\n <DialogTitle className=\"text-center text-[16px]!\">\n {translate('common.imageUpload.cropTitle')}\n </DialogTitle>\n </DialogHeader>\n\n <div className=\"flex flex-col gap-4 px-5 pb-5\">\n <div className=\"flex items-center justify-center overflow-hidden rounded-lg min-h-[200px]\">\n {imageStatus === 'ok' && (\n <ReactCrop\n crop={crop}\n onChange={(c: Crop) => setCrop(c)}\n aspect={aspectRatio}\n className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n keepSelection\n minWidth={minCropWidth}\n minHeight={minCropHeight}\n renderSelectionAddon={renderSelectionAddon}\n >\n <img\n ref={imgRef}\n src={imageSrc}\n alt={translate('common.imageUpload.cropAlt')}\n onLoad={onCropImgLoad}\n draggable={false}\n className=\"max-h-[50vh] object-contain select-none\"\n />\n </ReactCrop>\n )}\n </div>\n\n <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n {translate('common.imageUpload.cropHint')}\n </p>\n </div>\n\n <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>\n {translate('common.actions.confirm')}\n </Button>\n <Button variant=\"secondary\" onClick={handleCancel}>\n {translate('common.actions.cancel')}\n </Button>\n </DialogFooter>\n </>\n )}\n </DialogContent>\n </Dialog>\n )\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -192,7 +192,7 @@ export function ImageCropModal({
|
|
|
192
192
|
const translate = useTranslations()
|
|
193
193
|
const imgRef = useRef<HTMLImageElement>(null)
|
|
194
194
|
const [crop, setCrop] = useState<Crop>()
|
|
195
|
-
const [
|
|
195
|
+
const [displayScale, setDisplayScale] = useState(0)
|
|
196
196
|
const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')
|
|
197
197
|
|
|
198
198
|
// Ref pra callback externo — evita re-rodar o effect de preload toda vez que
|
|
@@ -218,7 +218,6 @@ export function ImageCropModal({
|
|
|
218
218
|
img.onload = () => {
|
|
219
219
|
if (cancelled) return
|
|
220
220
|
const { naturalWidth, naturalHeight } = img
|
|
221
|
-
setImageSize({ width: naturalWidth, height: naturalHeight })
|
|
222
221
|
onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)
|
|
223
222
|
|
|
224
223
|
const tooSmall =
|
|
@@ -240,7 +239,8 @@ export function ImageCropModal({
|
|
|
240
239
|
// Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em
|
|
241
240
|
// cache vinda do preload, então carrega instantâneo.
|
|
242
241
|
const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
|
243
|
-
const { naturalWidth, naturalHeight } = e.currentTarget
|
|
242
|
+
const { naturalWidth, naturalHeight, width } = e.currentTarget
|
|
243
|
+
setDisplayScale(width / naturalWidth)
|
|
244
244
|
const initialCrop = centerCrop(
|
|
245
245
|
makeAspectCrop(
|
|
246
246
|
{ unit: '%', width: 90 },
|
|
@@ -254,13 +254,9 @@ export function ImageCropModal({
|
|
|
254
254
|
setCrop(initialCrop)
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
-
//
|
|
258
|
-
const minCropWidth = minWidth &&
|
|
259
|
-
|
|
260
|
-
: undefined
|
|
261
|
-
const minCropHeight = minHeight && imageSize.height > 0
|
|
262
|
-
? Math.min((minHeight / imageSize.height) * 100, 100)
|
|
263
|
-
: undefined
|
|
257
|
+
// minWidth/minHeight do ReactCrop são pixels da imagem já renderizada na tela.
|
|
258
|
+
const minCropWidth = minWidth && displayScale > 0 ? minWidth * displayScale : undefined
|
|
259
|
+
const minCropHeight = minHeight && displayScale > 0 ? minHeight * displayScale : undefined
|
|
264
260
|
|
|
265
261
|
const handleConfirm = () => {
|
|
266
262
|
if (imgRef.current && crop) {
|
|
@@ -346,7 +342,7 @@ export function ImageCropModal({
|
|
|
346
342
|
</DialogHeader>
|
|
347
343
|
|
|
348
344
|
<div className="flex flex-col gap-4 px-5 pb-5">
|
|
349
|
-
<div className="flex justify-center overflow-hidden rounded-lg min-h-[200px]">
|
|
345
|
+
<div className="flex items-center justify-center overflow-hidden rounded-lg min-h-[200px]">
|
|
350
346
|
{imageStatus === 'ok' && (
|
|
351
347
|
<ReactCrop
|
|
352
348
|
crop={crop}
|