@flozy/editor 5.5.6 → 5.5.8

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

@@ -1,241 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,217 +0,0 @@
-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;