@flozy/editor 1.6.5 → 1.6.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +55 -100
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +3 -7
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -3
- package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +12 -9
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +29 -13
- package/dist/Editor/Elements/Color Picker/Styles.js +4 -4
- package/dist/Editor/Elements/Form/Form.js +23 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +178 -0
- package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +139 -0
- package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +64 -0
- package/dist/Editor/Elements/Form/Workflow/Styles.js +207 -0
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +207 -0
- package/dist/Editor/Elements/Form/Workflow/constant.js +3 -0
- package/dist/Editor/Elements/Form/Workflow/index.js +179 -0
- package/dist/Editor/Elements/Grid/GridItem.js +8 -6
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +1 -1
- package/dist/Editor/Elements/Signature/Signed.js +13 -2
- package/dist/Editor/Elements/SimpleText.js +7 -5
- package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -2
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +0 -1
- package/dist/Editor/Styles/EditorStyles.js +16 -5
- package/dist/Editor/Toolbar/Mini/Styles.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +2 -2
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +4 -14
- package/dist/Editor/Toolbar/Toolbar.js +2 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +2 -1
- package/dist/Editor/common/Icon.js +5 -3
- package/dist/Editor/common/ImageSelector/ImageSelector.js +1 -1
- package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +29 -0
- package/dist/Editor/common/iconslist.js +67 -1
- package/dist/Editor/hooks/useMentions.js +0 -26
- package/dist/Editor/utils/embed.js +14 -10
- package/dist/Editor/utils/emoji.js +0 -1
- package/dist/Editor/utils/form.js +1 -0
- package/dist/Editor/utils/insertAppHeader.js +66 -12
- package/package.json +3 -2
@@ -4,7 +4,6 @@ import { createEditor, Transforms } from "slate";
|
|
4
4
|
import { Slate, Editable, ReactEditor } from "slate-react";
|
5
5
|
import { DndContext, DragOverlay } from "@dnd-kit/core";
|
6
6
|
import { useDebounce } from "use-debounce";
|
7
|
-
// import Toolbar from "./Toolbar/Toolbar";
|
8
7
|
import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
|
9
8
|
import CodeToText from "./Elements/CodeToText/CodeToText";
|
10
9
|
import { draftToSlate } from "./utils/draftToSlate";
|
@@ -21,12 +20,12 @@ import PopupTool from "./Toolbar/PopupTool";
|
|
21
20
|
import "./font.css";
|
22
21
|
import "./Editor.css";
|
23
22
|
import { Box } from "@mui/material";
|
24
|
-
import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
|
25
23
|
import Shorthands from "./common/Shorthands";
|
26
24
|
import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
|
27
25
|
import { EditorProvider } from "./hooks/useMouseMove";
|
28
26
|
import TopBanner from "./Elements/TopBanner/TopBanner";
|
29
27
|
import editorStyles from "./Styles/EditorStyles";
|
28
|
+
import "animate.css";
|
30
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
31
30
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
32
31
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
|
@@ -361,65 +360,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
361
360
|
backgroundSize: "40px 40px",
|
362
361
|
backgroundPosition: "-19px -19px"
|
363
362
|
} : {};
|
364
|
-
const
|
365
|
-
|
366
|
-
|
367
|
-
} else {
|
368
|
-
setToolbarShow(!toolbarShow);
|
369
|
-
}
|
370
|
-
};
|
371
|
-
const getToolbarShowOpenIcon = type => {
|
372
|
-
switch (toolbarOptions?.toolbarPosition) {
|
373
|
-
case "top-left":
|
374
|
-
if (type === "open") {
|
375
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
|
376
|
-
}
|
377
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
|
378
|
-
case "top-right":
|
379
|
-
if (type === "open") {
|
380
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
|
381
|
-
}
|
382
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
|
383
|
-
case "left-top":
|
384
|
-
if (type === "open") {
|
385
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
|
386
|
-
}
|
387
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
|
388
|
-
case "left-bottom":
|
389
|
-
if (type === "open") {
|
390
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
|
391
|
-
}
|
392
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
|
393
|
-
case "right-top":
|
394
|
-
if (type === "open") {
|
395
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
|
396
|
-
}
|
397
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
|
398
|
-
case "right-bottom":
|
399
|
-
if (type === "open") {
|
400
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
|
401
|
-
}
|
402
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
|
403
|
-
case "bottom-left":
|
404
|
-
if (type === "open") {
|
405
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
|
406
|
-
}
|
407
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
|
408
|
-
case "bottom-right":
|
409
|
-
if (type === "open") {
|
410
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
|
411
|
-
}
|
412
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
|
413
|
-
default:
|
414
|
-
if (type === "open") {
|
415
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
|
416
|
-
}
|
417
|
-
return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
|
418
|
-
}
|
363
|
+
const hasTopBanner = () => {
|
364
|
+
const tb = editor.children[0];
|
365
|
+
return tb?.type === "topbanner" ? tb : null;
|
419
366
|
};
|
420
367
|
const renderTopBanner = () => {
|
421
|
-
const tb =
|
422
|
-
return tb
|
368
|
+
const tb = hasTopBanner();
|
369
|
+
return tb ? /*#__PURE__*/_jsx(TopBanner, {
|
423
370
|
element: tb,
|
424
371
|
editor: editor,
|
425
372
|
customProps: customProps
|
@@ -446,51 +393,59 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
446
393
|
onDragStart: handleDragStart,
|
447
394
|
onDragEnd: handleDragEnd,
|
448
395
|
children: [/*#__PURE__*/_jsx(Overlay, {
|
449
|
-
children: /*#__PURE__*/
|
396
|
+
children: /*#__PURE__*/_jsx(Box, {
|
397
|
+
className: `${hasTopBanner() ? "has-topbanner" : ""}`,
|
450
398
|
sx: classes.slateWrapper,
|
451
399
|
id: "slate-wrapper-scroll-container",
|
452
|
-
children:
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
className:
|
400
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
401
|
+
component: "div",
|
402
|
+
className: "max-content",
|
403
|
+
children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
|
404
|
+
className: "scroll-area",
|
457
405
|
style: {
|
458
|
-
backgroundColor: pageColor || "#FFF"
|
459
|
-
paddingLeft: `${bannerSpacing?.left || 12}px`,
|
460
|
-
paddingRight: `${bannerSpacing?.right || 12}px`,
|
461
|
-
paddingTop: `${bannerSpacing?.top}px`,
|
462
|
-
paddingBottom: `${bannerSpacing?.bottom}px`,
|
463
|
-
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
464
|
-
// width: viewport.w ? `${viewport.w}px` : "100%",
|
465
|
-
height: viewport.h ? `${viewport.h}px` : `100%`,
|
466
|
-
alignSelf: "center",
|
467
|
-
transformOrigin: "left top",
|
468
|
-
transition: "all 0.3s",
|
469
|
-
minHeight: "87%"
|
406
|
+
backgroundColor: pageColor || "#FFF"
|
470
407
|
},
|
471
|
-
children:
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
408
|
+
children: /*#__PURE__*/_jsxs("div", {
|
409
|
+
ref: editorWrapper,
|
410
|
+
className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
|
411
|
+
style: {
|
412
|
+
backgroundColor: "transparent",
|
413
|
+
paddingLeft: `${bannerSpacing?.left || 12}px`,
|
414
|
+
paddingRight: `${bannerSpacing?.right || 12}px`,
|
415
|
+
paddingTop: `${bannerSpacing?.top}px`,
|
416
|
+
paddingBottom: `${bannerSpacing?.bottom}px`,
|
417
|
+
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
418
|
+
// width: viewport.w ? `${viewport.w}px` : "100%",
|
419
|
+
height: viewport.h ? `${viewport.h}px` : `100%`,
|
420
|
+
alignSelf: "center",
|
421
|
+
transformOrigin: "left top",
|
422
|
+
transition: "all 0.3s",
|
423
|
+
minHeight: "87%"
|
424
|
+
},
|
425
|
+
children: [/*#__PURE__*/_jsx(PopupTool, {
|
426
|
+
onDrawerOpen: onDrawerOpen
|
427
|
+
}), /*#__PURE__*/_jsx(Editable, {
|
428
|
+
className: "innert-editor-textbox",
|
429
|
+
readOnly: isReadOnly,
|
430
|
+
renderElement: renderElement,
|
431
|
+
renderLeaf: renderLeaf,
|
432
|
+
onKeyDown: onKeyDown
|
433
|
+
}), /*#__PURE__*/_jsx(MentionsPopup, {
|
434
|
+
ref: mentionsRef,
|
435
|
+
mentions: mentions,
|
436
|
+
setMentions: setMentions,
|
437
|
+
editor: editor,
|
438
|
+
target: target,
|
439
|
+
index: index,
|
440
|
+
chars: chars,
|
441
|
+
type: type
|
442
|
+
})]
|
443
|
+
})
|
444
|
+
}), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
|
445
|
+
customProps: customProps,
|
446
|
+
toolbarOptions: toolbarOptions
|
447
|
+
}) : null]
|
448
|
+
})
|
494
449
|
})
|
495
450
|
}), /*#__PURE__*/_jsx(DragOverlay, {
|
496
451
|
className: "drag-overlay",
|
package/dist/Editor/Editor.css
CHANGED
@@ -176,14 +176,14 @@ blockquote {
|
|
176
176
|
|
177
177
|
.accordion-title {
|
178
178
|
position: relative;
|
179
|
-
background-color:
|
179
|
+
background-color: transparent;
|
180
180
|
display: flex;
|
181
181
|
align-items: center;
|
182
182
|
}
|
183
183
|
|
184
184
|
.accordion-content {
|
185
185
|
padding-left: 13px;
|
186
|
-
background-color:
|
186
|
+
background-color: transparent;
|
187
187
|
border-left: 1px solid #ccc;
|
188
188
|
margin-left: 14px;
|
189
189
|
}
|
@@ -473,10 +473,6 @@ blockquote {
|
|
473
473
|
width: 100% !important;
|
474
474
|
}
|
475
475
|
|
476
|
-
.grid-item > div {
|
477
|
-
text-align: center;
|
478
|
-
}
|
479
|
-
|
480
476
|
.page-builder .editor-wrapper {
|
481
477
|
max-width: 100% !important;
|
482
478
|
margin-top: 0px !important;
|
@@ -484,7 +480,7 @@ blockquote {
|
|
484
480
|
}
|
485
481
|
|
486
482
|
.embed {
|
487
|
-
justify-content: center;
|
483
|
+
justify-content: center;
|
488
484
|
}
|
489
485
|
|
490
486
|
.embed img {
|
@@ -74,7 +74,8 @@ function AppHeader(props) {
|
|
74
74
|
contentEditable: false,
|
75
75
|
style: {
|
76
76
|
top: "0px",
|
77
|
-
right: "0px"
|
77
|
+
right: "0px",
|
78
|
+
zIndex: 1000
|
78
79
|
},
|
79
80
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
80
81
|
title: "App Header Settings",
|
@@ -204,11 +205,14 @@ function AppHeader(props) {
|
|
204
205
|
paddingLeft: `${left}px`,
|
205
206
|
paddingRight: `${right}px`,
|
206
207
|
paddingTop: `${top}px`,
|
207
|
-
paddingBottom: `${bottom}px
|
208
|
+
paddingBottom: `${bottom}px`,
|
209
|
+
zIndex: 999
|
208
210
|
},
|
209
211
|
children: /*#__PURE__*/_jsxs(Toolbar, {
|
210
212
|
style: {
|
211
|
-
flexDirection: isLogoRight ? "row-reverse" : "row"
|
213
|
+
flexDirection: isLogoRight ? "row-reverse" : "row",
|
214
|
+
paddingLeft: "0px",
|
215
|
+
paddingRight: "0px"
|
212
216
|
},
|
213
217
|
children: [/*#__PURE__*/_jsx(IconButton, {
|
214
218
|
color: "inherit",
|
@@ -322,6 +326,9 @@ function AppHeader(props) {
|
|
322
326
|
}), /*#__PURE__*/_jsx(ToolBar, {})]
|
323
327
|
}), /*#__PURE__*/_jsx("div", {
|
324
328
|
contentEditable: false,
|
329
|
+
style: {
|
330
|
+
display: "none"
|
331
|
+
},
|
325
332
|
children: children
|
326
333
|
})]
|
327
334
|
}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
|
@@ -1,22 +1,25 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton, Tooltip } from "@mui/material";
|
3
2
|
import { insertAppHeader } from "../../utils/insertAppHeader";
|
4
|
-
import
|
3
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
4
|
+
import Icon from "../../common/Icon";
|
5
|
+
import insertNewLine from "../../utils/insertNewLine";
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
7
|
const AppHeaderButton = props => {
|
7
8
|
const {
|
8
|
-
editor
|
9
|
+
editor,
|
10
|
+
icoBtnType
|
9
11
|
} = props;
|
10
12
|
const handleClick = () => {
|
11
13
|
insertAppHeader(editor, {});
|
14
|
+
insertNewLine(editor);
|
12
15
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
16
|
+
return /*#__PURE__*/_jsx(ToolbarIcon, {
|
14
17
|
title: "App Header",
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
18
|
+
onClick: handleClick,
|
19
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
20
|
+
icon: "appHeader"
|
21
|
+
}),
|
22
|
+
icoBtnType: icoBtnType
|
20
23
|
});
|
21
24
|
};
|
22
25
|
export default AppHeaderButton;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
2
|
import { Transforms, Editor } from "slate";
|
3
|
-
import { ReactEditor,
|
3
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
4
|
import Slider from "react-slick";
|
5
5
|
import "./slick-theme.min.css";
|
6
6
|
import "./slick.min.css";
|
@@ -46,25 +46,41 @@ const SingleColorButton = ({
|
|
46
46
|
export const AllColors = props => {
|
47
47
|
const {
|
48
48
|
classes,
|
49
|
+
open,
|
50
|
+
anchorEl,
|
51
|
+
onClose,
|
49
52
|
onSelect,
|
50
53
|
activeColor
|
51
54
|
} = props;
|
52
55
|
const all = ColorChunks([]);
|
53
|
-
return /*#__PURE__*/_jsx(
|
54
|
-
|
55
|
-
|
56
|
+
return /*#__PURE__*/_jsx(Popover, {
|
57
|
+
open: open,
|
58
|
+
anchorEl: anchorEl,
|
59
|
+
anchorOrigin: {
|
60
|
+
vertical: "bottom",
|
61
|
+
horizontal: "center"
|
62
|
+
},
|
63
|
+
transformOrigin: {
|
64
|
+
vertical: "top",
|
65
|
+
horizontal: "center"
|
66
|
+
},
|
67
|
+
onClose: onClose,
|
56
68
|
children: /*#__PURE__*/_jsx(Box, {
|
57
|
-
|
69
|
+
component: "div",
|
70
|
+
sx: classes.allColor,
|
58
71
|
children: /*#__PURE__*/_jsx(Box, {
|
59
|
-
|
60
|
-
children:
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
72
|
+
sx: classes.allColorInner,
|
73
|
+
children: /*#__PURE__*/_jsx(Box, {
|
74
|
+
className: "buttonsWrpr",
|
75
|
+
children: all.map((m, i) => {
|
76
|
+
return /*#__PURE__*/_jsx(SingleColorButton, {
|
77
|
+
crs: m,
|
78
|
+
index: i,
|
79
|
+
handleSelect: onSelect,
|
80
|
+
classes: classes,
|
81
|
+
activeColor: activeColor
|
82
|
+
}, `si_btn_row1_${m}_${i}`);
|
83
|
+
})
|
68
84
|
})
|
69
85
|
})
|
70
86
|
})
|
@@ -16,8 +16,8 @@ const ColorPickerStyles = () => ({
|
|
16
16
|
"&:before": {
|
17
17
|
content: '" "',
|
18
18
|
position: "absolute",
|
19
|
-
top: "-
|
20
|
-
left: "-
|
19
|
+
top: "-2px",
|
20
|
+
left: "-2px",
|
21
21
|
width: "calc(100% + 4px)",
|
22
22
|
height: "calc(100% + 4px)",
|
23
23
|
border: "3px solid blue",
|
@@ -29,12 +29,12 @@ const ColorPickerStyles = () => ({
|
|
29
29
|
width: "100%",
|
30
30
|
padding: "4px",
|
31
31
|
display: "flex",
|
32
|
-
|
32
|
+
justifyContent: "center",
|
33
33
|
alignItems: "center",
|
34
34
|
flexDirection: "column",
|
35
35
|
"& .buttonsWrpr": {
|
36
36
|
display: "flex",
|
37
|
-
|
37
|
+
justifyContent: "center",
|
38
38
|
alignItems: "center"
|
39
39
|
},
|
40
40
|
".more-btn-cbs": {
|
@@ -5,11 +5,13 @@ import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mu
|
|
5
5
|
import DeleteIcon from "@mui/icons-material/Delete";
|
6
6
|
import BackupIcon from "@mui/icons-material/Backup";
|
7
7
|
import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
|
8
|
+
import SendTimeExtensionIcon from '@mui/icons-material/SendTimeExtension';
|
8
9
|
import FormPopup from "./FormPopup";
|
9
10
|
import ButtonPopup from "../Button/ButtonPopup";
|
10
11
|
import { formField } from "../../utils/formfield";
|
11
12
|
import { formSubmit } from "../../service/formSubmit";
|
12
13
|
import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
|
14
|
+
import Workflow from "./Workflow";
|
13
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
17
|
const Form = props => {
|
@@ -57,6 +59,7 @@ const Form = props => {
|
|
57
59
|
const editor = useSlateStatic();
|
58
60
|
const formEle = useRef();
|
59
61
|
const [openSetttings, setOpenSettings] = useState(false);
|
62
|
+
const [openWorkflow, setOpenWorkflow] = useState(false);
|
60
63
|
const [editButton, setEditButton] = useState(false);
|
61
64
|
const [anchorEl, setAnchorEl] = useState(null);
|
62
65
|
const [loading, setLoading] = useState(false);
|
@@ -88,6 +91,7 @@ const Form = props => {
|
|
88
91
|
response,
|
89
92
|
form_data: {
|
90
93
|
email: element?.email,
|
94
|
+
form_workflow: element?.workflow,
|
91
95
|
save_response: element?.saveResponse
|
92
96
|
}
|
93
97
|
};
|
@@ -132,6 +136,12 @@ const Form = props => {
|
|
132
136
|
});
|
133
137
|
}
|
134
138
|
};
|
139
|
+
const onWorkflow = () => {
|
140
|
+
setOpenWorkflow(true);
|
141
|
+
};
|
142
|
+
const closeWorkflow = () => {
|
143
|
+
setOpenWorkflow(false);
|
144
|
+
};
|
135
145
|
const onSaveButtonSettings = data => {
|
136
146
|
onSave({
|
137
147
|
buttonProps: {
|
@@ -208,6 +218,13 @@ const Form = props => {
|
|
208
218
|
className: "mr",
|
209
219
|
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
210
220
|
})
|
221
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
222
|
+
title: "Workflow",
|
223
|
+
arrow: true,
|
224
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
225
|
+
onClick: onWorkflow,
|
226
|
+
children: /*#__PURE__*/_jsx(SendTimeExtensionIcon, {})
|
227
|
+
})
|
211
228
|
})]
|
212
229
|
});
|
213
230
|
};
|
@@ -314,7 +331,12 @@ const Form = props => {
|
|
314
331
|
onSave: onSave,
|
315
332
|
onClose: onClose,
|
316
333
|
customProps: customProps
|
317
|
-
}) : null,
|
334
|
+
}) : null, /*#__PURE__*/_jsx(Workflow, {
|
335
|
+
openWorkflow: openWorkflow,
|
336
|
+
element: element,
|
337
|
+
closeWorkflow: closeWorkflow,
|
338
|
+
onSave: onSave
|
339
|
+
}), !readOnly ? /*#__PURE__*/_jsxs(Menu, {
|
318
340
|
className: "editor-btn-options",
|
319
341
|
open: anchorEl !== null,
|
320
342
|
anchorEl: anchorEl,
|
@@ -0,0 +1,178 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField } from "@mui/material";
|
3
|
+
import FormStyles from "./Styles";
|
4
|
+
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
5
|
+
import UserInputs from "./UserInputs";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const FormWorkflow = props => {
|
9
|
+
const {
|
10
|
+
schedule,
|
11
|
+
element,
|
12
|
+
setSchedule,
|
13
|
+
scheduleEvery,
|
14
|
+
setScheduleEvery,
|
15
|
+
currentInstant,
|
16
|
+
scheduleOn,
|
17
|
+
setScheduleOn,
|
18
|
+
subject,
|
19
|
+
setSubject,
|
20
|
+
bodyData,
|
21
|
+
setBodyData,
|
22
|
+
handleSelectedVariables,
|
23
|
+
handleInputReset
|
24
|
+
} = props;
|
25
|
+
const classes = FormStyles();
|
26
|
+
const handleBodyField = event => {
|
27
|
+
setBodyData(event.target.value);
|
28
|
+
};
|
29
|
+
const handleScheduleInstant = event => {
|
30
|
+
setScheduleEvery(event.target.value);
|
31
|
+
};
|
32
|
+
const onHandleChange = event => {
|
33
|
+
setScheduleOn(event.target.value);
|
34
|
+
};
|
35
|
+
const onSubjectChange = event => {
|
36
|
+
setSubject(event.target.value);
|
37
|
+
};
|
38
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
39
|
+
container: true,
|
40
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
41
|
+
item: true,
|
42
|
+
xs: 12,
|
43
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
44
|
+
sx: classes.subHeadings,
|
45
|
+
children: "Set Timings *"
|
46
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
47
|
+
sx: classes.infoText,
|
48
|
+
children: "Invitees will receive reminder emails at specified times before scheduled events"
|
49
|
+
})]
|
50
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
51
|
+
item: true,
|
52
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
53
|
+
container: true,
|
54
|
+
direction: "row",
|
55
|
+
alignItems: "flex-end",
|
56
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
57
|
+
item: true,
|
58
|
+
sx: classes.radioBtn,
|
59
|
+
children: /*#__PURE__*/_jsxs(RadioGroup, {
|
60
|
+
name: "set timing",
|
61
|
+
value: schedule,
|
62
|
+
defaultValue: 1,
|
63
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
64
|
+
value: 'immediately',
|
65
|
+
label: "Immediately",
|
66
|
+
onChange: () => {
|
67
|
+
setSchedule('immediately');
|
68
|
+
},
|
69
|
+
control: /*#__PURE__*/_jsx(Radio, {
|
70
|
+
size: "small"
|
71
|
+
})
|
72
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
73
|
+
value: 'after',
|
74
|
+
label: "After",
|
75
|
+
onChange: () => {
|
76
|
+
setSchedule('after');
|
77
|
+
},
|
78
|
+
control: /*#__PURE__*/_jsx(Radio, {
|
79
|
+
size: "small"
|
80
|
+
})
|
81
|
+
})]
|
82
|
+
})
|
83
|
+
}), schedule === 'after' && /*#__PURE__*/_jsx(Grid, {
|
84
|
+
item: true,
|
85
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
86
|
+
container: true,
|
87
|
+
gap: 2,
|
88
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
89
|
+
item: true,
|
90
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
91
|
+
fullWidth: true,
|
92
|
+
size: "small",
|
93
|
+
children: /*#__PURE__*/_jsx(Select, {
|
94
|
+
value: scheduleOn,
|
95
|
+
onChange: onHandleChange,
|
96
|
+
sx: classes.select,
|
97
|
+
IconComponent: KeyboardArrowDownIcon,
|
98
|
+
children: currentInstant.map((ele, index) => /*#__PURE__*/_jsx(MenuItem, {
|
99
|
+
sx: classes.selectList,
|
100
|
+
value: ele,
|
101
|
+
children: ele
|
102
|
+
}, `${ele}_${index}`))
|
103
|
+
})
|
104
|
+
})
|
105
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
106
|
+
item: true,
|
107
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
108
|
+
fullWidth: true,
|
109
|
+
size: "small",
|
110
|
+
children: /*#__PURE__*/_jsxs(Select, {
|
111
|
+
value: scheduleEvery,
|
112
|
+
onChange: handleScheduleInstant,
|
113
|
+
sx: classes.select,
|
114
|
+
IconComponent: KeyboardArrowDownIcon,
|
115
|
+
style: {
|
116
|
+
minWidth: '160px'
|
117
|
+
},
|
118
|
+
children: [/*#__PURE__*/_jsx(MenuItem, {
|
119
|
+
sx: classes.selectList,
|
120
|
+
value: 'min',
|
121
|
+
children: "Minutes"
|
122
|
+
}), /*#__PURE__*/_jsx(MenuItem, {
|
123
|
+
sx: classes.selectList,
|
124
|
+
value: 'hr',
|
125
|
+
children: "Hours"
|
126
|
+
}), /*#__PURE__*/_jsx(MenuItem, {
|
127
|
+
sx: classes.selectList,
|
128
|
+
value: 'day',
|
129
|
+
children: "Day"
|
130
|
+
})]
|
131
|
+
})
|
132
|
+
})
|
133
|
+
})]
|
134
|
+
})
|
135
|
+
})]
|
136
|
+
})
|
137
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
138
|
+
item: true,
|
139
|
+
xs: 12,
|
140
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
141
|
+
sx: classes.formHeadings,
|
142
|
+
children: "Subject *"
|
143
|
+
}), /*#__PURE__*/_jsx(TextField, {
|
144
|
+
multiline: true,
|
145
|
+
margin: "none",
|
146
|
+
value: subject,
|
147
|
+
onChange: onSubjectChange,
|
148
|
+
fullWidth: true,
|
149
|
+
maxRows: 5,
|
150
|
+
sx: {
|
151
|
+
"& fieldset": {
|
152
|
+
border: '1px solid #6F6F6F33',
|
153
|
+
borderRadius: "8px"
|
154
|
+
},
|
155
|
+
"& textarea": {
|
156
|
+
fontSize: '16px',
|
157
|
+
fontWeight: 500
|
158
|
+
}
|
159
|
+
}
|
160
|
+
})]
|
161
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
162
|
+
item: true,
|
163
|
+
xs: 12,
|
164
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
165
|
+
sx: classes.formHeadings,
|
166
|
+
children: "Body *"
|
167
|
+
}), /*#__PURE__*/_jsx(UserInputs, {
|
168
|
+
element: element,
|
169
|
+
type: 2,
|
170
|
+
subject: bodyData,
|
171
|
+
handleField: handleBodyField,
|
172
|
+
handleSelectedVariables: handleSelectedVariables,
|
173
|
+
handleInputReset: handleInputReset
|
174
|
+
})]
|
175
|
+
})]
|
176
|
+
});
|
177
|
+
};
|
178
|
+
export default FormWorkflow;
|