@flozy/editor 1.1.2 → 1.1.4

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

@@ -0,0 +1,63 @@
+const embedImageStyle = [{
+  tab: "Image Texts",
+  value: "imageTexts",
+  fields: [{
+    label: "Image Texts",
+    key: "imageTexts",
+    type: "imageTexts"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "URL",
+  value: "url",
+  fields: [{
+    label: "URL",
+    key: "url",
+    type: "text"
+  }, {
+    label: "File",
+    key: "url",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Size",
+  value: "elementSize",
+  fields: [{
+    label: "Element Size",
+    key: "size",
+    type: "elementSize"
+  }]
+}];
+export default embedImageStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Alignment = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    style: {
+      paddingTop: "12px"
+    },
+    spacing: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: "Horizantal Position"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "horizantal",
+          value: value?.horizantal || "start",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "start",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Left"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Center"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "end",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Right"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: "Vertical Position"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "vertical",
+          value: value?.vertical || "start",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "start",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Top"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Middle"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "end",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Bottom"
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default Alignment;

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { Grid, Button } from "@mui/material";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { convertBase64 } from "../../../utils/helper";
+import { uploadFile } from "../../../service/fileupload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BackgroundImage = props => {
+  const {
+    value,
+    data,
+    customProps,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const [base64, setBase64] = useState(value);
+  const [uploading, setUploading] = useState(false);
+  const handleChange = async e => {
+    const file = e.target.files[0];
+    const strImage = await convertBase64(file);
+    setBase64(strImage);
+    doUpload(strImage);
+  };
+  const doUpload = async strImage => {
+    setUploading(true);
+    const result = await uploadFile({
+      image: strImage
+    }, customProps);
+    setUploading(false);
+    if (result && result?.imageURL) {
+      onChange({
+        [key]: result?.imageURL
+      });
+    }
+  };
+  const onRemoveBG = () => {
+    setBase64(null);
+    onChange({
+      [key]: "none"
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex"
+      },
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs(Button, {
+        component: "label",
+        variant: "contained",
+        startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
+        children: ["Upload file", /*#__PURE__*/_jsx("input", {
+          type: "file",
+          style: {
+            opacity: 0
+          },
+          onChange: handleChange
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        value: "none",
+        checked: value === "none",
+        onChange: onRemoveBG
+      }), " ", "None"]
+    }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginTop: "12px",
+        width: "100%",
+        backgroundImage: base64 ? `url(${base64})` : "none",
+        height: "100px",
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat"
+      }
+    })]
+  });
+};
+export default BackgroundImage;

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -0,0 +1,136 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
+const BannerSpacing = props => {
+  const {
+    value,
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    lockSpacing
+  } = elementProps || {};
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    let changeAll = {};
+    if (lockSpacing) {
+      BANNER_SPACING_KEYS.forEach(m => {
+        changeAll[m] = e.target.value;
+      });
+    }
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value,
+        ...changeAll
+      }
+    });
+  };
+  const onLockSpacing = () => {
+    onChange({
+      lockSpacing: !lockSpacing
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 4,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex"
+      },
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          width: "100px",
+          height: "100px",
+          border: "1px solid blue",
+          backgroundColor: "antiquewhite",
+          position: "relative",
+          display: "flex",
+          padding: `${value?.top}px ${value?.right}px ${value?.bottom}px ${value?.left}px`
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            border: "1px solid blue",
+            width: "100%"
+          }
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "left",
+          value: value?.left,
+          style: {
+            position: "absolute",
+            left: "-28px",
+            top: 0,
+            bottom: 0,
+            width: "16px",
+            height: "16px",
+            margin: "auto"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "top",
+          value: value?.top,
+          style: {
+            position: "absolute",
+            right: 0,
+            left: 0,
+            top: "-28px",
+            width: "16px",
+            height: "16px",
+            margin: "auto"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "right",
+          value: value?.right,
+          style: {
+            position: "absolute",
+            right: "-28px",
+            top: 0,
+            bottom: 0,
+            width: "16px",
+            height: "16px",
+            margin: "auto"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "bottom",
+          value: value?.bottom,
+          style: {
+            position: "absolute",
+            right: 0,
+            left: 0,
+            bottom: "-28px",
+            width: "16px",
+            height: "16px",
+            margin: "auto"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("button", {
+          style: {
+            position: "absolute",
+            right: 0,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            background: "none"
+          },
+          onClick: onLockSpacing,
+          children: lockSpacing ? "Un-Lock" : "Lock"
+        })]
+      })
+    })
+  });
+};
+export default BannerSpacing;

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+const BorderRadius = props => {
+  const {
+    value,
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    lockRadius,
+    borderColor
+  } = elementProps;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    let changeAll = {};
+    if (lockRadius) {
+      BORDER_RADIUS_KEYS.forEach(m => {
+        changeAll[m] = e.target.value;
+      });
+    }
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value,
+        ...changeAll
+      }
+    });
+  };
+  const onLockRadius = () => {
+    onChange({
+      lockRadius: !lockRadius
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 4,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex"
+      },
+      justifyContent: "center",
+      alignContent: "center",
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          width: "100px",
+          height: "100px",
+          border: "1px solid blue",
+          position: "relative",
+          display: "flex",
+          borderColor: `${borderColor}`,
+          borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
+        },
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "topLeft",
+          value: value?.topLeft,
+          style: {
+            position: "absolute",
+            left: "-25px",
+            top: "-28px",
+            width: "16px",
+            height: "16px",
+            margin: "auto"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "topRight",
+          value: value?.topRight,
+          style: {
+            position: "absolute",
+            top: "-28px",
+            right: "-25px",
+            width: "16px",
+            height: "16px"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "bottomLeft",
+          value: value?.bottomLeft,
+          style: {
+            position: "absolute",
+            left: "-25px",
+            bottom: "-28px",
+            width: "16px",
+            height: "16px"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "bottomRight",
+          value: value?.bottomRight,
+          style: {
+            position: "absolute",
+            bottom: "-28px",
+            right: "-25px",
+            width: "16px",
+            height: "16px"
+          },
+          onChange: handleChange
+        }), /*#__PURE__*/_jsx("button", {
+          style: {
+            position: "absolute",
+            right: 0,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            background: "none"
+          },
+          onClick: onLockRadius,
+          children: lockRadius ? "Un-Lock" : "Lock"
+        })]
+      })
+    })
+  });
+};
+export default BorderRadius;

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Grid, TextField, InputAdornment } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Color = props => {
+  const {
+    value,
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    key,
+    label,
+    needPreview
+  } = data;
+  const {
+    textColor,
+    bgColor,
+    borderColor
+  } = elementProps;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    children: [needPreview && /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      padding: 3,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        style: {
+          padding: "8px",
+          color: textColor,
+          backgroundColor: bgColor,
+          border: `1px solid ${borderColor}`
+        },
+        children: "Text Content"
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          color: "#CCC"
+        },
+        children: "*Select Checkbox for no color"
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        margin: "12px",
+        display: "flex",
+        alignItems: "cente",
+        justifyContent: "space-between"
+      },
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          value: value,
+          label: label,
+          placeholder: label,
+          InputLabelProps: {
+            shrink: true
+          },
+          InputProps: {
+            endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+              position: "end",
+              children: [/*#__PURE__*/_jsx("input", {
+                type: "color",
+                value: value,
+                name: "textColor",
+                onChange: handleChange
+              }), /*#__PURE__*/_jsx("input", {
+                type: "checkbox",
+                onChange: handleChange,
+                value: "rgba(0,0,0,0)",
+                checked: value === "rgba(0,0,0,0)"
+              })]
+            })
+          }
+        })
+      })
+    })]
+  });
+};
+export default Color;

