@flozy/editor 3.7.1 → 3.7.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (104) hide show
  1. package/dist/Editor/ChatEditor.js +211 -0
  2. package/dist/Editor/CommonEditor.js +169 -111
  3. package/dist/Editor/Elements/Accordion/Accordion.js +74 -7
  4. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +3 -2
  5. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -60
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  7. package/dist/Editor/Elements/Button/EditorButton.js +34 -18
  8. package/dist/Editor/Elements/ChipText/ChipText.js +3 -3
  9. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  12. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  13. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
  14. package/dist/Editor/Elements/Embed/Image.js +28 -20
  15. package/dist/Editor/Elements/Embed/Video.js +15 -11
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
  17. package/dist/Editor/Elements/Emoji/EmojiPicker.js +16 -0
  18. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  19. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  20. package/dist/Editor/Elements/Grid/Grid.js +3 -1
  21. package/dist/Editor/Elements/Grid/GridItem.js +4 -2
  22. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +2 -3
  23. package/dist/Editor/Elements/Link/Link.js +6 -1
  24. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  25. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  26. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  27. package/dist/Editor/Elements/List/CheckList.js +6 -2
  28. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  29. package/dist/Editor/MiniEditor.js +3 -1
  30. package/dist/Editor/Styles/EditorStyles.js +3 -2
  31. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  32. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  33. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  34. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  35. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  36. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  37. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  38. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  39. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  40. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  41. package/dist/Editor/Toolbar/PopupTool/index.js +9 -2
  42. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  43. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  44. package/dist/Editor/common/ColorPickerButton.js +25 -9
  45. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  46. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  47. package/dist/Editor/common/CustomDialog/index.js +94 -0
  48. package/dist/Editor/common/CustomDialog/style.js +67 -0
  49. package/dist/Editor/common/CustomSelect.js +33 -0
  50. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  51. package/dist/Editor/common/EditorCmds.js +35 -0
  52. package/dist/Editor/common/Icon.js +30 -2
  53. package/dist/Editor/common/MUIIcon/index.js +48 -0
  54. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +5 -2
  55. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  56. package/dist/Editor/common/Shorthands/elements.js +54 -0
  57. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  58. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  59. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  60. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  62. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +12 -28
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js +13 -0
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/mui_filled_icons.js +2 -0
  67. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  68. package/dist/Editor/common/StyleBuilder/formStyle.js +25 -26
  69. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  70. package/dist/Editor/helper/index.js +15 -0
  71. package/dist/Editor/helper/theme.js +190 -4
  72. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  73. package/dist/Editor/hooks/useMouseMove.js +15 -6
  74. package/dist/Editor/plugins/withEmbeds.js +1 -1
  75. package/dist/Editor/plugins/withHTML.js +47 -5
  76. package/dist/Editor/plugins/withLayout.js +15 -10
  77. package/dist/Editor/plugins/withTable.js +2 -2
  78. package/dist/Editor/theme/ThemeList.js +50 -173
  79. package/dist/Editor/theme/index.js +144 -0
  80. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  81. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  82. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  83. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  84. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  85. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  86. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  87. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  88. package/dist/Editor/themeSettings/icons.js +60 -0
  89. package/dist/Editor/themeSettings/index.js +320 -0
  90. package/dist/Editor/themeSettings/style.js +152 -0
  91. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  92. package/dist/Editor/themeSettingsAI/index.js +356 -0
  93. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  94. package/dist/Editor/themeSettingsAI/style.js +247 -0
  95. package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
  96. package/dist/Editor/utils/button.js +1 -17
  97. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +361 -0
  98. package/dist/Editor/utils/events.js +11 -4
  99. package/dist/Editor/utils/font.js +40 -37
  100. package/dist/Editor/utils/form.js +2 -2
  101. package/dist/Editor/utils/helper.js +71 -12
  102. package/dist/Editor/utils/serializeToHTML.js +25 -13
  103. package/dist/index.js +5 -1
  104. package/package.json +4 -4
