@flozy/editor 2.1.0 → 2.1.2

package/dist/Editor/CommonEditor.js

@@ -2,7 +2,7 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
-import { useDebounce } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
@@ -30,6 +30,8 @@ import "animate.css";
 import decorators from "./utils/Decorators";
 import useElement from "./utils/customHooks/useElement";
 import { getTRBLBreakPoints } from "./helper/theme";
+import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
+import useWindowResize from "./hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -93,6 +95,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     w: null,
     h: null
   });
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [isTextSelected, setIsTextSelected] = useState(false);
+  const [size] = useWindowResize();
   const {
     needDotsBG,
     footer,
@@ -341,6 +346,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundSize: "40px 40px",
     backgroundPosition: "-19px -19px"
   } : {};
+  const handleScrollStop = useDebouncedCallback(() => {
+    setIsScrolling(false);
+  }, 200);
+  const handleScroll = () => {
+    setIsScrolling(true);
+    handleScrollStop();
+  };
   const hasTopBanner = () => {
     const tb = editor.children[0];
     return tb?.type === "topbanner" ? tb : null;
@@ -353,6 +365,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       customProps: customProps
     }) : null;
   };
+  const hideMiniToolBar = useMemo(() => {
+    if (readOnly) {
+      return true;
+    }
+
+    // if (size?.device === "xs" && isTextSelected) {
+    //   return true;
+    // }
+  }, [readOnly, isTextSelected]);
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -375,18 +396,24 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: {
                   background: pageColor || "",
                   color: pageTextColor || ""
                 },
+                onClick: e => {
+                  handleInsertLastElement(e, editor);
+                },
+                onScroll: handleScroll,
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
+                  "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
+                    "data-info": outsideEditorClickLabel,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
                       ref: editorWrapper,
@@ -404,9 +431,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         minHeight: "87%",
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
+                      "data-info": outsideEditorClickLabel,
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                         onDrawerOpen: onDrawerOpen,
-                        theme: theme
+                        theme: theme,
+                        setIsTextSelected: setIsTextSelected
                       }) : null, /*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
@@ -426,7 +455,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         theme: theme
                       }) : null]
                     })
-                  }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
+                  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions,
                     theme: theme
@@ -434,9 +463,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     sx: {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
-                      paddingBottom: "12px"
+                      paddingBottom: hideMiniToolBar ? "0px" : "12px"
                     },
                     align: "center",
+                    "data-info": outsideEditorClickLabel,
                     children: footer
                   })]
                 })

package/dist/Editor/Elements/Button/EditorButton.js

@@ -5,11 +5,11 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import { windowVar } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -53,6 +53,7 @@ const EditorButton = props => {
   } = buttonLink || {};
   const isTrigger = linkType === "actionTrigger";
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
+  windowVar.lastButtonProps = element;
   const onClick = async e => {
     if (readOnly) {
       if (isTrigger) {

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -3,6 +3,7 @@ import { Box, IconButton, Popover } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
+import ColorPicker from "./colorPicker.svg";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 let c = [];
@@ -104,7 +105,11 @@ const ColorButtons = props => {
     id,
     onSelect,
     classes,
-    activeColor
+    activeColor,
+    forMiniTool,
+    openColorTool,
+    onClose,
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -114,6 +119,9 @@ const ColorButtons = props => {
   };
   const handleClose = () => {
     setAnchorEl(null);
+    if (onClose) {
+      onClose();
+    }
   };
   const handleSelect = color => () => {
     onSelect(color);
@@ -121,7 +129,7 @@ const ColorButtons = props => {
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
-    children: [/*#__PURE__*/_jsx(Box, {
+    children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
       children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -134,9 +142,9 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsx(Popover, {
-      open: open,
-      anchorEl: anchorEl,
+    }), /*#__PURE__*/_jsxs(Popover, {
+      open: open || openColorTool,
+      anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
       anchorOrigin: {
         vertical: "bottom",
@@ -148,7 +156,7 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: /*#__PURE__*/_jsx(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
         children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -160,7 +168,13 @@ const ColorButtons = props => {
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
         })
-      })
+      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+        onClick: onColorPickerClick,
+        children: /*#__PURE__*/_jsx("img", {
+          src: ColorPicker,
+          alt: "color wheel"
+        })
+      }) : null]
     })]
   });
 };

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -16,14 +16,18 @@ const DEFAULT_COLOR = {
   color: "#000000",
   bgcolor: "#FFFFFF"
 };
