@flozy/editor 1.3.4 → 1.3.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/Editor/CommonEditor.js +5 -3
  2. package/dist/Editor/Editor.css +388 -314
  3. package/dist/Editor/Elements/Accordion/Accordion.js +31 -9
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +17 -5
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -1
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -2
  7. package/dist/Editor/Elements/Carousel/Carousel.js +38 -18
  8. package/dist/Editor/Elements/Embed/Video.js +3 -4
  9. package/dist/Editor/Elements/Form/FieldPopup.js +20 -0
  10. package/dist/Editor/Elements/Form/Form.js +268 -0
  11. package/dist/Editor/Elements/Form/FormButton.js +21 -0
  12. package/dist/Editor/Elements/Form/FormElements/FormText.js +48 -0
  13. package/dist/Editor/Elements/Form/FormElements/index.js +5 -0
  14. package/dist/Editor/Elements/Form/FormField.js +101 -0
  15. package/dist/Editor/Elements/Form/FormPopup.js +20 -0
  16. package/dist/Editor/Elements/Grid/Grid.js +10 -3
  17. package/dist/Editor/Elements/Grid/GridButton.js +24 -5
  18. package/dist/Editor/Elements/Grid/GridItem.js +11 -4
  19. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  20. package/dist/Editor/Toolbar/toolbarGroups.js +3 -0
  21. package/dist/Editor/common/StyleBuilder/buttonStyle.js +28 -2
  22. package/dist/Editor/common/StyleBuilder/fieldStyle.js +71 -0
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +28 -0
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +7 -1
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +3 -2
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +35 -0
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +60 -0
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +46 -0
  30. package/dist/Editor/common/StyleBuilder/formStyle.js +82 -0
  31. package/dist/Editor/service/formSubmit.js +16 -0
  32. package/dist/Editor/utils/SlateUtilityFunctions.js +12 -1
  33. package/dist/Editor/utils/form.js +24 -0
  34. package/dist/Editor/utils/formfield.js +20 -0
  35. package/dist/Editor/utils/grid.js +0 -1
  36. package/package.json +1 -1
