@flozy/editor 3.3.2 → 3.3.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/AI/PopoverAIInput.js +8 -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
@@ -0,0 +1,117 @@
|
|
1
|
+
import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
|
2
|
+
import React from "react";
|
3
|
+
import Icon from "../../Icon";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const RenderCard = ({
|
8
|
+
value,
|
9
|
+
handleChange,
|
10
|
+
title,
|
11
|
+
content,
|
12
|
+
infoIcon,
|
13
|
+
classes
|
14
|
+
}) => {
|
15
|
+
return /*#__PURE__*/_jsx(Card, {
|
16
|
+
sx: {
|
17
|
+
position: 'relative',
|
18
|
+
padding: "10px"
|
19
|
+
},
|
20
|
+
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
21
|
+
control: /*#__PURE__*/_jsx(Checkbox, {
|
22
|
+
sx: {
|
23
|
+
padding: 0,
|
24
|
+
marginTop: '3px'
|
25
|
+
},
|
26
|
+
onChange: handleChange,
|
27
|
+
checked: value,
|
28
|
+
size: "small",
|
29
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
30
|
+
icon: "uncheckedIcon"
|
31
|
+
}),
|
32
|
+
checkedIcon: /*#__PURE__*/_jsx(Icon, {
|
33
|
+
icon: "checkedIcon"
|
34
|
+
})
|
35
|
+
}),
|
36
|
+
label: /*#__PURE__*/_jsx(Box, {
|
37
|
+
sx: {
|
38
|
+
display: "flex",
|
39
|
+
alignItems: "center",
|
40
|
+
"& .MuiTypography-root": {
|
41
|
+
fontWeight: `500 !important`
|
42
|
+
}
|
43
|
+
},
|
44
|
+
children: /*#__PURE__*/_jsxs(_Fragment, {
|
45
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
46
|
+
sx: classes?.cardsTypo,
|
47
|
+
style: {
|
48
|
+
fontWeight: `500 !important`
|
49
|
+
},
|
50
|
+
children: title
|
51
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
52
|
+
title: content,
|
53
|
+
children: infoIcon && content && /*#__PURE__*/_jsx("span", {
|
54
|
+
children: infoIcon
|
55
|
+
})
|
56
|
+
})]
|
57
|
+
})
|
58
|
+
}),
|
59
|
+
sx: {
|
60
|
+
width: '100%',
|
61
|
+
display: 'flex',
|
62
|
+
justifyContent: 'space-between',
|
63
|
+
alignItems: 'flex-start',
|
64
|
+
margin: 0
|
65
|
+
},
|
66
|
+
labelPlacement: "start"
|
67
|
+
})
|
68
|
+
});
|
69
|
+
};
|
70
|
+
const CardsMapping = props => {
|
71
|
+
const {
|
72
|
+
value,
|
73
|
+
data,
|
74
|
+
onChange,
|
75
|
+
classes
|
76
|
+
} = props;
|
77
|
+
const {
|
78
|
+
key,
|
79
|
+
label,
|
80
|
+
content,
|
81
|
+
selectedCard,
|
82
|
+
infoIcon
|
83
|
+
} = data;
|
84
|
+
const activeCard = value === selectedCard;
|
85
|
+
const handleChange = e => {
|
86
|
+
if (selectedCard === data?.value) {
|
87
|
+
onChange({
|
88
|
+
[key]: ""
|
89
|
+
});
|
90
|
+
} else {
|
91
|
+
onChange({
|
92
|
+
[key]: data?.value
|
93
|
+
});
|
94
|
+
}
|
95
|
+
};
|
96
|
+
return /*#__PURE__*/_jsx(Grid, {
|
97
|
+
item: true,
|
98
|
+
xs: 12,
|
99
|
+
sx: {
|
100
|
+
marginBottom: "12px",
|
101
|
+
"& .MuiPaper-root": {
|
102
|
+
border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
|
103
|
+
borderRadius: "8px",
|
104
|
+
boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
|
105
|
+
}
|
106
|
+
},
|
107
|
+
children: /*#__PURE__*/_jsx(RenderCard, {
|
108
|
+
value: activeCard,
|
109
|
+
handleChange: handleChange,
|
110
|
+
title: label,
|
111
|
+
content: content,
|
112
|
+
infoIcon: infoIcon,
|
113
|
+
classes: classes
|
114
|
+
})
|
115
|
+
});
|
116
|
+
};
|
117
|
+
export default CardsMapping;
|
@@ -15,6 +15,9 @@ import TextOptions from "./textOptions";
|
|
15
15
|
import SelectBox from "./selectBox";
|
16
16
|
import Icons from "./icons";
|
17
17
|
import FontSize from "./fontSize";
|
18
|
+
import SelectSwitch from "./selectSwitch";
|
19
|
+
import CardsMapping from "./card";
|
20
|
+
import MetaDataMapping from "./metaDataMapping";
|
18
21
|
const FieldMap = {
|
19
22
|
text: Text,
|
20
23
|
bannerSpacing: BannerSpacing,
|
@@ -32,6 +35,9 @@ const FieldMap = {
|
|
32
35
|
textOptions: TextOptions,
|
33
36
|
selectBox: SelectBox,
|
34
37
|
icons: Icons,
|
35
|
-
fontSize: FontSize
|
38
|
+
fontSize: FontSize,
|
39
|
+
selectSwitch: SelectSwitch,
|
40
|
+
card: CardsMapping,
|
41
|
+
metadatamapping: MetaDataMapping
|
36
42
|
};
|
37
43
|
export default FieldMap;
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import FieldMap from ".";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const MetaDataMapping = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
data,
|
9
|
+
onChange,
|
10
|
+
elementProps
|
11
|
+
} = props;
|
12
|
+
const {
|
13
|
+
compType
|
14
|
+
} = data;
|
15
|
+
const previousCardRef = useRef(null);
|
16
|
+
const [selectedCard, setSelectedCard] = useState(null);
|
17
|
+
const updatedData = {
|
18
|
+
...data,
|
19
|
+
selectedCard
|
20
|
+
};
|
21
|
+
const FieldComponent = FieldMap[compType] || null;
|
22
|
+
useEffect(() => {
|
23
|
+
setSelectedCard(elementProps?.metadatamapping);
|
24
|
+
}, [elementProps?.metadatamapping]);
|
25
|
+
const handleCardSelect = data => {
|
26
|
+
previousCardRef.current = selectedCard;
|
27
|
+
setSelectedCard(data);
|
28
|
+
onChange(data);
|
29
|
+
};
|
30
|
+
return /*#__PURE__*/_jsx(Grid, {
|
31
|
+
item: true,
|
32
|
+
xs: 12,
|
33
|
+
children: FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
|
34
|
+
element: elementProps,
|
35
|
+
value: data?.value,
|
36
|
+
data: updatedData,
|
37
|
+
onChange: handleCardSelect
|
38
|
+
}) : null
|
39
|
+
});
|
40
|
+
};
|
41
|
+
export default MetaDataMapping;
|
@@ -0,0 +1,101 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, Switch, styled, FormControlLabel, FormHelperText } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const AntSwitch = styled(Switch)(({
|
6
|
+
theme
|
7
|
+
}) => ({
|
8
|
+
width: 28,
|
9
|
+
height: 16,
|
10
|
+
padding: 0,
|
11
|
+
display: 'flex',
|
12
|
+
'&:active': {
|
13
|
+
'& .MuiSwitch-thumb': {
|
14
|
+
width: 15
|
15
|
+
},
|
16
|
+
'& .MuiSwitch-switchBase.Mui-checked': {
|
17
|
+
transform: 'translateX(9px)'
|
18
|
+
}
|
19
|
+
},
|
20
|
+
'& .MuiSwitch-switchBase': {
|
21
|
+
padding: 2,
|
22
|
+
'&.Mui-checked': {
|
23
|
+
transform: 'translateX(12px)',
|
24
|
+
color: '#fff',
|
25
|
+
'& + .MuiSwitch-track': {
|
26
|
+
opacity: 1,
|
27
|
+
backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff'
|
28
|
+
}
|
29
|
+
}
|
30
|
+
},
|
31
|
+
'& .MuiSwitch-thumb': {
|
32
|
+
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
|
33
|
+
width: 12,
|
34
|
+
height: 12,
|
35
|
+
borderRadius: 6,
|
36
|
+
transition: theme.transitions.create(['width'], {
|
37
|
+
duration: 200
|
38
|
+
})
|
39
|
+
},
|
40
|
+
'& .MuiSwitch-track': {
|
41
|
+
borderRadius: 16 / 2,
|
42
|
+
opacity: 1,
|
43
|
+
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
|
44
|
+
boxSizing: 'border-box'
|
45
|
+
}
|
46
|
+
}));
|
47
|
+
const SelectSwitch = props => {
|
48
|
+
const {
|
49
|
+
value,
|
50
|
+
data,
|
51
|
+
onChange,
|
52
|
+
elementProps
|
53
|
+
} = props;
|
54
|
+
const {
|
55
|
+
key,
|
56
|
+
label
|
57
|
+
} = data;
|
58
|
+
const handleChange = e => {
|
59
|
+
if (elementProps?.metadatamapping === data?.value) {
|
60
|
+
onChange({
|
61
|
+
[key]: null
|
62
|
+
});
|
63
|
+
} else {
|
64
|
+
onChange({
|
65
|
+
[key]: data?.value
|
66
|
+
});
|
67
|
+
}
|
68
|
+
};
|
69
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
70
|
+
item: true,
|
71
|
+
xs: 12,
|
72
|
+
style: {
|
73
|
+
marginBottom: "12px"
|
74
|
+
},
|
75
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
76
|
+
sx: {
|
77
|
+
display: 'flex',
|
78
|
+
justifyContent: 'space-between',
|
79
|
+
width: '100%',
|
80
|
+
marginLeft: 0,
|
81
|
+
'& .MuiFormControlLabel-label': {
|
82
|
+
marginLeft: 0,
|
83
|
+
fontSize: '14px',
|
84
|
+
fontWeight: 700
|
85
|
+
}
|
86
|
+
},
|
87
|
+
labelPlacement: "start",
|
88
|
+
label: label,
|
89
|
+
control: /*#__PURE__*/_jsx(AntSwitch, {
|
90
|
+
inputProps: {
|
91
|
+
'aria-label': 'ant design'
|
92
|
+
},
|
93
|
+
onChange: handleChange,
|
94
|
+
checked: Boolean(value) || false
|
95
|
+
})
|
96
|
+
}), /*#__PURE__*/_jsx(FormHelperText, {
|
97
|
+
children: data?.helperText
|
98
|
+
})]
|
99
|
+
});
|
100
|
+
};
|
101
|
+
export default SelectSwitch;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid, MenuItem, Select, Typography } from "@mui/material";
|
2
|
+
import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
|
3
3
|
import { getBreakPointsValue } from "../../../helper/theme";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -11,8 +11,12 @@ const TextOptions = props => {
|
|
11
11
|
data,
|
12
12
|
onChange,
|
13
13
|
elementProps,
|
14
|
-
classes
|
14
|
+
classes,
|
15
|
+
customProps
|
15
16
|
} = props;
|
17
|
+
const {
|
18
|
+
metaMappings
|
19
|
+
} = customProps;
|
16
20
|
const {
|
17
21
|
key,
|
18
22
|
isBreakpoint,
|
@@ -22,7 +26,9 @@ const TextOptions = props => {
|
|
22
26
|
} = data;
|
23
27
|
const [size] = useWindowResize();
|
24
28
|
const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
|
25
|
-
const
|
29
|
+
const metaDataMappingOptions = metaMappings?.boards || [];
|
30
|
+
const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
|
31
|
+
const handleChange = (e, d) => {
|
26
32
|
if (isBreakpoint) {
|
27
33
|
onChange({
|
28
34
|
[key]: {
|
@@ -32,7 +38,9 @@ const TextOptions = props => {
|
|
32
38
|
});
|
33
39
|
} else {
|
34
40
|
onChange({
|
35
|
-
[key]: e.target.value
|
41
|
+
[key]: e.target.value,
|
42
|
+
[`${key}_metadatakey`]: d?.props?.item,
|
43
|
+
isrequired: d?.props?.isrequired
|
36
44
|
});
|
37
45
|
}
|
38
46
|
};
|
@@ -52,21 +60,40 @@ const TextOptions = props => {
|
|
52
60
|
marginBottom: "4px"
|
53
61
|
},
|
54
62
|
children: data?.label
|
55
|
-
}), /*#__PURE__*/_jsx(
|
56
|
-
|
57
|
-
|
58
|
-
|
63
|
+
}), /*#__PURE__*/_jsx(FormControl, {
|
64
|
+
sx: {
|
65
|
+
"& .MuiSelect-select": {
|
66
|
+
display: "flex",
|
67
|
+
alignItems: "center"
|
68
|
+
}
|
69
|
+
},
|
59
70
|
fullWidth: true,
|
60
71
|
size: "small",
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
},
|
72
|
+
children: /*#__PURE__*/_jsx(Select, {
|
73
|
+
onChange: handleChange,
|
74
|
+
value: value || updatedOption[0]?.value,
|
75
|
+
placeholder: data?.label,
|
76
|
+
fullWidth: true,
|
77
|
+
size: "small",
|
78
|
+
style: {
|
79
|
+
marginBottom: "16px"
|
80
|
+
},
|
81
|
+
sx: classes.textOptions,
|
82
|
+
children: updatedOption?.map((m, i) => {
|
83
|
+
return m?.value === "listSubHeader" ? /*#__PURE__*/_jsx(ListSubheader, {
|
84
|
+
children: m?.label
|
85
|
+
}, `subHeader_${i}`) : /*#__PURE__*/_jsxs(MenuItem, {
|
86
|
+
value: m?.value,
|
87
|
+
item: m?.metaDataKey,
|
88
|
+
isrequired: m?.isRequired?.toString(),
|
89
|
+
children: [m?.icon && /*#__PURE__*/_jsx(ListItemIcon, {
|
90
|
+
sx: {
|
91
|
+
minWidth: "25px"
|
92
|
+
},
|
93
|
+
children: m?.icon
|
94
|
+
}), renderOption ? renderOption(m, elementProps) : m.label || m.text]
|
95
|
+
}, `${key}_${i}`);
|
96
|
+
})
|
70
97
|
})
|
71
98
|
})]
|
72
99
|
})
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { fontOptions } from "../../utils/font";
|
2
|
+
import Icon from "../Icon";
|
2
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
4
|
const formStyle = [{
|
4
5
|
tab: "General",
|
@@ -128,6 +129,30 @@ const formStyle = [{
|
|
128
129
|
key: "backgroundImage",
|
129
130
|
type: "backgroundImage"
|
130
131
|
}]
|
132
|
+
}, {
|
133
|
+
tab: "Add to Boards",
|
134
|
+
value: "metadatamapping",
|
135
|
+
fields: [{
|
136
|
+
label: "Add each response to contacts board",
|
137
|
+
key: "metadatamapping",
|
138
|
+
type: "metadatamapping",
|
139
|
+
compType: "card",
|
140
|
+
content: "By default, form responses are added as separate cards on the default contact board.",
|
141
|
+
value: "mappingToContactBoard",
|
142
|
+
infoIcon: /*#__PURE__*/_jsx(Icon, {
|
143
|
+
icon: "info"
|
144
|
+
})
|
145
|
+
}, {
|
146
|
+
label: "Create a separate board",
|
147
|
+
key: "metadatamapping",
|
148
|
+
type: "metadatamapping",
|
149
|
+
compType: "card",
|
150
|
+
content: "By default, form responses are added as separate cards on a new board (Contact Us).",
|
151
|
+
value: "mappingToSeparateBoard",
|
152
|
+
infoIcon: /*#__PURE__*/_jsx(Icon, {
|
153
|
+
icon: "info"
|
154
|
+
})
|
155
|
+
}]
|
131
156
|
}, {
|
132
157
|
tab: "Save As Template",
|
133
158
|
value: "saveAsTemplate",
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import Icon from "../Icon";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
const textOptions = [{
|
4
|
+
label: "Default Fields",
|
5
|
+
value: "listSubHeader"
|
6
|
+
}, {
|
7
|
+
label: "Text(Single Line)",
|
8
|
+
value: "text",
|
9
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
10
|
+
icon: "text"
|
11
|
+
})
|
12
|
+
}, {
|
13
|
+
label: "Text(Multiple Line)",
|
14
|
+
value: "textArea",
|
15
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
16
|
+
icon: "textArea"
|
17
|
+
})
|
18
|
+
}, {
|
19
|
+
label: "Contact Number",
|
20
|
+
value: "numbers",
|
21
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
22
|
+
icon: "phone"
|
23
|
+
})
|
24
|
+
}, {
|
25
|
+
label: "Email",
|
26
|
+
value: "email",
|
27
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
28
|
+
icon: "mail"
|
29
|
+
})
|
30
|
+
}
|
31
|
+
// {
|
32
|
+
// label: "Radio Button",
|
33
|
+
// value: "radioButton",
|
34
|
+
// icon: <Icon icon="radioButton" />,
|
35
|
+
// },
|
36
|
+
// {
|
37
|
+
// label: "Checkbox",
|
38
|
+
// value: "checkbox",
|
39
|
+
// icon: <Icon icon="checkbox" />,
|
40
|
+
// },
|
41
|
+
];
|
42
|
+
|
43
|
+
export default textOptions;
|