@flozy/editor 5.0.5 → 5.0.6

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

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import { TYPE_LABELS } from "./Constants";
+import AddOptions from "./AddOptions";
+import FilterProperty from "./FilterProperty";
+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,
+          children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+        }), "Edit Property"]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg br1",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-opt-content",
+      children: [/*#__PURE__*/_jsx(FormControlLabel, {
+        label: "Field Name",
+        labelPlacement: "top",
+        control: /*#__PURE__*/_jsx(TextField, {
+          size: "small",
+          value: edit?.label,
+          onChange: onChange("label"),
+          fullWidth: true,
+          placeholder: "Field Name"
+        })
+      }), /*#__PURE__*/_jsx(AddOptions, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsx(FilterProperty, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list st sb",
+        children: /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onChangeProperty,
+          children: [/*#__PURE__*/_jsx(ListItemText, {
+            children: "Type"
+          }), /*#__PURE__*/_jsxs(ListItemIcon, {
+            sx: {
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "label-tp",
+              children: TYPE_LABELS[edit?.type]
+            }), /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(List, {
+        className: "fe-dv-opt-list",
+        children: [/*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Visibilty"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: edit?.visible ? /*#__PURE__*/_jsx(VisibilityOffIcon, {}) : /*#__PURE__*/_jsx(VisibilityIcon, {})
+          }), /*#__PURE__*/_jsxs(ListItemText, {
+            children: [edit?.visible ? "Hide" : "Show", " in View"]
+          })]
+        }), /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Duplicate"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: "Duplicate Property"
+          })]
+        }), /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("Delete"),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: "Delete Property"
+          })]
+        })]
+      })]
+    })]
+  });
+};
+EditProperty.defaultProps = {
+  onEvent: () => {}
+};
+export default EditProperty;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import { FILTER_TYPES } from "./Constants";
+import { useDataView } from "../../Providers/DataViewProvider";
+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", {
+      ...(sort[0] || {}),
+      newKey: edit?.key,
+      operator: m?.operator
+    });
+  };
+  return /*#__PURE__*/_jsx(List, {
+    className: "fe-dv-opt-list mt",
+    children: FILTER_TYPES?.map(({
+      Icon,
+      ...m
+    }, i) => {
+      return /*#__PURE__*/_jsxs(ListItemButton, {
+        onClick: handleChangeOption(m),
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(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,30 @@
+import React from "react";
+import { List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { PROPERTY_TYPES } from "./Constants";
+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(({
+      Icon,
+      ...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, {})
+        }), /*#__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: "left"
+    },
+    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,176 @@
+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: "12px",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      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"
+        }
+      },
+      "& .MuiInputBase-root": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        borderRadius: "8px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+      },
+      "& .MuiList-root": {
+        padding: "4px 2px",
+        "& .MuiListItemButton-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          padding: "2px 4px",
+          borderRadius: "8px",
+          "& .MuiListItemIcon-root": {
+            minWidth: "38px",
+            "&.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_primary,
+            "& svg": {
+              width: "16px"
+            }
+          },
+          "& .MuiTypography-root": {
+            fontSize: "14px"
+          },
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: appTheme?.palette?.editor?.tv_hover_text,
+            "& .MuiListItemIcon-root": {
+              color: appTheme?.palette?.editor?.tv_hover_text
+            }
+          }
+        }
+      },
+      "& .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"
+      },
+      "& .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"
+      }
+    }
+  },
+  addProperty: {
+    padding: "12px",
+    width: "253px",
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "bold",
+      padding: "0px 0px 12px 0px",
+      justifyContent: "space-between",
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: "1px solid rgba(220, 228, 236, 1)",
+      marginBottom: "8px",
+      "& span": {
+        display: "flex",
+        alignItems: "center"
+      }
+    },
+    "& .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"
+      }
+    },
+    "& .fe-tv-opt-sub-title": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "8px"
+    },
+    [theme.breakpoints.between("xs", "md")]: {
+      width: "calc(100% - 24px)"
+    }
+  }
+});
+export default useOptionsStyles;

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -0,0 +1,94 @@
+const useTableStyles = (theme, appTheme) => ({
+  root: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    borderRadius: "7px 7px 0px 0px",
+    overflowX: "auto"
+  },
+  table: {
+    borderCollapse: "separate",
+    borderSpacing: 0,
+    borderRadius: "7px 7px 0px 0px",
+    overflow: "hidden",
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    "& thead": {
+      background: appTheme?.palette?.editor?.tv_header,
+      height: "40px"
+    },
+    "& th": {
+      "& svg": {
+        "& .fillStroke": {
+          stroke: appTheme?.palette?.editor?.tv_stroke
+        }
+      }
+    },
+    "& td": {
+      height: "40px",
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        background: "transparent"
+      }
+    },
+    "& th, tr, td": {
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
+    "& .tv-act-btn": {
+      color: appTheme?.palette?.editor?.tv_text,
+      textTransform: "none",
+      "&.ico": {
+        "& svg": {
+          color: appTheme?.palette?.editor?.tv_text
+        }
+      },
+      "&:hover": {
+        color: "rgba(37, 99, 235, 1)",
+        "& svg": {
+          color: "rgba(37, 99, 235, 1)"
+        }
+      }
+    },
+    "& .la": {
+      justifyContent: "start"
+    },
+    "& .react-datepicker__input-container": {
+      "& input": {
+        border: "0px solid transparent"
+      }
+    },
+    "& .tv-ac-field": {
+      "&.MuiAutocomplete-root": {
+        "& .MuiAutocomplete-inputRoot": {
+          display: "flex",
+          flexWrap: "nowrap",
+          paddingTop: "3px",
+          paddingBottom: "3px",
+          paddingLeft: "3px",
+          maxWidth: "250px",
+          overflow: "hidden",
+          position: "relative",
+          "& .tv-ms-tag-wrpr": {
+            display: "flex",
+            flexWrap: "nowrap",
+            overflow: "auto"
+          },
+          "&.Mui-disabled": {
+            "& input": {
+              display: "none"
+            },
+            "& .tv-ms-tag-wrpr": {
+              "& .MuiSvgIcon-root": {
+                display: "none"
+              }
+            }
+          }
+        }
+      }
+    },
+    "& .Mui-disabled": {
+      WebkitTextFillColor: "#000 !important",
+      "& .MuiChip-root": {
+        opacity: 1
+      }
+    }
+  }
+});
+export default useTableStyles;