@flozy/editor 1.3.5 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +4 -2
- package/dist/Editor/Editor.css +64 -20
- package/dist/Editor/Elements/AppHeader/AppHeader.js +41 -13
- package/dist/Editor/Elements/Button/ButtonPopup.js +5 -3
- package/dist/Editor/Elements/Button/EditorButton.js +29 -6
- package/dist/Editor/Elements/Embed/Image.js +5 -21
- package/dist/Editor/Elements/Embed/Video.js +2 -2
- package/dist/Editor/Elements/Form/FieldPopup.js +20 -0
- package/dist/Editor/Elements/Form/Form.js +289 -0
- package/dist/Editor/Elements/Form/FormButton.js +21 -0
- package/dist/Editor/Elements/Form/FormElements/FormText.js +48 -0
- package/dist/Editor/Elements/Form/FormElements/index.js +5 -0
- package/dist/Editor/Elements/Form/FormField.js +101 -0
- package/dist/Editor/Elements/Form/FormPopup.js +20 -0
- package/dist/Editor/Elements/Grid/Grid.js +6 -8
- package/dist/Editor/Elements/Grid/GridItem.js +6 -13
- package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -2
- package/dist/Editor/Elements/Grid/GridPopup.js +3 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +3 -0
- package/dist/Editor/Toolbar/Toolbar.js +6 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +3 -0
- package/dist/Editor/assets/fonts/poppins/OFL.txt +93 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Black.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-BlackItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Bold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-BoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLight.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLightItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Italic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Light.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-LightItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Medium.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-MediumItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Regular.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-SemiBold.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-SemiBoldItalic.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-Thin.ttf +0 -0
- package/dist/Editor/assets/fonts/poppins/Poppins-ThinItalic.ttf +0 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +26 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +35 -8
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +12 -12
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +71 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +5 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +15 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +35 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +44 -0
- package/dist/Editor/common/StyleBuilder/formButtonStyle.js +93 -0
- package/dist/Editor/common/StyleBuilder/formStyle.js +82 -0
- package/dist/Editor/common/StyleBuilder/gridStyle.js +9 -0
- package/dist/Editor/font.css +9 -0
- package/dist/Editor/service/formSubmit.js +16 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +11 -1
- package/dist/Editor/utils/customHooks/useFormat.js +11 -4
- package/dist/Editor/utils/font.js +3 -1
- package/dist/Editor/utils/form.js +24 -0
- package/dist/Editor/utils/formfield.js +20 -0
- package/package.json +1 -1
@@ -0,0 +1,93 @@
|
|
1
|
+
Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
|
2
|
+
|
3
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
4
|
+
This license is copied below, and is also available with a FAQ at:
|
5
|
+
http://scripts.sil.org/OFL
|
6
|
+
|
7
|
+
|
8
|
+
-----------------------------------------------------------
|
9
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
10
|
+
-----------------------------------------------------------
|
11
|
+
|
12
|
+
PREAMBLE
|
13
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
14
|
+
development of collaborative font projects, to support the font creation
|
15
|
+
efforts of academic and linguistic communities, and to provide a free and
|
16
|
+
open framework in which fonts may be shared and improved in partnership
|
17
|
+
with others.
|
18
|
+
|
19
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
20
|
+
redistributed freely as long as they are not sold by themselves. The
|
21
|
+
fonts, including any derivative works, can be bundled, embedded,
|
22
|
+
redistributed and/or sold with any software provided that any reserved
|
23
|
+
names are not used by derivative works. The fonts and derivatives,
|
24
|
+
however, cannot be released under any other type of license. The
|
25
|
+
requirement for fonts to remain under this license does not apply
|
26
|
+
to any document created using the fonts or their derivatives.
|
27
|
+
|
28
|
+
DEFINITIONS
|
29
|
+
"Font Software" refers to the set of files released by the Copyright
|
30
|
+
Holder(s) under this license and clearly marked as such. This may
|
31
|
+
include source files, build scripts and documentation.
|
32
|
+
|
33
|
+
"Reserved Font Name" refers to any names specified as such after the
|
34
|
+
copyright statement(s).
|
35
|
+
|
36
|
+
"Original Version" refers to the collection of Font Software components as
|
37
|
+
distributed by the Copyright Holder(s).
|
38
|
+
|
39
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
40
|
+
or substituting -- in part or in whole -- any of the components of the
|
41
|
+
Original Version, by changing formats or by porting the Font Software to a
|
42
|
+
new environment.
|
43
|
+
|
44
|
+
"Author" refers to any designer, engineer, programmer, technical
|
45
|
+
writer or other person who contributed to the Font Software.
|
46
|
+
|
47
|
+
PERMISSION & CONDITIONS
|
48
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
49
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
50
|
+
redistribute, and sell modified and unmodified copies of the Font
|
51
|
+
Software, subject to the following conditions:
|
52
|
+
|
53
|
+
1) Neither the Font Software nor any of its individual components,
|
54
|
+
in Original or Modified Versions, may be sold by itself.
|
55
|
+
|
56
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
57
|
+
redistributed and/or sold with any software, provided that each copy
|
58
|
+
contains the above copyright notice and this license. These can be
|
59
|
+
included either as stand-alone text files, human-readable headers or
|
60
|
+
in the appropriate machine-readable metadata fields within text or
|
61
|
+
binary files as long as those fields can be easily viewed by the user.
|
62
|
+
|
63
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
64
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
65
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
66
|
+
presented to the users.
|
67
|
+
|
68
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
69
|
+
Software shall not be used to promote, endorse or advertise any
|
70
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
71
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
72
|
+
permission.
|
73
|
+
|
74
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
75
|
+
must be distributed entirely under this license, and must not be
|
76
|
+
distributed under any other license. The requirement for fonts to
|
77
|
+
remain under this license does not apply to any document created
|
78
|
+
using the Font Software.
|
79
|
+
|
80
|
+
TERMINATION
|
81
|
+
This license becomes null and void if any of the above conditions are
|
82
|
+
not met.
|
83
|
+
|
84
|
+
DISCLAIMER
|
85
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
86
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
87
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
88
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
89
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
90
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
91
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
92
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
93
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1,7 +1,14 @@
|
|
1
|
+
import { fontOptions } from "../../utils/font";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
1
3
|
const appHeaderStyle = [{
|
2
4
|
tab: "Logo",
|
3
5
|
value: "appLogo",
|
4
6
|
fields: [{
|
7
|
+
label: "App Title",
|
8
|
+
key: "appTitle",
|
9
|
+
type: "text",
|
10
|
+
placeholder: "Leave Empty, If only Logo"
|
11
|
+
}, {
|
5
12
|
label: "App Logo URL",
|
6
13
|
key: "appLogo",
|
7
14
|
type: "text"
|
@@ -11,12 +18,26 @@ const appHeaderStyle = [{
|
|
11
18
|
type: "backgroundImage"
|
12
19
|
}]
|
13
20
|
}, {
|
14
|
-
tab: "
|
15
|
-
value: "
|
21
|
+
tab: "General",
|
22
|
+
value: "general",
|
16
23
|
fields: [{
|
17
|
-
label: "
|
18
|
-
key: "
|
19
|
-
type: "text"
|
24
|
+
label: "Menu Font Size",
|
25
|
+
key: "fontSize",
|
26
|
+
type: "text",
|
27
|
+
placeholder: "16px"
|
28
|
+
}, {
|
29
|
+
label: "Menu Font Family",
|
30
|
+
key: "fontFamily",
|
31
|
+
type: "textOptions",
|
32
|
+
options: fontOptions,
|
33
|
+
renderOption: option => {
|
34
|
+
return /*#__PURE__*/_jsx("span", {
|
35
|
+
style: {
|
36
|
+
fontFamily: option.value
|
37
|
+
},
|
38
|
+
children: option.text
|
39
|
+
});
|
40
|
+
}
|
20
41
|
}]
|
21
42
|
}, {
|
22
43
|
tab: "Menus",
|
@@ -1,19 +1,30 @@
|
|
1
|
+
import { fontOptions } from "../../utils/font";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
1
3
|
const buttonStyle = [{
|
2
|
-
tab: "
|
3
|
-
value: "
|
4
|
+
tab: "General",
|
5
|
+
value: "size",
|
4
6
|
fields: [{
|
5
7
|
label: "Button Text",
|
6
8
|
key: "label",
|
7
9
|
type: "text"
|
8
|
-
}
|
9
|
-
|
10
|
-
tab: "Size & Alignment",
|
11
|
-
value: "size",
|
12
|
-
fields: [{
|
13
|
-
label: "Text Size",
|
10
|
+
}, {
|
11
|
+
label: "Font Size",
|
14
12
|
key: "textSize",
|
15
13
|
type: "text",
|
16
14
|
placeholder: "16px or 1em"
|
15
|
+
}, {
|
16
|
+
label: "Font Family",
|
17
|
+
key: "fontFamily",
|
18
|
+
type: "textOptions",
|
19
|
+
options: fontOptions,
|
20
|
+
renderOption: option => {
|
21
|
+
return /*#__PURE__*/_jsx("span", {
|
22
|
+
style: {
|
23
|
+
fontFamily: option.value
|
24
|
+
},
|
25
|
+
children: option.text
|
26
|
+
});
|
27
|
+
}
|
17
28
|
}, {
|
18
29
|
label: "Text Align",
|
19
30
|
key: "textAlign",
|
@@ -28,6 +39,22 @@ const buttonStyle = [{
|
|
28
39
|
key: "buttonLink",
|
29
40
|
type: "buttonLink"
|
30
41
|
}]
|
42
|
+
}, {
|
43
|
+
tab: "Position",
|
44
|
+
value: "position",
|
45
|
+
fields: [{
|
46
|
+
label: "Set Postion (Vertical & Horizantal)",
|
47
|
+
key: "alignment",
|
48
|
+
type: "alignment"
|
49
|
+
}]
|
50
|
+
}, {
|
51
|
+
tab: "Margin Spacing",
|
52
|
+
value: "marginSpacing",
|
53
|
+
fields: [{
|
54
|
+
label: "Margin Spacing",
|
55
|
+
key: "marginSpacing",
|
56
|
+
type: "bannerSpacing"
|
57
|
+
}]
|
31
58
|
}, {
|
32
59
|
tab: "Banner Spacing",
|
33
60
|
value: "bannerSpacing",
|
@@ -1,4 +1,16 @@
|
|
1
1
|
const embedImageStyle = [{
|
2
|
+
tab: "URL",
|
3
|
+
value: "url",
|
4
|
+
fields: [{
|
5
|
+
label: "URL",
|
6
|
+
key: "url",
|
7
|
+
type: "text"
|
8
|
+
}, {
|
9
|
+
label: "File",
|
10
|
+
key: "url",
|
11
|
+
type: "backgroundImage"
|
12
|
+
}]
|
13
|
+
}, {
|
2
14
|
tab: "Banner Spacing",
|
3
15
|
value: "bannerSpacing",
|
4
16
|
fields: [{
|
@@ -39,18 +51,6 @@ const embedImageStyle = [{
|
|
39
51
|
key: "borderColor",
|
40
52
|
type: "color"
|
41
53
|
}]
|
42
|
-
}, {
|
43
|
-
tab: "URL",
|
44
|
-
value: "url",
|
45
|
-
fields: [{
|
46
|
-
label: "URL",
|
47
|
-
key: "url",
|
48
|
-
type: "text"
|
49
|
-
}, {
|
50
|
-
label: "File",
|
51
|
-
key: "url",
|
52
|
-
type: "backgroundImage"
|
53
|
-
}]
|
54
54
|
}, {
|
55
55
|
tab: "Size",
|
56
56
|
value: "elementSize",
|
@@ -0,0 +1,71 @@
|
|
1
|
+
const fieldStyle = [{
|
2
|
+
tab: "General",
|
3
|
+
value: "general",
|
4
|
+
fields: [{
|
5
|
+
label: "Field Name",
|
6
|
+
key: "name",
|
7
|
+
type: "text"
|
8
|
+
}, {
|
9
|
+
label: "Field Type",
|
10
|
+
key: "element",
|
11
|
+
type: "textOptions",
|
12
|
+
options: [{
|
13
|
+
label: "Textbox",
|
14
|
+
value: "text"
|
15
|
+
}]
|
16
|
+
}, {
|
17
|
+
label: "Placeholder",
|
18
|
+
key: "placeholder",
|
19
|
+
type: "text"
|
20
|
+
}]
|
21
|
+
}, {
|
22
|
+
tab: "Banner Spacing",
|
23
|
+
value: "bannerSpacing",
|
24
|
+
fields: [{
|
25
|
+
label: "Banner Spacing",
|
26
|
+
key: "bannerSpacing",
|
27
|
+
type: "bannerSpacing"
|
28
|
+
}]
|
29
|
+
}, {
|
30
|
+
tab: "Border Radius",
|
31
|
+
value: "borderRadius",
|
32
|
+
fields: [{
|
33
|
+
label: "Border Radius",
|
34
|
+
key: "borderRadius",
|
35
|
+
type: "borderRadius"
|
36
|
+
}]
|
37
|
+
}, {
|
38
|
+
tab: "Colors",
|
39
|
+
value: "colors",
|
40
|
+
fields: [{
|
41
|
+
label: "Text",
|
42
|
+
key: "textColor",
|
43
|
+
type: "color",
|
44
|
+
needPreview: true
|
45
|
+
}, {
|
46
|
+
label: "Background",
|
47
|
+
key: "bgColor",
|
48
|
+
type: "color"
|
49
|
+
}, {
|
50
|
+
label: "Border",
|
51
|
+
key: "borderColor",
|
52
|
+
type: "color"
|
53
|
+
}]
|
54
|
+
}, {
|
55
|
+
tab: "Position",
|
56
|
+
value: "position",
|
57
|
+
fields: [{
|
58
|
+
label: "Set Postion (Vertical & Horizantal)",
|
59
|
+
key: "alignment",
|
60
|
+
type: "alignment"
|
61
|
+
}]
|
62
|
+
}, {
|
63
|
+
tab: "Size",
|
64
|
+
value: "gridSize",
|
65
|
+
fields: [{
|
66
|
+
label: "Grid Size",
|
67
|
+
key: "grid",
|
68
|
+
type: "gridSize"
|
69
|
+
}]
|
70
|
+
}];
|
71
|
+
export default fieldStyle;
|
@@ -11,6 +11,8 @@ import MenusArray from "./menusArray";
|
|
11
11
|
import ButtonLink from "./buttonLink";
|
12
12
|
import SaveAsTemplate from "./saveAsTemplate";
|
13
13
|
import TextAlign from "./textAlign";
|
14
|
+
import TextOptions from "./textOptions";
|
15
|
+
import SelectBox from "./selectBox";
|
14
16
|
const FieldMap = {
|
15
17
|
text: Text,
|
16
18
|
bannerSpacing: BannerSpacing,
|
@@ -24,6 +26,8 @@ const FieldMap = {
|
|
24
26
|
menusArray: MenusArray,
|
25
27
|
buttonLink: ButtonLink,
|
26
28
|
saveAsTemplate: SaveAsTemplate,
|
27
|
-
textAlign: TextAlign
|
29
|
+
textAlign: TextAlign,
|
30
|
+
textOptions: TextOptions,
|
31
|
+
selectBox: SelectBox
|
28
32
|
};
|
29
33
|
export default FieldMap;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
|
2
|
+
import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
|
3
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
6
|
const MenusArray = props => {
|
@@ -60,7 +61,7 @@ const MenusArray = props => {
|
|
60
61
|
variant: "body1",
|
61
62
|
color: "textSecondary",
|
62
63
|
sx: {
|
63
|
-
fontSize:
|
64
|
+
fontSize: "14px"
|
64
65
|
},
|
65
66
|
children: "Menu Variant"
|
66
67
|
})
|
@@ -88,15 +89,18 @@ const MenusArray = props => {
|
|
88
89
|
return /*#__PURE__*/_jsxs(Grid, {
|
89
90
|
item: true,
|
90
91
|
xs: 12,
|
92
|
+
style: {
|
93
|
+
display: "flex",
|
94
|
+
alignItems: "center"
|
95
|
+
},
|
91
96
|
children: [/*#__PURE__*/_jsx(TextField, {
|
92
97
|
name: "text",
|
93
98
|
type: "text",
|
94
99
|
value: m.text,
|
95
100
|
onChange: handleChange(i),
|
96
101
|
size: "small",
|
97
|
-
fullWidth: true,
|
98
102
|
sx: {
|
99
|
-
mb:
|
103
|
+
mb: 0
|
100
104
|
}
|
101
105
|
}), /*#__PURE__*/_jsx(TextField, {
|
102
106
|
name: "url",
|
@@ -105,11 +109,13 @@ const MenusArray = props => {
|
|
105
109
|
onChange: handleChange(i),
|
106
110
|
size: "small",
|
107
111
|
fullWidth: true
|
108
|
-
}), /*#__PURE__*/_jsx(
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
112
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
113
|
+
title: "Delete Menu",
|
114
|
+
arrow: true,
|
115
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
116
|
+
onClick: onDelete(i),
|
117
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
118
|
+
})
|
113
119
|
})]
|
114
120
|
}, `add-m-${i}`);
|
115
121
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, Checkbox, FormControlLabel } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
const SelectBox = props => {
|
5
|
+
const {
|
6
|
+
value,
|
7
|
+
data,
|
8
|
+
onChange
|
9
|
+
} = props;
|
10
|
+
const {
|
11
|
+
key,
|
12
|
+
placeholder
|
13
|
+
} = data;
|
14
|
+
const handleChange = e => {
|
15
|
+
onChange({
|
16
|
+
[key]: e.target.checked
|
17
|
+
});
|
18
|
+
};
|
19
|
+
return /*#__PURE__*/_jsx(Grid, {
|
20
|
+
container: true,
|
21
|
+
padding: 1,
|
22
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
23
|
+
item: true,
|
24
|
+
xs: 12,
|
25
|
+
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
26
|
+
control: /*#__PURE__*/_jsx(Checkbox, {
|
27
|
+
value: value,
|
28
|
+
onChange: handleChange
|
29
|
+
}),
|
30
|
+
label: placeholder
|
31
|
+
})
|
32
|
+
})
|
33
|
+
});
|
34
|
+
};
|
35
|
+
export default SelectBox;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, MenuItem, Select } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
const TextOptions = props => {
|
5
|
+
const {
|
6
|
+
value,
|
7
|
+
data,
|
8
|
+
onChange
|
9
|
+
} = props;
|
10
|
+
const {
|
11
|
+
key,
|
12
|
+
options,
|
13
|
+
renderOption
|
14
|
+
} = data;
|
15
|
+
const handleChange = e => {
|
16
|
+
onChange({
|
17
|
+
[key]: e.target.value
|
18
|
+
});
|
19
|
+
};
|
20
|
+
return /*#__PURE__*/_jsx(Grid, {
|
21
|
+
container: true,
|
22
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
23
|
+
item: true,
|
24
|
+
xs: 12,
|
25
|
+
style: {
|
26
|
+
padding: "10px"
|
27
|
+
},
|
28
|
+
children: /*#__PURE__*/_jsx(Select, {
|
29
|
+
onChange: handleChange,
|
30
|
+
value: value || options[0]?.value,
|
31
|
+
placeholder: data?.label,
|
32
|
+
fullWidth: true,
|
33
|
+
size: "small",
|
34
|
+
children: options.map(m => {
|
35
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
36
|
+
value: m.value,
|
37
|
+
children: renderOption ? renderOption(m) : m.label || m.text
|
38
|
+
}, `${key}_${m.value}`);
|
39
|
+
})
|
40
|
+
})
|
41
|
+
})
|
42
|
+
});
|
43
|
+
};
|
44
|
+
export default TextOptions;
|
@@ -0,0 +1,93 @@
|
|
1
|
+
import { fontOptions } from "../../utils/font";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
const formButtonStyle = [{
|
4
|
+
tab: "General",
|
5
|
+
value: "size",
|
6
|
+
fields: [{
|
7
|
+
label: "Button Text",
|
8
|
+
key: "label",
|
9
|
+
type: "text"
|
10
|
+
}, {
|
11
|
+
label: "Font Size",
|
12
|
+
key: "textSize",
|
13
|
+
type: "text",
|
14
|
+
placeholder: "16px or 1em"
|
15
|
+
}, {
|
16
|
+
label: "Font Family",
|
17
|
+
key: "fontFamily",
|
18
|
+
type: "textOptions",
|
19
|
+
options: fontOptions,
|
20
|
+
renderOption: option => {
|
21
|
+
return /*#__PURE__*/_jsx("span", {
|
22
|
+
style: {
|
23
|
+
fontFamily: option.value
|
24
|
+
},
|
25
|
+
children: option.text
|
26
|
+
});
|
27
|
+
}
|
28
|
+
}, {
|
29
|
+
label: "Text Align",
|
30
|
+
key: "textAlign",
|
31
|
+
type: "textAlign",
|
32
|
+
placeholder: "16px or 1em"
|
33
|
+
}]
|
34
|
+
}, {
|
35
|
+
tab: "Position",
|
36
|
+
value: "position",
|
37
|
+
fields: [{
|
38
|
+
label: "Set Postion (Vertical & Horizantal)",
|
39
|
+
key: "alignment",
|
40
|
+
type: "alignment"
|
41
|
+
}]
|
42
|
+
}, {
|
43
|
+
tab: "Margin Spacing",
|
44
|
+
value: "marginSpacing",
|
45
|
+
fields: [{
|
46
|
+
label: "Margin Spacing",
|
47
|
+
key: "marginSpacing",
|
48
|
+
type: "bannerSpacing"
|
49
|
+
}]
|
50
|
+
}, {
|
51
|
+
tab: "Banner Spacing",
|
52
|
+
value: "bannerSpacing",
|
53
|
+
fields: [{
|
54
|
+
label: "Banner Spacing",
|
55
|
+
key: "bannerSpacing",
|
56
|
+
type: "bannerSpacing"
|
57
|
+
}]
|
58
|
+
}, {
|
59
|
+
tab: "Border Radius",
|
60
|
+
value: "borderRadius",
|
61
|
+
fields: [{
|
62
|
+
label: "Border Radius",
|
63
|
+
key: "borderRadius",
|
64
|
+
type: "borderRadius"
|
65
|
+
}]
|
66
|
+
}, {
|
67
|
+
tab: "Colors",
|
68
|
+
value: "colors",
|
69
|
+
fields: [{
|
70
|
+
label: "Text",
|
71
|
+
key: "textColor",
|
72
|
+
type: "color",
|
73
|
+
needPreview: true
|
74
|
+
}, {
|
75
|
+
label: "Background",
|
76
|
+
key: "bgColor",
|
77
|
+
type: "color"
|
78
|
+
}, {
|
79
|
+
label: "Border",
|
80
|
+
key: "borderColor",
|
81
|
+
type: "color"
|
82
|
+
}]
|
83
|
+
}, {
|
84
|
+
tab: "Save As Template",
|
85
|
+
value: "saveAsTemplate",
|
86
|
+
needActions: false,
|
87
|
+
fields: [{
|
88
|
+
label: "Template Image",
|
89
|
+
key: "saveAsTemplate",
|
90
|
+
type: "saveAsTemplate"
|
91
|
+
}]
|
92
|
+
}];
|
93
|
+
export default formButtonStyle;
|