@@ -0,0 +1,144 @@
1
+ const themeClassName = ".theme-element";
2
+ function getTextStyles(props) {
3
+ const {
4
+ fontSize,
5
+ textDecoration,
6
+ ...rest
7
+ } = props;
8
+ return {
9
+ ...rest,
10
+ '& span[data-slate-string="true"]': {
11
+ textDecoration,
12
+ fontSize
13
+ }
14
+
15
+ // "&::after": {
16
+ // // for placeholder
17
+ // fontSize,
18
+ // },
19
+ };
20
+ }
21
+
22
+ const transformHeading = (props, elementType) => {
23
+ return {
24
+ [`& ${elementType}${themeClassName}`]: getTextStyles(props)
25
+ };
26
+ };
27
+ const transformParagraph = (props, paraType) => {
28
+ return {
29
+ [`& p${themeClassName}.${paraType}`]: getTextStyles(props)
30
+ };
31
+ };
32
+ const transformButton = props => {
33
+ const {
34
+ borderRadius,
35
+ lockRadius,
36
+ bannerSpacing,
37
+ buttonIcon,
38
+ hover,
39
+ ...classProps
40
+ } = props;
41
+ return {
42
+ [`& .button${themeClassName}`]: {
43
+ ...classProps,
44
+ "&:hover": hover
45
+ },
46
+ buttonTheme: {
47
+ borderRadius,
48
+ lockRadius,
49
+ bannerSpacing,
50
+ buttonIcon
51
+ }
52
+ };
53
+ };
54
+ const transformProps = (elementType, props) => {
55
+ let transformedProp = {};
56
+ let otherProps = {};
57
+ switch (elementType) {
58
+ case "h1":
59
+ case "h2":
60
+ case "h3":
61
+ case "h4":
62
+ case "h5":
63
+ case "h6":
64
+ transformedProp = transformHeading(props, elementType);
65
+ break;
66
+ case "para1":
67
+ case "para2":
68
+ case "para3":
69
+ transformedProp = transformParagraph(props, elementType);
70
+ break;
71
+ case "button":
72
+ const {
73
+ buttonTheme,
74
+ ...classProps
75
+ } = transformButton(props, elementType);
76
+ transformedProp = classProps;
77
+ otherProps = {
78
+ buttonTheme
79
+ };
80
+ break;
81
+ default:
82
+ }
83
+ return {
84
+ transformedProp,
85
+ otherProps
86
+ };
87
+ };
88
+ export const transformTheme = (selectedTheme = {}) => {
89
+ let sxProps = {};
90
+ let others = {};
91
+ const {
92
+ elementProps
93
+ } = selectedTheme;
94
+ if (elementProps) {
95
+ Object.entries(elementProps).forEach(([key, value]) => {
96
+ const {
97
+ transformedProp,
98
+ otherProps
99
+ } = transformProps(key, value);
100
+ sxProps = {
101
+ ...sxProps,
102
+ ...transformedProp
103
+ };
104
+ others = {
105
+ ...others,
106
+ ...otherProps
107
+ };
108
+ });
109
+ }
110
+ return {
111
+ sxProps,
112
+ ...others
113
+ };
114
+ };
115
+ export const defaultTheme = {
116
+ theme: {
117
+ cssVars: {},
118
+ elementProps: {
119
+ button: {
120
+ color: "#FFFFFF",
121
+ background: "#2563EB",
122
+ fontFamily: "PoppinsRegular",
123
+ fontWeight: 400,
124
+ fontSize: "inherit",
125
+ borderColor: "transparent",
126
+ borderRadius: {
127
+ topLeft: 30,
128
+ topRight: 30,
129
+ bottomLeft: 30,
130
+ bottomRight: 30
131
+ },
132
+ bannerSpacing: {
133
+ left: 16,
134
+ top: 8,
135
+ right: 16,
136
+ bottom: 8
137
+ }
138
+ }
139
+ }
140
+ }
141
+ };
142
+ export function getTheme(selectedTheme) {
143
+ return transformTheme(selectedTheme?.theme || defaultTheme.theme);
144
+ }
@@ -0,0 +1,72 @@
1
+ import { Grid, Link, Typography } from "@mui/material";
2
+ import { useEditorTheme } from "../hooks/useEditorTheme";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
+ function ActiveTheme(props) {
7
+ const {
8
+ onExplore
9
+ } = props;
10
+ const {
11
+ theme
12
+ } = useEditorTheme();
13
+ const {
14
+ colors = {}
15
+ } = theme?.theme?.cssVars || {};
16
+ const {
17
+ id,
18
+ name,
19
+ mood_name = ""
20
+ } = theme || {};
21
+ const themeColors = Object.values(colors || {});
22
+ return /*#__PURE__*/_jsxs(Grid, {
23
+ className: "activeThemeInnner",
24
+ children: [/*#__PURE__*/_jsx(Typography, {
25
+ variant: "body1",
26
+ className: "title",
27
+ children: id ? "Active Theme" : "No theme activated"
28
+ }), /*#__PURE__*/_jsxs(Grid, {
29
+ className: "flexAlign",
30
+ children: [/*#__PURE__*/_jsx(Typography, {
31
+ variant: "body1",
32
+ className: "fs-14",
33
+ children: name
34
+ }), /*#__PURE__*/_jsxs(Typography, {
35
+ variant: "body2",
36
+ color: "textSecondary",
37
+ className: "fs-12",
38
+ style: {
39
+ marginLeft: "4px"
40
+ },
41
+ children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
42
+ })]
43
+ }), /*#__PURE__*/_jsxs(Grid, {
44
+ container: true,
45
+ justifyContent: "space-between",
46
+ sx: {
47
+ mt: 1
48
+ },
49
+ children: [/*#__PURE__*/_jsx(Grid, {
50
+ className: "flexAlign",
51
+ sx: {
52
+ gap: "10px"
53
+ },
54
+ children: id ? /*#__PURE__*/_jsx(_Fragment, {
55
+ children: themeColors?.map((color, i) => {
56
+ return /*#__PURE__*/_jsx(Grid, {
57
+ className: "activeColorBox",
58
+ style: {
59
+ background: color
60
+ }
61
+ }, i);
62
+ })
63
+ }) : null
64
+ }), onExplore && /*#__PURE__*/_jsx(Link, {
65
+ className: "pointer fs-12 fw-500",
66
+ onClick: onExplore,
67
+ children: "Explore More"
68
+ })]
69
+ })]
70
+ });
71
+ }
72
+ export default ActiveTheme;
@@ -0,0 +1,290 @@
1
+ import React, { useRef, useState } from "react";
2
+ import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled } from "@mui/material";
3
+ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
+
5
+ // Style
6
+ import Style from "./style";
7
+ import { PenIcon } from "../icons";
8
+ import StyleBuilder from "../../common/StyleBuilder";
9
+ import { fontFamilyMap, fontOptions } from "../../utils/font";
10
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
11
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ const buttonStyle = [{
15
+ tab: "General",
16
+ value: "size",
17
+ fields: [{
18
+ label: "Font Family",
19
+ key: "fontFamily",
20
+ type: "textOptions",
21
+ options: fontOptions,
22
+ width: 7,
23
+ renderOption: option => {
24
+ return /*#__PURE__*/_jsx("span", {
25
+ style: {
26
+ fontFamily: option.value
27
+ },
28
+ children: option.text
29
+ });
30
+ }
31
+ }, {
32
+ label: "Font Size",
33
+ key: "textSize",
34
+ type: "fontSize",
35
+ width: 5,
36
+ placeholder: "16px or 1em"
37
+ }]
38
+ }, {
39
+ tab: "Colors",
40
+ value: "colors",
41
+ fields: [{
42
+ label: "Text Color",
43
+ key: "textColor",
44
+ type: "color",
45
+ needPreview: true
46
+ }, {
47
+ label: "Button Color",
48
+ key: "bgColor",
49
+ type: "color",
50
+ themeEnabled: true
51
+ }]
52
+ }, {
53
+ tab: "Banner Spacing",
54
+ value: "bannerSpacing",
55
+ fields: [{
56
+ label: "Banner Spacing",
57
+ key: "bannerSpacing",
58
+ type: "bannerSpacing"
59
+ }]
60
+ }, {
61
+ tab: "Border",
62
+ value: "border",
63
+ fields: [{
64
+ label: "Border Radius",
65
+ key: "borderRadius",
66
+ type: "borderRadius"
67
+ }]
68
+ }, {
69
+ tab: "Hover Colors",
70
+ value: "hoverColors",
71
+ fields: [{
72
+ label: "Hover Text Color",
73
+ key: "textColorHover",
74
+ type: "color",
75
+ needPreview: true
76
+ }, {
77
+ label: "Hover Button Color",
78
+ key: "bgColorHover",
79
+ type: "color"
80
+ }]
81
+ }];
82
+ function getBtnSxProps(buttonStyle = {}) {
83
+ const newStyle = {
84
+ ...buttonStyle
85
+ };
86
+ if (newStyle?.bannerSpacing) {
87
+ newStyle.padding = newStyle?.bannerSpacing;
88
+ }
89
+ newStyle.borderRadius = {
90
+ ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
91
+ };
92
+ newStyle.padding = {
93
+ ...getTRBLBreakPoints(newStyle?.bannerSpacing || {})
94
+ };
95
+ delete newStyle?.bannerSpacing;
96
+ if (newStyle?.hover) {
97
+ newStyle["&:hover"] = newStyle.hover;
98
+ delete newStyle.hover;
99
+ }
100
+ return newStyle;
101
+ }
102
+ const MAP_HOVER_KEYS = {
103
+ color: "textColorHover",
104
+ background: "bgColorHover"
105
+ };
106
+ const MAP_THEME_TO_ELEMENT_KEYS = {
107
+ color: "textColor",
108
+ background: "bgColor",
109
+ fontFamily: (value, prev, buttonEl) => {
110
+ if (!buttonEl?.current) {
111
+ return prev;
112
+ }
113
+ const computedStyle = window.getComputedStyle(buttonEl?.current);
114
+ const val = computedStyle.getPropertyValue("font-family") || "";
115
+ const fontFamily = fontOptions?.find(o => o.text === val)?.value;
116
+ return {
117
+ ...prev,
118
+ fontFamily
119
+ };
120
+ },
121
+ fontSize: "textSize",
122
+ borderRadius: "borderRadius",
123
+ bannerSpacing: "bannerSpacing",
124
+ lockRadius: "lockRadius",
125
+ lockbannerSpacing: "lockbannerSpacing",
126
+ // fontWeight
127
+
128
+ hover: (value = {}, prev = {}) => {
129
+ const props = getProps(value, MAP_HOVER_KEYS);
130
+ return {
131
+ ...prev,
132
+ ...props
133
+ };
134
+ }
135
+ };
136
+ const MAP_ELEMENT_TO_THEME_KEYS = {
137
+ textSize: "fontSize",
138
+ textColor: "color",
139
+ bgColor: "background",
140
+ bannerSpacing: "bannerSpacing",
141
+ borderRadius: "borderRadius",
142
+ lockRadius: "lockRadius",
143
+ lockbannerSpacing: "lockbannerSpacing",
144
+ textColorHover: (value, prev) => {
145
+ const hover = {
146
+ ...(prev?.hover || {})
147
+ };
148
+ hover.color = value;
149
+ return {
150
+ ...prev,
151
+ hover
152
+ };
153
+ },
154
+ bgColorHover: (value, prev) => {
155
+ const hover = {
156
+ ...(prev?.hover || {})
157
+ };
158
+ hover.background = value;
159
+ return {
160
+ ...prev,
161
+ hover
162
+ };
163
+ },
164
+ fontFamily: (value, prev) => {
165
+ const fontFamily = fontFamilyMap[value] || "";
166
+ return {
167
+ ...prev,
168
+ fontFamily
169
+ };
170
+ }
171
+ };
172
+ function getProps(buttonStyle, MAP_KEYS, buttonEl) {
173
+ let props = {};
174
+ Object.entries(buttonStyle).forEach(([key, value]) => {
175
+ const elementKey = MAP_KEYS[key];
176
+ if (elementKey) {
177
+ if (typeof elementKey === "string") {
178
+ props[elementKey] = value;
179
+ } else {
180
+ props = elementKey(value, props, buttonEl);
181
+ }
182
+ }
183
+ });
184
+ return props;
185
+ }
186
+ function convertThemeToElementProps(button = {}, buttonEl) {
187
+ const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
188
+ return props;
189
+ }
190
+
191
+ // icons
192
+
193
+ const Buttons = props => {
194
+ const {
195
+ className
196
+ } = props;
197
+ const [anchorEl, setAnchorEl] = useState();
198
+ const {
199
+ selectedTheme,
200
+ updateTheme
201
+ } = useEditorTheme();
202
+ const {
203
+ button
204
+ } = selectedTheme?.elementProps || {};
205
+ const buttonEl = useRef();
206
+ const elementProps = convertThemeToElementProps(button, buttonEl);
207
+
208
+ // State
209
+ return /*#__PURE__*/_jsxs(Grid, {
210
+ className: className,
211
+ children: [/*#__PURE__*/_jsxs(Accordion, {
212
+ className: "settingAccordion",
213
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
214
+ expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
215
+ "aria-controls": "panel1-content",
216
+ id: "panel1-header",
217
+ children: "Buttons"
218
+ }), /*#__PURE__*/_jsx(AccordionDetails, {
219
+ children: /*#__PURE__*/_jsxs(Grid, {
220
+ container: true,
221
+ className: "buttonTypeItem",
222
+ justifyContent: "space-between",
223
+ alignItems: "center",
224
+ wrap: "nowrap",
225
+ onClick: e => setAnchorEl(e.currentTarget),
226
+ children: [/*#__PURE__*/_jsxs(Grid, {
227
+ item: true,
228
+ style: {
229
+ maxWidth: "calc(100% - 50px)",
230
+ overflowX: "auto"
231
+ },
232
+ children: [/*#__PURE__*/_jsx(Typography, {
233
+ variant: "body1",
234
+ className: "fw-600 fs-14",
235
+ style: {
236
+ marginBottom: "10px"
237
+ },
238
+ children: "Primary Button"
239
+ }), /*#__PURE__*/_jsx(Button, {
240
+ sx: getBtnSxProps(button),
241
+ ref: buttonEl,
242
+ children: "Button"
243
+ })]
244
+ }), /*#__PURE__*/_jsx(IconButton, {
245
+ className: "editIcon",
246
+ children: /*#__PURE__*/_jsx(PenIcon, {})
247
+ })]
248
+ })
249
+ })]
250
+ }), /*#__PURE__*/_jsx(Popper, {
251
+ open: Boolean(anchorEl),
252
+ anchorEl: anchorEl,
253
+ transition: true,
254
+ sx: {
255
+ zIndex: "100000",
256
+ background: "white"
257
+ },
258
+ placement: "left-start",
259
+ children: ({
260
+ TransitionProps
261
+ }) => /*#__PURE__*/_jsx(Fade, {
262
+ ...TransitionProps,
263
+ timeout: 350,
264
+ children: /*#__PURE__*/_jsx("div", {
265
+ children: /*#__PURE__*/_jsx(StyleBuilder, {
266
+ title: "Button",
267
+ type: "buttonStyle",
268
+ element: elementProps,
269
+ onSave: data => {
270
+ const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
271
+ updateTheme(props, {
272
+ action: "ELEMENT_PROPS_CHANGE",
273
+ fieldName: "button"
274
+ });
275
+ setAnchorEl(null);
276
+ },
277
+ onClose: () => {
278
+ setAnchorEl(null);
279
+ },
280
+ renderTabs: buttonStyle,
281
+ customProps: {
282
+ disableEditTheme: true
283
+ }
284
+ })
285
+ })
286
+ })
287
+ })]
288
+ });
289
+ };
290
+ export default styled(Buttons)(Style);
@@ -0,0 +1,21 @@
1
+ const Style = () => ({
2
+ ".buttonTypeItem": {
3
+ padding: "8px 10px",
4
+ width: "calc(100% + 20px)",
5
+ margin: "0 -10px",
6
+ "&:hover": {
7
+ background: "#ECF2FF",
8
+ ".editIcon": {
9
+ opacity: "1",
10
+ visibility: "visible"
11
+ }
12
+ },
13
+ ".editIcon": {
14
+ opacity: "0",
15
+ visibility: "hidden",
16
+ width: "30px",
17
+ height: "30px"
18
+ }
19
+ }
20
+ });
21
+ export default Style;