@flozy/editor 3.9.1 → 3.9.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (127) hide show
  1. package/dist/Editor/ChatEditor.js +45 -55
  2. package/dist/Editor/CommonEditor.js +111 -180
  3. package/dist/Editor/Editor.css +0 -7
  4. package/dist/Editor/Elements/AI/AIInput.js +18 -17
  5. package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +28 -23
  7. package/dist/Editor/Elements/AI/Styles.js +1 -2
  8. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  9. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  10. package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
  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/Embed/Image.js +19 -27
  18. package/dist/Editor/Elements/Embed/Video.js +10 -14
  19. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  20. package/dist/Editor/Elements/Form/Form.js +1 -1
  21. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  22. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  23. package/dist/Editor/Elements/Grid/Grid.js +3 -27
  24. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  25. package/dist/Editor/Elements/Link/Link.js +1 -6
  26. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  27. package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
  28. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +4 -8
  29. package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -14
  30. package/dist/Editor/Elements/Table/Styles.js +1 -23
  31. package/dist/Editor/Elements/Table/Table.js +2 -3
  32. package/dist/Editor/Elements/Table/TableCell.js +8 -70
  33. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
  34. package/dist/Editor/MiniEditor.js +1 -3
  35. package/dist/Editor/Styles/EditorStyles.js +1 -1
  36. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  37. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  38. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  39. package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
  40. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +3 -29
  41. package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
  42. package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
  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 +16 -22
  47. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  48. package/dist/Editor/Toolbar/PopupTool/index.js +17 -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 +9 -25
  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/MentionsPopup/MentionsListCard.js +1 -6
  61. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  62. package/dist/Editor/common/Section/index.js +7 -57
  63. package/dist/Editor/common/Section/styles.js +0 -11
  64. package/dist/Editor/common/Shorthands/elements.js +0 -54
  65. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  66. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  67. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  68. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
  69. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  70. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  71. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  72. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  73. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
  74. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  75. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  76. package/dist/Editor/common/iconslist.js +31 -0
  77. package/dist/Editor/helper/deserialize/index.js +9 -14
  78. package/dist/Editor/helper/theme.js +4 -190
  79. package/dist/Editor/hooks/useMouseMove.js +2 -4
  80. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  81. package/dist/Editor/plugins/withEmbeds.js +1 -1
  82. package/dist/Editor/plugins/withHTML.js +5 -47
  83. package/dist/Editor/plugins/withLayout.js +10 -15
  84. package/dist/Editor/plugins/withTable.js +2 -2
  85. package/dist/Editor/theme/ThemeList.js +173 -50
  86. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -161
  87. package/dist/Editor/utils/button.js +17 -1
  88. package/dist/Editor/utils/draftToSlate.js +1 -1
  89. package/dist/Editor/utils/events.js +6 -65
  90. package/dist/Editor/utils/font.js +37 -40
  91. package/dist/Editor/utils/helper.js +14 -74
  92. package/dist/Editor/utils/table.js +43 -51
  93. package/package.json +3 -4
  94. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  95. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -177
  96. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  97. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  98. package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
  99. package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
  100. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  101. package/dist/Editor/assets/svg/RedoIcon.js +0 -27
  102. package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
  103. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  104. package/dist/Editor/assets/svg/UndoIcon.js +0 -27
  105. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  106. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  107. package/dist/Editor/common/CustomDialog/index.js +0 -94
  108. package/dist/Editor/common/CustomDialog/style.js +0 -67
  109. package/dist/Editor/common/CustomSelect.js +0 -33
  110. package/dist/Editor/common/EditorCmds.js +0 -35
  111. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  112. package/dist/Editor/theme/index.js +0 -144
  113. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  114. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  115. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  116. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  117. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  118. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  119. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  120. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  121. package/dist/Editor/themeSettings/icons.js +0 -60
  122. package/dist/Editor/themeSettings/index.js +0 -320
  123. package/dist/Editor/themeSettings/style.js +0 -152
  124. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  125. package/dist/Editor/themeSettingsAI/index.js +0 -356
  126. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  127. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,213 +0,0 @@