-const ColorPicker = ({
-  id,
-  format,
-  editor,
-  showHex,
-  title,
-  classes
-}) => {
+const ColorPicker = props => {
+  const {
+    id,
+    format,
+    editor,
+    showHex,
+    title,
+    classes,
+    forMiniTool,
+    openColorTool,
+    closeColorTool
+  } = props;
   const {
     theme
   } = useEditorContext();
@@ -55,7 +59,7 @@ const ColorPicker = ({
   };
   const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
       title: title,
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
@@ -73,7 +77,11 @@ const ColorPicker = ({
       classes: pickerStyles,
       onSelect: onSelect,
       activeColor: activeColor,
-      id: id
+      id: id,
+      forMiniTool: forMiniTool,
+      openColorTool: openColorTool,
+      onClose: closeColorTool,
+      onColorPickerClick: onOpen
     }, id), /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,

package/dist/Editor/Elements/Color Picker/colorPicker.svg

@@ -0,0 +1,14 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="11.5" fill="#E9F3FE" stroke="url(#paint0_linear_15513_22074)" stroke-width="3"/>
+<path d="M13.168 6C13.168 6 8 11.9233 8 14.8319C8 18.0176 10.6552 20 13.168 20C15.8326 20 18.3359 17.9129 18.3359 14.8319C18.3359 11.9233 13.168 6 13.168 6ZM16.7402 15.7079C16.4528 17.3396 15.0339 18.0548 13.8992 18.0548C13.8071 18.0543 17.1447 16.6134 15.8583 12.3032C16.5362 13.0678 16.9627 14.4448 16.7402 15.7079Z" fill="#778599"/>
+<defs>
+<linearGradient id="paint0_linear_15513_22074" x1="20.9965" y1="23.8333" x2="5.28819" y2="2.16667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7025EB"/>
+<stop offset="0.170377" stop-color="#30C8E9"/>
+<stop offset="0.351324" stop-color="#2967F0"/>
+<stop offset="0.537615" stop-color="#DE1E1E"/>
+<stop offset="0.754249" stop-color="#EECE28"/>
+<stop offset="1" stop-color="#64EA61"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/Editor/Elements/Embed/Image.js

@@ -30,7 +30,9 @@ const Image = ({
     width: oldWidth,
     xsHidden,
     objectFit,
-    frame = null
+    frame = null,
+    webAddress,
+    isNewTab
   } = element;
   const {
     readOnly
@@ -86,6 +88,14 @@ const Image = ({
       anchor: Editor.start(editor, path),
       focus: Editor.end(editor, path)
     });
+    if (webAddress) {
+      const refUrl = webAddress ? webAddress.includes("http") ? webAddress : `//${webAddress}` : "Link";
+      if (isNewTab) {
+        window.open(refUrl, "_blank").focus();
+      } else {
+        window.location.href = refUrl;
+      }
+    }
   };
   const onSettings = () => {
     setOpenSettings(true);
@@ -149,7 +159,8 @@ const Image = ({
         objectFit: "cover",
         boxShadow: boxShadow || "none",
         height: objectFit ? "100%" : "auto",
-        opacity: frame ? 0 : 1
+        opacity: frame ? 0 : 1,
+        cursor: webAddress ? "pointer" : ""
       },
       alt: alt,
       src: url,

package/dist/Editor/Elements/Form/Form.js

@@ -71,10 +71,10 @@ const Form = props => {
       const formData = new FormData(formEle?.current);
       setLoading(true);
       let response = {};
-      const emailObject = getFieldProps("field_type", "email");
       let user_email = "";
       const validations = [];
       for (let pair of formData.entries()) {
+        const emailObject = getFieldProps("element", "email");
         if (emailObject?.name === pair[0]) {
           user_email = pair[1];
         }

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -26,8 +26,12 @@ const FormWorkflow = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const variables = element?.children;
   const type = 1;
-  const handleBodyField = event => {
-    setBodyData(event.target.value);
+  const handleBodyField = data => {
+    // setBodyData(data);
+  };
+  const onSaveBodyField = data => {
+    let bodyData = typeof data === 'string' ? JSON.parse(data) : data;
+    setBodyData(bodyData);
   };
   const handleScheduleInstant = event => {
     setScheduleEvery(event.target.value);
@@ -67,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -80,7 +84,16 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "after",
+              label: "After",
+              onChange: () => {
+                setSchedule("after");
+              },
+              control: /*#__PURE__*/_jsx(Radio, {
+                size: "small"
+              })
+            })]
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -149,6 +162,7 @@ const FormWorkflow = props => {
         onChange: onSubjectChange,
         fullWidth: true,
         maxRows: 5,
+        className: "workflowSubject",
         sx: {
           "& fieldset": {
             border: "1px solid #6F6F6F33",
@@ -210,6 +224,7 @@ const FormWorkflow = props => {
         type: 2,
         subject: bodyData,
         handleField: handleBodyField,
+        onSave: onSaveBodyField,
         handleSelectedVariables: handleSelectedVariables,
         handleInputReset: handleInputReset
       })]

package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js

@@ -22,135 +22,138 @@ const ListWorkflow = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     gap: 2,
-    children: workflow?.map((flow, index) => /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          sx: classes.emailIndexCard,
-          children: /*#__PURE__*/_jsxs(Typography, {
-            sx: {
-              fontSize: "12px",
-              fontWeight: 600
-            },
-            children: ["Email ", index + 1]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            sx: classes.flowListCard,
-            alignItems: "center",
-            justifyContent: "space-between",
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 11,
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                gap: 1,
-                children: [/*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  xs: 12,
-                  children: /*#__PURE__*/_jsxs(Grid, {
-                    container: true,
-                    alignItems: "center",
-                    children: [/*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        sx: classes.listHeading,
-                        children: "Subject:"
-                      })
-                    }), /*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        sx: classes.listSubHeading,
-                        style: {
-                          paddingLeft: '24px'
-                        },
-                        children: flow.subject_data
-                      })
-                    })]
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  xs: 12,
-                  children: /*#__PURE__*/_jsxs(Grid, {
-                    container: true,
-                    alignItems: "center",
-                    children: [/*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        sx: classes.listHeading,
-                        children: "Body:"
-                      })
-                    }), /*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        sx: classes.listSubHeading,
-                        style: {
-                          paddingLeft: '40px'
-                        },
-                        children: flow.body_data
-                      })
-                    })]
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  xs: 12,
-                  children: /*#__PURE__*/_jsxs(Grid, {
-                    container: true,
-                    alignItems: "center",
-                    children: [/*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        sx: classes.listHeading,
-                        children: "Scheduled:"
-                      })
-                    }), /*#__PURE__*/_jsx(Grid, {
-                      item: true,
-                      children: /*#__PURE__*/_jsxs(Grid, {
-                        container: true,
-                        children: [/*#__PURE__*/_jsx(Grid, {
-                          item: true,
-                          children: /*#__PURE__*/_jsx(Typography, {
-                            sx: classes.listSubHeading,
-                            style: {
-                              paddingLeft: '5px'
-                            },
-                            children: flow.schedule_type
-                          })
-                        }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
-                          item: true,
-                          children: /*#__PURE__*/_jsxs(Typography, {
-                            sx: classes.listSubHeading,
-                            style: {
-                              paddingLeft: '5px'
-                            },
-                            children: [flow.schedule_on, flow.schedule_every]
-                          })
-                        })]
-                      })
-                    })]
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 1,
-              children: /*#__PURE__*/_jsx(MoreOptions, {
-                classes: classes,
-                menus: optionsList,
-                selectedFlow: index,
-                onMenuClick: onMenuClick
-              })
-            })]
-          })
-        })]
-      })
-    }, `workflow_list_${index}`))
+    children: workflow?.map((flow, index) => {
+      const bodyData = flow?.body_data;
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            sx: classes.emailIndexCard,
+            children: /*#__PURE__*/_jsxs(Typography, {
+              sx: {
+                fontSize: "12px",
+                fontWeight: 600
+              },
+              children: ["Email ", index + 1]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 12,
+            children: /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              sx: classes.flowListCard,
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                xs: 11,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  gap: 1,
+                  children: [/*#__PURE__*/_jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/_jsxs(Grid, {
+                      container: true,
+                      alignItems: "center",
+                      children: [/*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsx(Typography, {
+                          sx: classes.listHeading,
+                          children: "Subject:"
+                        })
+                      }), /*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsx(Typography, {
+                          sx: classes.listSubHeading,
+                          style: {
+                            paddingLeft: '24px'
+                          },
+                          children: flow.subject_data
+                        })
+                      })]
+                    })
+                  }), /*#__PURE__*/_jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/_jsxs(Grid, {
+                      container: true,
+                      alignItems: "center",
+                      children: [/*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsx(Typography, {
+                          sx: classes.listHeading,
+                          children: "Body:"
+                        })
+                      }), /*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsx(Typography, {
+                          sx: classes.listSubHeading,
+                          style: {
+                            paddingLeft: '40px'
+                          },
+                          children: typeof bodyData === 'string' ? bodyData : bodyData[0]?.children[0]?.text
+                        })
+                      })]
+                    })
+                  }), /*#__PURE__*/_jsx(Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/_jsxs(Grid, {
+                      container: true,
+                      alignItems: "center",
+                      children: [/*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsx(Typography, {
+                          sx: classes.listHeading,
+                          children: "Scheduled:"
+                        })
+                      }), /*#__PURE__*/_jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/_jsxs(Grid, {
+                          container: true,
+                          children: [/*#__PURE__*/_jsx(Grid, {
+                            item: true,
+                            children: /*#__PURE__*/_jsx(Typography, {
+                              sx: classes.listSubHeading,
+                              style: {
+                                paddingLeft: '5px'
+                              },
+                              children: flow.schedule_type
+                            })
+                          }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
+                            item: true,
+                            children: /*#__PURE__*/_jsxs(Typography, {
+                              sx: classes.listSubHeading,
+                              style: {
+                                paddingLeft: '5px'
+                              },
+                              children: [flow.schedule_on, flow.schedule_every]
+                            })
+                          })]
+                        })
+                      })]
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(Grid, {
+                item: true,
+                xs: 1,
+                children: /*#__PURE__*/_jsx(MoreOptions, {
+                  classes: classes,
+                  menus: optionsList,
+                  selectedFlow: index,
+                  onMenuClick: onMenuClick
+                })
+              })]
+            })
+          })]
+        })
+      }, `workflow_list_${index}`);
+    })
   });
 };
 export default ListWorkflow;