@flozy/editor 1.7.4 → 1.7.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,10 +1,11 @@
1
- import React from "react";
2
- import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField } from "@mui/material";
1
+ import React, { useState } from "react";
2
+ import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField, Button, Menu } from "@mui/material";
3
3
  import FormStyles from "./Styles";
4
4
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
5
5
  import UserInputs from "./UserInputs";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
9
  const FormWorkflow = props => {
9
10
  const {
10
11
  schedule,
@@ -23,6 +24,9 @@ const FormWorkflow = props => {
23
24
  handleInputReset
24
25
  } = props;
25
26
  const classes = FormStyles();
27
+ const [anchorEl, setAnchorEl] = useState(null);
28
+ const variables = element?.children;
29
+ const type = 1;
26
30
  const handleBodyField = event => {
27
31
  setBodyData(event.target.value);
28
32
  };
@@ -35,6 +39,14 @@ const FormWorkflow = props => {
35
39
  const onSubjectChange = event => {
36
40
  setSubject(event.target.value);
37
41
  };
42
+ const handleVariables = event => {
43
+ event.stopPropagation();
44
+ setAnchorEl(event.currentTarget);
45
+ };
46
+ const handleClose = event => {
47
+ event.stopPropagation();
48
+ setAnchorEl(null);
49
+ };
38
50
  return /*#__PURE__*/_jsxs(Grid, {
39
51
  container: true,
40
52
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -154,13 +166,47 @@ const FormWorkflow = props => {
154
166
  },
155
167
  "& textarea": {
156
168
  fontSize: "16px",
157
- fontWeight: 500
169
+ fontWeight: 500,
170
+ width: "410px"
158
171
  },
159
172
  "& textarea:focus-visible": {
160
173
  outline: "none",
161
174
  borderRadius: "none",
162
175
  border: "none"
176
+ },
177
+ "& .MuiOutlinedInput-root": {
178
+ padding: "8px 10px"
163
179
  }
180
+ },
181
+ InputProps: {
182
+ endAdornment: /*#__PURE__*/_jsxs(_Fragment, {
183
+ children: [/*#__PURE__*/_jsx(Button, {
184
+ sx: classes.variableBtn,
185
+ onClick: handleVariables,
186
+ endIcon: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
187
+ children: "Variables"
188
+ }), /*#__PURE__*/_jsx(Menu, {
189
+ id: "basic-menu",
190
+ open: Boolean(anchorEl),
191
+ anchorEl: anchorEl,
192
+ onClose: handleClose,
193
+ anchorOrigin: {
194
+ vertical: "bottom",
195
+ horizontal: "right"
196
+ },
197
+ transformOrigin: {
198
+ vertical: "top",
199
+ horizontal: "right"
200
+ },
201
+ children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
202
+ sx: {
203
+ color: "#64748B"
204
+ },
205
+ onClick: handleSelectedVariables(m, type),
206
+ children: m.name
207
+ }, `menu_${i}_${m.name}`))
208
+ })]
209
+ })
164
210
  }
165
211
  })]
166
212
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -2,8 +2,8 @@ import React from "react";
2
2
  import { Grid, Typography } from "@mui/material";
3
3
  import FormStyles from "./Styles";
