@flozy/editor 4.0.0 → 4.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. package/dist/Editor/ChatEditor.js +28 -17
  2. package/dist/Editor/CommonEditor.js +109 -177
  3. package/dist/Editor/Editor.css +13 -8
  4. package/dist/Editor/Elements/AI/AIInput.js +24 -18
  5. package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +89 -66
  7. package/dist/Editor/Elements/AI/Styles.js +1 -2
  8. package/dist/Editor/Elements/AI/helper.js +3 -5
  9. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  10. package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
  11. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  12. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  17. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  18. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  19. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  20. package/dist/Editor/Elements/Grid/Grid.js +3 -27
  21. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  22. package/dist/Editor/Elements/Link/Link.js +1 -6
  23. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  24. package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
  25. package/dist/Editor/Elements/List/CheckList.js +2 -1
  26. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +5 -20
  28. package/dist/Editor/Elements/Table/Styles.js +1 -23
  29. package/dist/Editor/Elements/Table/Table.js +1 -2
  30. package/dist/Editor/Elements/Table/TableCell.js +7 -69
  31. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
  32. package/dist/Editor/MiniEditor.js +1 -3
  33. package/dist/Editor/Styles/EditorStyles.js +1 -1
  34. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  35. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  36. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  37. package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
  38. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
  39. package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
  40. package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
  41. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +13 -12
  42. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +13 -12
  43. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  45. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +33 -40
  47. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  48. package/dist/Editor/Toolbar/PopupTool/index.js +6 -7
  49. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  50. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  51. package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
  52. package/dist/Editor/assets/svg/TextIcon.js +5 -8
  53. package/dist/Editor/common/ColorPickerButton.js +18 -26
  54. package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
  55. package/dist/Editor/common/Icon.js +3 -43
  56. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  57. package/dist/Editor/common/LinkSettings/index.js +2 -4
  58. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  59. package/dist/Editor/common/LinkSettings/style.js +8 -11
  60. package/dist/Editor/common/Section/index.js +7 -57
  61. package/dist/Editor/common/Section/styles.js +0 -11
  62. package/dist/Editor/common/Shorthands/elements.js +0 -54
  63. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
  64. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
  67. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  68. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -29
  69. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  70. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  71. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  72. package/dist/Editor/common/iconslist.js +31 -0
  73. package/dist/Editor/helper/index.js +22 -0
  74. package/dist/Editor/helper/theme.js +4 -189
  75. package/dist/Editor/hooks/useMouseMove.js +1 -4
  76. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  77. package/dist/Editor/plugins/withEmbeds.js +1 -1
  78. package/dist/Editor/plugins/withHTML.js +1 -1
  79. package/dist/Editor/plugins/withTable.js +1 -1
  80. package/dist/Editor/theme/ThemeList.js +173 -50
  81. package/dist/Editor/utils/SlateUtilityFunctions.js +27 -169
  82. package/dist/Editor/utils/button.js +17 -1
  83. package/dist/Editor/utils/events.js +2 -54
  84. package/dist/Editor/utils/font.js +37 -40
  85. package/dist/Editor/utils/helper.js +2 -31
  86. package/dist/Editor/utils/table.js +43 -51
  87. package/package.json +3 -4
  88. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  89. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -184
  90. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  91. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  92. package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
  93. package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
  94. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  95. package/dist/Editor/assets/svg/RedoIcon.js +0 -27
  96. package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
  97. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  98. package/dist/Editor/assets/svg/UndoIcon.js +0 -27
  99. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  100. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  101. package/dist/Editor/common/CustomDialog/index.js +0 -94
  102. package/dist/Editor/common/CustomDialog/style.js +0 -67
  103. package/dist/Editor/common/CustomSelect.js +0 -33
  104. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  105. package/dist/Editor/theme/index.js +0 -144
  106. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  107. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  108. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  109. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  110. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  111. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  112. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  113. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  114. package/dist/Editor/themeSettings/icons.js +0 -60
  115. package/dist/Editor/themeSettings/index.js +0 -320
  116. package/dist/Editor/themeSettings/style.js +0 -152
  117. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  118. package/dist/Editor/themeSettingsAI/index.js +0 -356
  119. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  120. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,33 +0,0 @@
