@flozy/editor 1.4.9 → 1.5.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +14 -3
- package/dist/Editor/Editor.css +144 -14
- package/dist/Editor/Elements/AppHeader/AppHeader.js +16 -11
- package/dist/Editor/Elements/Button/EditorButton.js +16 -7
- package/dist/Editor/Elements/Embed/Embed.js +13 -10
- package/dist/Editor/Elements/Form/Form.js +2 -1
- package/dist/Editor/Elements/Form/FormPopup.js +4 -2
- package/dist/Editor/Elements/Grid/Grid.js +15 -2
- package/dist/Editor/Elements/Grid/GridItem.js +14 -2
- package/dist/Editor/Elements/Table/TableSelector.js +6 -4
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +73 -0
- package/dist/Editor/Toolbar/FormatTools/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +23 -9
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +152 -42
- package/dist/Editor/Toolbar/PopupTool/index.js +35 -34
- package/dist/Editor/Toolbar/Toolbar.js +6 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +9 -9
- package/dist/Editor/assets/svg/addGridItem.js +49 -0
- package/dist/Editor/common/ColorPickerButton.js +3 -3
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +4 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +32 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +48 -34
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +90 -115
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +93 -101
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +24 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +49 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +9 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +23 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +52 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +33 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +16 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +12 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +28 -23
- package/dist/Editor/common/StyleBuilder/gridStyle.js +0 -6
- package/dist/Editor/common/StyleBuilder/index.js +70 -44
- package/dist/Editor/common/Uploader.js +51 -14
- package/dist/Editor/common/iconslist.js +409 -0
- package/dist/Editor/utils/embed.js +2 -22
- package/package.json +1 -1
@@ -1,80 +1,190 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid } from "@mui/material";
|
2
|
+
import { Grid, IconButton, Typography } from "@mui/material";
|
3
3
|
import toolbarGroups from "../toolbarGroups";
|
4
|
-
import { Dropdown, MarkButton } from "../FormatTools";
|
4
|
+
import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
|
5
5
|
import ColorPicker from "../../Elements/Color Picker/ColorPicker";
|
6
6
|
import { activeMark } from "../../utils/SlateUtilityFunctions";
|
7
|
+
import CloseIcon from "@mui/icons-material/Close";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
10
|
const allTools = toolbarGroups.flat();
|
10
11
|
const TextFormat = props => {
|
11
12
|
const {
|
12
13
|
classes,
|
13
|
-
editor
|
14
|
+
editor,
|
15
|
+
onClose
|
14
16
|
} = props;
|
15
17
|
const fontFamily = allTools.find(f => f.format === "fontFamily");
|
16
18
|
const fontStyle = allTools.filter(f => f.type === "mark");
|
19
|
+
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
17
20
|
return /*#__PURE__*/_jsxs(Grid, {
|
18
21
|
container: true,
|
19
22
|
sx: classes.textFormatWrapper,
|
20
|
-
children: [/*#__PURE__*/
|
23
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
21
24
|
item: true,
|
22
25
|
xs: 12,
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
+
style: {
|
27
|
+
display: "flex"
|
28
|
+
},
|
29
|
+
justifyContent: "space-between",
|
30
|
+
alignItems: "center",
|
31
|
+
className: "textSettingHeader",
|
32
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
33
|
+
color: "primary",
|
34
|
+
sx: {
|
35
|
+
fontSize: "16px",
|
36
|
+
fontWeight: "700"
|
37
|
+
},
|
38
|
+
children: "TEXT SETTINGS"
|
39
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
40
|
+
sx: classes.textFormatLabel,
|
41
|
+
justifyContent: "end",
|
42
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
43
|
+
className: "close-popupbtn",
|
44
|
+
onClick: onClose,
|
45
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
46
|
+
})
|
47
|
+
})]
|
48
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
26
49
|
item: true,
|
27
50
|
xs: 12,
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
51
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
52
|
+
variant: "body1",
|
53
|
+
color: "primary",
|
54
|
+
style: {
|
55
|
+
fontSize: "14px",
|
56
|
+
fontWeight: 500,
|
57
|
+
marginBottom: 5
|
58
|
+
},
|
59
|
+
children: "Font Family"
|
60
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
61
|
+
item: true,
|
62
|
+
xs: 12,
|
63
|
+
sx: classes.textFormatField,
|
64
|
+
children: /*#__PURE__*/_jsx(Dropdown, {
|
65
|
+
...fontFamily,
|
66
|
+
editor: editor
|
67
|
+
})
|
68
|
+
})]
|
35
69
|
}), /*#__PURE__*/_jsx(Grid, {
|
36
70
|
item: true,
|
37
71
|
xs: 12,
|
38
|
-
sx:
|
39
|
-
|
72
|
+
sx: {
|
73
|
+
paddingTop: "12px"
|
74
|
+
},
|
75
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
76
|
+
variant: "body1",
|
77
|
+
color: "primary",
|
78
|
+
style: {
|
79
|
+
fontSize: "14px",
|
80
|
+
fontWeight: 500,
|
81
|
+
marginBottom: 5
|
82
|
+
},
|
83
|
+
children: "Font Style"
|
84
|
+
})
|
40
85
|
}), /*#__PURE__*/_jsx(Grid, {
|
41
86
|
item: true,
|
42
87
|
xs: 12,
|
43
|
-
sx: classes.
|
44
|
-
children:
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
88
|
+
sx: classes.textFormatCG,
|
89
|
+
children: fontStyle?.map((m, i) => {
|
90
|
+
return /*#__PURE__*/_jsx(MarkButton, {
|
91
|
+
editor: editor,
|
92
|
+
...m
|
93
|
+
}, `pptool_mark_${i}_${m.id}`);
|
49
94
|
})
|
50
|
-
}), /*#__PURE__*/
|
95
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
51
96
|
item: true,
|
52
|
-
xs:
|
53
|
-
sx: classes.
|
54
|
-
children:
|
55
|
-
|
97
|
+
xs: 4,
|
98
|
+
sx: classes.textFormatField,
|
99
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
100
|
+
variant: "body1",
|
101
|
+
color: "primary",
|
102
|
+
style: {
|
103
|
+
fontSize: "14px",
|
104
|
+
fontWeight: 500,
|
105
|
+
marginBottom: 5
|
106
|
+
},
|
107
|
+
children: "Font Size"
|
108
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
109
|
+
item: true,
|
110
|
+
xs: 10,
|
111
|
+
sx: classes.textFormatCG,
|
112
|
+
children: /*#__PURE__*/_jsx(TextSize, {
|
113
|
+
format: "fontSize",
|
114
|
+
activeMark: activeMark,
|
115
|
+
editor: editor
|
116
|
+
})
|
117
|
+
})]
|
118
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
56
119
|
item: true,
|
57
|
-
xs:
|
120
|
+
xs: 7,
|
58
121
|
sx: classes.textFormatField,
|
59
|
-
children: /*#__PURE__*/_jsx(
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
122
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
123
|
+
variant: "body1",
|
124
|
+
color: "primary",
|
125
|
+
style: {
|
126
|
+
fontSize: "14px",
|
127
|
+
fontWeight: 500,
|
128
|
+
marginBottom: 5
|
129
|
+
},
|
130
|
+
children: "Text Alignment"
|
131
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
132
|
+
item: true,
|
133
|
+
xs: 12,
|
134
|
+
sx: classes.textFormatCG,
|
135
|
+
children: fontAlign?.map((m, i) => {
|
136
|
+
return /*#__PURE__*/_jsx(BlockButton, {
|
137
|
+
editor: editor,
|
138
|
+
...m
|
139
|
+
}, `pptool_block_${i}_${m.id}`);
|
140
|
+
})
|
141
|
+
})]
|
142
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
64
143
|
item: true,
|
65
144
|
xs: 12,
|
66
|
-
sx: classes.
|
67
|
-
children:
|
68
|
-
|
145
|
+
sx: classes.textFormatField,
|
146
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
147
|
+
variant: "body1",
|
148
|
+
color: "primary",
|
149
|
+
style: {
|
150
|
+
fontSize: "14px",
|
151
|
+
fontWeight: 500,
|
152
|
+
marginBottom: 5
|
153
|
+
},
|
154
|
+
children: "Text Color"
|
155
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
156
|
+
sx: classes.textFormatFieldBorder,
|
157
|
+
children: /*#__PURE__*/_jsx(ColorPicker, {
|
158
|
+
format: "color",
|
159
|
+
activeMark: activeMark,
|
160
|
+
editor: editor,
|
161
|
+
showHex: true
|
162
|
+
})
|
163
|
+
})]
|
164
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
69
165
|
item: true,
|
70
166
|
xs: 12,
|
71
|
-
sx: classes.
|
72
|
-
children:
|
73
|
-
|
167
|
+
sx: classes.textFormatField,
|
168
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
169
|
+
variant: "body1",
|
170
|
+
color: "primary",
|
171
|
+
style: {
|
172
|
+
fontSize: "14px",
|
173
|
+
fontWeight: 500,
|
174
|
+
marginBottom: 5
|
175
|
+
},
|
176
|
+
children: "Background Color"
|
177
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
178
|
+
item: true,
|
179
|
+
xs: 12,
|
180
|
+
sx: classes.textFormatFieldBorder,
|
181
|
+
children: /*#__PURE__*/_jsx(ColorPicker, {
|
182
|
+
format: "bgColor",
|
183
|
+
activeMark: activeMark,
|
74
184
|
editor: editor,
|
75
|
-
|
76
|
-
}
|
77
|
-
})
|
185
|
+
showHex: true
|
186
|
+
})
|
187
|
+
})]
|
78
188
|
})]
|
79
189
|
});
|
80
190
|
};
|
@@ -1,13 +1,16 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { Popper, Fade, Paper, IconButton } from "@mui/material";
|
3
|
-
import
|
2
|
+
// import { Popper, Fade, Paper, IconButton, Drawer } from "@mui/material";
|
3
|
+
import { Drawer } from "@mui/material";
|
4
|
+
// import CloseIcon from "@mui/icons-material/Close";
|
4
5
|
import { Editor, Range } from "slate";
|
5
6
|
import { useSlate, useFocused } from "slate-react";
|
6
7
|
import TextFormat from "./TextFormat";
|
7
8
|
import usePopupStyle from "./PopupToolStyle";
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
-
|
10
|
-
const
|
10
|
+
const PopupTool = props => {
|
11
|
+
const {
|
12
|
+
onDrawerOpen
|
13
|
+
} = props;
|
11
14
|
const classes = usePopupStyle();
|
12
15
|
const [anchorEl, setAnchorEl] = useState(null);
|
13
16
|
const editor = useSlate();
|
@@ -16,10 +19,16 @@ const PopupTool = () => {
|
|
16
19
|
selection
|
17
20
|
} = editor;
|
18
21
|
const open = Boolean(anchorEl);
|
19
|
-
const id = open ? "popup-edit-tool" : "";
|
22
|
+
// const id = open ? "popup-edit-tool" : "";
|
23
|
+
|
24
|
+
useEffect(() => {
|
25
|
+
if (onDrawerOpen) {
|
26
|
+
onDrawerOpen(open);
|
27
|
+
}
|
28
|
+
}, [open]);
|
20
29
|
useEffect(() => {
|
21
30
|
if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
|
22
|
-
setAnchorEl(null);
|
31
|
+
// setAnchorEl(null);
|
23
32
|
} else {
|
24
33
|
const domSelection = window.getSelection();
|
25
34
|
const domRange = domSelection.getRangeAt(0);
|
@@ -34,35 +43,27 @@ const PopupTool = () => {
|
|
34
43
|
const handleClose = () => {
|
35
44
|
setAnchorEl(null);
|
36
45
|
};
|
37
|
-
return /*#__PURE__*/_jsx(
|
38
|
-
|
46
|
+
return /*#__PURE__*/_jsx(Drawer
|
47
|
+
// id={id}
|
48
|
+
, {
|
39
49
|
open: open,
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
58
|
-
onClick: handleClose,
|
59
|
-
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
60
|
-
})
|
61
|
-
}), /*#__PURE__*/_jsx(TextFormat, {
|
62
|
-
editor: editor,
|
63
|
-
classes: classes
|
64
|
-
})]
|
65
|
-
})
|
50
|
+
fullWidth: true
|
51
|
+
// disablePortal={false}
|
52
|
+
// anchorEl={anchorEl}
|
53
|
+
// transition
|
54
|
+
// placement="bottom-start"
|
55
|
+
// onMouseDown={(e) => e.preventDefault()}
|
56
|
+
// sx={classes.popupWrapper}
|
57
|
+
,
|
58
|
+
anchor: "right",
|
59
|
+
hideBackdrop: true
|
60
|
+
// handleClose={handleClose}
|
61
|
+
,
|
62
|
+
className: "tools-drawer",
|
63
|
+
children: /*#__PURE__*/_jsx(TextFormat, {
|
64
|
+
editor: editor,
|
65
|
+
classes: classes,
|
66
|
+
onClose: handleClose
|
66
67
|
})
|
67
68
|
});
|
68
69
|
};
|
@@ -3,7 +3,7 @@ import { useSlate } from "slate-react";
|
|
3
3
|
import { isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
|
4
4
|
import useFormat from "../utils/customHooks/useFormat.js";
|
5
5
|
import defaultToolbarGroups from "./toolbarGroups.js";
|
6
|
-
import { BlockButton, MarkButton, Dropdown } from "./FormatTools";
|
6
|
+
import { BlockButton, MarkButton, Dropdown, TextSize } from "./FormatTools";
|
7
7
|
import ColorPicker from "../Elements/Color Picker/ColorPicker";
|
8
8
|
import LinkButton from "../Elements/Link/LinkButton";
|
9
9
|
import Embed from "../Elements/Embed/Embed";
|
@@ -68,6 +68,11 @@ const Toolbar = props => {
|
|
68
68
|
...element,
|
69
69
|
editor: editor
|
70
70
|
}, element.id);
|
71
|
+
case "fontSize":
|
72
|
+
return /*#__PURE__*/_jsx(TextSize, {
|
73
|
+
...element,
|
74
|
+
editor: editor
|
75
|
+
}, element.id);
|
71
76
|
case "text":
|
72
77
|
return /*#__PURE__*/_jsx(Text, {
|
73
78
|
...element,
|
@@ -7,19 +7,19 @@ const toolbarGroups = [[{
|
|
7
7
|
}, {
|
8
8
|
id: 2,
|
9
9
|
format: "fontSize",
|
10
|
-
type: "
|
10
|
+
type: "fontSize",
|
11
11
|
options: [{
|
12
|
-
text: "
|
13
|
-
value: "
|
12
|
+
text: "12px",
|
13
|
+
value: "12px"
|
14
14
|
}, {
|
15
|
-
text: "
|
16
|
-
value: "
|
15
|
+
text: "16px",
|
16
|
+
value: "16px"
|
17
17
|
}, {
|
18
|
-
text: "
|
19
|
-
value: "
|
18
|
+
text: "28px",
|
19
|
+
value: "28px"
|
20
20
|
}, {
|
21
|
-
text: "
|
22
|
-
value: "
|
21
|
+
text: "48px",
|
22
|
+
value: "48px"
|
23
23
|
}]
|
24
24
|
}], [{
|
25
25
|
id: 3,
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
+
const AddGridItem = () => {
|
4
|
+
return /*#__PURE__*/_jsxs("svg", {
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
6
|
+
width: "18",
|
7
|
+
height: "18",
|
8
|
+
viewBox: "0 0 18 18",
|
9
|
+
fill: "none",
|
10
|
+
children: [/*#__PURE__*/_jsx("path", {
|
11
|
+
d: "M6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V6.75C16.5 3 15 1.5 11.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5Z",
|
12
|
+
stroke: "#64748B",
|
13
|
+
strokeWidth: "1.5",
|
14
|
+
strokeLinecap: "round",
|
15
|
+
strokeLinejoin: "round"
|
16
|
+
}), /*#__PURE__*/_jsx("path", {
|
17
|
+
d: "M1.5 9H16.5",
|
18
|
+
stroke: "#64748B",
|
19
|
+
strokeWidth: "1.5",
|
20
|
+
strokeLinecap: "round",
|
21
|
+
strokeLinejoin: "round"
|
22
|
+
}), /*#__PURE__*/_jsx("path", {
|
23
|
+
d: "M6.1875 9V16.125",
|
24
|
+
stroke: "#64748B",
|
25
|
+
strokeWidth: "1.5",
|
26
|
+
strokeLinecap: "round",
|
27
|
+
strokeLinejoin: "round"
|
28
|
+
}), /*#__PURE__*/_jsx("path", {
|
29
|
+
d: "M11.8125 16.5V9",
|
30
|
+
stroke: "#64748B",
|
31
|
+
strokeWidth: "1.5",
|
32
|
+
strokeLinecap: "round",
|
33
|
+
strokeLinejoin: "round"
|
34
|
+
}), /*#__PURE__*/_jsx("path", {
|
35
|
+
d: "M6.1875 9V1.5",
|
36
|
+
stroke: "#64748B",
|
37
|
+
strokeWidth: "1.5",
|
38
|
+
strokeLinecap: "round",
|
39
|
+
strokeLinejoin: "round"
|
40
|
+
}), /*#__PURE__*/_jsx("path", {
|
41
|
+
d: "M11.8125 9.00027V1.90527",
|
42
|
+
stroke: "#64748B",
|
43
|
+
strokeWidth: "1.5",
|
44
|
+
strokeLinecap: "round",
|
45
|
+
strokeLinejoin: "round"
|
46
|
+
})]
|
47
|
+
});
|
48
|
+
};
|
49
|
+
export default AddGridItem;
|
@@ -27,10 +27,10 @@ const ColorPickerButton = props => {
|
|
27
27
|
children: [/*#__PURE__*/_jsx(Button, {
|
28
28
|
style: {
|
29
29
|
background: value,
|
30
|
-
height: "
|
31
|
-
minWidth: "
|
30
|
+
height: "22px",
|
31
|
+
minWidth: "22px",
|
32
32
|
borderRadius: "26px",
|
33
|
-
border: "
|
33
|
+
border: "2px solid #E7E7E7"
|
34
34
|
},
|
35
35
|
onClick: handleColorPicker
|
36
36
|
}), /*#__PURE__*/_jsx(Popover, {
|
@@ -2,13 +2,13 @@ const embedImageStyle = [{
|
|
2
2
|
tab: "URL",
|
3
3
|
value: "url",
|
4
4
|
fields: [{
|
5
|
-
label: "URL",
|
6
|
-
key: "url",
|
7
|
-
type: "text"
|
8
|
-
}, {
|
9
5
|
label: "File",
|
10
6
|
key: "url",
|
11
7
|
type: "backgroundImage"
|
8
|
+
}, {
|
9
|
+
label: "",
|
10
|
+
key: "url",
|
11
|
+
type: "text"
|
12
12
|
}]
|
13
13
|
}, {
|
14
14
|
tab: "Banner Spacing",
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
|
3
|
+
import { JustifyStartIcon, JustifyCenterIcon, JustifyEndIcon, AlignEndIcon, AlignCenterIcon, AlignStartIcon, DirectionRowIcon, DirectionColumIcon, DirectionReverseIcon } from "../../iconslist";
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
6
|
const Alignment = props => {
|
@@ -20,6 +21,7 @@ const Alignment = props => {
|
|
20
21
|
});
|
21
22
|
};
|
22
23
|
const flexDirection = value?.flexDirection || "row";
|
24
|
+
console.log(flexDirection);
|
23
25
|
return /*#__PURE__*/_jsxs(Grid, {
|
24
26
|
container: true,
|
25
27
|
style: {
|
@@ -31,30 +33,35 @@ const Alignment = props => {
|
|
31
33
|
xs: 12,
|
32
34
|
children: /*#__PURE__*/_jsxs(FormControl, {
|
33
35
|
children: [/*#__PURE__*/_jsx(FormLabel, {
|
34
|
-
id: "
|
36
|
+
id: "pos-align-tems",
|
35
37
|
children: /*#__PURE__*/_jsx(Typography, {
|
36
38
|
variant: "body1",
|
37
39
|
color: "primary",
|
40
|
+
style: {
|
41
|
+
fontSize: "14px",
|
42
|
+
fontWeight: 500
|
43
|
+
},
|
38
44
|
children: "Align Items"
|
39
45
|
})
|
40
46
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
41
47
|
row: true,
|
42
|
-
"aria-labelledby": "
|
48
|
+
"aria-labelledby": "pos-align-tems",
|
43
49
|
name: "horizantal",
|
44
50
|
value: value?.horizantal || "start",
|
45
51
|
onChange: handleChange,
|
52
|
+
className: "iconRadioButton",
|
46
53
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
47
54
|
value: "start",
|
48
55
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
49
|
-
label:
|
56
|
+
label: /*#__PURE__*/_jsx(AlignStartIcon, {})
|
50
57
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
51
58
|
value: "center",
|
52
59
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
53
|
-
label:
|
60
|
+
label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
|
54
61
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
55
62
|
value: "end",
|
56
63
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
57
|
-
label:
|
64
|
+
label: /*#__PURE__*/_jsx(AlignEndIcon, {})
|
58
65
|
})]
|
59
66
|
})]
|
60
67
|
})
|
@@ -63,30 +70,35 @@ const Alignment = props => {
|
|
63
70
|
xs: 12,
|
64
71
|
children: /*#__PURE__*/_jsxs(FormControl, {
|
65
72
|
children: [/*#__PURE__*/_jsx(FormLabel, {
|
66
|
-
id: "
|
73
|
+
id: "pos-jc",
|
67
74
|
children: /*#__PURE__*/_jsx(Typography, {
|
68
75
|
variant: "body1",
|
69
76
|
color: "primary",
|
77
|
+
style: {
|
78
|
+
fontSize: "14px",
|
79
|
+
fontWeight: 500
|
80
|
+
},
|
70
81
|
children: "Justify Content"
|
71
82
|
})
|
72
83
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
73
84
|
row: true,
|
74
|
-
"aria-labelledby": "
|
85
|
+
"aria-labelledby": "pos-jc",
|
75
86
|
name: "vertical",
|
76
87
|
value: value?.vertical || "start",
|
77
88
|
onChange: handleChange,
|
89
|
+
className: "iconRadioButton",
|
78
90
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
79
91
|
value: "start",
|
80
92
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
81
|
-
label:
|
93
|
+
label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
|
82
94
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
83
95
|
value: "center",
|
84
96
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
85
|
-
label:
|
97
|
+
label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
|
86
98
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
87
99
|
value: "end",
|
88
100
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
89
|
-
label:
|
101
|
+
label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
|
90
102
|
})]
|
91
103
|
})]
|
92
104
|
})
|
@@ -95,30 +107,35 @@ const Alignment = props => {
|
|
95
107
|
xs: 12,
|
96
108
|
children: /*#__PURE__*/_jsxs(FormControl, {
|
97
109
|
children: [/*#__PURE__*/_jsx(FormLabel, {
|
98
|
-
id: "
|
110
|
+
id: "pos-fd",
|
99
111
|
children: /*#__PURE__*/_jsx(Typography, {
|
100
112
|
variant: "body1",
|
101
113
|
color: "primary",
|
114
|
+
style: {
|
115
|
+
fontSize: "14px",
|
116
|
+
fontWeight: 500
|
117
|
+
},
|
102
118
|
children: "Flex Direction"
|
103
119
|
})
|
104
120
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
105
121
|
row: true,
|
106
|
-
"aria-labelledby": "
|
122
|
+
"aria-labelledby": "pos-fd",
|
107
123
|
name: "flexDirection",
|
108
124
|
value: flexDirection,
|
109
125
|
onChange: handleChange,
|
126
|
+
className: "iconRadioButton",
|
110
127
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
111
128
|
value: "row",
|
112
129
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
113
|
-
label:
|
130
|
+
label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
|
114
131
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
115
132
|
value: "column",
|
116
133
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
117
|
-
label:
|
134
|
+
label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
|
118
135
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
119
136
|
value: "row-reverse",
|
120
137
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
121
|
-
label:
|
138
|
+
label: /*#__PURE__*/_jsx(DirectionReverseIcon, {})
|
122
139
|
})]
|
123
140
|
})]
|
124
141
|
})
|