@flozy/editor 5.3.0 → 5.3.1

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, Popover, SwipeableDrawer, IconButton, useTheme } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import useFilterSortStyles from "./styles";
+import SortOptions from "./SortOptions";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterSort = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const theme = useTheme();
+  const {
+    open,
+    mode,
+    anchorEl,
+    onClose
+  } = props;
+  const classes = useFilterSortStyles(theme, appTheme);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const PoperComponent = isMobile ? SwipeableDrawer : Popover;
+  const renderMode = () => {
+    if (mode?.type === "filter") {
+      return "Filter Mode will be availbele soon";
+    } else if (mode?.type === "sort") {
+      return /*#__PURE__*/_jsx(SortOptions, {
+        onClose: onClose
+      });
+    } else {
+      return "Unknown Filter / Sort Mode";
+    }
+  };
+  return /*#__PURE__*/_jsx(PoperComponent, {
+    open: open,
+    sx: classes.root,
+    anchorEl: anchorEl,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    onClose: onClose,
+    anchor: "bottom",
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: classes.contentWrapper,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "fe-dv-ap-title",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: "Sort By"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          className: "tv-act-ico bg br1",
+          size: "small",
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })]
+      }), renderMode()]
+    })
+  });
+};
+export default FilterSort;

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

@@ -0,0 +1,106 @@
+const useFilterSortStyles = (theme, appTheme) => ({
+  root: {
+    "& .MuiPaper-root": {
+      boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      borderRadius: "12px",
+      [theme?.breakpoints?.between("xs", "md")]: {
+        borderRadius: "16px 16px 0px 0px",
+        maxHeight: "50%"
+      },
+      "& .MuiSelect-select": {
+        padding: "4px 8px"
+      },
+      "& .ml": {
+        marginLeft: "8px"
+      },
+      "& .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"
+        }
+      },
+      "& .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} !important`,
+            "& svg": {
+              width: "16px"
+            }
+          },
+          "& .MuiTypography-root": {
+            fontSize: "14px"
+          },
+          "&: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`
+            }
+          }
+        }
+      },
+      "& .tv-cf": {
+        "& .MuiInputBase-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          background: appTheme?.palette?.editor?.tv_input_bg,
+          borderRadius: "8px",
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_text_primary
+          }
+        }
+      }
+    }
+  },
+  contentWrapper: {
+    padding: "0px",
+    "& .tv-opt-list": {
+      minWidth: "250px"
+    },
+    "& .opt-wrpr": {
+      padding: "8px 8px 8px 8px"
+    },
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "bold",
+      padding: "8px 8px 8px 8px",
+      justifyContent: "space-between",
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      marginBottom: "0px",
+      "& span": {
+        display: "flex",
+        alignItems: "center"
+      }
+    }
+  }
+});
+export default useFilterSortStyles;

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

