fix(29-05): add local crop state to ImageUpload for immediate preview
This commit is contained in:
@@ -25,6 +25,11 @@ export function ImageUpload({
|
|||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [localPreview, setLocalPreview] = useState<string | null>(null);
|
const [localPreview, setLocalPreview] = useState<string | null>(null);
|
||||||
const [showCropEditor, setShowCropEditor] = useState(false);
|
const [showCropEditor, setShowCropEditor] = useState(false);
|
||||||
|
const [localCrop, setLocalCrop] = useState<{
|
||||||
|
zoom: number;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
} | null>(null);
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
@@ -70,6 +75,7 @@ export function ImageUpload({
|
|||||||
function handleRemove(e: React.MouseEvent) {
|
function handleRemove(e: React.MouseEvent) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setLocalPreview(null);
|
setLocalPreview(null);
|
||||||
|
setLocalCrop(null);
|
||||||
onChange(null);
|
onChange(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -86,6 +92,7 @@ export function ImageUpload({
|
|||||||
imageUrl={displayUrl}
|
imageUrl={displayUrl}
|
||||||
dominantColor={dominantColor}
|
dominantColor={dominantColor}
|
||||||
onSave={(result) => {
|
onSave={(result) => {
|
||||||
|
setLocalCrop(result);
|
||||||
onCropChange(result);
|
onCropChange(result);
|
||||||
setShowCropEditor(false);
|
setShowCropEditor(false);
|
||||||
}}
|
}}
|
||||||
@@ -111,6 +118,9 @@ export function ImageUpload({
|
|||||||
src={displayUrl}
|
src={displayUrl}
|
||||||
alt="Item"
|
alt="Item"
|
||||||
dominantColor={dominantColor}
|
dominantColor={dominantColor}
|
||||||
|
cropZoom={localCrop?.zoom}
|
||||||
|
cropX={localCrop?.x}
|
||||||
|
cropY={localCrop?.y}
|
||||||
/>
|
/>
|
||||||
{/* Crop button */}
|
{/* Crop button */}
|
||||||
{onCropChange && (
|
{onCropChange && (
|
||||||
|
|||||||
Reference in New Issue
Block a user