-
Notifications
You must be signed in to change notification settings - Fork 583
/
ButtonContainer.js
66 lines (61 loc) · 2.18 KB
/
ButtonContainer.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 { compose, withHandlers } from "recompose";
import { set } from "dot-prop-immutable";
import { updateElement } from "@webiny/app-page-builder/editor/actions";
import { getElement } from "@webiny/app-page-builder/editor/selectors";
import ConnectedSlate from "@webiny/app-page-builder/editor/components/ConnectedSlate";
const excludePlugins = [
"pb-editor-slate-menu-item-link",
"pb-editor-slate-menu-item-align",
"pb-editor-slate-menu-item-ordered-list",
"pb-editor-slate-menu-item-unordered-list",
"pb-editor-slate-menu-item-code",
"pb-editor-slate-editor-align",
"pb-editor-slate-editor-lists",
"pb-editor-slate-editor-link"
];
const ButtonContainer = ({ getAllClasses, elementStyle, elementAttributes, element, onChange }) => {
const { type = "default", icon = {}, } = element.data || {};
const svg = icon.svg || null;
const { alignItems } = elementStyle;
const { position = "left" } = icon;
return (
<div
style={{
display: "flex",
justifyContent: alignItems
}}
>
<a
href={null}
style={elementStyle}
{...elementAttributes}
className={getAllClasses(
"webiny-pb-page-element-button",
"webiny-pb-page-element-button--" + type,
"webiny-pb-page-element-button__icon--" + position
)}
>
{svg && <span dangerouslySetInnerHTML={{ __html: svg }} />}
<ConnectedSlate
elementId={element.id}
onChange={onChange}
exclude={excludePlugins}
/>
</a>
</div>
);
};
export default compose(
connect(
(state, props) => ({ element: getElement(state, props.elementId) }),
{ updateElement }
),
withHandlers({
onChange: ({ element, updateElement }) => (value: string) => {
updateElement({ element: set(element, "data.text", value) });
}
})
)(ButtonContainer);