@@ -0,0 +1,101 @@
1
+ import React, { useState } from "react";
2
+ import { Transforms } from "slate";
3
+ import { useSlateStatic, ReactEditor } from "slate-react";
4
+ import { IconButton, Tooltip, Grid } from "@mui/material";
5
+ import DeleteIcon from "@mui/icons-material/Delete";
6
+ import SettingsIcon from "@mui/icons-material/Settings";
7
+ import FormElements from "./FormElements";
8
+ import FieldPopup from "./FieldPopup";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const FormField = props => {
12
+ const {
13
+ attributes,
14
+ element,
15
+ customProps
16
+ } = props;
17
+ const {
18
+ readOnly
19
+ } = customProps;
20
+ const {
21
+ element: elementType,
22
+ grid,
23
+ children,
24
+ ...elementProps
25
+ } = element;
26
+ const FormElement = FormElements[elementType];
27
+ const editor = useSlateStatic();
28
+ const path = ReactEditor.findPath(editor, element);
29
+ const [openSetttings, setOpenSettings] = useState(false);
30
+ const itemWidth = (grid || 6) / 12 * 100;
31
+ const onSettings = () => {
32
+ setOpenSettings(true);
33
+ };
34
+ const onSave = data => {
35
+ const updateData = {
36
+ ...data
37
+ };
38
+ delete updateData.children;
39
+ Transforms.setNodes(editor, {
40
+ ...updateData
41
+ }, {
42
+ at: path
43
+ });
44
+ onClose();
45
+ };
46
+ const onDelete = () => {
47
+ Transforms.removeNodes(editor, {
48
+ at: path
49
+ });
50
+ };
51
+ const onClose = () => {
52
+ setOpenSettings(false);
53
+ };
54
+ const FieldToolbar = () => {
55
+ return /*#__PURE__*/_jsxs("div", {
56
+ className: "",
57
+ contentEditable: false,
58
+ style: {
59
+ position: "absolute",
60
+ right: "0px",
61
+ top: "16px",
62
+ bottom: 0,
63
+ margin: "auto",
64
+ height: "42px",
65
+ zIndex: 101
66
+ },
67
+ children: [/*#__PURE__*/_jsx(Tooltip, {
68
+ title: "Field Settings",
69
+ arrow: true,
70
+ children: /*#__PURE__*/_jsx(IconButton, {
71
+ onClick: onSettings,
72
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
73
+ })
74
+ }), /*#__PURE__*/_jsx(Tooltip, {
75
+ title: "Delete Field",
76
+ arrow: true,
77
+ children: /*#__PURE__*/_jsx(IconButton, {
78
+ onClick: onDelete,
79
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
80
+ })
81
+ })]
82
+ });
83
+ };
84
+ return /*#__PURE__*/_jsxs(Grid, {
85
+ item: true,
86
+ ...attributes,
87
+ className: "form-field",
88
+ style: {
89
+ position: "relative",
90
+ width: `${itemWidth}%`
91
+ },
92
+ children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
93
+ fieldProps: elementProps
94
+ }), openSetttings ? /*#__PURE__*/_jsx(FieldPopup, {
95
+ element: element,
96
+ onSave: onSave,
97
+ onClose: onClose
98
+ }) : null]
99
+ });
100
+ };
101
+ export default FormField;
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import StyleBuilder from "../../common/StyleBuilder";
3
+ import formStyle from "../../common/StyleBuilder/formStyle";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const FormPopup = props => {
6
+ const {
7
+ element,
8
+ onSave,
9
+ onClose
10
+ } = props;
11
+ return /*#__PURE__*/_jsx(StyleBuilder, {
12
+ title: "Form",
13
+ type: "formStyle",
14
+ element: element,
15
+ onSave: onSave,
16
+ onClose: onClose,
17
+ renderTabs: formStyle
18
+ });
19
+ };
20
+ export default FormPopup;
@@ -36,7 +36,8 @@ const Grid = props => {
36
36
  } = bannerSpacing || {};
37
37
  const {
38
38
  vertical,
39
- horizantal
39
+ horizantal,
40
+ flexDirection
40
41
  } = alignment || {};
41
42
  const editor = useSlateStatic();
42
43
  const selected = useSelected();
@@ -119,7 +120,7 @@ const Grid = props => {
119
120
  }) : null;
120
121
  };