package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { Grid, IconButton, InputAdornment, TextField } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ElementSize = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const widthType = value?.widthType ? value?.widthType : value?.widthInPercent ? "%" : "px";
+  const wkey = widthType === "%" ? "widthInPercent" : "width";
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...(value || {}),
+        [e.target.name]: isNaN(e.target.value) ? "" : parseInt(e.target.value)
+      }
+    });
+  };
+  const onSizeType = cData => () => {
+    onChange({
+      [key]: {
+        ...(value || {}),
+        ...cData
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    spacing: 2,
+    className: "input-adorn",
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      children: /*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
+        name: wkey,
+        label: "Width",
+        size: "small",
+        value: value ? value[wkey] : "100",
+        placeholder: "Width",
+        onChange: handleChange,
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            position: "end",
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              className: widthType === "px" ? "active" : "",
+              size: "small",
+              onClick: onSizeType({
+                widthType: "px",
+                widthInPercent: null,
+                width: isNaN(value?.width) ? 100 : value?.width || 100
+              }),
+              children: "PX"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              className: widthType === "%" ? "active" : "",
+              size: "small",
+              onClick: onSizeType({
+                widthType: "%",
+                widthInPercent: value?.widthInPercent || 100
+              }),
+              children: "%"
+            })]
+          })
+        }
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      children: /*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
+        name: "height",
+        size: "small",
+        label: "Height",
+        value: value?.height,
+        placeholder: "Height",
+        helperText: "Leave it to auto if width is in % ",
+        onChange: handleChange,
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            position: "end",
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              className: value?.height !== "" ? "active" : "",
+              size: "small",
+              onClick: onSizeType({
+                height: value?.height || ""
+              }),
+              children: "PX"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              className: value?.height === "" ? "active" : "",
+              size: "small",
+              onClick: onSizeType({
+                height: ""
+              }),
+              children: "auto"
+            })]
+          })
+        }
+      })
+    })]
+  });
+};
+export default ElementSize;