@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.
@@ -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("div", {
147
+ children: [/*#__PURE__*/_jsx(Box, {
148
+ component: "div",
153
149
  className: "editor-btn-wrapper-inner",
154
- style: {
155
- display: "inline"
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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("img", {
138
- style: {
139
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: "flex",
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("iframe", {
138
+ }) : /*#__PURE__*/_jsx(Box, {
139
+ component: "iframe",
144
140
  className: "embedd-iframe",
145
- style: {
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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("div", {
169
+ return /*#__PURE__*/_jsxs(Box, {
172
170
  ...attributes,
173
171
  className: "embed has-hover video",
174
- style: {
175
- display: "flex",
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 = '', val = '') => {
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('field_type', 'email');
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('name', pair[0]);
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 === 'email') {
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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
- style: {
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: "flex",
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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("button", {
27
+ return /*#__PURE__*/_jsxs(Box, {
32
28
  ...attributes,
33
29
  className: "editor-icon-text",
34
30
  contentEditable: false,
35
- style: {
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: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
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: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
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"
@@ -33,7 +33,7 @@ const BannerSpacing = props => {
33
33
  }
34
34
  onChange({
35
35
  [key]: {
36
- ...getBreakPointsValue(val),
36
+ ...getBreakPointsValue(val, null),
37
37
  [size?.device]: {
38
38
  ...value,
39
39
  ...changeAll,
@@ -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
- ...value,
34
- [e.target.name]: e.target.value,
35
- ...changeAll
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) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"