@flozy/editor 5.5.9 → 5.6.1

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -0,0 +1,241 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel, Divider } from "@mui/material";
+import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
+import AddOptions from "./AddOptions";
+import FilterProperty from "./FilterProperty";
+import Icon from "../../../../common/Icon";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EditProperty = props => {
+  const {
+    classes,
+    onClose,
+    mode,
+    onEvent
+  } = props;
+  const [edit, setEdit] = useState({
+    ...(mode?.edit || {})
+  });
+  const editData = useRef({
+    ...edit
+  });
+  useEffect(() => {
+    return () => {
+      // on un-mount update the label
+      if (edit?.label !== editData?.current?.label) {
+        onEvent("updateProperty", {
+          ...editData?.current
+        }, false);
+      }
+    };
+  }, []);
+  const onChange = key => e => {
+    const latest = {
+      ...edit,
+      [key]: e?.target?.value
+    };
+    setEdit({
+      ...edit,
+      [key]: e?.target?.value
+    });
+    editData.current = {
+      ...latest
+    };
+  };
+  const onChangeProperty = () => {
+    onEvent("changeProperty", {
+      edit: {
+        ...edit
+      }
+    });
+  };
+  const onBack = () => {
+    onEvent("allProperties", {
+      edit: null
+    });
+  };
+  const onUpdate = data => {
+    const latest = {
+      ...edit,
+      ...data
+    };
+    setEdit({
+      ...edit,
+      ...data
+    });
+    editData.current = {
+      ...latest
+    };
+    onEvent("updateProperty", {
+      ...editData?.current
+    });
+  };
+  const onAction = action => () => {
+    switch (action) {
+      case "Visibilty":
+        onUpdate({
+          visible: !edit?.visible
+        });
+        onEvent("close");
+        break;
+      case "Duplicate":
+        onEvent("addProperty", {
+          type: editData?.current?.type,
+          overrides: {
+            ...editData?.current
+          }
+        }, false);
+        onEvent("close");
+        break;
+      case "Delete":
+        onEvent("deleteProperty", {
+          ...editData?.current
+        });
+        onEvent("close");
+        break;
+      default:
+        return;
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.addProperty,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-title",
+      children: [/*#__PURE__*/_jsxs("span", {
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          className: "tv-act-ico",
+          size: "small",
+          onClick: onBack,
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
+        }), "Edit Property"]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg br1",
+        size: "small",
+        onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-opt-content",
+      children: [/*#__PURE__*/_jsx(FormControlLabel, {
+        label: "Field Name",
+        labelPlacement: "top",
+        sx: {
+          '& .MuiFormControl-root': {
+            marginBottom: '4px'
+          }
+        },
+        control: /*#__PURE__*/_jsx(TextField, {
+          size: "small",
+          value: edit?.label,
+          onChange: onChange("label"),
+          fullWidth: true,
+          placeholder: "Field Name"
+        })
+      }), /*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list st",
+        children: /*#__PURE__*/_jsxs(ListItemButton, {
+          sx: {
+            paddingBottom: '12px'
+          },
+          onClick: onChangeProperty,
+          children: [/*#__PURE__*/_jsx(ListItemText, {
+            children: "Type"
+          }), /*#__PURE__*/_jsxs(ListItemIcon, {
+            sx: {
+              display: 'flex',
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                background: "#64748B1F",
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: `${TYPE_ICONS[edit?.type]}`
+              })
+            }), /*#__PURE__*/_jsx("span", {
+              className: "label-tp",
+              children: TYPE_LABELS[edit?.type]
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: 'rightArrow'
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
+      }), /*#__PURE__*/_jsx(AddOptions, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsx(FilterProperty, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsxs(List, {
+        className: "fe-dv-opt-list",
+        children: [/*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Visibilty"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: edit?.visible ? /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeSlash'
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeIcon'
+            })
+          }), /*#__PURE__*/_jsxs(ListItemText, {
+            children: [edit?.visible ? "Hide" : "Show", " in View"]
+          })]
+        }), /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Duplicate"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'duplicateIcon'
+            })
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: "Duplicate Property"
+          })]
+        }), /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Delete"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'trashIcon'
+            })
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: "Delete Property"
+          })]
+        })]
+      })]
+    })]
+  });
+};
+EditProperty.defaultProps = {
+  onEvent: () => {}
+};
+export default EditProperty;