1
- import React from "react";
2
- import { Accordion, AccordionDetails, AccordionSummary, Checkbox, Divider, Fade, FormControlLabel, Grid, Paper, Popper, Typography, styled } from "@mui/material";
3
- import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4
-
5
- // Style
6
- import Style from "./style";
7
- import ThemeTextFormat from "../../Toolbar/PopupTool/ThemeTextFormat";
8
- import { useEditorContext } from "../../hooks/useMouseMove";
9
- import usePopupStyle from "../../Toolbar/PopupTool/PopupToolStyle";
10
- import useWindowResize from "../../hooks/useWindowResize";
11
- import PopperHeader from "../../Toolbar/PopupTool/PopperHeader";
12
- import { useEditorTheme } from "../../hooks/useEditorTheme";
13
- import { fontOptions } from "../../utils/font";
14
- import CustomSelect from "../../common/CustomSelect";
15
- import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../../helper/theme";
16
- import PreviewElement from "./PreviewElement";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- const Fonts = props => {
20
- const {
21
- className
22
- } = props;
23
- const [anchorEl, setAnchorEl] = React.useState();
24
- const [selectedField, setSelectedField] = React.useState("");
25
- const [settings, setSettings] = React.useState({});
26
- const updateSettings = update => {
27
- setSettings(prev => {
28
- return {
29
- ...prev,
30
- ...update
31
- };
32
- });
33
- };
34
- const onClose = () => {
35
- setAnchorEl(null);
36
- setSelectedField("");
37
- setSettings({});
38
- };
39
- const {
40
- theme
41
- } = useEditorContext();
42
- const classes = usePopupStyle(theme);
43
- const [size] = useWindowResize();
44
- const {
45
- selectedTheme,
46
- updateTheme
47
- } = useEditorTheme();
48
- const {
49
- otherProps = {}
50
- } = selectedTheme || {};
51
- const {
52
- isHeadingCustomized,
53
- headingFontFamily,
54
- isParagraphCustomized,
55
- paragraphFontFamily
56
- } = otherProps;
57
- const onSaveTextSettings = () => {
58
- updateTheme(settings, {
59
- action: "ELEMENT_PROPS_CHANGE",
60
- fieldName: selectedField
61
- });
62
- onClose();
63
- };
64
- const updateOtherThemeProps = update => {
65
- updateTheme(update, {
66
- action: "OTHER_PROPS_CHANGE"
67
- });
68
- };
69
- const updateFont = (update, fieldType) => {
70
- updateTheme(update, {
71
- action: "FONT_CHANGE",
72
- fieldType
73
- });
74
- };
75
- const tabs = [{
76
- title: "Heading Font family",
77
- onFontFamilyChange: e => {
78
- const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
79
- updateFont({
80
- fontFamily
81
- }, "HEADING");
82
- updateSettings({
83
- fontFamily
84
- });
85
- },
86
- fontFamily: headingFontFamily ? fontOptions?.find(f => f.text === headingFontFamily)?.value : fontOptions[0].value,
87
- isCustomized: isHeadingCustomized,
88
- onCustomizeClick: event => {
89
- updateOtherThemeProps({
90
- isHeadingCustomized: event.target.checked
91
- });
92
- },
93
- fields: HEADING_THEME_FIELDS
94
- }, {
95
- title: "Paragraph Font family",
96
- onFontFamilyChange: e => {
97
- const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
98
- updateFont({
99
- fontFamily
100
- }, "PARAGRAPH");
101
- updateSettings({
102
- fontFamily
103
- });
104
- },
105
- fontFamily: paragraphFontFamily ? fontOptions?.find(f => f.text === paragraphFontFamily)?.value : fontOptions[0].value,
106
- isCustomized: isParagraphCustomized,
107
- onCustomizeClick: event => {
108
- updateOtherThemeProps({
109
- isParagraphCustomized: event.target.checked
110
- });
111
- },
112
- fields: PARAGRAPH_THEME_FIELDS
113
- }];
114
- return /*#__PURE__*/_jsxs(Grid, {
115
- className: className,
116
- children: [/*#__PURE__*/_jsxs(Accordion, {
117
- className: "settingAccordion",
118
- children: [/*#__PURE__*/_jsx(AccordionSummary, {
119
- expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
120
- "aria-controls": "panel1-content",
121
- id: "panel1-header",
122
- children: "Fonts"
123
- }), /*#__PURE__*/_jsx(AccordionDetails, {
124
- children: tabs?.map((tab, i) => {
125
- const {
126
- title,
127
- onFontFamilyChange,
128
- fontFamily,
129
- isCustomized = "",
130
- onCustomizeClick,
131
- fields
132
- } = tab;
133
- return /*#__PURE__*/_jsxs(React.Fragment, {
134
- children: [/*#__PURE__*/_jsxs(Grid, {
135
- sx: {
136
- pt: 2
137
- },
138
- children: [/*#__PURE__*/_jsx(Typography, {
139
- variant: "body2",
140
- sx: {
141
- pb: 1
142
- },
143
- className: "fs-14 fw-500",
144
- children: title
145
- }), /*#__PURE__*/_jsx(CustomSelect, {
146
- options: fontOptions,
147
- onChange: onFontFamilyChange,
148
- value: fontFamily
149
- }), /*#__PURE__*/_jsx(FormControlLabel, {
150
- control: /*#__PURE__*/_jsx(Checkbox, {
151
- checked: isCustomized,
152
- onChange: onCustomizeClick,
153
- size: "small"
154
- }),
155
- label: /*#__PURE__*/_jsx(Typography, {
156
- variant: "body2",
157
- className: "fs-12",
158
- children: "Customize Font style"
159
- })
160
- }), isCustomized && /*#__PURE__*/_jsx(Grid, {
161
- ref: anchorEl,
162
- children: fields.map((field, index) => {
163
- return /*#__PURE__*/_jsx(PreviewElement, {
164
- field: field,
165
- settings: settings,
166
- setSettings: setSettings,
167
- setAnchorEl: setAnchorEl,
168
- selectedField: selectedField,
169
- setSelectedField: setSelectedField
170
- }, index);
171
- })
172
- })]
173
- }), i === 0 && /*#__PURE__*/_jsx(Divider, {
174
- sx: {
175
- mt: 1,
176
- mb: 1
177
- }
178
- })]
179
- }, i);
180
- })
181
- })]
182
- }), /*#__PURE__*/_jsx(Popper, {
183
- open: Boolean(anchorEl),
184
- anchorEl: anchorEl,
185
- transition: true,
186
- placement: "left-start",
187
- sx: classes.popupWrapper,
188
- className: `tools-drawer ${size?.device} textSettings`,
189
- children: ({
190
- TransitionProps
191
- }) => /*#__PURE__*/_jsx(Fade, {
192
- ...TransitionProps,
193
- children: /*#__PURE__*/_jsxs(Paper, {
194
- style: {
195
- borderRadius: "10px",
196
- position: "relative"
197
- },
198
- children: [/*#__PURE__*/_jsx(PopperHeader, {
199
- title: "Text Settings",
200
- classes: classes,
201
- onClose: onClose
202
- }), /*#__PURE__*/_jsx(ThemeTextFormat, {
203
- settings: settings,
204
- updateSettings: updateSettings,
205
- onSaveTextSettings: onSaveTextSettings,
206
- onClose: onClose
207
- })]
208
- })
209
- })
210
- })]
211
- });
212
- };
213
- export default styled(Fonts)(Style);
@@ -1,44 +0,0 @@
1
- const Style = () => ({
2
- ".settingAccordion": {
3
- ".MuiOutlinedInput-root": {
4
- borderRadius: "8px",
5
- boxShadow: "0px 4px 16px 0px #0000000D"
6
- }
7
- },
8
- ".fontTypeItem": {
9
- padding: "6px 10px",
10
- width: "calc(100% + 20px)",
11
- margin: "0 -10px",
12
- "&:hover": {
13
- background: "#ECF2FF",
14
- ".editIcon": {
15
- opacity: "1",
16
- visibility: "visible"
17
- }
18
- },
19
- ".editIcon": {
20
- opacity: "0",
21
- visibility: "hidden",
22
- width: "30px",
23
- height: "30px"
24
- }
25
- },
26
- ".typeValue": {
27
- fontSize: "12px",
28
- color: "#64748B",
29
- ".dotColor": {
30
- width: "12px",
31
- height: "12px",
32
- borderRadius: "12px",
33
- background: "#0F172A",
34
- marginRight: "3px"
35
- }
36
- },
37
- ".preview-theme-text": {
38
- width: "200px",
39
- whiteSpace: "nowrap",
40
- overflow: "hidden",
41
- textOverflow: "ellipsis"
42
- }
43
- });
44
- export default Style;
@@ -1,60 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { jsxs as _jsxs } from "react/jsx-runtime";
3
- export const TickIcon = () => /*#__PURE__*/_jsxs("svg", {
4
- className: "tickIcon",
5
- xmlns: "http://www.w3.org/2000/svg",
6
- width: "26",
7
- height: "26",
8
- viewBox: "0 0 26 26",
9
- fill: "none",
10
- children: [/*#__PURE__*/_jsx("rect", {
11
- x: "0.5",
12
- y: "0.5",
13
- width: "25",
14
- height: "25",
15
- rx: "12.5",
16
- fill: "#2563EB",
17
- stroke: "white"
18
- }), /*#__PURE__*/_jsx("path", {
19
- d: "M7 13.105L11.0011 17.21L19 9",
20
- stroke: "white",
21
- strokeWidth: "1.5",
22
- strokeLinecap: "round",
23
- strokeLinejoin: "round"
24
- })]
25
- });
26
- export const EditIcon = () => /*#__PURE__*/_jsxs("svg", {
27
- className: "editIcon",
28
- xmlns: "http://www.w3.org/2000/svg",
29
- width: "16",
30
- height: "16",
31
- viewBox: "0 0 16 16",
32
- fill: "none",
33
- children: [/*#__PURE__*/_jsx("circle", {
34
- cx: "8",
35
- cy: "8",
36
- r: "8",
37
- fill: "#2563EB",
38
- fillOpacity: "0.14"
39
- }), /*#__PURE__*/_jsx("path", {
40
- d: "M11.3066 4.69573C10.3941 3.77831 9.50211 3.75792 8.5642 4.69573L7.98821 5.26658C7.93723 5.31754 7.92194 5.3889 7.94233 5.45516C8.29914 6.70387 9.29822 7.70284 10.5471 8.05962C10.5623 8.06472 10.5878 8.06472 10.6031 8.06472C10.6541 8.06472 10.7051 8.04433 10.7408 8.00865L11.3066 7.43781C11.7704 6.974 11.9998 6.53058 11.9998 6.07697C11.9998 5.61825 11.7704 5.16464 11.3066 4.69573Z",
41
- fill: "#2563EB"
42
- }), /*#__PURE__*/_jsx("path", {
43
- d: "M9.69545 8.48831C9.55783 8.42206 9.4253 8.3558 9.30296 8.27935C9.20102 8.21819 9.09907 8.15193 9.00223 8.08058C8.92067 8.02961 8.82892 7.95316 8.73717 7.87671C8.72697 7.87161 8.69639 7.84613 8.65561 7.80535C8.4976 7.67793 8.32939 7.50464 8.17137 7.31606C8.16118 7.30587 8.1306 7.27529 8.10511 7.22942C8.05414 7.17336 7.97768 7.07652 7.91141 6.96949C7.85534 6.89813 7.78908 6.7962 7.72791 6.68916C7.65145 6.56175 7.58519 6.43433 7.52402 6.30181C7.45776 6.1591 7.40679 6.02659 7.36091 5.89917L4.61859 8.64122C4.44019 8.8196 4.26688 9.15599 4.2312 9.40573L4.01202 10.9246C3.96614 11.2457 4.0528 11.5464 4.25159 11.7451C4.4198 11.9133 4.64917 12 4.90404 12C4.96011 12 5.01618 11.9949 5.07225 11.9898L6.58613 11.7757C6.83589 11.74 7.17231 11.5718 7.35072 11.3884L10.093 8.64631C9.96561 8.60554 9.83818 8.54948 9.69545 8.48831Z",
44
- fill: "#2563EB"
45
- })]
46
- });
47
- export const PenIcon = () => /*#__PURE__*/_jsxs("svg", {
48
- xmlns: "http://www.w3.org/2000/svg",
49
- width: "14",
50
- height: "14",
51
- viewBox: "0 0 14 14",
52
- fill: "none",
53
- children: [/*#__PURE__*/_jsx("path", {
54
- d: "M12.7874 1.21754C11.1907 -0.387958 9.62966 -0.423636 7.98833 1.21754L6.98034 2.21652C6.89114 2.30571 6.86438 2.43058 6.90006 2.54653C7.52448 4.7318 9.27285 6.48 11.4583 7.10436C11.4851 7.11328 11.5297 7.11328 11.5564 7.11328C11.6456 7.11328 11.7349 7.07761 11.7973 7.01517L12.7874 6.01619C13.5992 5.20452 14.0006 4.42853 14.0006 3.63471C14.0006 2.83196 13.5992 2.03813 12.7874 1.21754Z",
55
- fill: "#2563EB"
56
- }), /*#__PURE__*/_jsx("path", {
57
- d: "M9.96704 7.85451C9.7262 7.73856 9.49427 7.62261 9.28019 7.48882C9.10178 7.38178 8.92338 7.26583 8.75389 7.14096C8.61117 7.05177 8.45061 6.91798 8.29004 6.78419C8.2722 6.77527 8.21868 6.73067 8.14732 6.65932C7.8708 6.43633 7.57643 6.13308 7.2999 5.80306C7.28206 5.78522 7.22854 5.73171 7.18394 5.65143C7.09474 5.55332 6.96094 5.38385 6.84497 5.19655C6.74685 5.07168 6.63089 4.89329 6.52385 4.70598C6.39005 4.483 6.27408 4.26002 6.16704 4.02811C6.05108 3.77837 5.96188 3.54647 5.88159 3.32349L1.08253 8.12209C0.770327 8.43427 0.46704 9.02294 0.404599 9.45999L0.0210312 12.118C-0.0592505 12.6799 0.0923925 13.2061 0.44028 13.554C0.734646 13.8483 1.13605 13.9999 1.58206 13.9999C1.68019 13.9999 1.77831 13.991 1.87643 13.9821L4.52573 13.6075C4.96282 13.545 5.55155 13.2507 5.86375 12.9296L10.6628 8.13101C10.4398 8.05965 10.2168 7.96154 9.96704 7.85451Z",
58
- fill: "#2563EB"
59
- })]
60
- });
@@ -1,320 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
3
-
4
- // Style
5
- import Style from "./style";
6
-
7
- // icons
8
- import { CloseIcon } from "../common/iconslist";
9
- import { ChevronLeft } from "@mui/icons-material";
10
- import { TickIcon } from "./icons";
11
- import ColorTheme from "./colorTheme";
12
- import Buttons from "./buttons";
13
- import Fonts from "./fonts";
14
- import { useEditorTheme } from "../hooks/useEditorTheme";
15
- import ActiveTheme from "./ActiveTheme";
16
- import SaveTheme from "../themeSettingsAI/saveTheme";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- import { Fragment as _Fragment } from "react/jsx-runtime";
20
- function getColors(themeColors) {
21
- const colors = Object.values(themeColors || {});
22
- const primaryColors = colors.slice(0, 2);
23
- const otherColors = colors.slice(2);
24
- return {
25
- primaryColors,
26
- otherColors
27
- };
28
- }
29
- const ThemeSettings = props => {
30
- const {
31
- className,
32
- open,
33
- setOpen,
34
- services
35
- } = props;
36
-
37
- // State
38
- // const [themeDrawer, setThemeDrawer] = useState(true);
39
- const [themeTabType, setThemeTabType] = React.useState(0);
40
- const [themeMoodboard, setThemeMoodboard] = React.useState(false);
41
- const [themes, setThemes] = useState([]);
42
- const [loading, setLoading] = useState(false);
43
- const [savingTheme, setSavingTheme] = useState(false);
44
- const {
45
- theme: userSelectedTheme,
46
- updateTheme
47
- } = useEditorTheme();
48
- const {
49
- colors = {}
50
- } = userSelectedTheme?.theme?.cssVars || {};
51
- const {
52
- id,
53
- name,
54
- mood_name
55
- } = userSelectedTheme || {};
56
- const onClose = () => setOpen(false);
57
- const getThemesList = async themeTabType => {
58
- setLoading(true);
59
- setThemes([]);
60
- try {
61
- const themeType = themeTabType === 0 ? "default" : "";
62
- const result = await services("getThemes", {
63
- type: themeType
64
- });
65
- setThemes(result?.data || []);
66
- } catch (err) {
67
- console.log(err);
68
- }
69
- setLoading(false);
70
- };
71
- useEffect(() => {
72
- getThemesList(themeTabType);
73
- }, []);
74
- const handleThemeChange = theme => {
75
- updateTheme(theme, {
76
- action: "THEME_CHANGE"
77
- });
78
- };
79
- const onColorChange = (color, colorIndex) => {
80
- updateTheme({
81
- [`color${colorIndex}`]: color
82
- }, {
83
- action: "CSS_VAR_CHANGE",
84
- fieldName: "colors"
85
- });
86
- };
87
- const handleTabChange = (event, newValue) => {
88
- setThemeTabType(newValue);
89
- getThemesList(newValue);
90
- };
91
- const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
92
- const onSaveTheme = async (formData = {}) => {
93
- setSavingTheme(true);
94
- try {
95
- const type = isUpdateTheme ? "update" : "create";
96
- const result = await services("saveTheme", {
97
- type,
98
- id,
99
- ...formData,
100
- theme: userSelectedTheme?.theme
101
- });
102
- const update = {
103
- ...userSelectedTheme,
104
- ...formData,
105
- type: "2"
106
- };
107
- const createdId = result?.data?.id;
108
- if (createdId) {
109
- update.id = createdId;
110
- }
111
- updateTheme(update);
112
- getThemesList(themeTabType);
113
- } catch (err) {
114
- console.log(err);
115
- }
116
- setSavingTheme(false);
117
- };
118
-
119
- // themeCard
120
- const ThemeCard = ({
121
- theme
122
- }) => {
123
- const {
124
- name,
125
- mood_name = ""
126
- } = theme;
127
- const {
128
- colors = {}
129
- } = theme?.theme?.cssVars || {};
130
- const {
131
- primaryColors,
132
- otherColors
133
- } = getColors(colors);
134
- const isSelected = theme.id === userSelectedTheme?.id;
135
- return /*#__PURE__*/_jsxs(Grid, {
136
- className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
137
- onClick: () => handleThemeChange(theme),
138
- children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
139
- container: true,
140
- justifyContent: "space-between",
141
- className: "themeCard",
142
- gap: 2,
143
- children: [/*#__PURE__*/_jsxs(Grid, {
144
- children: [/*#__PURE__*/_jsx(Typography, {
145
- variant: "body1",
146
- className: "title",
147
- style: {
148
- whiteSpace: "nowrap",
149
- maxWidth: "100px",
150
- textOverflow: "ellipsis",
151
- overflow: "hidden"
152
- },
153
- children: name
154
- }), /*#__PURE__*/_jsx(Typography, {
155
- variant: "body2",
156
- color: "textSecondary",
157
- className: "fs-12",
158
- children: mood_name
159
- })]
160
- }), /*#__PURE__*/_jsxs(Grid, {
161
- className: "flexAlign",
162
- sx: {
163
- gap: "5px"
164
- },
165
- children: [primaryColors?.map((color, i) => {
166
- return /*#__PURE__*/_jsx(Grid, {
167
- className: "primaryCard",
168
- style: {
169
- backgroundColor: color
170
- }
171
- }, i);
172
- }), /*#__PURE__*/_jsx(Grid, {
173
- className: "otherColors",
174
- sx: {
175
- gap: "5px"
176
- },
177
- children: otherColors.map((color, i) => {
178
- return /*#__PURE__*/_jsx(Grid, {
179
- className: "smallCard",
180
- style: {
181
- backgroundColor: color
182
- }
183
- }, i);
184
- })
185
- })]
186
- })]
187
- })]
188
- });
189
- };
190
- return /*#__PURE__*/_jsx(Grid, {
191
- className: className,
192
- children: /*#__PURE__*/_jsx(Drawer, {
193
- className: className,
194
- open: open,
195
- onClose: onClose,
196
- anchor: "right",
197
- children: /*#__PURE__*/_jsxs(Grid, {
198
- className: "settingsContainer",
199
- children: [/*#__PURE__*/_jsxs(Grid, {
200
- container: true,
201
- justifyContent: "space-between",
202
- wrap: "nowrap",
203
- className: "header",
204
- sx: {
205
- px: 2
206
- },
207
- children: [/*#__PURE__*/_jsxs(Grid, {
208
- children: [/*#__PURE__*/_jsx(Typography, {
209
- variant: "body1",
210
- className: "title",
211
- children: "Theme/Brand Setting"
212
- }), /*#__PURE__*/_jsxs(Typography, {
213
- variant: "body1",
214
- color: "textSecondary",
215
- className: "fs-12",
216
- children: ["Change the entire style of your website with a single click.", " "]
217
- })]
218
- }), /*#__PURE__*/_jsx(IconButton, {
219
- className: "closeBtn",
220
- onClick: onClose,
221
- children: /*#__PURE__*/_jsx(CloseIcon, {})
222
- })]
223
- }), /*#__PURE__*/_jsx(Grid, {
224
- className: "activeTheme",
225
- children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
226
- onExplore: () => setThemeMoodboard(true)
227
- }) : /*#__PURE__*/_jsxs(Grid, {
228
- className: "sectionDetail",
229
- children: [/*#__PURE__*/_jsxs(Typography, {
230
- variant: "body1",
231
- className: "sectionTitle flexAlign",
232
- children: [/*#__PURE__*/_jsx(IconButton, {
233
- onClick: () => setThemeMoodboard(false),
234
- children: /*#__PURE__*/_jsx(ChevronLeft, {})
235
- }), "Theme Moodboard"]
236
- }), /*#__PURE__*/_jsxs(Grid, {
237
- className: "activeWrapper",
238
- children: [/*#__PURE__*/_jsx(TickIcon, {}), /*#__PURE__*/_jsx(ActiveTheme, {
239
- explore: false
240
- })]
241
- }), /*#__PURE__*/_jsxs(Tabs, {
242
- value: themeTabType,
243
- onChange: handleTabChange,
244
- variant: "scrollable",
245
- scrollButtons: false,
246
- "aria-label": "scrollable prevent tabs example",
247
- children: [/*#__PURE__*/_jsx(Tab, {
248
- label: /*#__PURE__*/_jsx(Typography, {
249
- variant: "body1",
250
- className: "fs-14 fw-500 transformNone",
251
- children: "Key themes"
252
- })
253
- }), /*#__PURE__*/_jsx(Tab, {
254
- label: /*#__PURE__*/_jsx(Typography, {
255
- variant: "body1",
256
- className: "fs-14 fw-500 transformNone",
257
- children: "Saved themes"
258
- })
259
- })]
260
- }), loading ? /*#__PURE__*/_jsx("div", {
261
- style: {
262
- display: "flex",
263
- justifyContent: "center",
264
- alignItems: "center",
265
- margin: 0,
266
- padding: 0,
267
- height: "50px",
268
- overflow: "hidden"
269
- },
270
- children: /*#__PURE__*/_jsx(CircularProgress, {})
271
- }) : null, themes.map((theme, i) => {
272
- return /*#__PURE__*/_jsx(ThemeCard, {
273
- theme: theme
274
- }, i);
275
- })]
276
- })
277
- }), id ? /*#__PURE__*/_jsxs(_Fragment, {
278
- children: [/*#__PURE__*/_jsx(Grid, {
279
- sx: {
280
- px: 1
281
- },
282
- children: /*#__PURE__*/_jsx(ColorTheme, {
283
- colors: getColors(colors),
284
- onColorChange: onColorChange,
285
- openDefault: open === "editThemeColor"
286
- })
287
- }), /*#__PURE__*/_jsx(Grid, {
288
- sx: {
289
- px: 1
290
- },
291
- children: /*#__PURE__*/_jsx(Fonts, {})
292
- }), /*#__PURE__*/_jsx(Grid, {
293
- sx: {
294
- px: 1
295
- },
296
- children: /*#__PURE__*/_jsx(Buttons, {})
297
- }), /*#__PURE__*/_jsx("div", {
298
- style: {
299
- width: "100%",
300
- display: "flex",
301
- justifyContent: "center",
302
- alignItems: "center",
303
- marginTop: "10px"
304
- },
305
- children: /*#__PURE__*/_jsx(SaveTheme, {
306
- saveBtnLabel: isUpdateTheme ? "Update theme" : "Save Theme",
307
- loading: savingTheme,
308
- onSave: onSaveTheme,
309
- defaultFormData: {
310
- name,
311
- mood_name
312
- }
313
- })
314
- })]
315
- }) : null]
316
- })
317
- })
318
- });
319
- };
320
- export default styled(ThemeSettings)(Style);