@flozy/editor 5.3.6 → 5.3.8

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -1,287 +1,168 @@
-import { fontOptions, fontWeightOptions } from "../../utils/font";
+import { fontOptions } from "../../utils/font";
 import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const formStyle = [{
-  tab: "Form Settings",
-  value: "FormSetting",
-  hasChildrenTabs: true,
+const formStyle = [{
+  tab: "General",
+  value: "general",
   fields: [{
-    tab: "General",
-    value: "general",
-    fields: [{
-      label: "Form Name",
-      key: "formName",
-      type: "text"
-    }, {
-      label: "Send Form to Email",
-      key: "email",
-      type: "text",
-      placeholder: "Enter Email to send the response..."
-    }, {
-      label: "Save Response",
-      key: "saveResponse",
-      type: "selectBox",
-      placeholder: "Save Response"
-    }]
+    label: "Form Name",
+    key: "formName",
+    type: "text"
   }, {
-    tab: "Form Title",
-    value: "formTitle",
-    fields: [{
-      label: "Title",
-      key: "formTitle",
-      type: "text"
-    }, {
-      label: "Font Family",
-      key: "fontFamily",
-      type: "textOptions",
-      hideMetaDataOptions: true,
-      options: fontOptions,
-      webFont: true,
-      width: 7,
-      renderOption: option => {
-        return /*#__PURE__*/_jsx("span", {
-          style: {
-            fontFamily: option.value
-          },
-          children: option.text
-        });
-      }
-    }, {
-      label: "Font Size",
-      key: "textSize",
-      type: "fontSize",
-      width: 5,
-      placeholder: "16px"
-    }, {
-      label: "Text Align",
-      key: "textAlign",
-      type: "textAlign",
-      placeholder: "16px or 1em"
-    }]
+    label: "Send Form to Email",
+    key: "email",
+    type: "text",
+    placeholder: "Enter Email to send the response..."
   }, {
-    tab: "Banner Spacing",
-    value: "bannerSpacing",
-    fields: [{
-      label: "Banner Spacing",
-      key: "bannerSpacing",
-      type: "bannerSpacing"
-    }]
+    label: "Save Response",
+    key: "saveResponse",
+    type: "selectBox",
+    placeholder: "Save Response"
+  }]
+}, {
+  tab: "Form Title",
+  value: "formTitle",
+  fields: [{
+    label: "Title",
+    key: "formTitle",
+    type: "text"
   }, {
-    tab: "Border",
-    value: "border",
-    fields: [{
-      label: "Border Radius",
-      key: "borderRadius",
-      type: "borderRadius"
-    }, {
-      label: "Border Width",
-      key: "borderWidth",
-      type: "text",
-      placeholder: "1px"
-    }, {
-      label: "Border Style",
-      key: "borderStyle",
-      type: "textOptions",
-      hideMetaDataOptions: true,
-      options: [{
-        text: "Solid",
-        value: "solid"
-      }, {
-        text: "Dotted",
-        value: "dotted"
-      }, {
-        text: "Dashed",
-        value: "dashed"
-      }],
-      renderOption: option => {
-        return /*#__PURE__*/_jsx("span", {
-          children: option.text
-        });
-      }
-    }]
+    label: "Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    webFont: true,
+    width: 7,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
-    tab: "Colors",
-    value: "colors",
-    fields: [{
-      label: "Text Color",
-      key: "textColor",
-      type: "color",
-      needPreview: true
-    }, {
-      label: "Background Color",
-      key: "bgColor",
-      type: "color"
-    }, {
-      label: "Border Color",
-      key: "borderColor",
-      type: "color"
-    }]
+    label: "Font Size",
+    key: "textSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px"
+  }, {
+    label: "Text Align",
+    key: "textAlign",
+    type: "textAlign",
+    placeholder: "16px or 1em"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border",
+  value: "border",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
   }, {
-    tab: "Position",
-    value: "position",
-    fields: [{
-      label: "Set Postion (Vertical & Horizantal)",
-      key: "alignment",
-      type: "alignment"
-    }]
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
   }, {
-    tab: "Background",
-    value: "backgroundImage",
-    fields: [{
-      label: "URL",
-      key: "backgroundImage",
-      type: "text"
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
     }, {
-      label: "Background Image",
-      key: "backgroundImage",
-      type: "backgroundImage"
-    }]
-  }, {
-    tab: "Add to Boards",
-    value: "metadatamapping",
-    fields: [{
-      label: "Add response to contacts board",
-      key: "metadatamapping",
-      type: "metadatamapping",
-      compType: "card",
-      content: "By default, form responses are added as separate cards on the default contact board.",
-      value: "mappingToContactBoard",
-      infoIcon: /*#__PURE__*/_jsx(Icon, {
-        icon: "info"
-      })
+      text: "Dotted",
+      value: "dotted"
     }, {
-      label: "Create a separate board",
-      key: "metadatamapping",
-      type: "metadatamapping",
-      compType: "card",
-      content: "By default, form responses are added as separate cards on a new board (Contact Us).",
-      value: "mappingToSeparateBoard",
-      infoIcon: /*#__PURE__*/_jsx(Icon, {
-        icon: "info"
-      })
-    }]
-  }, {
-    tab: "Save As Template",
-    value: "saveAsTemplate",
-    needActions: false,
-    hideOnFGS: true,
-    fields: [{
-      label: "Template Image",
-      key: "saveAsTemplate",
-      type: "saveAsTemplate"
-    }]
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
   }]
 }, {
-  tab: "Field Settings",
-  value: "FieldSetting",
-  hasChildrenTabs: true,
+  tab: "Colors",
+  value: "colors",
   fields: [{
-    tab: "Font Family",
-    value: "FontFamily",
-    fields: [{
-      label: "Font Family",
-      key: "fieldFontFamily",
-      type: "textOptions",
-      hideMetaDataOptions: true,
-      options: fontOptions,
-      webFont: true,
-      renderOption: option => {
-        return /*#__PURE__*/_jsx("span", {
-          style: {
-            fontFamily: option.value
-          },
-          children: option.text
-        });
-      }
-    }]
-  }, {
-    tab: "Font Weight",
-    value: "FontWeight",
-    fields: [{
-      label: "Font Weight",
-      key: "fieldFontWeight",
-      type: "textOptions",
-      width: 5,
-      options: fontWeightOptions,
-      hideMetaDataOptions: true,
-      renderOption: option => {
-        return /*#__PURE__*/_jsx("span", {
-          style: {
-            fontWeight: option.value
-          },
-          children: option.text
-        });
-      }
-    }]
-  }, {
-    tab: "Font Size",
-    value: "FontSize",
-    fields: [{
-      label: "Font Size",
-      key: "fieldTextSize",
-      type: "fontSize",
-      width: 5,
-      placeholder: "16px"
-    }]
+    label: "Text Color",
+    key: "textColor",
+    type: "color",
+    needPreview: true
   }, {
-    tab: "Text Color",
-    value: "TextColor",
-    fields: [{
-      label: "Text Color",
-      key: "fieldTextColor",
-      type: "color",
-      needPreview: true
-    }]
+    label: "Background Color",
+    key: "bgColor",
+    type: "color"
   }, {
-    tab: "Background Color",
-    value: "BackgroundColor",
-    fields: [{
-      label: "Background Color",
-      key: "fieldBgColor",
-      type: "color"
-    }]
-  }, {
-    tab: "Border Color",
-    value: "BorderColor",
-    fields: [{
-      label: "Border Color",
-      key: "fieldBorderColor",
-      type: "color"
-    }]
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Background",
+  value: "backgroundImage",
+  fields: [{
+    label: "URL",
+    key: "backgroundImage",
+    type: "text"
   }, {
-    tab: "Border Width",
-    value: "BorderWidth",
-    fields: [{
-      label: "Border Width",
-      key: "fieldBorderWidth",
-      type: "text",
-      width: 5,
-      placeholder: "1px"
-    }]
+    label: "Background Image",
+    key: "backgroundImage",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Add to Boards",
+  value: "metadatamapping",
+  fields: [{
+    label: "Add response to contacts board",
+    key: "metadatamapping",
+    type: "metadatamapping",
+    compType: "card",
+    content: "By default, form responses are added as separate cards on the default contact board.",
+    value: "mappingToContactBoard",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
   }, {
-    tab: "Border Style",
-    value: "BorderStyle",
-    fields: [{
-      label: "Border Style",
-      key: "fieldBorderStyle",
-      type: "textOptions",
-      hideMetaDataOptions: true,
-      width: 5,
-      options: [{
-        text: "Solid",
-        value: "solid"
-      }, {
-        text: "Dotted",
-        value: "dotted"
-      }, {
-        text: "Dashed",
-        value: "dashed"
-      }],
-      renderOption: option => {
-        return /*#__PURE__*/_jsx("span", {
-          children: option.text
-        });
-      }
-    }]
+    label: "Create a separate board",
+    key: "metadatamapping",
+    type: "metadatamapping",
+    compType: "card",
+    content: "By default, form responses are added as separate cards on a new board (Contact Us).",
+    value: "mappingToSeparateBoard",
+    infoIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "info"
+    })
+  }]
+}, {
+  tab: "Save As Template",
+  value: "saveAsTemplate",
+  needActions: false,
+  hideOnFGS: true,
+  fields: [{
+    label: "Template Image",
+    key: "saveAsTemplate",
+    type: "saveAsTemplate"
   }]
-}];
+}];
+export default formStyle;

package/dist/Editor/common/StyleBuilder/index.js

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { ThemeProvider } from "@mui/material/styles";
-import { ExpandMoreSharp } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -75,37 +73,6 @@ const StyleBuilder = props => {
   } = tabVal || {
     needActions: true
   };
-  const {
-    hideTools
-  } = customProps || {};
-  const muiTheme = createTheme({
-    components: {
-      MuiAccordion: {
-        styleOverrides: {
-          root: {
-            "& .MuiAccordionSummary-root": {
-              flexDirection: "row-reverse",
-              "& .MuiSvgIcon-root": {
-                color: theme?.palette?.primary?.main
-              },
-              "& .Mui-expanded": {
-                "& .MuiSvgIcon-root": {
-                  color: theme?.palette?.text?.blueText
-                }
-              }
-            },
-            padding: "0px",
-            "&.Mui-expanded": {
-              margin: "0"
-            }
-          }
-        },
-        defaultProps: {
-          elevation: 0
-        }
-      }
-    }
-  });
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -173,62 +140,22 @@ const StyleBuilder = props => {
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
           maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
-          padding: "0px"
+          padding: "8px"
         },
         children: renderTabs.map((m, i) => {
-          if (m?.hasChildrenTabs) {
-            return /*#__PURE__*/_jsx(ThemeProvider, {
-              theme: muiTheme,
-              children: /*#__PURE__*/_jsxs(Accordion, {
-                defaultExpanded: true,
-                children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreSharp, {}),
-                  sx: {
-                    padding: "0px"
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    className: "settingsHeader",
-                    color: "primary",
-                    style: {
-                      fontSize: "14px !important",
-                      fontWeight: "400 !important"
-                    },
-                    children: m?.tab
-                  })
-                }), /*#__PURE__*/_jsx(AccordionDetails, {
-                  sx: {
-                    padding: "5px"
-                  },
-                  children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                    return /*#__PURE__*/_jsx(StyleContent, {
-                      renderTabs: [field],
-                      value: field.value,
-                      element: elementProps,
-                      onChange: onElementPropsChange,
-                      customProps: customProps,
-                      handleClose: handleClose
-                    }, `tab_${field.value}_${index}`);
-                  })
-                })]
-              }, `accordion_${i}`)
-            }, i);
-          } else {
-            return /*#__PURE__*/_jsx(StyleContent, {
-              renderTabs: renderTabs,
-              value: m.value,
-              element: elementProps,
-              onChange: onElementPropsChange,
-              customProps: customProps,
-              handleClose: handleClose
-            }, `tab_${m.value}_$${i}`);
-          }
+          return /*#__PURE__*/_jsx(StyleContent, {
+            renderTabs: renderTabs,
+            value: m.value,
+            element: elementProps,
+            onChange: onElementPropsChange,
+            customProps: customProps,
+            handleClose: handleClose
+          }, `tab_${m.value}_$${i}`);
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,
           pt: 2,
