-
Notifications
You must be signed in to change notification settings - Fork 583
/
SpacerContainer.js
93 lines (86 loc) · 2.76 KB
/
SpacerContainer.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// @flow
import * as React from "react";
import { compose, withHandlers, withState } from "recompose";
import { css } from "emotion";
import styled from "react-emotion";
import { connect } from "@webiny/app-page-builder/editor/redux";
import { set } from "dot-prop-immutable";
import { get } from "lodash";
import Resizer from "@webiny/app-page-builder/editor/components/Resizer";
import { updateElement } from "@webiny/app-page-builder/editor/actions";
import { getElement } from "@webiny/app-page-builder/editor/selectors";
import { resizeStart, resizeStop } from "./actions";
const SpacerHandle = styled("div")({
height: "100%",
width: "100%",
position: "absolute",
left: 0,
bottom: -8
});
const SpacerHeight = styled("div")({
position: "absolute",
width: 50,
top: "calc(50% - 12px)",
left: "calc(50% - 25px)",
color: "white",
fontSize: 12,
padding: 5,
borderRadius: 5
});
export const MIN_HEIGHT = 20;
export const INIT_HEIGHT = 100;
const SpacerContainer = ({
localHeight,
onResizeStart,
onResizeStop,
onResize,
elementStyle,
customClasses,
combineClassNames
}) => {
let { height = MIN_HEIGHT, ...spacerStyle } = elementStyle;
if (localHeight) {
height = localHeight;
}
return (
<div style={{ height }} className={combineClassNames(css(spacerStyle), ...customClasses)}>
<Resizer
axis={"y"}
onResizeStart={onResizeStart}
onResizeStop={onResizeStop}
onResize={onResize}
>
{({ ...otherProps }) => (
<React.Fragment>
<SpacerHeight>
{height}
px
</SpacerHeight>
<SpacerHandle {...otherProps} />
</React.Fragment>
)}
</Resizer>
</div>
);
};
export default compose(
connect(
(state, props) => ({ element: getElement(state, props.elementId) }),
{ updateElement, resizeStart, resizeStop }
),
withState("localHeight", "setHeight", null),
withHandlers({
onResizeStart: ({ element, setHeight, resizeStart }) => () => {
resizeStart();
setHeight(get(element, "data.settings.height.value", MIN_HEIGHT));
},
onResizeStop: ({ resizeStop, updateElement, element, setHeight, localHeight }) => () => {
resizeStop();
updateElement({ element: set(element, "data.settings.height.value", localHeight) });
setHeight(null);
},
onResize: ({ setHeight, localHeight }) => diff => {
setHeight(Math.max(MIN_HEIGHT, localHeight - diff));
}
})
)(SpacerContainer);