4
4
  import MoreOptions from "./MoreOptions";
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
7
  const ListWorkflow = props => {
8
8
  const {
9
9
  workflow,
@@ -27,110 +27,127 @@ const ListWorkflow = props => {
27
27
  xs: 12,
28
28
  children: /*#__PURE__*/_jsxs(Grid, {
29
29
  container: true,
30
- sx: classes.flowListCard,
31
- alignItems: "center",
32
- justifyContent: "space-between",
33
30
  children: [/*#__PURE__*/_jsx(Grid, {
34
31
  item: true,
35
- xs: 11,
32
+ sx: classes.emailIndexCard,
33
+ children: /*#__PURE__*/_jsxs(Typography, {
34
+ sx: {
35
+ fontSize: "12px",
36
+ fontWeight: 600
37
+ },
38
+ children: ["Email ", index + 1]
39
+ })
40
+ }), /*#__PURE__*/_jsx(Grid, {
41
+ item: true,
42
+ xs: 12,
36
43
  children: /*#__PURE__*/_jsxs(Grid, {
37
44
  container: true,
38
- gap: 1,
45
+ sx: classes.flowListCard,
46
+ alignItems: "center",
47
+ justifyContent: "space-between",
39
48
  children: [/*#__PURE__*/_jsx(Grid, {
40
49
  item: true,
41
- xs: 12,
42
- children: /*#__PURE__*/_jsxs(Grid, {
43
- container: true,
44
- alignItems: "center",
45
- children: [/*#__PURE__*/_jsx(Grid, {
46
- item: true,
47
- children: /*#__PURE__*/_jsx(Typography, {
48
- sx: classes.listHeading,
49
- children: "Subject:"
50
- })
51
- }), /*#__PURE__*/_jsx(Grid, {
52
- item: true,
53
- children: /*#__PURE__*/_jsx(Typography, {
54
- sx: classes.listSubHeading,
55
- style: {
56
- paddingLeft: '24px'
57
- },
58
- children: flow.subject_data
59
- })
60
- })]
61
- })
62
- }), /*#__PURE__*/_jsx(Grid, {
63
- item: true,
64
- xs: 12,
65
- children: /*#__PURE__*/_jsxs(Grid, {
66
- container: true,
67
- alignItems: "center",
68
- children: [/*#__PURE__*/_jsx(Grid, {
69
- item: true,
70
- children: /*#__PURE__*/_jsx(Typography, {
71
- sx: classes.listHeading,
72
- children: "Body:"
73
- })
74
- }), /*#__PURE__*/_jsx(Grid, {
75
- item: true,
76
- children: /*#__PURE__*/_jsx(Typography, {
77
- sx: classes.listSubHeading,
78
- style: {
79
- paddingLeft: '40px'
80
- },
81
- children: flow.body_data
82
- })
83
- })]
84
- })
85
- }), /*#__PURE__*/_jsx(Grid, {
86
- item: true,
87
- xs: 12,
50
+ xs: 11,
88
51
  children: /*#__PURE__*/_jsxs(Grid, {
89
52
  container: true,
90
- alignItems: "center",
53
+ gap: 1,
91
54
  children: [/*#__PURE__*/_jsx(Grid, {
92
55
  item: true,
93
- children: /*#__PURE__*/_jsx(Typography, {
94
- sx: classes.listHeading,
95
- children: "Scheduled:"
96
- })
97
- }), /*#__PURE__*/_jsx(Grid, {
98
- item: true,
56
+ xs: 12,
99
57
  children: /*#__PURE__*/_jsxs(Grid, {
100
58
  container: true,
59
+ alignItems: "center",
101
60
  children: [/*#__PURE__*/_jsx(Grid, {
61
+ item: true,
62
+ children: /*#__PURE__*/_jsx(Typography, {
63
+ sx: classes.listHeading,
64
+ children: "Subject:"
65
+ })
66
+ }), /*#__PURE__*/_jsx(Grid, {
102
67
  item: true,
103
68
  children: /*#__PURE__*/_jsx(Typography, {
104
69
  sx: classes.listSubHeading,
105
70
  style: {
106
- paddingLeft: '5px'
71
+ paddingLeft: '24px'
107
72
  },
108
- children: flow.schedule_type
73
+ children: flow.subject_data
74
+ })
75
+ })]
76
+ })
77
+ }), /*#__PURE__*/_jsx(Grid, {
78
+ item: true,
79
+ xs: 12,
80
+ children: /*#__PURE__*/_jsxs(Grid, {
81
+ container: true,
82
+ alignItems: "center",
83
+ children: [/*#__PURE__*/_jsx(Grid, {
84
+ item: true,
85
+ children: /*#__PURE__*/_jsx(Typography, {
86
+ sx: classes.listHeading,
87
+ children: "Body:"
109
88
  })
110
- }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
89
+ }), /*#__PURE__*/_jsx(Grid, {
111
90
  item: true,
112
- children: /*#__PURE__*/_jsxs(Typography, {
91
+ children: /*#__PURE__*/_jsx(Typography, {
113
92
  sx: classes.listSubHeading,
114
93
  style: {
115
- paddingLeft: '5px'
94
+ paddingLeft: '40px'
116
95
  },
117
- children: [flow.schedule_on, flow.schedule_every]
96
+ children: flow.body_data
97
+ })
98
+ })]
99
+ })
100
+ }), /*#__PURE__*/_jsx(Grid, {
101
+ item: true,
102
+ xs: 12,
103
+ children: /*#__PURE__*/_jsxs(Grid, {
104
+ container: true,
105
+ alignItems: "center",
106
+ children: [/*#__PURE__*/_jsx(Grid, {
107
+ item: true,
108
+ children: /*#__PURE__*/_jsx(Typography, {
109
+ sx: classes.listHeading,
110
+ children: "Scheduled:"
111
+ })
112
+ }), /*#__PURE__*/_jsx(Grid, {
113
+ item: true,
114
+ children: /*#__PURE__*/_jsxs(Grid, {
115
+ container: true,
116
+ children: [/*#__PURE__*/_jsx(Grid, {
117
+ item: true,
118
+ children: /*#__PURE__*/_jsx(Typography, {
119
+ sx: classes.listSubHeading,
120
+ style: {
121
+ paddingLeft: '5px'
122
+ },
123
+ children: flow.schedule_type
124
+ })
125
+ }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
126
+ item: true,
127
+ children: /*#__PURE__*/_jsxs(Typography, {
128
+ sx: classes.listSubHeading,
129
+ style: {
130
+ paddingLeft: '5px'
131
+ },
132
+ children: [flow.schedule_on, flow.schedule_every]
133
+ })
134
+ })]
118
135
  })
119
136
  })]
120
137
  })
121
138
  })]
122
139
  })
140
+ }), /*#__PURE__*/_jsx(Grid, {
141
+ item: true,
142
+ xs: 1,
143
+ children: /*#__PURE__*/_jsx(MoreOptions, {
144
+ classes: classes,
145
+ menus: optionsList,
146
+ selectedFlow: index,
147
+ onMenuClick: onMenuClick
148
+ })
123
149
  })]
124
150
  })
125
- }), /*#__PURE__*/_jsx(Grid, {
126
- item: true,
127
- xs: 1,
128
- children: /*#__PURE__*/_jsx(MoreOptions, {
129
- classes: classes,
130
- menus: optionsList,
131
- selectedFlow: index,
132
- onMenuClick: onMenuClick
133
- })
134
151
  })]
135
152
  })
136
153
  }, `workflow_list_${index}`))