121
122
  return /*#__PURE__*/_jsxs("div", {
122
- className: `grid-container ${grid}`,
123
+ className: `grid-container ${grid} element-root`,
123
124
  ...attributes,
124
125
  style: {
125
126
  background: bgColor,
@@ -127,7 +128,11 @@ const Grid = props => {
127
128
  backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
128
129
  border: `1px solid ${borderColor}`
129
130
  },
130
- children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
131
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
132
+ className: `element-selector ${selected ? "selected" : ""}`,
133
+ contentEditable: false,
134
+ children: /*#__PURE__*/_jsx(GridToolBar, {})
135
+ }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
131
136
  element: element,
132
137
  onSave: onSave,
133
138
  onClose: onClose,
@@ -139,7 +144,9 @@ const Grid = props => {
139
144
  paddingRight: `${right}px`,
140
145
  paddingTop: `${top}px`,
141
146
  paddingBottom: `${bottom}px`,
147
+ alignItems: horizantal,
142
148
  justifyContent: horizantal,
149
+ flexDirection: flexDirection,
143
150
  width: "100%"
144
151
  },
145
152
  children: children
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
2
+ import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
3
3
  import { insertGrid } from "../../utils/grid";
4
4
  import { GridIcon } from "../../common/iconslist";
5
5
  import { ImageList, ImageListItem } from "@mui/material";
@@ -33,9 +33,13 @@ const GridButton = props => {
33
33
  };
34
34
  const handleInsertGrid = item => () => {
35
35
  try {
36
- let template_content = item ? JSON.parse(item.content) : null;
37
- template_content = Array.isArray(template_content) ? template_content : [template_content];
38
- insertGrid(editor, template_content);
36
+ if (item) {
37
+ let template_content = item ? JSON.parse(item.content) : null;
38
+ template_content = Array.isArray(template_content) ? template_content : [template_content];
39
+ insertGrid(editor, template_content);
40
+ } else {
41
+ insertGrid(editor);
42
+ }
39
43
  handleClose();
40
44
  } catch (err) {
41
45
  console.log(err);
@@ -60,7 +64,22 @@ const GridButton = props => {
60
64
  onClose: handleClose,
61
65
  fullWidth: true,
62
66
  children: [/*#__PURE__*/_jsx(DialogTitle, {
63
- children: "Templates"
67
+ children: /*#__PURE__*/_jsxs(Grid, {
68
+ container: true,
69
+ children: [/*#__PURE__*/_jsx(Grid, {
70
+ item: true,
71
+ xs: 6,
72
+ children: "Templates"
73
+ }), /*#__PURE__*/_jsx(Grid, {
74
+ item: true,
75
+ xs: 6,
76
+ textAlign: "right",
77
+ children: /*#__PURE__*/_jsx(Button, {
78
+ onClick: handleInsertGrid(null),
79
+ children: "Insert Default Template"
80
+ })
81
+ })]
82
+ })
64
83
  }), /*#__PURE__*/_jsx(DialogContent, {
65
84
  children: /*#__PURE__*/_jsx(ImageList, {
66
85
  variant: "quilted",
@@ -89,26 +89,33 @@ const GridItem = props => {
89
89
  }
90
90
  };
91
91
  return /*#__PURE__*/_jsxs("div", {
92
- className: `grid-item xs-${grid}`,
92
+ className: `grid-item xs-${grid} element-root`,
93
93
  ...attributes,
94
94
  style: {
95
95
  display: "flex",
96
96
  flexDirection: "column",
97
97
  backgroundColor: bgColor,
98
98
  alignItems: horizantal,
99
- alignContent: vertical,
99
+ justifyContent: vertical,
100
100
  width: `${itemWidth}%`,
101
101
  margin: "0px"
102
102
  },
103
- children: [/*#__PURE__*/_jsx("div", {
103
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
104
+ className: `element-selector ${selected ? "selected" : ""}`,
105
+ contentEditable: false,
106
+ children: /*#__PURE__*/_jsx(GridItemToolbar, {})
107
+ }), /*#__PURE__*/_jsx("div", {
104
108
  style: {
109
+ display: "flex",
110
+ flexDirection: "column",
111
+ width: "100%",
105
112
  paddingLeft: `${left}px`,
106
113
  paddingRight: `${right}px`,
107
114
  paddingTop: `${top}px`,
108
115
  paddingBottom: `${bottom}px`
109
116
  },
110
117
  children: children
111
- }), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
118
+ }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
112
119
  element: element,
113
120
  onSave: onSave,
114
121
  onClose: onClose
@@ -21,6 +21,7 @@ import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
21
21
  import CarouselButton from "../Elements/Carousel/CarouselButton";
22
22
  import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
23
23
  import "./styles.css";
24
+ import FormButton from "../Elements/Form/FormButton.js";
24
25
  import { jsx as _jsx } from "react/jsx-runtime";
25
26
  import { jsxs as _jsxs } from "react/jsx-runtime";
26
27
  const Toolbar = props => {
@@ -148,6 +149,11 @@ const Toolbar = props => {
148
149
  editor: editor,
149
150
  customProps: customProps
150
151
  }, element.id);
152
+ case "form":
153
+ return /*#__PURE__*/_jsx(FormButton, {
154
+ editor: editor,
155
+ customProps: customProps
156
+ }, element.id);
151
157
  default:
152
158
  return null;
153
159
  }
@@ -151,5 +151,8 @@ const toolbarGroups = [[{
151
151
  }, {
152
152
  id: 37,
153
153
  type: "app-header"
154
+ }, {
155
+ id: 38,
156
+ type: "form"
154
157
  }]];
155
158
  export default toolbarGroups;
@@ -1,10 +1,20 @@
1
1
  const buttonStyle = [{
2
- tab: "Content",
3
- value: "content",
2
+ tab: "General",
3
+ value: "size",
4
4
  fields: [{
5
5
  label: "Button Text",
6
6
  key: "label",
7
7
  type: "text"
8
+ }, {
9
+ label: "Text Size",
10
+ key: "textSize",
11
+ type: "text",
12
+ placeholder: "16px or 1em"
13
+ }, {
14
+ label: "Text Align",
15
+ key: "textAlign",
16
+ type: "textAlign",
17
+ placeholder: "16px or 1em"
8
18
  }]
9
19
  }, {
10
20
  tab: "Link",
@@ -14,6 +24,22 @@ const buttonStyle = [{
14
24
  key: "buttonLink",
15
25
  type: "buttonLink"
16
26
  }]
27
+ }, {
28
+ tab: "Position",
29
+ value: "position",
30
+ fields: [{
31
+ label: "Set Postion (Vertical & Horizantal)",
32
+ key: "alignment",
33
+ type: "alignment"
34
+ }]
35
+ }, {
36
+ tab: "Margin Spacing",
37
+ value: "marginSpacing",
38
+ fields: [{
39
+ label: "Margin Spacing",
40
+ key: "marginSpacing",
41
+ type: "bannerSpacing"
42
+ }]
17
43
  }, {
18
44
  tab: "Banner Spacing",
19
45
  value: "bannerSpacing",
@@ -0,0 +1,71 @@
1
+ const fieldStyle = [{
2
+ tab: "General",
3
+ value: "general",
4
+ fields: [{
5
+ label: "Field Name",
6
+ key: "name",
7
+ type: "text"
8
+ }, {
9
+ label: "Field Type",
10
+ key: "element",
11
+ type: "textOptions",
12
+ options: [{
13
+ label: "Textbox",
14
+ value: "text"
15
+ }]
16
+ }, {
17
+ label: "Placeholder",
18
+ key: "placeholder",
19
+ type: "text"
20
+ }]
21
+ }, {
22
+ tab: "Banner Spacing",
23
+ value: "bannerSpacing",
24
+ fields: [{
25
+ label: "Banner Spacing",
26
+ key: "bannerSpacing",
27
+ type: "bannerSpacing"
28
+ }]
29
+ }, {
30
+ tab: "Border Radius",
31
+ value: "borderRadius",
32
+ fields: [{
33
+ label: "Border Radius",
34
+ key: "borderRadius",
35
+ type: "borderRadius"
36
+ }]
37
+ }, {
38
+ tab: "Colors",
39
+ value: "colors",
40
+ fields: [{
41
+ label: "Text",
42
+ key: "textColor",
43
+ type: "color",
44
+ needPreview: true
45
+ }, {
46
+ label: "Background",
47
+ key: "bgColor",
48
+ type: "color"
49
+ }, {
50
+ label: "Border",
51
+ key: "borderColor",
52
+ type: "color"
53
+ }]
54
+ }, {
55
+ tab: "Position",
56
+ value: "position",
57
+ fields: [{
58
+ label: "Set Postion (Vertical & Horizantal)",
59
+ key: "alignment",
60
+ type: "alignment"
61
+ }]
62
+ }, {
63
+ tab: "Size",
64
+ value: "gridSize",
65
+ fields: [{
66
+ label: "Grid Size",
67
+ key: "grid",
68
+ type: "gridSize"
69
+ }]
70
+ }];
71
+ export default fieldStyle;
@@ -89,6 +89,34 @@ const Alignment = props => {
89
89
  })]
90
90
  })]
91
91
  })
92
+ }), /*#__PURE__*/_jsx(Grid, {
93
+ item: true,
94
+ xs: 12,
95
+ children: /*#__PURE__*/_jsxs(FormControl, {
96
+ children: [/*#__PURE__*/_jsx(FormLabel, {
97
+ id: "demo-row-radio-buttons-group-label",
98
+ children: /*#__PURE__*/_jsx(Typography, {
99
+ variant: "body1",
100
+ color: "primary",
101
+ children: "Flex Direction"
102
+ })
103
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
104
+ row: true,
105
+ "aria-labelledby": "demo-row-radio-buttons-group-label",
106
+ name: "flexDirection",
107
+ value: value?.flexDirection || "row",
108
+ onChange: handleChange,
109
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
110
+ value: "row",
111
+ control: /*#__PURE__*/_jsx(Radio, {}),
112
+ label: "Row"
113
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
114
+ value: "column",
115
+ control: /*#__PURE__*/_jsx(Radio, {}),
116
+ label: "Column"
117
+ })]
118
+ })]
119
+ })
92
120
  })]
