Sha256: f8eb44495343307d2a0ca1b4cc5852499534b5a1a34425cbf94f2a42285cc952
Contents?: true
Size: 1.96 KB
Versions: 5
Compression:
Stored size: 1.96 KB
Contents
import React, { useState } from "react";
import useModalStore from "../stores/useModalStore";
import { putJson } from "../lib/request";
import { Locale, ImageResource } from "../types";
import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
import Form from "./ImageEditor/Form";
interface ImageEditorProps {
image: ImageResource;
caption: boolean;
locale: string;
locales: Record<string, Locale>;
onUpdate?: (data: ImageResource, croppedImage: string | null) => void;
}
export default function ImageEditor(props: ImageEditorProps) {
const [cropState, dispatch, croppedImage] = useCrop(props.image);
const [locale, setLocale] = useState(props.locale);
const [localizations, setLocalizations] = useState({
caption: props.image.caption || {},
alternative: props.image.alternative || {}
});
const closeModal = useModalStore((state) => state.close);
const updateLocalization = (
name: "alternative" | "caption",
value: string
) => {
setLocalizations({
...localizations,
[name]: { ...localizations[name], [locale]: value }
});
};
const save = (evt: Event) => {
evt.preventDefault();
evt.stopPropagation();
const data = { ...localizations, ...cropParams(cropState) };
void putJson(`/admin/images/${props.image.id}`, { image: data });
if (props.onUpdate) {
props.onUpdate(data, croppedImage);
}
closeModal();
};
return (
<div className="image-editor">
<ImageCropper
croppedImage={croppedImage}
cropState={cropState}
dispatch={dispatch}
/>
{!cropState.cropping && (
<Form
alternative={localizations.alternative}
caption={localizations.caption}
image={props.image}
locale={locale}
locales={props.locales}
setLocale={setLocale}
save={save}
showCaption={props.caption}
updateLocalization={updateLocalization}
/>
)}
</div>
);
}
Version data entries
5 entries across 5 versions & 1 rubygems