@flozy/editor 1.1.1 → 1.1.4

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;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Grid, Slider } from "@mui/material";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridSize = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 3,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsxs("label", {
+        style: {
+          marginBottom: "12px",
+          fontWeight: "bold"
+        },
+        children: ["Grid Size: ", value || 12, " "]
+      }), /*#__PURE__*/_jsx(Slider, {
+        defaultValue: 12,
+        value: value || 12,
+        step: 1,
+        min: 1,
+        max: 12,
+        onChange: handleChange
+      })]
+    })
+  });
+};
+export default GridSize;

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { Button, Grid, IconButton, InputAdornment, TextField } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ImageTexts = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const texts = value || [""];
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    const updatedTexts = texts?.map((m, i) => {
+      if (`text-${i}` === e.target.name) {
+        return e.target.value;
+      }
+      return m;
+    });
+    onChange({
+      [key]: updatedTexts
+    });
+  };
+  const onAddText = () => {
+    onChange({
+      [key]: [...texts, ""]
+    });
+  };
+  const handleDelete = deleteIndex => () => {
+    const updatedTexts = texts?.filter((m, i) => {
+      return `text=${deleteIndex}` !== i;
+    });
+    onChange({
+      [key]: updatedTexts
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 3,
+    spacing: 2,
+    className: "input-adorn",
+    children: [texts?.map((m, i) => {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          name: `text-${i}`,
+          placeholder: "Enter Image Text",
+          onChange: handleChange,
+          InputProps: {
+            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+              position: "end",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: handleDelete(i),
+                children: /*#__PURE__*/_jsx(DeleteIcon, {})
+              })
+            })
+          }
+        })
+      }, `imt_${i}`);
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: onAddText,
+        children: "Add Text"
+      })
+    })]
+  });
+};
+export default ImageTexts;

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

@@ -0,0 +1,21 @@
+import Text from "./text";
+import BannerSpacing from "./bannerSpacing";
+import BorderRadius from "./borderRadius";
+import Color from "./color";
+import Alignment from "./alignment";
+import BackgroundImage from "./backgroundImage";
+import GridSize from "./gridSize";
+import ElementSize from "./elementSize";
+import ImageTexts from "./imageTexts";
+const FieldMap = {
+  text: Text,
+  bannerSpacing: BannerSpacing,
+  borderRadius: BorderRadius,
+  color: Color,
+  alignment: Alignment,
+  backgroundImage: BackgroundImage,
+  gridSize: GridSize,
+  elementSize: ElementSize,
+  imageTexts: ImageTexts
+};
+export default FieldMap;