@@ -1,6 +1,5 @@
1
1
  import React, { useState } from "react";
2
2
  import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
3
- import { MoreHorizontal } from "../../../common/iconslist";
4
3
  import Icon from "../../../common/Icon";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,8 +11,8 @@ const FormStyles = () => ({
11
11
  bodyTextArea: {
12
12
  "& textarea": {
13
13
  border: "none",
14
- width: "100%",
15
- maxWidth: "100%",
14
+ width: "95%",
15
+ maxWidth: "95%",
16
16
  outline: "none",
17
17
  padding: "12px"
18
18
  },
@@ -149,7 +149,7 @@ const FormStyles = () => ({
149
149
  borderRadius: "10px"
150
150
  },
151
151
  toolBar: {
152
- padding: "5px"
152
+ padding: "8px 10px 5px 5px"
153
153
  },
154
154
  colorButtons: {
155
155
  "& .buttonsWrpr": {
@@ -205,11 +205,24 @@ const FormStyles = () => ({
205
205
  dialogFooter: {
206
206
  "&.MuiDialogActions-root": {
207
207
  padding: "8px 24px"
208
+ },
209
+ "& .secondaryBtn": {
210
+ marginRight: "0px !important"
211
+ },
212
+ "& .primaryBtn": {
213
+ marginLeft: "15px !important"
208
214
  }
209
215
  },
210
216
  toolButtons: {
211
217
  width: "36px",
212
218
  height: "36px"
219
+ },
220
+ emailIndexCard: {
221
+ borderRadius: "5px 5px 0 0",
222
+ background: "#2563EB",
223
+ color: "#fff",
224
+ padding: "8px",
225
+ marginLeft: "8px"
213
226
  }
214
227
  });
215
228
  export default FormStyles;
@@ -2,7 +2,7 @@ import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, To
2
2
  import React, { useState } from "react";
3
3
  import FormStyles from "./Styles";
4
4
  import Icon from "../../../common/Icon";
5
- import { PlusIcon, RestRight } from "../../../common/iconslist";
5
+ import { RestRight } from "../../../common/iconslist";
6
6
  import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
7
7
  import { AllColors } from "../../Color Picker/ColorButtons";
8
8
  import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
@@ -156,10 +156,8 @@ const UserInputs = props => {
156
156
  item: true,
157
157
  children: [/*#__PURE__*/_jsx(Button, {
158
158
  sx: classes.variableBtn,
159
- variant: "outlined",
160
- size: "small",
161
159
  onClick: handleVariables,
162
- startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
160
+ endIcon: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
163
161
  children: "Variables"
164
162
  }), /*#__PURE__*/_jsx(Menu, {
165
163
  id: "basic-menu",
@@ -9,14 +9,10 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const Uploader = props => {
10
10
  const {
11
11
  value,
12
- data,
13
12
  onUploaded,
14
13
  customProps
15
14
  } = props;
16
15
  const classes = UploadStyles();
17
- const {
18
- key
19
- } = data;
20
16
  const [base64, setBase64] = useState(value?.url);
21
17
  const [uploading, setUploading] = useState(false);
22
18
  const handleChange = async e => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.7.4",
3
+ "version": "1.7.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"