-          pl: 1,
           justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {
@@ -253,7 +180,7 @@ const StyleBuilder = props => {
       style: {
         zIndex: "1300"
       },
-      sx: classes.sideBarDrawer,
+      sx: classes.bottomBarDrawer,
       children: renderDrawerMenu()
     }) : /*#__PURE__*/_jsx(Drawer, {
       open: true,

package/dist/Editor/common/StyleBuilder/tableStyle.js

@@ -1,69 +1,35 @@
-import { toolbarGroups } from "../../Toolbar/toolbarGroups";
-import { fontOptions } from "../../utils/font";
-import { capitalizeFirstLetter } from "../../utils/helper";
-import { jsx as _jsx } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const fontWeight = allTools.find(f => f.format === "fontWeight");
-function getKey(prefix, key) {
-  const settingKey = prefix === "col" ? `entire${capitalizeFirstLetter(key)}` : key;
-  return `${prefix}.${settingKey}`;
-}
-function getCommonSettings(prefix) {
-  let settings = [{
-    label: "Font Family",
-    key: "fontFamily",
-    type: "textOptions",
-    webFont: true,
-    options: fontOptions,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
-  }, {
-    label: "Font Weight",
-    key: "fontWeight",
-    type: "textOptions",
-    options: fontWeight?.options,
-    width: 7
-  }, {
-    label: "Font Size",
-    key: "textSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px or 1em"
-  }, {
-    label: "Text Color",
-    key: "textColor",
+const tableStyle = [{
+  tab: "Table",
+  value: "tableSettings",
+  fields: [{
+    label: "Table Background",
+    key: "table.bgColor",
     type: "color"
   }, {
-    label: "Background",
-    key: "bgColor",
+    label: "Cell Border",
+    key: "table.borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Row",
+  value: "rowSettings",
+  fields: [{
+    label: "Row Background",
+    key: "row.bgColor",
     type: "color"
   }, {
-    label: "Border",
-    key: "borderColor",
+    label: "Row Border",
+    key: "row.borderColor",
     type: "color"
-  }];
-
-  // modify keys based on setting type (prefix)
-  settings = settings.map(s => ({
-    ...s,
-    key: getKey(prefix, s.key)
-  }));
-  return settings;
-}
-const tableStyle = [{
-  tab: "Table",
-  value: "tableSettings",
-  fields: getCommonSettings("table")
+  }]
 }, {
-  tab: "Selected cell",
+  tab: "Column",
   value: "columnSettings",
   fields: [{
+    label: "Entire Column Background",
+    key: "col.entireBgColor",
+    type: "color"
+  }, {
     label: "Selected Cell Background",
     key: "col.bgColor",
     type: "color"
@@ -82,14 +48,4 @@ const tableStyle = [{
     placeholder: "Hide on Mobile"
   }]
 }];
-export default tableStyle;
-export const tableRowStyle = [{
-  tab: "Row",
-  value: "rowSettings",
-  fields: getCommonSettings("row")
-}];
-export const tableColumnStyle = [{
-  tab: "Column",
-  value: "columnSettings",
-  fields: getCommonSettings("col")
-}];
+export default tableStyle;