Sha256: 9912c3bd04d3bbd16e99cbf4d9449f093aaa2ab0766b3f50e5a59f5536ab83d6
Contents?: true
Size: 1.68 KB
Versions: 12
Compression:
Stored size: 1.68 KB
Contents
import React, { useState } from "react";
import PropTypes from "prop-types";
import ImageEditor from "./ImageEditor";
import ModalStore from "../stores/ModalStore";
export default function EditableImage(props) {
const [image, setImage] = useState(props.image);
const [src, setSrc] = useState(props.src);
const height = () => {
const width = image.crop_width || image.real_width;
const height = image.crop_height || image.real_height;
return Math.round((height / width) * props.width);
};
const updateImage = (updatedImage, src) => {
let newImage = { ...image, ...updatedImage };
setSrc(src);
setImage(newImage);
if (props.onUpdate) {
props.onUpdate(newImage, src);
}
};
const handleClick = (evt) => {
evt.preventDefault();
ModalStore.dispatch({
type: "OPEN",
payload: <ImageEditor image={image}
caption={props.caption}
locale={props.locale}
locales={props.locales}
onUpdate={updateImage} />
});
};
const altWarning = !image.alternative[props.locale];
return (
<div className="editable-image">
{altWarning &&
<span className="alt-warning" title="Alternative text is missing">
<i className="fa fa-exclamation-triangle icon" />
</span>}
<img src={src}
width={props.width}
height={height()}
onClick={handleClick} />
</div>
);
}
EditableImage.propTypes = {
image: PropTypes.object,
src: PropTypes.string,
caption: PropTypes.bool,
locale: PropTypes.string,
locales: PropTypes.object,
width: PropTypes.number,
onUpdate: PropTypes.func
};
Version data entries
12 entries across 12 versions & 1 rubygems