package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import { FILTER_TYPES } from "./Constants";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Icon from "../../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterProperty = props => {
+  const {
+    sort
+  } = useDataView();
+  const {
+    edit,
+    onEvent
+  } = props;
+  const handleChangeOption = m => () => {
+    onEvent("addSort", {
+      key: edit?.key,
+      ...(sort[0] || {}),
+      newKey: edit?.key,
+      operator: m?.operator
+    });
+  };
+  return /*#__PURE__*/_jsx(List, {
+    className: "fe-dv-opt-list mt",
+    children: FILTER_TYPES?.map(({
+      ...m
+    }, i) => {
+      return /*#__PURE__*/_jsxs(ListItemButton, {
+        onClick: handleChangeOption(m),
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: m?.Icon
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: m.label
+        })]
+      }, i);
+    })
+  });
+};
+FilterProperty.defaultProps = {
+  onEvent: () => {}
+};
+export default FilterProperty;

package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { PROPERTY_TYPES } from "./Constants";
+import Icon from "../../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PropertyList = props => {
+  const {
+    onSelect,
+    selected
+  } = props;
+  return /*#__PURE__*/_jsx(List, {
+    children: PROPERTY_TYPES?.map(({
+      ...rest
+    }, i) => {
+      return /*#__PURE__*/_jsxs(ListItemButton, {
+        className: selected?.type === rest?.type ? "active" : "",
+        onClick: onSelect(rest),
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          className: "needBg",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: rest?.Icon
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: rest?.label
+        })]
+      }, i);
+    })
+  });
+};
+PropertyList.defaultProps = {};
+export default PropertyList;

