@flozy/editor 3.3.2 → 3.3.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/AI/PopoverAIInput.js +16 -4
- package/dist/Editor/Elements/Form/Form.js +33 -4
- package/dist/Editor/Elements/Form/FormElements/FormCheckbox.js +54 -0
- package/dist/Editor/Elements/Form/FormElements/FormDate.js +55 -0
- package/dist/Editor/Elements/Form/FormElements/FormNumbers.js +54 -0
- package/dist/Editor/Elements/Form/FormElements/FormRadioButton.js +54 -0
- package/dist/Editor/Elements/Form/FormElements/index.js +9 -1
- package/dist/Editor/Elements/Form/FormElements/validations.js +3 -3
- package/dist/Editor/Elements/Form/FormField.js +12 -3
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Link/LinkButton.js +8 -6
- package/dist/Editor/Styles/EditorStyles.js +4 -0
- package/dist/Editor/Toolbar/Basic/index.js +9 -6
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +2 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +117 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +7 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/metaDataMapping.js +41 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectSwitch.js +101 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +44 -17
- package/dist/Editor/common/StyleBuilder/formStyle.js +25 -0
- package/dist/Editor/common/StyleBuilder/textOptionsStyles.js +43 -0
- package/dist/Editor/common/iconslist.js +363 -0
- package/dist/Editor/utils/form.js +2 -1
- package/package.json +1 -1
@@ -7,6 +7,7 @@ import { ReactEditor, useSlate } from "slate-react";
|
|
7
7
|
import { Node, Path, Transforms } from "slate";
|
8
8
|
import useWindowResize from "../../hooks/useWindowResize";
|
9
9
|
import { MODES } from "./helper";
|
10
|
+
import { getSelectedText } from "../../utils/helper";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
13
|
const scrollToAIInput = () => {
|
@@ -28,14 +29,25 @@ const scrollToAIInput = () => {
|
|
28
29
|
console.log(err);
|
29
30
|
}
|
30
31
|
};
|
31
|
-
const updateAnchorEl = setAnchorEl => {
|
32
|
+
const updateAnchorEl = (setAnchorEl, editor) => {
|
32
33
|
try {
|
34
|
+
if (!editor.selection) {
|
35
|
+
return;
|
36
|
+
}
|
33
37
|
const selection = window.getSelection();
|
34
38
|
if (selection.rangeCount) {
|
35
|
-
|
39
|
+
let caret;
|
40
|
+
if (getSelectedText(editor)) {
|
41
|
+
// selected text as caret
|
42
|
+
caret = selection.getRangeAt(0);
|
43
|
+
} else {
|
44
|
+
const focussedNode = Node.get(editor, editor?.selection?.anchor?.path);
|
45
|
+
// foccussed DOM as caret
|
46
|
+
caret = ReactEditor.toDOMNode(editor, focussedNode);
|
47
|
+
}
|
36
48
|
const getBoundingClientRect = () => {
|
37
49
|
const editorEle = document.querySelector(".ed-section-inner").getBoundingClientRect();
|
38
|
-
const caretPos =
|
50
|
+
const caretPos = caret.getBoundingClientRect();
|
39
51
|
return {
|
40
52
|
y: caretPos.y,
|
41
53
|
height: caretPos.height,
|
@@ -86,7 +98,7 @@ function PopoverAIInput({
|
|
86
98
|
};
|
87
99
|
const editorElement = document.querySelector(".ed-section-inner");
|
88
100
|
useEffect(() => {
|
89
|
-
updateAnchorEl(setAnchorEl);
|
101
|
+
updateAnchorEl(setAnchorEl, editor);
|
90
102
|
}, [openAI, editor.selection]);
|
91
103
|
useEffect(() => {
|
92
104
|
if (openAI === "fromToolBar") {
|
@@ -24,6 +24,7 @@ const Form = props => {
|
|
24
24
|
} = props;
|
25
25
|
const {
|
26
26
|
readOnly,
|
27
|
+
site_id,
|
27
28
|
page_id,
|
28
29
|
onFormSubmit
|
29
30
|
} = customProps;
|
@@ -65,6 +66,13 @@ const Form = props => {
|
|
65
66
|
const getFieldProps = (key = "", val = "") => {
|
66
67
|
return element?.children?.find(obj => obj && obj[key] === val);
|
67
68
|
};
|
69
|
+
const getFieldData = (key, type, field_type) => {
|
70
|
+
return element?.children?.filter(obj => obj && obj?.hasOwnProperty(key) && obj?.type === type && obj?.[key]?.includes(field_type));
|
71
|
+
};
|
72
|
+
const isMetaDataKey = (data, key) => {
|
73
|
+
let metaData = data?.find(meta => meta?.key === key);
|
74
|
+
return metaData;
|
75
|
+
};
|
68
76
|
const handleSubmit = async (event, test = false) => {
|
69
77
|
if (event) {
|
70
78
|
event.preventDefault();
|
@@ -74,26 +82,45 @@ const Form = props => {
|
|
74
82
|
setLoading(true);
|
75
83
|
let response = {};
|
76
84
|
let user_email = "";
|
85
|
+
let meta_data = [];
|
77
86
|
const validations = [];
|
87
|
+
let metaFieldDataBoards = getFieldData('element_metadatakey', "form-field", "board");
|
78
88
|
for (let pair of formData.entries()) {
|
79
89
|
const emailObject = getFieldProps("element", "email");
|
80
90
|
if (emailObject?.name === pair[0]) {
|
81
91
|
user_email = pair[1];
|
82
92
|
}
|
93
|
+
const isMetaKey = isMetaDataKey(metaFieldDataBoards, pair[0]);
|
94
|
+
if (isMetaKey) {
|
95
|
+
meta_data.push({
|
96
|
+
[isMetaKey?.element_metadatakey]: pair[1],
|
97
|
+
type: "board",
|
98
|
+
metadatamapping: element?.metadatamapping
|
99
|
+
});
|
100
|
+
}
|
83
101
|
const fieldData = getFieldProps("name", pair[0]);
|
84
102
|
let rule = [];
|
85
103
|
if (fieldData?.required) {
|
86
104
|
rule.push(`isRequired`);
|
87
105
|
}
|
88
|
-
if (fieldData?.
|
106
|
+
if (fieldData?.element === "email") {
|
89
107
|
rule.push(`isEmail`);
|
90
108
|
}
|
91
|
-
if (fieldData?.required || fieldData?.
|
109
|
+
if (fieldData?.required || fieldData?.element === "email") {
|
92
110
|
validations.push({
|
93
111
|
name: pair[0],
|
94
112
|
value: pair[1],
|
95
113
|
field_type: fieldData?.field_type,
|
96
|
-
rules: rule && rule
|
114
|
+
rules: rule?.length > 0 && rule
|
115
|
+
});
|
116
|
+
}
|
117
|
+
if (isMetaKey?.isrequired) {
|
118
|
+
rule.push(`isRequired`);
|
119
|
+
validations.push({
|
120
|
+
name: pair[0],
|
121
|
+
value: pair[1],
|
122
|
+
field_type: isMetaKey?.placeholder,
|
123
|
+
rules: rule?.length > 0 && rule
|
97
124
|
});
|
98
125
|
}
|
99
126
|
response = {
|
@@ -103,6 +130,7 @@ const Form = props => {
|
|
103
130
|
}
|
104
131
|
let params = {
|
105
132
|
page_id: page_id,
|
133
|
+
site_id: site_id,
|
106
134
|
form_id: `${formName}`,
|
107
135
|
response: {
|
108
136
|
...response
|
@@ -112,7 +140,8 @@ const Form = props => {
|
|
112
140
|
email: element?.email,
|
113
141
|
form_workflow: element?.workflow,
|
114
142
|
save_response: element?.saveResponse
|
115
|
-
}
|
143
|
+
},
|
144
|
+
meta_data: meta_data
|
116
145
|
};
|
117
146
|
const isValidForm = validations.length !== 0 && validation(validations);
|
118
147
|
if (isValidForm) {
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const FormCheckbox = props => {
|
6
|
+
const {
|
7
|
+
fieldProps
|
8
|
+
} = props;
|
9
|
+
const {
|
10
|
+
bannerSpacing,
|
11
|
+
height,
|
12
|
+
borderRadius,
|
13
|
+
borderStyle,
|
14
|
+
borderWidth,
|
15
|
+
borderColor,
|
16
|
+
textColor,
|
17
|
+
bgColor,
|
18
|
+
lockSpacing,
|
19
|
+
...rest
|
20
|
+
} = fieldProps;
|
21
|
+
const onChange = e => {
|
22
|
+
e.preventDefault();
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/_jsx("div", {
|
25
|
+
style: {
|
26
|
+
width: "100%",
|
27
|
+
display: "flex"
|
28
|
+
},
|
29
|
+
contentEditable: false,
|
30
|
+
children: /*#__PURE__*/_jsx(Box, {
|
31
|
+
component: "input",
|
32
|
+
...rest,
|
33
|
+
type: "checkbox",
|
34
|
+
onChange: onChange,
|
35
|
+
sx: {
|
36
|
+
width: "100%",
|
37
|
+
border: `1px solid ${borderColor || "#FFF"}`,
|
38
|
+
padding: {
|
39
|
+
...getTRBLBreakPoints(bannerSpacing)
|
40
|
+
},
|
41
|
+
height: height || "auto",
|
42
|
+
borderColor: borderColor || "transparent",
|
43
|
+
borderWidth: borderWidth || "1px",
|
44
|
+
borderRadius: {
|
45
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
46
|
+
},
|
47
|
+
borderStyle: borderStyle || "solid",
|
48
|
+
color: textColor || "#000",
|
49
|
+
background: bgColor || "transparent"
|
50
|
+
}
|
51
|
+
})
|
52
|
+
});
|
53
|
+
};
|
54
|
+
export default FormCheckbox;
|
@@ -0,0 +1,55 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const FormDate = props => {
|
6
|
+
const {
|
7
|
+
fieldProps
|
8
|
+
} = props;
|
9
|
+
const {
|
10
|
+
bannerSpacing,
|
11
|
+
height,
|
12
|
+
borderRadius,
|
13
|
+
borderStyle,
|
14
|
+
borderWidth,
|
15
|
+
borderColor,
|
16
|
+
textColor,
|
17
|
+
bgColor,
|
18
|
+
lockSpacing,
|
19
|
+
...rest
|
20
|
+
} = fieldProps;
|
21
|
+
const onChange = e => {
|
22
|
+
e.preventDefault();
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/_jsx("div", {
|
25
|
+
style: {
|
26
|
+
width: "100%",
|
27
|
+
display: "flex"
|
28
|
+
},
|
29
|
+
contentEditable: false,
|
30
|
+
children: /*#__PURE__*/_jsx(Box, {
|
31
|
+
component: "input",
|
32
|
+
...rest,
|
33
|
+
type: "date",
|
34
|
+
onChange: onChange,
|
35
|
+
sx: {
|
36
|
+
width: "100%",
|
37
|
+
border: `1px solid ${borderColor || "#FFF"}`,
|
38
|
+
padding: {
|
39
|
+
...getTRBLBreakPoints(bannerSpacing)
|
40
|
+
},
|
41
|
+
height: height || "auto",
|
42
|
+
borderColor: borderColor || "transparent",
|
43
|
+
borderWidth: borderWidth || "1px",
|
44
|
+
borderRadius: {
|
45
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
46
|
+
},
|
47
|
+
borderStyle: borderStyle || "solid",
|
48
|
+
color: textColor || "#000",
|
49
|
+
background: bgColor || "transparent",
|
50
|
+
paddingRight: '85px !important'
|
51
|
+
}
|
52
|
+
})
|
53
|
+
});
|
54
|
+
};
|
55
|
+
export default FormDate;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const FormNumbers = props => {
|
6
|
+
const {
|
7
|
+
fieldProps
|
8
|
+
} = props;
|
9
|
+
const {
|
10
|
+
bannerSpacing,
|
11
|
+
height,
|
12
|
+
borderRadius,
|
13
|
+
borderStyle,
|
14
|
+
borderWidth,
|
15
|
+
borderColor,
|
16
|
+
textColor,
|
17
|
+
bgColor,
|
18
|
+
lockSpacing,
|
19
|
+
...rest
|
20
|
+
} = fieldProps;
|
21
|
+
const onChange = e => {
|
22
|
+
e.preventDefault();
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/_jsx("div", {
|
25
|
+
style: {
|
26
|
+
width: "100%",
|
27
|
+
display: "flex"
|
28
|
+
},
|
29
|
+
contentEditable: false,
|
30
|
+
children: /*#__PURE__*/_jsx(Box, {
|
31
|
+
component: "input",
|
32
|
+
...rest,
|
33
|
+
type: "number",
|
34
|
+
onChange: onChange,
|
35
|
+
sx: {
|
36
|
+
width: "100%",
|
37
|
+
border: `1px solid ${borderColor || "#FFF"}`,
|
38
|
+
padding: {
|
39
|
+
...getTRBLBreakPoints(bannerSpacing)
|
40
|
+
},
|
41
|
+
height: height || "auto",
|
42
|
+
borderColor: borderColor || "transparent",
|
43
|
+
borderWidth: borderWidth || "1px",
|
44
|
+
borderRadius: {
|
45
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
46
|
+
},
|
47
|
+
borderStyle: borderStyle || "solid",
|
48
|
+
color: textColor || "#000",
|
49
|
+
background: bgColor || "transparent"
|
50
|
+
}
|
51
|
+
})
|
52
|
+
});
|
53
|
+
};
|
54
|
+
export default FormNumbers;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box } from "@mui/material";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const FormRadioButton = props => {
|
6
|
+
const {
|
7
|
+
fieldProps
|
8
|
+
} = props;
|
9
|
+
const {
|
10
|
+
bannerSpacing,
|
11
|
+
height,
|
12
|
+
borderRadius,
|
13
|
+
borderStyle,
|
14
|
+
borderWidth,
|
15
|
+
borderColor,
|
16
|
+
textColor,
|
17
|
+
bgColor,
|
18
|
+
lockSpacing,
|
19
|
+
...rest
|
20
|
+
} = fieldProps;
|
21
|
+
const onChange = e => {
|
22
|
+
e.preventDefault();
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/_jsx("div", {
|
25
|
+
style: {
|
26
|
+
width: "100%",
|
27
|
+
display: "flex"
|
28
|
+
},
|
29
|
+
contentEditable: false,
|
30
|
+
children: /*#__PURE__*/_jsx(Box, {
|
31
|
+
component: "input",
|
32
|
+
...rest,
|
33
|
+
type: "radio",
|
34
|
+
onChange: onChange,
|
35
|
+
sx: {
|
36
|
+
width: "100%",
|
37
|
+
border: `1px solid ${borderColor || "#FFF"}`,
|
38
|
+
padding: {
|
39
|
+
...getTRBLBreakPoints(bannerSpacing)
|
40
|
+
},
|
41
|
+
height: height || "auto",
|
42
|
+
borderColor: borderColor || "transparent",
|
43
|
+
borderWidth: borderWidth || "1px",
|
44
|
+
borderRadius: {
|
45
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
46
|
+
},
|
47
|
+
borderStyle: borderStyle || "solid",
|
48
|
+
color: textColor || "#000",
|
49
|
+
background: bgColor || "transparent"
|
50
|
+
}
|
51
|
+
})
|
52
|
+
});
|
53
|
+
};
|
54
|
+
export default FormRadioButton;
|
@@ -1,9 +1,17 @@
|
|
1
1
|
import FormEmail from "./FormEmail";
|
2
2
|
import FormText from "./FormText";
|
3
3
|
import FormTextArea from "./FormTextArea";
|
4
|
+
import FormNumbers from "./FormNumbers";
|
5
|
+
import FormDate from "./FormDate";
|
6
|
+
import FormCheckbox from "./FormCheckbox";
|
7
|
+
import FormRadioButton from "./FormRadioButton";
|
4
8
|
const FormElements = {
|
5
9
|
text: FormText,
|
6
10
|
textArea: FormTextArea,
|
7
|
-
email: FormEmail
|
11
|
+
email: FormEmail,
|
12
|
+
numbers: FormNumbers,
|
13
|
+
date: FormDate,
|
14
|
+
checkbox: FormCheckbox,
|
15
|
+
radioButton: FormRadioButton
|
8
16
|
};
|
9
17
|
export default FormElements;
|
@@ -8,8 +8,8 @@ export const validationMethods = {
|
|
8
8
|
return "Enter valid email address";
|
9
9
|
}
|
10
10
|
},
|
11
|
-
isRequired: value => {
|
12
|
-
return value === '' ? "Required fields should not be empty
|
11
|
+
isRequired: (value, field_type = "") => {
|
12
|
+
return value === '' ? `${field_type ? field_type : "Required"} fields should not be empty` : "";
|
13
13
|
}
|
14
14
|
};
|
15
15
|
export const validation = fields => {
|
@@ -17,7 +17,7 @@ export const validation = fields => {
|
|
17
17
|
let filedValue = [];
|
18
18
|
fields.map(field => {
|
19
19
|
let val = field.rules.map(vm => {
|
20
|
-
return validationMethods[vm](field["value"]);
|
20
|
+
return validationMethods[vm](field["value"], field["field_type"]);
|
21
21
|
});
|
22
22
|
return filedValue.push(...val);
|
23
23
|
});
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Transforms } from "slate";
|
2
|
+
import { Transforms, Node } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import { IconButton, Tooltip, Grid } from "@mui/material";
|
5
5
|
import DeleteIcon from "@mui/icons-material/Delete";
|
@@ -25,9 +25,18 @@ const FormField = props => {
|
|
25
25
|
children,
|
26
26
|
...elementProps
|
27
27
|
} = element;
|
28
|
-
const
|
28
|
+
const et = elementType?.split(':');
|
29
|
+
const FormElement = FormElements[et[0]];
|
29
30
|
const editor = useSlateStatic();
|
30
31
|
const path = ReactEditor.findPath(editor, element);
|
32
|
+
const formPath = path.slice(0, path.length - 1);
|
33
|
+
const {
|
34
|
+
metadatamapping
|
35
|
+
} = Node?.get(editor, formPath) || {};
|
36
|
+
const updatedElement = {
|
37
|
+
...element,
|
38
|
+
metadatamapping
|
39
|
+
};
|
31
40
|
const [openSetttings, setOpenSettings] = useState(false);
|
32
41
|
const onSettings = () => {
|
33
42
|
setOpenSettings(true);
|
@@ -95,7 +104,7 @@ const FormField = props => {
|
|
95
104
|
children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
|
96
105
|
fieldProps: elementProps
|
97
106
|
}), openSetttings ? /*#__PURE__*/_jsx(FieldPopup, {
|
98
|
-
element:
|
107
|
+
element: updatedElement,
|
99
108
|
onSave: onSave,
|
100
109
|
onClose: onClose,
|
101
110
|
customProps: customProps
|
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
|
|
71
71
|
children: [/*#__PURE__*/_jsx(Grid, {
|
72
72
|
item: true,
|
73
73
|
sx: classes.radioBtn,
|
74
|
-
children: /*#__PURE__*/
|
74
|
+
children: /*#__PURE__*/_jsxs(RadioGroup, {
|
75
75
|
name: "set timing",
|
76
76
|
value: schedule,
|
77
77
|
defaultValue: 1,
|
78
|
-
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
78
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
79
79
|
value: "immediately",
|
80
80
|
label: "Immediately",
|
81
81
|
onChange: () => {
|
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
|
|
84
84
|
control: /*#__PURE__*/_jsx(Radio, {
|
85
85
|
size: "small"
|
86
86
|
})
|
87
|
-
})
|
87
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
88
|
+
value: "after",
|
89
|
+
label: "After",
|
90
|
+
onChange: () => {
|
91
|
+
setSchedule("after");
|
92
|
+
},
|
93
|
+
control: /*#__PURE__*/_jsx(Radio, {
|
94
|
+
size: "small"
|
95
|
+
})
|
96
|
+
})]
|
88
97
|
})
|
89
98
|
}), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
|
90
99
|
item: true,
|
@@ -37,12 +37,14 @@ const LinkButton = props => {
|
|
37
37
|
};
|
38
38
|
const toggleLink = () => {
|
39
39
|
setSelection(editor.selection);
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
40
|
+
if (editor.selection) {
|
41
|
+
setLinkData({
|
42
|
+
name: Editor.string(editor, editor.selection),
|
43
|
+
url: blockProps?.href || "",
|
44
|
+
showInNewTab: true
|
45
|
+
});
|
46
|
+
setShowInput(true);
|
47
|
+
}
|
46
48
|
};
|
47
49
|
const handleInputChange = ({
|
48
50
|
target
|
@@ -9,6 +9,7 @@ import ColorPickerButton from "../../common/ColorPickerButton";
|
|
9
9
|
import { colors } from "../../Elements/Color Picker/defaultColors";
|
10
10
|
import VariableButton from "../../Elements/Variables/VariableButton";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
12
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
14
|
const allTools = toolbarGroups.flat();
|
14
15
|
const BasicToolbar = props => {
|
@@ -66,12 +67,14 @@ const BasicToolbar = props => {
|
|
66
67
|
item: true,
|
67
68
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
68
69
|
title: "Font Color",
|
69
|
-
children: /*#__PURE__*/_jsx(
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
70
|
+
children: /*#__PURE__*/_jsx(_Fragment, {
|
71
|
+
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
72
|
+
value: activeColor || "#0000",
|
73
|
+
onSave: color => {
|
74
|
+
handleTextColor(color);
|
75
|
+
},
|
76
|
+
defaultColors: colors
|
77
|
+
})
|
75
78
|
})
|
76
79
|
})
|
77
80
|
})]
|
@@ -7,9 +7,11 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
|
|
7
7
|
import { SiLatex } from "react-icons/si";
|
8
8
|
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
9
9
|
import { IoIosImage } from "react-icons/io";
|
10
|
-
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, InfinityIcon } from "./iconslist";
|
10
|
+
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon } from "./iconslist";
|
11
11
|
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
12
12
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
13
|
+
import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
|
14
|
+
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
13
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
17
|
const iconList = {
|
@@ -213,6 +215,34 @@ const iconList = {
|
|
213
215
|
}
|
214
216
|
}),
|
215
217
|
calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
|
218
|
+
text: /*#__PURE__*/_jsx(Text, {}),
|
219
|
+
textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
|
220
|
+
phone: /*#__PURE__*/_jsx(Phone, {}),
|
221
|
+
briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
|
222
|
+
bank: /*#__PURE__*/_jsx(Bank, {}),
|
223
|
+
calendarTick: /*#__PURE__*/_jsx(CalendarTick, {}),
|
224
|
+
dollarSquare: /*#__PURE__*/_jsx(DollarSquare, {}),
|
225
|
+
description: /*#__PURE__*/_jsx(Description, {}),
|
226
|
+
radioButton: /*#__PURE__*/_jsx(RadioButtonIcon, {}),
|
227
|
+
checkbox: /*#__PURE__*/_jsx(Checkbox, {}),
|
228
|
+
mail: /*#__PURE__*/_jsx(EmailRoundedIcon, {
|
229
|
+
sx: {
|
230
|
+
width: "18px",
|
231
|
+
height: "16px",
|
232
|
+
fill: "#000"
|
233
|
+
}
|
234
|
+
}),
|
235
|
+
info: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
|
236
|
+
sx: {
|
237
|
+
width: "14px",
|
238
|
+
height: "14px",
|
239
|
+
paddingLeft: "5px",
|
240
|
+
marginTop: "5px",
|
241
|
+
fill: "#94A3B8"
|
242
|
+
}
|
243
|
+
}),
|
244
|
+
checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
|
245
|
+
uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
|
216
246
|
infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {})
|
217
247
|
};
|
218
248
|
const Icon = props => {
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import textOptions from "./textOptionsStyles";
|
1
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
3
|
const fieldStyle = [{
|
3
4
|
tab: "General",
|
@@ -10,16 +11,7 @@ const fieldStyle = [{
|
|
10
11
|
label: "Field Type",
|
11
12
|
key: "element",
|
12
13
|
type: "textOptions",
|
13
|
-
options: [
|
14
|
-
label: "Textbox",
|
15
|
-
value: "text"
|
16
|
-
}, {
|
17
|
-
label: "Email",
|
18
|
-
value: "email"
|
19
|
-
}, {
|
20
|
-
label: "TextArea",
|
21
|
-
value: "textArea"
|
22
|
-
}]
|
14
|
+
options: [...textOptions]
|
23
15
|
}, {
|
24
16
|
label: "Placeholder",
|
25
17
|
key: "placeholder",
|