93
121
  });
94
122
  };
@@ -10,6 +10,9 @@ import ImageTexts from "./imageTexts";
10
10
  import MenusArray from "./menusArray";
11
11
  import ButtonLink from "./buttonLink";
12
12
  import SaveAsTemplate from "./saveAsTemplate";
13
+ import TextAlign from "./textAlign";
14
+ import TextOptions from "./textOptions";
15
+ import SelectBox from "./selectBox";
13
16
  const FieldMap = {
14
17
  text: Text,
15
18
  bannerSpacing: BannerSpacing,
@@ -22,6 +25,9 @@ const FieldMap = {
22
25
  imageTexts: ImageTexts,
23
26
  menusArray: MenusArray,
24
27
  buttonLink: ButtonLink,
25
- saveAsTemplate: SaveAsTemplate
28
+ saveAsTemplate: SaveAsTemplate,
29
+ textAlign: TextAlign,
30
+ textOptions: TextOptions,
31
+ selectBox: SelectBox
26
32
  };
27
33
  export default FieldMap;
@@ -81,7 +81,8 @@ const SaveAsTemplate = props => {
81
81
  name: "title",
82
82
  value: template?.title,
83
83
  onChange: onChange,
84
- placeholder: "Template Title"
84
+ placeholder: "Template Title",
85
+ fullWidth: true
85
86
  })