1
- import { MenuItem, Select } from "@mui/material";
2
- import { fontFamilyMap } from "../utils/font";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- function CustomSelect(props) {
5
- const {
6
- onChange,
7
- options = [],
8
- value
9
- } = props;
10
- return /*#__PURE__*/_jsx(Select, {
11
- fullWidth: true,
12
- value: value,
13
- onChange: onChange,
14
- className: "editor-dd",
15
- style: {
16
- fontFamily: fontFamilyMap[value],
17
- width: "100%",
18
- height: "36px",
19
- borderRadius: "10px",
20
- fontSize: "14px"
21
- },
22
- children: options.map((option, i) => {
23
- return /*#__PURE__*/_jsx(MenuItem, {
24
- value: option.value,
25
- style: {
26
- fontFamily: option.text
27
- },
28
- children: option?.label || option?.text
29
- }, i);
30
- })
31
- });
32
- }
33
- export default CustomSelect;
@@ -1,139 +0,0 @@
1
- import { useSlate } from "slate-react";
2
- import { defaultTheme } from "../theme";
3
- import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
4
- import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
5
- const MAP_FIELDS = {
6
- HEADING: HEADING_THEME_FIELDS,
7
- PARAGRAPH: PARAGRAPH_THEME_FIELDS
8
- };
9
- function getUpdatePayload(prevTheme = {}, update, actionData) {
10
- const {
11
- action,
12
- fieldName
13
- } = actionData || {};
14
- const {
15
- theme: prev
16
- } = prevTheme;
17
- let theme = {};
18
- let themeProps = {};
19
- switch (action) {
20
- case "THEME_CHANGE":
21
- theme = update;
22
- break;
23
- case "CSS_VAR_CHANGE":
24
- const prevCssVars = prev?.cssVars || {};
25
- const prevValue = prevCssVars[fieldName] || {};
26
- themeProps = {
27
- ...(prev || {}),
28
- cssVars: {
29
- ...prevCssVars,
30
- [fieldName]: {
31
- ...prevValue,
32
- ...update
33
- }
34
- }
35
- };
36
- theme = {
37
- ...prevTheme,
38
- theme: themeProps
39
- };
40
- break;
41
- case "ELEMENT_PROPS_CHANGE":
42
- const prevEleProps = prev?.elementProps || {};
43
- const prevEleValue = prevEleProps[fieldName] || {};
44
- themeProps = {
45
- ...(prev || {}),
46
- elementProps: {
47
- ...prevEleProps,
48
- [fieldName]: {
49
- ...prevEleValue,
50
- ...update
51
- }
52
- }
53
- };
54
- theme = {
55
- ...prevTheme,
56
- theme: themeProps
57
- };
58
- break;
59
- case "OTHER_PROPS_CHANGE":
60
- themeProps = {
61
- ...(prev || {}),
62
- otherProps: {
63
- ...(prev.otherProps || {}),
64
- ...update
65
- }
66
- };
67
- theme = {
68
- ...prevTheme,
69
- theme: themeProps
70
- };
71
- break;
72
- case "FONT_CHANGE":
73
- const {
74
- elementProps = {},
75
- otherProps = {}
76
- } = prev;
77
- const fields = MAP_FIELDS[actionData?.fieldType];
78
- const headingUpdate = {};
79
- fields?.forEach(field => {
80
- const prevHeadingData = elementProps[field];
81
- headingUpdate[field] = {
82
- ...prevHeadingData,
83
- ...update
84
- };
85
- });
86
- themeProps = {
87
- ...(prev || {}),
88
- elementProps: {
89
- ...elementProps,
90
- ...headingUpdate
91
- },
92
- otherProps: {
93
- ...otherProps,
94
- headingFontFamily: update?.fontFamily
95
- }
96
- };
97
- theme = {
98
- ...prevTheme,
99
- theme: themeProps
100
- };
101
- break;
102
- default:
103
- theme = {
104
- ...prevTheme,
105
- ...(update || {})
106
- };
107
- break;
108
- }
109
- return theme;
110
- }
111
- const updateTheme = (editor, pageSt, update, actionData) => {
112
- const {
113
- pageProps
114
- } = pageSt || {};
115
- const {
116
- theme
117
- } = pageProps || {};
118
- updatePageSettings(editor, {
119
- ...(pageProps || {}),
120
- theme: getUpdatePayload(theme, update, actionData)
121
- });
122
- };
123
- export const useEditorTheme = () => {
124
- const editor = useSlate();
125
- const {
126
- element: pageSt
127
- } = getPageSettings(editor) || {};
128
- const {
129
- pageProps
130
- } = pageSt || {};
131
- const {
132
- theme
133
- } = pageProps || {};
134
- return {
135
- selectedTheme: theme?.theme || defaultTheme?.theme,
136
- updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData),
137
- theme
138
- };
139
- };
@@ -1,144 +0,0 @@
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
- }
@@ -1,72 +0,0 @@
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;
@@ -1,290 +0,0 @@
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);
@@ -1,21 +0,0 @@
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;