-
Notifications
You must be signed in to change notification settings - Fork 583
/
ImageContainer.js
66 lines (59 loc) · 2.06 KB
/
ImageContainer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// @flow
import * as React from "react";
import { connect } from "@webiny/app-page-builder/editor/redux";
import styled from "react-emotion";
import isNumeric from "isnumeric";
import { compose, withHandlers, pure } from "recompose";
import { set, isEqual } from "lodash";
import SingleImageUpload from "@webiny/app-admin/components/SingleImageUpload";
import { updateElement } from "@webiny/app-page-builder/editor/actions";
import { getElement } from "@webiny/app-page-builder/editor/selectors";
const position = { left: "flex-start", center: "center", right: "flex-end" };
const AlignImage = styled("div")(props => ({
img: {
alignSelf: position[props.align]
}
}));
const ImageContainer = pure(props => {
const { horizontalAlign, onChange } = props;
const image = { ...props.image };
const imgStyle = {};
if (image.width) {
const { width } = image;
imgStyle.width = isNumeric(width) ? parseInt(width) : width;
}
if (image.height) {
const { height } = image;
imgStyle.height = isNumeric(height) ? parseInt(height) : height;
}
return (
<AlignImage align={horizontalAlign}>
<SingleImageUpload
imagePreviewProps={{ style: imgStyle, srcSet: "auto" }}
onChange={onChange}
value={image.file}
/>
</AlignImage>
);
});
export default compose(
connect(
(state, { elementId }) => {
const element = getElement(state, elementId);
const { image = {}, settings = {} } = element.data;
return {
element: { id: element.id, type: element.type, path: element.path },
image,
horizontalAlign: settings.horizontalAlign || "center"
};
},
{ updateElement },
null,
{ areStatePropsEqual: isEqual }
),
withHandlers({
onChange: ({ updateElement, element }) => async data => {
updateElement({ element: set(element, "data.image.file", data), merge: true });
}
})
)(ImageContainer);