Sha256: f0cfb21ad93862899f7f0f2b89d171d9842daf89d1f832d3f50cd8df7463a301
Contents?: true
Size: 1.8 KB
Versions: 13
Compression:
Stored size: 1.8 KB
Contents
import React, { useState } from "react";
import PropTypes from "prop-types";
import ModalStore from "../stores/ModalStore";
import { putJson } from "../lib/request";
import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
import Form from "./ImageEditor/Form";
export default function ImageEditor(props) {
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 updateLocalization = (name, value) => {
setLocalizations({
...localizations,
[name]: { ...localizations[name], [locale]: value }
});
};
const save = (evt) => {
evt.preventDefault();
evt.stopPropagation();
const data = { ...localizations, ...cropParams(cropState) };
putJson(`/admin/images/${props.image.id}`, { image: data });
if (props.onUpdate) {
props.onUpdate(data, croppedImage);
}
ModalStore.dispatch({ type: "CLOSE" });
};
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>
);
}
ImageEditor.propTypes = {
image: PropTypes.object,
locale: PropTypes.string,
locales: PropTypes.object,
caption: PropTypes.bool,
onUpdate: PropTypes.func
};
Version data entries
13 entries across 13 versions & 1 rubygems