-
Notifications
You must be signed in to change notification settings - Fork 583
/
Settings.js
91 lines (76 loc) · 2.7 KB
/
Settings.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
//@flow
import React from "react";
import { connect } from "@webiny/app-page-builder/editor/redux";
import { compose } from "recompose";
import { get } from "lodash";
import { set } from "dot-prop-immutable";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { Input } from "@webiny/ui/Input";
import { InputContainer } from "@webiny/app-page-builder/editor/plugins/elementSettings/components/StyledComponents";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Form } from "@webiny/form";
import { updateElement } from "@webiny/app-page-builder/editor/actions";
import { getActiveElement } from "@webiny/app-page-builder/editor/selectors";
const validateWidth = value => {
if (!value) {
return null;
}
if (isNaN(parseInt(value))) {
throw Error("Enter a valid number!");
}
if (value.endsWith("%") || value.endsWith("px")) {
return true;
}
throw Error("Specify % or px!");
};
type Props = {
element: Object,
updateElement: Function
};
class Settings extends React.Component<Props> {
historyUpdated = {};
updateSettings = async (data, form) => {
const valid = await form.validate();
if (!valid) {
return;
}
const { element, updateElement } = this.props;
const attrKey = `data.settings.width`;
const newElement = set(element, attrKey, data);
updateElement({ element: newElement });
};
render() {
const { element } = this.props;
const { data } = element;
const settings = get(data, "settings.width", { value: "100%" });
return (
<Form data={settings} onChange={this.updateSettings}>
{({ Bind }) => (
<Tabs>
<Tab label={"Width"}>
<Grid>
<Cell span={5}>
<Typography use={"overline"}>Width</Typography>
</Cell>
<Cell span={7}>
<InputContainer width={"auto"} margin={0}>
<Bind name={"value"} validators={[validateWidth]}>
<Input />
</Bind>
</InputContainer>
</Cell>
</Grid>
</Tab>
</Tabs>
)}
</Form>
);
}
}
export default compose(
connect(
state => ({ element: getActiveElement(state) }),
{ updateElement }
)
)(Settings);