@flozy/editor 2.0.0 → 2.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/Button/EditorButton.js +13 -12
- package/dist/Editor/Elements/ChipText/ChipText.js +5 -9
- package/dist/Editor/Elements/Embed/Image.js +12 -11
- package/dist/Editor/Elements/Embed/Video.js +14 -13
- package/dist/Editor/Elements/Form/Form.js +12 -14
- package/dist/Editor/Elements/Form/FormElements/FormEmail.js +4 -8
- package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -8
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +4 -8
- package/dist/Editor/Elements/Grid/Grid.js +10 -9
- package/dist/Editor/Elements/Grid/GridItem.js +9 -9
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +8 -9
- package/dist/Editor/common/Section/index.js +3 -7
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +13 -4
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/gridStyle.js +5 -0
- package/dist/Editor/helper/theme.js +3 -0
- package/package.json +1 -1
@@ -9,7 +9,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
|
|
9
9
|
import ButtonPopup from "./ButtonPopup";
|
10
10
|
import { actionButtonRedirect } from "../../service/actionTrigger";
|
11
11
|
import { WorkflowIcon } from "../../common/iconslist";
|
12
|
-
import { getTRBLBreakPoints } from "../../helper/theme";
|
12
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
15
|
const EditorButton = props => {
|
@@ -44,19 +44,14 @@ const EditorButton = props => {
|
|
44
44
|
borderStyle,
|
45
45
|
borderWidth,
|
46
46
|
borderColor,
|
47
|
-
alignment
|
47
|
+
alignment,
|
48
|
+
xsHidden
|
48
49
|
} = element;
|
49
50
|
const {
|
50
51
|
linkType,
|
51
52
|
redirectOnURLResult
|
52
53
|
} = buttonLink || {};
|
53
54
|
const isTrigger = linkType === "actionTrigger";
|
54
|
-
const {
|
55
|
-
topLeft,
|
56
|
-
topRight,
|
57
|
-
bottomLeft,
|
58
|
-
bottomRight
|
59
|
-
} = borderRadius || {};
|
60
55
|
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
|
61
56
|
const onClick = async e => {
|
62
57
|
if (readOnly) {
|
@@ -149,10 +144,14 @@ const EditorButton = props => {
|
|
149
144
|
textAlign: alignment || textAlign || "left"
|
150
145
|
},
|
151
146
|
contentEditable: false,
|
152
|
-
children: [/*#__PURE__*/_jsx(
|
147
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
148
|
+
component: "div",
|
153
149
|
className: "editor-btn-wrapper-inner",
|
154
|
-
|
155
|
-
display:
|
150
|
+
sx: {
|
151
|
+
display: {
|
152
|
+
lg: "inline",
|
153
|
+
xs: xsHidden ? "none" : "inline"
|
154
|
+
}
|
156
155
|
},
|
157
156
|
children: /*#__PURE__*/_jsxs("span", {
|
158
157
|
style: {
|
@@ -165,7 +164,9 @@ const EditorButton = props => {
|
|
165
164
|
borderBlockStyle: "solid",
|
166
165
|
borderColor: borderColor || "transparent",
|
167
166
|
borderWidth: borderWidth || "1px",
|
168
|
-
borderRadius:
|
167
|
+
borderRadius: {
|
168
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
169
|
+
},
|
169
170
|
borderStyle: borderStyle || "solid",
|
170
171
|
padding: {
|
171
172
|
...getTRBLBreakPoints(bannerSpacing)
|
@@ -2,9 +2,9 @@ import React, { useState } from "react";
|
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import * as fIcons from "@mui/icons-material";
|
5
|
-
import ChipTextPopup from "./ChipTextPopup";
|
6
|
-
import { getTRBLBreakPoints } from "../../helper/theme";
|
7
5
|
import { Box } from "@mui/material";
|
6
|
+
import ChipTextPopup from "./ChipTextPopup";
|
7
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
10
|
const ChipText = props => {
|
@@ -26,12 +26,6 @@ const ChipText = props => {
|
|
26
26
|
buttonIcon,
|
27
27
|
textSize
|
28
28
|
} = element;
|
29
|
-
const {
|
30
|
-
topLeft,
|
31
|
-
topRight,
|
32
|
-
bottomLeft,
|
33
|
-
bottomRight
|
34
|
-
} = borderRadius || {};
|
35
29
|
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
|
36
30
|
const [openSetttings, setOpenSettings] = useState(false);
|
37
31
|
const editor = useSlateStatic();
|
@@ -82,7 +76,9 @@ const ChipText = props => {
|
|
82
76
|
...getTRBLBreakPoints(bannerSpacing)
|
83
77
|
},
|
84
78
|
border: borderColor ? `1px solid ${borderColor}` : "none",
|
85
|
-
borderRadius:
|
79
|
+
borderRadius: {
|
80
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
81
|
+
},
|
86
82
|
background: bgColor || "#CCC",
|
87
83
|
color: textColor
|
88
84
|
},
|
@@ -26,17 +26,12 @@ const Image = ({
|
|
26
26
|
borderColor,
|
27
27
|
borderRadius,
|
28
28
|
boxShadow,
|
29
|
-
width: oldWidth
|
29
|
+
width: oldWidth,
|
30
|
+
xsHidden
|
30
31
|
} = element;
|
31
32
|
const {
|
32
33
|
readOnly
|
33
34
|
} = customProps;
|
34
|
-
const {
|
35
|
-
topLeft,
|
36
|
-
topRight,
|
37
|
-
bottomLeft,
|
38
|
-
bottomRight
|
39
|
-
} = borderRadius || {};
|
40
35
|
const {
|
41
36
|
vertical,
|
42
37
|
horizantal
|
@@ -134,9 +129,12 @@ const Image = ({
|
|
134
129
|
children: [/*#__PURE__*/_jsx(Icon, {
|
135
130
|
icon: "image"
|
136
131
|
}), "Add Image"]
|
137
|
-
}) : /*#__PURE__*/_jsx(
|
138
|
-
|
139
|
-
|
132
|
+
}) : /*#__PURE__*/_jsx(Box, {
|
133
|
+
component: "img",
|
134
|
+
sx: {
|
135
|
+
borderRadius: {
|
136
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
137
|
+
},
|
140
138
|
objectFit: "cover",
|
141
139
|
boxShadow: boxShadow || "none"
|
142
140
|
},
|
@@ -165,7 +163,10 @@ const Image = ({
|
|
165
163
|
component: "div",
|
166
164
|
className: "embed has-hover",
|
167
165
|
sx: {
|
168
|
-
display:
|
166
|
+
display: {
|
167
|
+
lg: "flex",
|
168
|
+
xs: xsHidden ? "none" : "flex"
|
169
|
+
},
|
169
170
|
width: `100%`,
|
170
171
|
maxWidth: "100%",
|
171
172
|
padding: {
|
@@ -26,7 +26,8 @@ const Video = ({
|
|
26
26
|
borderWidth,
|
27
27
|
borderColor,
|
28
28
|
borderStyle,
|
29
|
-
url
|
29
|
+
url,
|
30
|
+
xsHidden
|
30
31
|
} = element;
|
31
32
|
const editor = useSlateStatic();
|
32
33
|
const [openSetttings, setOpenSettings] = useState(false);
|
@@ -52,12 +53,6 @@ const Video = ({
|
|
52
53
|
});
|
53
54
|
const arr = Array.from(Node.elements(editor));
|
54
55
|
const ele = arr.find(([elem]) => element === elem);
|
55
|
-
const {
|
56
|
-
topLeft,
|
57
|
-
topRight,
|
58
|
-
bottomLeft,
|
59
|
-
bottomRight
|
60
|
-
} = borderRadius || {};
|
61
56
|
useEffect(() => {
|
62
57
|
if (editor && ele && ele[1] !== undefined) {
|
63
58
|
const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
|
@@ -140,9 +135,10 @@ const Video = ({
|
|
140
135
|
children: /*#__PURE__*/_jsx(Icon, {
|
141
136
|
icon: "videoPlayer"
|
142
137
|
})
|
143
|
-
}) : /*#__PURE__*/_jsx(
|
138
|
+
}) : /*#__PURE__*/_jsx(Box, {
|
139
|
+
component: "iframe",
|
144
140
|
className: "embedd-iframe",
|
145
|
-
|
141
|
+
sx: {
|
146
142
|
border: "none",
|
147
143
|
position: "absolute",
|
148
144
|
width: "100%",
|
@@ -151,7 +147,9 @@ const Video = ({
|
|
151
147
|
left: "0px",
|
152
148
|
...(gradientBorder(borderColor) || {}),
|
153
149
|
borderWidth: borderWidth || "1px",
|
154
|
-
borderRadius:
|
150
|
+
borderRadius: {
|
151
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
152
|
+
},
|
155
153
|
borderStyle: borderStyle || "solid"
|
156
154
|
},
|
157
155
|
src: embedURL,
|
@@ -168,11 +166,14 @@ const Video = ({
|
|
168
166
|
}), "Embed Video or Other"]
|
169
167
|
}) : /*#__PURE__*/_jsx(VideoContent, {});
|
170
168
|
};
|
171
|
-
return /*#__PURE__*/_jsxs(
|
169
|
+
return /*#__PURE__*/_jsxs(Box, {
|
172
170
|
...attributes,
|
173
171
|
className: "embed has-hover video",
|
174
|
-
|
175
|
-
display:
|
172
|
+
sx: {
|
173
|
+
display: {
|
174
|
+
lg: "flex",
|
175
|
+
xs: xsHidden ? "none" : "flex"
|
176
|
+
},
|
176
177
|
flexDirection: "row",
|
177
178
|
width: `100%`,
|
178
179
|
justifyContent: horizantal,
|
@@ -11,7 +11,7 @@ import { formField } from "../../utils/formfield";
|
|
11
11
|
import { formSubmit } from "../../service/formSubmit";
|
12
12
|
import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
|
13
13
|
import Workflow from "./Workflow";
|
14
|
-
import { getTRBLBreakPoints } from "../../helper/theme";
|
14
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
15
15
|
import { validation } from "./FormElements/validations";
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -41,12 +41,6 @@ const Form = props => {
|
|
41
41
|
fontFamily,
|
42
42
|
textAlign
|
43
43
|
} = element;
|
44
|
-
const {
|
45
|
-
topLeft,
|
46
|
-
topRight,
|
47
|
-
bottomLeft,
|
48
|
-
bottomRight
|
49
|
-
} = borderRadius || {};
|
50
44
|
const btnR = buttonProps?.borderRadius || {};
|
51
45
|
const btnSpacing = buttonProps?.bannerSpacing || {};
|
52
46
|
const btnAlign = buttonProps?.alignment || {};
|
@@ -66,7 +60,7 @@ const Form = props => {
|
|
66
60
|
} : {
|
67
61
|
borderColor: buttonProps?.borderColor || "none"
|
68
62
|
};
|
69
|
-
const getFieldProps = (key =
|
63
|
+
const getFieldProps = (key = "", val = "") => {
|
70
64
|
return element?.children?.find(obj => obj && obj[key] === val);
|
71
65
|
};
|
72
66
|
const handleSubmit = async (event, test = false) => {
|
@@ -77,14 +71,14 @@ const Form = props => {
|
|
77
71
|
const formData = new FormData(formEle?.current);
|
78
72
|
setLoading(true);
|
79
73
|
let response = {};
|
80
|
-
const emailObject = getFieldProps(
|
81
|
-
let user_email =
|
74
|
+
const emailObject = getFieldProps("field_type", "email");
|
75
|
+
let user_email = "";
|
82
76
|
const validations = [];
|
83
77
|
for (let pair of formData.entries()) {
|
84
78
|
if (emailObject?.name === pair[0]) {
|
85
79
|
user_email = pair[1];
|
86
80
|
}
|
87
|
-
const fieldData = getFieldProps(
|
81
|
+
const fieldData = getFieldProps("name", pair[0]);
|
88
82
|
let rule = [];
|
89
83
|
if (fieldData?.required) {
|
90
84
|
rule.push(`isRequired`);
|
@@ -92,7 +86,7 @@ const Form = props => {
|
|
92
86
|
if (fieldData?.field_type === "email") {
|
93
87
|
rule.push(`isEmail`);
|
94
88
|
}
|
95
|
-
if (fieldData?.required || fieldData?.field_type ===
|
89
|
+
if (fieldData?.required || fieldData?.field_type === "email") {
|
96
90
|
validations.push({
|
97
91
|
name: pair[0],
|
98
92
|
value: pair[1],
|
@@ -274,7 +268,9 @@ const Form = props => {
|
|
274
268
|
color: textColor || "#FFF",
|
275
269
|
borderColor: borderColor || "transparent",
|
276
270
|
borderWidth: borderWidth || "1px",
|
277
|
-
borderRadius:
|
271
|
+
borderRadius: {
|
272
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
273
|
+
},
|
278
274
|
borderStyle: borderStyle || "solid",
|
279
275
|
background: bgColor || "transparent",
|
280
276
|
padding: {
|
@@ -317,7 +313,9 @@ const Form = props => {
|
|
317
313
|
borderWidth: "1px",
|
318
314
|
borderBlockStyle: "solid",
|
319
315
|
...btnBorderStyle,
|
320
|
-
borderRadius:
|
316
|
+
borderRadius: {
|
317
|
+
...getBreakPointsValue(btnR || {}, null, "overrideBorderRadius", true)
|
318
|
+
},
|
321
319
|
padding: {
|
322
320
|
...getTRBLBreakPoints(btnSpacing)
|
323
321
|
},
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { getTRBLBreakPoints } from "../../../helper/theme";
|
3
2
|
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const FormEmail = props => {
|
6
6
|
const {
|
@@ -18,12 +18,6 @@ const FormEmail = props => {
|
|
18
18
|
lockSpacing,
|
19
19
|
...rest
|
20
20
|
} = fieldProps;
|
21
|
-
const {
|
22
|
-
topLeft,
|
23
|
-
topRight,
|
24
|
-
bottomLeft,
|
25
|
-
bottomRight
|
26
|
-
} = borderRadius || {};
|
27
21
|
const onChange = e => {
|
28
22
|
e.preventDefault();
|
29
23
|
};
|
@@ -48,7 +42,9 @@ const FormEmail = props => {
|
|
48
42
|
height: height || "auto",
|
49
43
|
borderColor: borderColor || "transparent",
|
50
44
|
borderWidth: borderWidth || "1px",
|
51
|
-
borderRadius:
|
45
|
+
borderRadius: {
|
46
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
47
|
+
},
|
52
48
|
borderStyle: borderStyle || "solid",
|
53
49
|
color: textColor || "#000",
|
54
50
|
background: bgColor || "transparent"
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { getTRBLBreakPoints } from "../../../helper/theme";
|
3
2
|
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const FormText = props => {
|
6
6
|
const {
|
@@ -18,12 +18,6 @@ const FormText = props => {
|
|
18
18
|
lockSpacing,
|
19
19
|
...rest
|
20
20
|
} = fieldProps;
|
21
|
-
const {
|
22
|
-
topLeft,
|
23
|
-
topRight,
|
24
|
-
bottomLeft,
|
25
|
-
bottomRight
|
26
|
-
} = borderRadius || {};
|
27
21
|
const onChange = e => {
|
28
22
|
e.preventDefault();
|
29
23
|
};
|
@@ -46,7 +40,9 @@ const FormText = props => {
|
|
46
40
|
height: height || "auto",
|
47
41
|
borderColor: borderColor || "transparent",
|
48
42
|
borderWidth: borderWidth || "1px",
|
49
|
-
borderRadius:
|
43
|
+
borderRadius: {
|
44
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
45
|
+
},
|
50
46
|
borderStyle: borderStyle || "solid",
|
51
47
|
color: textColor || "#000",
|
52
48
|
background: bgColor || "transparent"
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Box } from "@mui/material";
|
3
|
-
import { getTRBLBreakPoints } from "../../../helper/theme";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const FormTextArea = props => {
|
6
6
|
const {
|
@@ -17,12 +17,6 @@ const FormTextArea = props => {
|
|
17
17
|
bgColor,
|
18
18
|
...rest
|
19
19
|
} = fieldProps;
|
20
|
-
const {
|
21
|
-
topLeft,
|
22
|
-
topRight,
|
23
|
-
bottomLeft,
|
24
|
-
bottomRight
|
25
|
-
} = borderRadius || {};
|
26
20
|
const onChange = e => {
|
27
21
|
e.preventDefault();
|
28
22
|
};
|
@@ -45,7 +39,9 @@ const FormTextArea = props => {
|
|
45
39
|
height: height || "150px",
|
46
40
|
borderColor: borderColor || "transparent",
|
47
41
|
borderWidth: borderWidth || "1px",
|
48
|
-
borderRadius:
|
42
|
+
borderRadius: {
|
43
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
44
|
+
},
|
49
45
|
borderStyle: borderStyle || "solid",
|
50
46
|
color: textColor || "#000",
|
51
47
|
background: bgColor || "transparent"
|
@@ -43,19 +43,14 @@ const Grid = props => {
|
|
43
43
|
borderColor,
|
44
44
|
borderStyle,
|
45
45
|
borderRadius,
|
46
|
-
flexWrap
|
46
|
+
flexWrap,
|
47
|
+
xsHidden
|
47
48
|
} = element;
|
48
49
|
const {
|
49
50
|
vertical,
|
50
51
|
horizantal,
|
51
52
|
flexDirection
|
52
53
|
} = alignment || {};
|
53
|
-
const {
|
54
|
-
topLeft,
|
55
|
-
topRight,
|
56
|
-
bottomLeft,
|
57
|
-
bottomRight
|
58
|
-
} = borderRadius || {};
|
59
54
|
const editor = useSlateStatic();
|
60
55
|
const path = ReactEditor.findPath(editor, element);
|
61
56
|
const {
|
@@ -254,13 +249,19 @@ const Grid = props => {
|
|
254
249
|
className: `grid-container ${grid} has-hover element-root`,
|
255
250
|
...attributes,
|
256
251
|
...sectionId,
|
257
|
-
|
252
|
+
sx: {
|
253
|
+
display: {
|
254
|
+
lg: "flex",
|
255
|
+
xs: xsHidden ? "none" : "flex"
|
256
|
+
},
|
258
257
|
background: bgColor,
|
259
258
|
alignContent: vertical,
|
260
259
|
...bgImage,
|
261
260
|
borderColor: borderColor || "transparent",
|
262
261
|
borderWidth: borderWidth || "1px",
|
263
|
-
borderRadius:
|
262
|
+
borderRadius: {
|
263
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
264
|
+
},
|
264
265
|
borderStyle: borderStyle || "solid"
|
265
266
|
},
|
266
267
|
"data-path": path.join(","),
|
@@ -34,19 +34,14 @@ const GridItem = props => {
|
|
34
34
|
borderColorHover,
|
35
35
|
textColor,
|
36
36
|
animation,
|
37
|
-
cellGHeight
|
37
|
+
cellGHeight,
|
38
|
+
xsHidden
|
38
39
|
} = element;
|
39
40
|
const {
|
40
41
|
vertical,
|
41
42
|
horizantal,
|
42
43
|
flexDirection
|
43
44
|
} = alignment || {};
|
44
|
-
const {
|
45
|
-
topLeft,
|
46
|
-
topRight,
|
47
|
-
bottomLeft,
|
48
|
-
bottomRight
|
49
|
-
} = borderRadius || {};
|
50
45
|
const editor = useSlateStatic();
|
51
46
|
const path = ReactEditor.findPath(editor, element);
|
52
47
|
const {
|
@@ -109,12 +104,17 @@ const GridItem = props => {
|
|
109
104
|
height: {
|
110
105
|
...getBreakPointsValue(cellGHeight || "auto")
|
111
106
|
},
|
112
|
-
display:
|
107
|
+
display: {
|
108
|
+
lg: "flex",
|
109
|
+
xs: xsHidden ? "none" : "flex"
|
110
|
+
},
|
113
111
|
flexDirection: flexDirection || "column",
|
114
112
|
background: bgColor || "transparent",
|
115
113
|
borderColor: borderColor || "transparent",
|
116
114
|
borderWidth: borderWidth || "1px",
|
117
|
-
borderRadius:
|
115
|
+
borderRadius: {
|
116
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
117
|
+
},
|
118
118
|
borderStyle: borderStyle || "solid",
|
119
119
|
alignItems: horizantal,
|
120
120
|
justifyContent: vertical,
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import * as fIcons from "@mui/icons-material";
|
3
|
+
import { Box } from "@mui/material";
|
4
|
+
import { getBreakPointsValue } from "../../helper/theme";
|
3
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
7
|
const InlineIcon = props => {
|
@@ -21,25 +23,22 @@ const InlineIcon = props => {
|
|
21
23
|
right,
|
22
24
|
bottom
|
23
25
|
} = bannerSpacing || {};
|
24
|
-
const {
|
25
|
-
topLeft,
|
26
|
-
topRight,
|
27
|
-
bottomLeft,
|
28
|
-
bottomRight
|
29
|
-
} = borderRadius || {};
|
30
26
|
const BtnIcon = fIcons["Check"];
|
31
|
-
return /*#__PURE__*/_jsxs(
|
27
|
+
return /*#__PURE__*/_jsxs(Box, {
|
32
28
|
...attributes,
|
33
29
|
className: "editor-icon-text",
|
34
30
|
contentEditable: false,
|
35
|
-
|
31
|
+
component: "button",
|
32
|
+
sx: {
|
36
33
|
display: "inline",
|
37
34
|
paddingLeft: `${left}px`,
|
38
35
|
paddingRight: `${right}px`,
|
39
36
|
paddingTop: `${top}px`,
|
40
37
|
paddingBottom: `${bottom}px`,
|
41
38
|
border: borderColor ? `1px solid ${borderColor}` : "none",
|
42
|
-
borderRadius:
|
39
|
+
borderRadius: {
|
40
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
41
|
+
},
|
43
42
|
background: bgColor || "#CCC",
|
44
43
|
color: textColor
|
45
44
|
},
|
@@ -44,12 +44,6 @@ const Section = props => {
|
|
44
44
|
sectionGridSize,
|
45
45
|
sectionAlignment
|
46
46
|
} = element;
|
47
|
-
const {
|
48
|
-
topLeft: ssTopLeft,
|
49
|
-
topRight: ssTopRight,
|
50
|
-
bottomLeft: ssBottomLeft,
|
51
|
-
bottomRight: ssBottomRight
|
52
|
-
} = sectionBorderRadius || {};
|
53
47
|
const {
|
54
48
|
vertical,
|
55
49
|
horizantal,
|
@@ -110,7 +104,9 @@ const Section = props => {
|
|
110
104
|
padding: {
|
111
105
|
...getTRBLBreakPoints(sectionBannerSpacing)
|
112
106
|
},
|
113
|
-
borderRadius:
|
107
|
+
borderRadius: {
|
108
|
+
...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
|
109
|
+
},
|
114
110
|
flexDirection: flexDirection || "column",
|
115
111
|
alignItems: horizantal,
|
116
112
|
justifyContent: vertical
|
@@ -62,6 +62,11 @@ const buttonStyle = [{
|
|
62
62
|
tab: "Banner Spacing",
|
63
63
|
value: "bannerSpacing",
|
64
64
|
fields: [{
|
65
|
+
label: "Hide on Mobile",
|
66
|
+
key: "xsHidden",
|
67
|
+
type: "selectBox",
|
68
|
+
placeholder: "Hide on Mobile"
|
69
|
+
}, {
|
65
70
|
label: "Banner Spacing",
|
66
71
|
key: "bannerSpacing",
|
67
72
|
type: "bannerSpacing"
|
@@ -31,6 +31,11 @@ const embedImageStyle = [{
|
|
31
31
|
tab: "Position",
|
32
32
|
value: "position",
|
33
33
|
fields: [{
|
34
|
+
label: "Hide on Mobile",
|
35
|
+
key: "xsHidden",
|
36
|
+
type: "selectBox",
|
37
|
+
placeholder: "Hide on Mobile"
|
38
|
+
}, {
|
34
39
|
label: "Set Postion (Vertical & Horizantal)",
|
35
40
|
key: "alignment",
|
36
41
|
type: "alignment"
|
@@ -11,6 +11,11 @@ const embedVideoStyle = [{
|
|
11
11
|
tab: "Position",
|
12
12
|
value: "position",
|
13
13
|
fields: [{
|
14
|
+
label: "Hide on Mobile",
|
15
|
+
key: "xsHidden",
|
16
|
+
type: "selectBox",
|
17
|
+
placeholder: "Hide on Mobile"
|
18
|
+
}, {
|
14
19
|
label: "Set Postion (Vertical & Horizantal)",
|
15
20
|
key: "alignment",
|
16
21
|
type: "alignment"
|
@@ -1,12 +1,14 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
|
+
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
+
import { getBreakPointsValue } from "../../../helper/theme";
|
4
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
8
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
7
9
|
const BorderRadius = props => {
|
8
10
|
const {
|
9
|
-
value,
|
11
|
+
value: val,
|
10
12
|
data,
|
11
13
|
onChange,
|
12
14
|
elementProps,
|
@@ -21,6 +23,8 @@ const BorderRadius = props => {
|
|
21
23
|
const {
|
22
24
|
key
|
23
25
|
} = data;
|
26
|
+
const [size] = useWindowResize();
|
27
|
+
const value = getBreakPointsValue(val, size?.device);
|
24
28
|
const handleChange = e => {
|
25
29
|
let changeAll = {};
|
26
30
|
if (lockRadius) {
|
@@ -30,9 +34,11 @@ const BorderRadius = props => {
|
|
30
34
|
}
|
31
35
|
onChange({
|
32
36
|
[key]: {
|
33
|
-
...
|
34
|
-
[
|
35
|
-
|
37
|
+
...getBreakPointsValue(val, null),
|
38
|
+
[size?.device]: {
|
39
|
+
...changeAll,
|
40
|
+
[e.target.name]: e.target.value
|
41
|
+
}
|
36
42
|
}
|
37
43
|
});
|
38
44
|
};
|
@@ -63,15 +69,18 @@ const BorderRadius = props => {
|
|
63
69
|
disabled: !lockRadius,
|
64
70
|
className: "spacingSlider",
|
65
71
|
defaultValue: value?.topLeft || 0,
|
72
|
+
value: value?.topLeft || 0,
|
66
73
|
"aria-label": "Default",
|
67
74
|
valueLabelDisplay: "auto",
|
68
75
|
max: 100,
|
76
|
+
name: "topLeft",
|
69
77
|
onChange: handleChange
|
70
78
|
}), /*#__PURE__*/_jsx(Box, {
|
71
79
|
sx: classes.sapcingInput,
|
72
80
|
component: "input",
|
73
81
|
value: !lockRadius ? "" : value?.topLeft || 0,
|
74
82
|
className: "sliderInput",
|
83
|
+
name: "topLeft",
|
75
84
|
disabled: !lockRadius,
|
76
85
|
onChange: handleChange
|
77
86
|
})]
|
@@ -15,6 +15,11 @@ const gridItemStyle = [{
|
|
15
15
|
tab: "Position",
|
16
16
|
value: "position",
|
17
17
|
fields: [{
|
18
|
+
label: "Hide on Mobile",
|
19
|
+
key: "xsHidden",
|
20
|
+
type: "selectBox",
|
21
|
+
placeholder: "Hide on Mobile"
|
22
|
+
}, {
|
18
23
|
label: "Set Postion (Vertical & Horizantal)",
|
19
24
|
key: "alignment",
|
20
25
|
type: "alignment"
|
@@ -40,6 +40,11 @@ const gridStyle = [{
|
|
40
40
|
tab: "Position",
|
41
41
|
value: "position",
|
42
42
|
fields: [{
|
43
|
+
label: "Hide on Mobile",
|
44
|
+
key: "xsHidden",
|
45
|
+
type: "selectBox",
|
46
|
+
placeholder: "Hide on Mobile"
|
47
|
+
}, {
|
43
48
|
label: "Set Postion (Vertical & Horizantal)",
|
44
49
|
key: "alignment",
|
45
50
|
type: "alignment"
|
@@ -43,6 +43,9 @@ const overrides = {
|
|
43
43
|
},
|
44
44
|
overrideReSizeH: val => {
|
45
45
|
return `${val?.height}px`;
|
46
|
+
},
|
47
|
+
overrideBorderRadius: val => {
|
48
|
+
return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
|
46
49
|
}
|
47
50
|
};
|
48
51
|
export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
|