@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
+import { useDataView } from "../Providers/DataViewProvider";
+import FilterSort from "./FilterSort";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SearchIcon from "@mui/icons-material/Search";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterView = props => {
+  const {
+    classes,
+    onDelete,
+    onDuplicate,
+    onEnter,
+    readOnly,
+    title,
+    onTitleChange
+  } = props;
+  const {
+    sort,
+    selectedRows,
+    onDeleteRows,
+    search,
+    onSearch
+  } = useDataView();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorMoreEl, setAnchorMoreEl] = useState(null);
+  const [mode, setMode] = useState({});
+  const [toggle, setToggle] = useState(false);
+  const open = Boolean(anchorEl);
+  const openMore = Boolean(anchorMoreEl);
+  const handleSortClick = e => {
+    setAnchorEl(e?.currentTarget);
+    setMode({
+      type: "sort"
+    });
+  };
+  const handleMoreClick = e => {
+    setAnchorMoreEl(e?.currentTarget);
+    setMode({
+      type: ""
+    });
+  };
+  const handleDeleteRow = () => {
+    onDeleteRows();
+  };
+  const onClose = () => {
+    setAnchorEl(null);
+  };
+  const toggleSearch = () => {
+    setToggle(!toggle);
+  };
+  const onMenuClick = menu => () => {
+    switch (menu) {
+      case "Duplicate":
+        onDuplicate();
+        break;
+      case "Delete":
+        onDelete();
+        break;
+      default:
+    }
+  };
+  const handleMoreClose = () => {
+    setAnchorMoreEl(null);
+  };
+  const handleTitleChange = e => {
+    onTitleChange(e?.target?.value);
+  };
+  const handleEnter = e => {
+    if (e?.key === "Enter") {
+      onEnter();
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "fe-tv-fv",
+    contentEditable: false,
+    sx: classes.filterView,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "tv-title-wrpr",
+      children: !readOnly ? /*#__PURE__*/_jsx(InputBase, {
+        sx: {
+          paddingBottom: "0px",
+          fontWeight: "bold",
+          fontSize: "16px"
+        },
+        size: "small",
+        placeholder: "Untitled",
+        inputProps: {
+          "aria-label": "Table Name",
+          maxLength: 100
+        },
+        value: title,
+        onChange: handleTitleChange,
+        onKeyUp: handleEnter
+      }) : title || "Untitled"
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "tv-fi-wrpr",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: `tv-sb mr ${toggle ? "open" : ""}`,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          type: "button",
+          "aria-label": "search",
+          onClick: toggleSearch,
+          children: /*#__PURE__*/_jsx(SearchIcon, {})
+        }), /*#__PURE__*/_jsx(InputBase, {
+          sx: {
+            paddingBottom: "0px"
+          },
+          size: "small",
+          placeholder: "Search here",
+          inputProps: {
+            "aria-label": "search google maps"
+          },
+          value: search,
+          onChange: onSearch
+        })]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: `mr ${sort?.length > 0 ? "active" : ""}`,
+        onClick: handleSortClick,
+        children: /*#__PURE__*/_jsx(SwapVertIcon, {})
+      }), /*#__PURE__*/_jsx(FilterSort, {
+        open: open,
+        anchorEl: anchorEl,
+        mode: mode,
+        onClose: onClose
+      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        onClick: handleMoreClick,
+        children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
+      }) : null, selectedRows?.length > 0 && !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        onClick: handleDeleteRow,
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
+        sx: classes.basicMenu,
+        className: "tv-basic-menu",
+        anchorEl: anchorMoreEl,
+        open: openMore,
+        onClose: handleMoreClose,
+        MenuListProps: {
+          "aria-labelledby": "basic-button"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: [/*#__PURE__*/_jsxs(MenuItem, {
+          onClick: onMenuClick("Duplicate"),
+          children: [" ", /*#__PURE__*/_jsx(ContentCopyIcon, {
+            sx: {
+              mr: 1
+            }
+          }), " Duplicate"]
+        }), /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: onMenuClick("Delete"),
+          children: [" ", /*#__PURE__*/_jsx(DeleteIcon, {
+            sx: {
+              mr: 1
+            }
+          }), " Delete"]
+        })]
+      }) : null]
+    })]
+  });
+};
+export default FilterView;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RenderFormulaCell = props => {
+  const {
+    property
+  } = props;
+  return /*#__PURE__*/_jsxs("td", {
+    style: {
+      minWidth: "200px",
+      textAlign: "center",
+      color: "#CCC"
+    },
+    children: ["Calculate ", property?.key]
+  });
+};
+const Formula = props => {
+  const {
+    properties
+  } = props;
+  return /*#__PURE__*/_jsx("tr", {
+    children: properties?.map((m, i) => {
+      return /*#__PURE__*/_jsx(RenderFormulaCell, {
+        property: m
+      }, i);
+    })
+  });
+};
+export default Formula;

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

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Box, List, ListItemButton, ListItemText, ListItemIcon, TextField, Chip } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { colors } from "../../../Color Picker/defaultColors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
+const AddOptions = props => {
+  const {
+    edit,
+    onUpdate,
+    onEvent
+  } = props;
+  const [addBox, setAddBox] = useState(false);
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+  const {
+    options
+  } = edit;
+  const onAddBox = () => {
+    setAddBox(!addBox);
+  };
+  const getRandomColor = () => {
+    const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS.length);
+    return DEFAULT_COLORS[randomIndex];
+  };
+  const handleEnter = e => {
+    const isExists = options?.find(f => f.value.toLowerCase() === value.toLowerCase());
+    if (e.keyCode === 13 && value?.trim()) {
+      if (isExists) {
+        setError("Option Already Exists!");
+        return;
+      }
+      onUpdate({
+        ...edit,
+        options: [{
+          value: value,
+          color: getRandomColor()
+        }, ...(options || [])]
+      });
+      setValue("");
+    }
+  };
+  const handleChange = e => {
+    setValue(e?.target?.value);
+    setError("");
+  };
+  const handleChangeOption = optIndex => () => {
+    onEvent("editOption", {
+      edit: {
+        ...edit,
+        optionIndex: optIndex
+      }
+    });
+  };
+  const onBlur = () => {
+    setValue("");
+    setAddBox(false);
+    setError("");
+  };
+  return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
+    className: "fe-tv-addopt st sb mb-0",
+    children: [/*#__PURE__*/_jsx(List, {
+      className: "fe-dv-opt-list pl-0",
+      children: /*#__PURE__*/_jsxs(ListItemButton, {
+        onClick: onAddBox,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: "Add Options"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-desc",
+      children: "Choose an option or create one"
+    }), addBox ? /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(TextField, {
+        className: "mt",
+        size: "small",
+        fullWidth: true,
+        value: value,
+        onKeyUp: handleEnter,
+        onChange: handleChange,
+        onBlur: onBlur,
+        helperText: error
+      })
+    }) : null, /*#__PURE__*/_jsx(List, {
+      children: options?.map((m, i) => {
+        return /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: handleChangeOption(i),
+          children: [/*#__PURE__*/_jsx(ListItemText, {
+            primary: /*#__PURE__*/_jsx(Chip, {
+              label: m.value,
+              sx: {
+                background: m.color
+              }
+            })
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              justifyContent: "flex-end"
+            },
+            children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+          })]
+        }, i);
+      })
+    })]
+  }) : null;
+};
+AddOptions.defaultProps = {
+  onEvent: () => {}
+};
+export default AddOptions;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import PropertyList from "./PropertyList";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddProperty = props => {
+  const {
+    classes,
+    onClose,
+    onEvent
+  } = props;
+  const onSelect = type => () => {
+    onEvent("addProperty", type);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.addProperty,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-title",
+      children: ["Add Property", /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg br1",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-opt-content mt",
+      children: /*#__PURE__*/_jsx(PropertyList, {
+        onSelect: onSelect
+      })
+    })]
+  });
+};
+AddProperty.defaultProps = {
+  onEvent: () => {}
+};
+export default AddProperty;

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import AddIcon from "@mui/icons-material/Add";
+import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const AllProperties = props => {
+  const {
+    classes,
+    onClose,
+    onEvent
+  } = props;
+  const {
+    properties,
+    onAddProperty
+  } = useDataView();
+  const shownProperties = properties?.filter(f => f.visible === true);
+  const hiddenProperties = properties?.filter(f => f.visible === false);
+  const onEditProperty = data => () => {
+    onEvent("editProperty", {
+      edit: {
+        ...data
+      }
+    });
+  };
+  const onAdd = () => {
+    const np = onAddProperty({
+      type: "text"
+    });
+    onEvent("editProperty", {
+      edit: {
+        ...np
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.addProperty,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-title",
+      children: ["Properties", /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg br1",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-desc",
+      children: "Displayed Properties"
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "fe-dv-ap-opt-content",
+      children: [/*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list",
+        children: shownProperties?.map((m, i) => {
+          const {
+            Icon
+          } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
+          return /*#__PURE__*/_jsxs(ListItemButton, {
+            onClick: onEditProperty(m),
+            children: [/*#__PURE__*/_jsx(ListItemIcon, {
+              className: "needBg",
+              children: /*#__PURE__*/_jsx(Icon, {})
+            }), /*#__PURE__*/_jsx(ListItemText, {
+              children: m?.label
+            }), /*#__PURE__*/_jsx(ListItemIcon, {
+              sx: {
+                justifyContent: "end"
+              },
+              children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+            })]
+          }, i);
+        })
+      }), hiddenProperties?.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "fe-dv-ap-desc",
+          children: "Hidden Properties"
+        }), /*#__PURE__*/_jsx(List, {
+          className: "fe-dv-opt-list",
+          children: hiddenProperties?.map((m, i) => {
+            return /*#__PURE__*/_jsxs(ListItemButton, {
+              onClick: onEditProperty(m),
+              children: [/*#__PURE__*/_jsx(ListItemText, {
+                children: m?.label
+              }), /*#__PURE__*/_jsxs(ListItemIcon, {
+                sx: {
+                  alignItems: "center"
+                },
+                children: [TYPE_LABELS[m?.type], /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+              })]
+            }, i);
+          })
+        })]
+      }) : null, /*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list",
+        children: /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAdd,
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(AddIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: "Add New Property"
+          })]
+        })
+      })]
+    })]
+  });
+};
+AllProperties.defaultProps = {};
+export default AllProperties;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Box, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import PropertyList from "./PropertyList";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ChangeProperty = props => {
+  const {
+    classes,
+    onClose,
+    onEvent,
+    mode
+  } = props;
+  const onSelect = property => () => {
+    onEvent("updateProperty", {
+      ...(mode?.edit || {}),
+      type: property?.type
+    });
+  };
+  const onBack = () => {
+    onEvent("editProperty", {
+      edit: {
+        ...(mode?.edit || {})
+      }
+    });
+  };
+  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(ArrowBackIcon, {})
+        }), "Change Property"]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg br1",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-desc",
+      children: "Select Property Type"
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-opt-content mt",
+      children: /*#__PURE__*/_jsx(PropertyList, {
+        onSelect: onSelect,
+        selected: mode?.edit
+      })
+    })]
+  });
+};
+ChangeProperty.defaultProps = {
+  onEvent: () => {}
+};
+export default ChangeProperty;