@flozy/editor 3.6.9 → 3.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +111 -169
- package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
- package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
- package/dist/Editor/Elements/AppHeader/AppHeader.js +15 -39
- package/dist/Editor/Elements/Button/EditorButton.js +18 -34
- package/dist/Editor/Elements/ChipText/ChipText.js +3 -3
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +0 -1
- package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -16
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Grid/Grid.js +1 -3
- package/dist/Editor/Elements/Grid/GridItem.js +2 -4
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +3 -2
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
- package/dist/Editor/Elements/List/CheckList.js +2 -6
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +2 -3
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +11 -12
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +9 -25
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/Icon.js +2 -30
- package/dist/Editor/common/LinkSettings/NavComponents.js +20 -54
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +2 -5
- package/dist/Editor/common/MentionsPopup/Styles.js +3 -6
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +28 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/helper/index.js +0 -15
- package/dist/Editor/helper/theme.js +4 -190
- package/dist/Editor/hooks/useMouseMove.js +6 -15
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +5 -47
- package/dist/Editor/plugins/withLayout.js +10 -15
- package/dist/Editor/plugins/withTable.js +2 -2
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/events.js +4 -11
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +22 -104
- package/dist/Editor/utils/serializeToHTML.js +13 -25
- package/dist/index.js +1 -5
- package/package.json +4 -4
- package/dist/Editor/ChatEditor.js +0 -211
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/common/EditorCmds.js +0 -35
- package/dist/Editor/common/MUIIcon/index.js +0 -48
- package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js +0 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/mui_filled_icons.js +0 -2
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -361
@@ -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;
|
@@ -1,290 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
|
3
|
-
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
4
|
-
|
5
|
-
// Style
|
6
|
-
import Style from "./style";
|
7
|
-
|
8
|
-
// icons
|
9
|
-
import { ChevronLeft } from "@mui/icons-material";
|
10
|
-
import { EditIcon } from "../icons";
|
11
|
-
import ColorPickerButton from "../../common/ColorPickerButton";
|
12
|
-
import { getContrastColor } from "../../utils/helper";
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
14
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
|
-
const ColorTheme = props => {
|
16
|
-
const {
|
17
|
-
className,
|
18
|
-
colors,
|
19
|
-
onColorChange,
|
20
|
-
openDefault
|
21
|
-
} = props;
|
22
|
-
const {
|
23
|
-
primaryColors,
|
24
|
-
otherColors = []
|
25
|
-
} = colors || {};
|
26
|
-
|
27
|
-
// State
|
28
|
-
const [customizeTheme, setCustomizeTheme] = React.useState(false);
|
29
|
-
const [buttonType, setButtonType] = React.useState("regular");
|
30
|
-
const customTheme = [{
|
31
|
-
title: "Text & Line Colors",
|
32
|
-
data: [{
|
33
|
-
title: "Headings",
|
34
|
-
color: "#ccc"
|
35
|
-
}, {
|
36
|
-
title: "Subheading text",
|
37
|
-
color: "#ccc"
|
38
|
-
}, {
|
39
|
-
title: "Body text",
|
40
|
-
color: "#ccc"
|
41
|
-
}, {
|
42
|
-
title: "Subtext",
|
43
|
-
color: "#ccc"
|
44
|
-
}, {
|
45
|
-
title: "Lines & dividers",
|
46
|
-
color: "#ccc"
|
47
|
-
}]
|
48
|
-
}, {
|
49
|
-
title: "Background Colors",
|
50
|
-
data: [{
|
51
|
-
title: "Primary background color",
|
52
|
-
color: "#ccc"
|
53
|
-
}, {
|
54
|
-
title: "Secondary background color",
|
55
|
-
color: "#ccc"
|
56
|
-
}]
|
57
|
-
}];
|
58
|
-
const buttonData = [{
|
59
|
-
title: "Button background",
|
60
|
-
color: "#ccc"
|
61
|
-
}, {
|
62
|
-
title: "Button text",
|
63
|
-
color: "#ccc"
|
64
|
-
}, {
|
65
|
-
title: "Button border",
|
66
|
-
color: "#ccc"
|
67
|
-
}];
|
68
|
-
|
69
|
-
//button
|
70
|
-
const handleButtonType = (event, buttonType) => {
|
71
|
-
if (buttonType !== null) {
|
72
|
-
setButtonType(buttonType);
|
73
|
-
}
|
74
|
-
};
|
75
|
-
return /*#__PURE__*/_jsx(Grid, {
|
76
|
-
className: className,
|
77
|
-
children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
|
78
|
-
className: "settingAccordion",
|
79
|
-
defaultExpanded: openDefault,
|
80
|
-
children: [/*#__PURE__*/_jsx(AccordionSummary, {
|
81
|
-
expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
|
82
|
-
"aria-controls": "panel1-content",
|
83
|
-
id: "panel1-header",
|
84
|
-
children: "Color Theme"
|
85
|
-
}), /*#__PURE__*/_jsxs(AccordionDetails, {
|
86
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
87
|
-
variant: "body2",
|
88
|
-
sx: {
|
89
|
-
pb: 1
|
90
|
-
},
|
91
|
-
className: "fs-12 fw-600",
|
92
|
-
children: "Primary Color"
|
93
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
94
|
-
container: true,
|
95
|
-
spacing: 1,
|
96
|
-
sx: {
|
97
|
-
pb: 2
|
98
|
-
},
|
99
|
-
className: "primaryColorBoxes",
|
100
|
-
wrap: "nowrap",
|
101
|
-
children: primaryColors?.map((color, i) => {
|
102
|
-
const textColor = getContrastColor(color);
|
103
|
-
return /*#__PURE__*/_jsx(Grid, {
|
104
|
-
item: true,
|
105
|
-
xs: 6,
|
106
|
-
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
107
|
-
onSave: selectedColor => {
|
108
|
-
onColorChange(selectedColor, i);
|
109
|
-
},
|
110
|
-
hideThemeColors: true,
|
111
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
112
|
-
className: "pmBox",
|
113
|
-
style: {
|
114
|
-
backgroundColor: color
|
115
|
-
},
|
116
|
-
children: [/*#__PURE__*/_jsx(IconButton, {
|
117
|
-
className: "editBtn",
|
118
|
-
children: /*#__PURE__*/_jsx(EditIcon, {})
|
119
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
120
|
-
variant: "body2",
|
121
|
-
className: "fs-12 valyeText",
|
122
|
-
style: {
|
123
|
-
color: textColor
|
124
|
-
},
|
125
|
-
children: color
|
126
|
-
})]
|
127
|
-
})
|
128
|
-
})
|
129
|
-
}, i);
|
130
|
-
})
|
131
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
132
|
-
variant: "body2",
|
133
|
-
sx: {
|
134
|
-
pb: 1
|
135
|
-
},
|
136
|
-
className: "fs-12 fw-600",
|
137
|
-
children: "Secondary Colors"
|
138
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
139
|
-
container: true,
|
140
|
-
className: "secondaryColorBoxes",
|
141
|
-
wrap: "nowrap",
|
142
|
-
sx: {
|
143
|
-
mb: 1
|
144
|
-
},
|
145
|
-
children: otherColors?.slice(0, 4)?.map((color, i) => {
|
146
|
-
const noOfPrimaryColors = 2;
|
147
|
-
const colorIndex = noOfPrimaryColors + i;
|
148
|
-
const textColor = getContrastColor(color);
|
149
|
-
return /*#__PURE__*/_jsx(Grid, {
|
150
|
-
item: true,
|
151
|
-
xs: 6,
|
152
|
-
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
153
|
-
onSave: selectedColor => {
|
154
|
-
onColorChange(selectedColor, colorIndex);
|
155
|
-
},
|
156
|
-
hideThemeColors: true,
|
157
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
158
|
-
className: "sdBox",
|
159
|
-
style: {
|
160
|
-
backgroundColor: color
|
161
|
-
},
|
162
|
-
children: [/*#__PURE__*/_jsx(IconButton, {
|
163
|
-
className: "editBtn",
|
164
|
-
children: /*#__PURE__*/_jsx(EditIcon, {})
|
165
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
166
|
-
variant: "body2",
|
167
|
-
className: "fs-12 valyeText",
|
168
|
-
style: {
|
169
|
-
color: textColor
|
170
|
-
},
|
171
|
-
children: color
|
172
|
-
})]
|
173
|
-
})
|
174
|
-
})
|
175
|
-
}, i);
|
176
|
-
})
|
177
|
-
})]
|
178
|
-
})]
|
179
|
-
}) : /*#__PURE__*/_jsxs(Grid, {
|
180
|
-
className: "sectionDetail",
|
181
|
-
children: [/*#__PURE__*/_jsxs(Typography, {
|
182
|
-
variant: "body1",
|
183
|
-
className: "sectionTitle flexAlign",
|
184
|
-
children: [/*#__PURE__*/_jsx(IconButton, {
|
185
|
-
onClick: () => setCustomizeTheme(false),
|
186
|
-
children: /*#__PURE__*/_jsx(ChevronLeft, {})
|
187
|
-
}), "Customize Theme settings"]
|
188
|
-
}), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
|
189
|
-
className: "settingsSection",
|
190
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
191
|
-
variant: "body1",
|
192
|
-
className: "sectionTitle",
|
193
|
-
sx: {
|
194
|
-
pb: 1
|
195
|
-
},
|
196
|
-
children: item.title
|
197
|
-
}), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
|
198
|
-
container: true,
|
199
|
-
justifyContent: "space-between",
|
200
|
-
sx: {
|
201
|
-
pt: 2
|
202
|
-
},
|
203
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
204
|
-
variant: "body1",
|
205
|
-
className: "fs-14",
|
206
|
-
children: childitem.title
|
207
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
208
|
-
className: "xsColorBox",
|
209
|
-
sx: {
|
210
|
-
background: childitem.color
|
211
|
-
}
|
212
|
-
})]
|
213
|
-
}, childIndex))]
|
214
|
-
}, index)), /*#__PURE__*/_jsxs(Grid, {
|
215
|
-
className: "settingsSection",
|
216
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
217
|
-
variant: "body1",
|
218
|
-
className: "sectionTitle",
|
219
|
-
sx: {
|
220
|
-
pb: 1
|
221
|
-
},
|
222
|
-
children: "Button Colors"
|
223
|
-
}), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
|
224
|
-
sx: {
|
225
|
-
mt: 2
|
226
|
-
},
|
227
|
-
className: "toggleType",
|
228
|
-
value: buttonType,
|
229
|
-
exclusive: true,
|
230
|
-
onChange: handleButtonType,
|
231
|
-
children: [/*#__PURE__*/_jsx(ToggleButton, {
|
232
|
-
value: "regular",
|
233
|
-
"aria-label": "regulard",
|
234
|
-
children: "Regular"
|
235
|
-
}), /*#__PURE__*/_jsx(ToggleButton, {
|
236
|
-
value: "hover",
|
237
|
-
"aria-label": "hover",
|
238
|
-
children: "Hover"
|
239
|
-
})]
|
240
|
-
}), /*#__PURE__*/_jsx(Divider, {
|
241
|
-
sx: {
|
242
|
-
mt: 2,
|
243
|
-
mb: 1
|
244
|
-
}
|
245
|
-
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
246
|
-
sx: {
|
247
|
-
mt: 1
|
248
|
-
},
|
249
|
-
"aria-labelledby": "demo-radio-buttons-group-label",
|
250
|
-
defaultValue: "primary",
|
251
|
-
name: "radio-buttons-group",
|
252
|
-
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
253
|
-
value: "primary",
|
254
|
-
control: /*#__PURE__*/_jsx(Radio, {}),
|
255
|
-
label: /*#__PURE__*/_jsx(Typography, {
|
256
|
-
variant: "body1",
|
257
|
-
className: "fs-14",
|
258
|
-
children: "Primary button"
|
259
|
-
})
|
260
|
-
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
261
|
-
value: "secondary",
|
262
|
-
control: /*#__PURE__*/_jsx(Radio, {}),
|
263
|
-
label: /*#__PURE__*/_jsx(Typography, {
|
264
|
-
variant: "body1",
|
265
|
-
className: "fs-14",
|
266
|
-
children: "Secondary button"
|
267
|
-
})
|
268
|
-
})]
|
269
|
-
}), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
|
270
|
-
container: true,
|
271
|
-
justifyContent: "space-between",
|
272
|
-
sx: {
|
273
|
-
pt: 2
|
274
|
-
},
|
275
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
276
|
-
variant: "body1",
|
277
|
-
className: "fs-14",
|
278
|
-
children: item.title
|
279
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
280
|
-
className: "xsColorBox",
|
281
|
-
sx: {
|
282
|
-
background: item.color
|
283
|
-
}
|
284
|
-
})]
|
285
|
-
}, Index))]
|
286
|
-
})]
|
287
|
-
})
|
288
|
-
});
|
289
|
-
};
|
290
|
-
export default styled(ColorTheme)(Style);
|
@@ -1,77 +0,0 @@
|
|
1
|
-
const Style = () => ({
|
2
|
-
".primaryColorBoxes": {
|
3
|
-
".pmBox": {
|
4
|
-
border: "1px solid #D1D1D1",
|
5
|
-
height: "65px",
|
6
|
-
borderRadius: "4px",
|
7
|
-
position: "relative",
|
8
|
-
flexShrink: 0,
|
9
|
-
"&:hover": {
|
10
|
-
".editBtn": {
|
11
|
-
opacity: "1",
|
12
|
-
visibility: "visible"
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
},
|
17
|
-
".secondaryColorBoxes": {
|
18
|
-
gap: "10px",
|
19
|
-
".sdBox": {
|
20
|
-
border: "1px solid #D1D1D1",
|
21
|
-
height: "60px",
|
22
|
-
borderRadius: "4px",
|
23
|
-
width: "100%",
|
24
|
-
flexShrink: 0,
|
25
|
-
position: "relative",
|
26
|
-
"&:hover": {
|
27
|
-
".editBtn": {
|
28
|
-
opacity: "1",
|
29
|
-
visibility: "visible"
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|
33
|
-
},
|
34
|
-
".valyeText": {
|
35
|
-
position: "absolute",
|
36
|
-
right: "5px",
|
37
|
-
bottom: "5px"
|
38
|
-
},
|
39
|
-
".editBtn": {
|
40
|
-
position: "absolute",
|
41
|
-
right: "2px",
|
42
|
-
top: "2px",
|
43
|
-
padding: "2px",
|
44
|
-
opacity: "0",
|
45
|
-
visibility: "hidden"
|
46
|
-
},
|
47
|
-
".settingsSection": {
|
48
|
-
background: "#FFFFFF",
|
49
|
-
border: "1px solid #E4E6E9",
|
50
|
-
padding: "12px",
|
51
|
-
marginTop: "10px",
|
52
|
-
borderRadius: "7px"
|
53
|
-
},
|
54
|
-
".toggleType": {
|
55
|
-
width: "100%",
|
56
|
-
border: "1px solid #2563EB",
|
57
|
-
background: "#F5F6F9",
|
58
|
-
borderRadius: "8px",
|
59
|
-
padding: "3px",
|
60
|
-
height: "40px",
|
61
|
-
".MuiToggleButton-root": {
|
62
|
-
padding: "10px",
|
63
|
-
width: "50%",
|
64
|
-
border: "none",
|
65
|
-
textTransform: "unset",
|
66
|
-
fontSize: "14px",
|
67
|
-
color: "#64748B",
|
68
|
-
"&.Mui-selected": {
|
69
|
-
borderRadius: "8px",
|
70
|
-
background: "#2563EB",
|
71
|
-
color: "#fff",
|
72
|
-
fontWeight: "700"
|
73
|
-
}
|
74
|
-
}
|
75
|
-
}
|
76
|
-
});
|
77
|
-
export default Style;
|