86
87
  }), /*#__PURE__*/_jsx(Grid, {
87
88
  item: true,
@@ -104,7 +105,7 @@ const SaveAsTemplate = props => {
104
105
  })
105
106
  }), /*#__PURE__*/_jsx(Grid, {
106
107
  item: true,
107
- xs: 212,
108
+ xs: 12,
108
109
  children: /*#__PURE__*/_jsx(TextField, {
109
110
  fullWidth: true,
110
111
  name: "category",
@@ -0,0 +1,35 @@
1
+ import React from "react";
2
+ import { Grid, Checkbox, FormControlLabel } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const SelectBox = props => {
5
+ const {
6
+ value,
7
+ data,
8
+ onChange
9
+ } = props;
10
+ const {
11
+ key,
12
+ placeholder
13
+ } = data;
14
+ const handleChange = e => {
15
+ onChange({
16
+ [key]: e.target.checked
17
+ });
18
+ };
19
+ return /*#__PURE__*/_jsx(Grid, {
20
+ container: true,
21
+ padding: 1,
22
+ children: /*#__PURE__*/_jsx(Grid, {
23
+ item: true,
24
+ xs: 12,
25
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
26
+ control: /*#__PURE__*/_jsx(Checkbox, {
27
+ value: value,
28
+ onChange: handleChange
29
+ }),
30
+ label: placeholder
31
+ })
32
+ })
33
+ });
34
+ };
35
+ export default SelectBox;
@@ -9,7 +9,8 @@ const Text = props => {
9
9
  onChange
10
10
  } = props;
11
11
  const {
12
- key
12
+ key,
13
+ placeholder
13
14
  } = data;
14
15
  const handleChange = e => {
15
16
  onChange({
@@ -29,7 +30,7 @@ const Text = props => {
29
30
  variant: "body1",
30
31
  color: "textSecondary",
31
32
  sx: {
32
- fontSize: '14px'
33
+ fontSize: "14px"
33
34
  },
34
35
  children: data?.label
35
36
  })
@@ -38,6 +39,7 @@ const Text = props => {
38
39
  xs: 12,
39
40
  children: /*#__PURE__*/_jsx(TextField, {
40
41
  name: key,
42
+ placeholder: placeholder || "",
41
43
  type: "text",
42
44
  value: value,
43
45
  onChange: handleChange,
@@ -0,0 +1,60 @@
1
+ import React from "react";
2
+ import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const TextAlign = props => {
6
+ const {
7
+ value,
8
+ data,
9
+ onChange
10
+ } = props;
11
+ const {
12
+ key
13
+ } = data;
14
+ const handleChange = e => {
15
+ onChange({
16
+ [key]: e.target.value
17
+ });
18
+ };
19
+ return /*#__PURE__*/_jsx(Grid, {
20
+ container: true,
21
+ style: {
22
+ paddingTop: "12px"
23
+ },
24
+ spacing: 1,
25
+ children: /*#__PURE__*/_jsx(Grid, {
26
+ item: true,
27
+ xs: 12,
28
+ children: /*#__PURE__*/_jsxs(FormControl, {
29
+ children: [/*#__PURE__*/_jsx(FormLabel, {
30
+ id: "demo-row-radio-buttons-group-label",
31
+ children: /*#__PURE__*/_jsx(Typography, {
32
+ variant: "body1",
33
+ color: "primary",
34
+ children: "Text Alignment"
35
+ })
36
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
37
+ row: true,
38
+ "aria-labelledby": "demo-row-radio-buttons-group-label",
39
+ name: "textAlign",
40
+ value: value || "left",
41
+ onChange: handleChange,
42
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
43
+ value: "left",
44
+ control: /*#__PURE__*/_jsx(Radio, {}),
45
+ label: "Left"
46
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
47
+ value: "center",
48
+ control: /*#__PURE__*/_jsx(Radio, {}),
49
+ label: "Center"
50
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
51
+ value: "right",
52
+ control: /*#__PURE__*/_jsx(Radio, {}),
53
+ label: "Right"
54
+ })]
55
+ })]
56
+ })
57
+ })
58
+ });
59
+ };
60
+ export default TextAlign;
@@ -0,0 +1,46 @@
1
+ import React from "react";
2
+ import { Grid, MenuItem, Select } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const TextOptions = props => {
5
+ const {
6
+ data,
7
+ onChange,
8
+ elementProps
9
+ } = props;
10
+ const {
11
+ key,
12
+ options
13
+ } = data;
14
+ const {
15
+ element: elementType
16
+ } = elementProps;
17
+ const handleChange = e => {
18
+ onChange({
19
+ [key]: e.target.value
20
+ });
21
+ };
22
+ return /*#__PURE__*/_jsx(Grid, {
23
+ container: true,
24
+ children: /*#__PURE__*/_jsx(Grid, {
25
+ item: true,
26
+ xs: 12,
27
+ style: {
28
+ padding: "10px"
29
+ },
30
+ children: /*#__PURE__*/_jsx(Select, {
31
+ onChange: handleChange,
32
+ value: elementType,
33
+ placeholder: data?.label,
34
+ fullWidth: true,
35
+ size: "small",
36
+ children: options.map(m => {
37
+ return /*#__PURE__*/_jsx(MenuItem, {
38
+ value: m.value,
39
+ children: m.label
40
+ }, `${key}_${m.value}`);
41
+ })
42
+ })
43
+ })
44
+ });
45
+ };
46
+ export default TextOptions;