package/dist/Editor/Elements/DataView/Layouts/Options/index.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { Popover, SwipeableDrawer } from "@mui/material";
+import useOptionsStyles from "./styles";
+import AddProperty from "./AddProperty";
+import EditProperty from "./EditProperty";
+import ChangeProperty from "./ChangeProperty";
+import AllProperties from "./AllProperties";
+import EditOption from "./EditOption";
+import { useTheme } from "@emotion/react";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+const POSITIONS = {
+  addProperty: {
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    }
+  },
+  allProperties: {
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    }
+  }
+};
+const PropertySettings = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const theme = useTheme();
+  const {
+    open,
+    anchorEl,
+    mode,
+    onClose,
+    onEvent
+  } = props;
+  const classes = useOptionsStyles(theme, appTheme);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const PoperComponent = isMobile ? SwipeableDrawer : Popover;
+  const renderMode = () => {
+    switch (mode?.type) {
+      case "addProperty":
+        return /*#__PURE__*/_jsx(AddProperty, {
+          classes: classes,
+          onClose: onClose,
+          onEvent: onEvent,
+          mode: mode
+        });
+      case "editProperty":
+        return /*#__PURE__*/_jsx(EditProperty, {
+          classes: classes,
+          onClose: onClose,
+          onEvent: onEvent,
+          mode: mode
+        });
+      case "changeProperty":
+        return /*#__PURE__*/_jsx(ChangeProperty, {
+          classes: classes,
+          onClose: onClose,
+          onEvent: onEvent,
+          mode: mode
+        });
+      case "allProperties":
+        return /*#__PURE__*/_jsx(AllProperties, {
+          classes: classes,
+          onClose: onClose,
+          onEvent: onEvent,
+          mode: mode
+        });
+      case "editOption":
+        return /*#__PURE__*/_jsx(EditOption, {
+          classes: classes,
+          onClose: onClose,
+          onEvent: onEvent,
+          mode: mode
+        });
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_jsx(PoperComponent, {
+    open: open,
+    anchorEl: anchorEl,
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    onClose: onClose,
+    anchor: "bottom",
+    sx: classes.popover
+    // override position
+    ,
+    ...(POSITIONS[mode?.type] || {}),
+    children: renderMode()
+  });
+};
+export default PropertySettings;

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -0,0 +1,217 @@
+const useOptionsStyles = (theme, appTheme) => ({
+  popover: {
+    "& .MuiPaper-root": {
+      boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      borderRadius: "20px !important",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      fontFamily: 'Inter !important',
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      [theme?.breakpoints?.between("xs", "md")]: {
+        borderRadius: "16px 16px 0px 0px",
+        maxHeight: "50%"
+      },
+      "& .tv-act-ico": {
+        color: appTheme?.palette?.editor?.tv_text,
+        "&.br1": {
+          borderRadius: "6px"
+        },
+        "&.bg": {
+          background: appTheme?.palette?.editor?.tv_ico_bg,
+          "&:hover": {
+            background: "rgba(100, 116, 139, 0.12)"
+          }
+        },
+        "& svg": {
+          width: "16px",
+          height: "16px",
+          '& path': {
+            stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      },
+      "& .MuiInputBase-root": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        // background: appTheme?.palette?.editor?.tv_input_bg,
+        background: 'transparent',
+        borderRadius: "8px",
+        boxShadow: '0px 4px 18px 0px #0000000D'
+      },
+      '& .MuiInputBase-input': {
+        padding: '0px 12px',
+        height: '34px'
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        background: 'transparent'
+      },
+      "& .MuiList-root": {
+        padding: "4px 2px",
+        fontFamily: 'Inter',
+        "& .MuiListItemButton-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          padding: "2px 4px",
+          borderRadius: "8px",
+          "& .MuiListItemIcon-root": {
+            minWidth: "26px",
+            "&.needBg": {
+              minWidth: "20px",
+              width: "20px",
+              height: "20px",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              marginRight: "12px",
+              background: appTheme?.palette?.editor?.tv_ico_bg
+            },
+            color: `${appTheme?.palette?.editor?.tv_text} !important`,
+            "& svg": {
+              // width: "16px",
+              '& path': {
+                stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+              }
+            }
+          },
+          "& .MuiTypography-root": {
+            fontSize: "14px",
+            fontFamily: 'Inter'
+          },
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+            "& .MuiListItemIcon-root": {
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+              "& svg": {
+                color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+                '& path': {
+                  stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+                }
+              }
+            }
+          }
+        }
+      },
+      "& .st": {
+        borderTop: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        marginTop: "8px",
+        paddingTop: "8px"
+      },
+      "& .sb": {
+        borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        marginBottom: "8px",
+        // paddingBottom: "8px",
+        paddingBottom: "0px"
+      },
+      "& .mt": {
+        marginTop: "8px"
+      },
+      "& .mt-1": {
+        marginTop: "12px"
+      },
+      "& .mb": {
+        marginBottom: "8px"
+      },
+      "& .mb-1": {
+        marginBottom: "12px"
+      },
+      "& .ml": {
+        marginLeft: "8px"
+      },
+      "& .mb-0": {
+        marginBottom: "0px"
+      },
+      "& .ml-0": {
+        marginLeft: "0px !important"
+      },
+      "& .pl-0": {
+        paddingLeft: "0px"
+      },
+      "& .label-desc": {},
+      "& .MuiFormControlLabel-root": {
+        alignItems: "flex-start",
+        margin: "0px 0px 0px 0px",
+        width: "100%",
+        "& .MuiFormControlLabel-label": {
+          marginBottom: "8px",
+          fontSize: "14px"
+        }
+      },
+      "& .label-tp": {
+        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+        fontSize: "14px"
+      },
+      // "& .MuiInputBase-input": {
+      //   height: "32px",
+      //   padding: "4px 8px",
+      // },
+      "& .more-btn-cbs": {
+        color: appTheme?.palette?.editor?.tv_text_primary
+      }
+    }
+  },
+  addProperty: {
+    padding: "12px",
+    width: "253px",
+    "& .divider_sty": {
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "600",
+      fontFamily: 'Inter',
+      padding: "0px 0px 12px 0px",
+      justifyContent: "space-between",
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      marginBottom: "8px",
+      "& span": {
+        display: "flex",
+        alignItems: "center",
+        fontFamily: 'Inter'
+      }
+    },
+    "& .fe-dv-ap-desc": {
+      fontSize: "12px",
+      color: "rgba(148, 163, 184, 1)"
+    },
+    "& .fe-dv-ap-opt-list": {
+      margin: "12px  0px"
+    },
+    "& .fe-tv-addopt": {
+      marginTop: "8px",
+      paddingLeft: "4px",
+      "& .MuiList-root": {
+        maxHeight: "200px",
+        overflowY: "auto"
+      },
+      "& .MuiFormHelperText-root": {
+        color: "red",
+        marginLeft: "2px",
+        marginTop: "4px"
+      },
+      '& svg': {
+        '& path': {
+          stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+        }
+      }
+    },
+    "& .fe-tv-opt-sub-title": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "8px"
+    },
+    "& .more-btn-cbs": {
+      color: `${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      border: `1.5px solid ${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      paddingTop: "10px"
+    },
+    [theme?.breakpoints?.between("xs", "md")]: {
+      width: "100%"
+    }
+  }
+});
+export default useOptionsStyles;