@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box } from "@mui/material";
+import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SORT_LABELS = {
+  asc: "Ascending",
+  desc: "Descending"
+};
+const SORT_OPTIONS = [{
+  key: "asc",
+  label: SORT_LABELS.asc
+}, {
+  key: "desc",
+  label: SORT_LABELS.desc
+}];
+const ChooseSort = props => {
+  const {
+    sort,
+    onChange
+  } = props;
+  const handleChange = e => {
+    onChange(sort, {
+      operator: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: "120px"
+    },
+    className: "tv-cf",
+    children: /*#__PURE__*/_jsx(SimpleSelect, {
+      value: sort?.operator,
+      options: SORT_OPTIONS,
+      handleChange: handleChange
+    })
+  });
+};
+export default ChooseSort;

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { useDataView } from "../../../Providers/DataViewProvider";
+import ChooseSort from "./ChooseSort";
+import ChooseField from "./ChooseField";
+import ColumnsList from "../../Options/ColumnsList";
+import Icon from "../../../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SortOptions = props => {
+  const {
+    onClose
+  } = props;
+  const {
+    properties,
+    sort,
+    onUpdateSort
+  } = useDataView();
+  const handleSortChange = (currentSortData, data = {}) => {
+    onUpdateSort({
+      ...currentSortData,
+      ...data
+    });
+  };
+  const handleDelete = () => {
+    onClose();
+    onUpdateSort({}, false, true);
+  };
+  const onSelect = s => () => {
+    onUpdateSort({
+      ...s,
+      newKey: s.key,
+      operator: "asc"
+    }, false, false);
+    onClose();
+  };
+  return sort?.length > 0 ? /*#__PURE__*/_jsxs(List, {
+    className: "tv-opt-list",
+    sx: {
+      padding: '0px !important'
+    },
+    children: [sort?.map((m, i) => {
+      return /*#__PURE__*/_jsx(ListItem, {
+        sx: {
+          justifyContent: "space-between",
+          paddingLeft: 0,
+          paddingRight: 0
+        },
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            padding: 0
+          },
+          children: [/*#__PURE__*/_jsx(ChooseField, {
+            sort: m,
+            properties: properties,
+            onChange: handleSortChange
+          }), /*#__PURE__*/_jsx(ChooseSort, {
+            sort: m,
+            onChange: handleSortChange
+          })]
+        })
+      }, i);
+    }), /*#__PURE__*/_jsxs(ListItemButton, {
+      onClick: handleDelete,
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        sx: {
+          minWidth: '25px !important',
+          '& svg': {
+            background: 'transparent !important',
+            padding: '0 !important'
+          }
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'trashIcon'
+        })
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: "Delete Sort"
+      })]
+    })]
+  }) : /*#__PURE__*/_jsx(ColumnsList, {
+    properties: properties,
+    onSelect: onSelect
+  });
+};
+export default SortOptions;

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

@@ -0,0 +1,71 @@
+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,
+          sx: {
+            '& svg': {
+              '& path': {
+                strokeWidth: 0
+              }
+            }
+          },
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })]
+      }), renderMode()]
+    })
+  });
+};
+export default FilterSort;

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

@@ -0,0 +1,138 @@
+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: "20px !important",
+      fontFamily: 'Inter !important',
+      [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",
+            // },
+            '& svg': {
+              width: '14px',
+              height: '14px',
+              '& 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`
+                }
+              }
+            }
+          }
+        }
+      },
+      "& .tv-cf": {
+        "& .MuiInputBase-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          // background: appTheme?.palette?.editor?.tv_input_bg,
+          borderRadius: "8px",
+          maxHeight: '34px !important',
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_text_primary
+          }
+        }
+      }
+    }
+  },
+  contentWrapper: {
+    padding: '13px 16px 16px 20px',
+    "& .tv-opt-list": {
+      minWidth: "230px",
+      '& .bgic': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        padding: '6px',
+        borderRadius: '4px'
+      },
+      '& .MuiListItemIcon-root': {
+        '& svg': {
+          width: '14px',
+          height: '14px',
+          '& path': {
+            stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      }
+    },
+    "& .opt-wrpr": {
+      padding: "8px 0px 0px 0px"
+    },
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "bold",
+      justifyContent: "space-between",
+      fontFamily: 'Inter',
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      marginBottom: "0px",
+      padding: "0px 0px 8px 0px",
+      "& span": {
+        display: "flex",
+        alignItems: "center",
+        fontFamily: 'Inter'
+      }
+    }
+  }
+});
+export default useFilterSortStyles;

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

@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
+import { useDataView } from "../Providers/DataViewProvider";
+import FilterSort from "./FilterSort";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import Icon from "../../../common/Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+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 {
+    theme
+  } = useEditorContext();
+  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",
+      sx: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: `tv-sb mr ${toggle ? "open" : ""}`,
+        sx: {
+          minHeight: '32px'
+        },
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          type: "button",
+          sx: {
+            '& svg': {
+              width: '14px',
+              height: '14px'
+            }
+          },
+          "aria-label": "search",
+          onClick: toggleSearch,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "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: ` ${sort?.length > 0 ? "active" : ""}`,
+        onClick: handleSortClick,
+        sx: {
+          '& svg': {
+            strokeWidth: 1.2
+          }
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'sortBy'
+        })
+      }), /*#__PURE__*/_jsx(FilterSort, {
+        open: open,
+        anchorEl: anchorEl,
+        mode: mode,
+        onClose: onClose
+      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        sx: {
+          '& svg': {
+            fill: theme?.palette?.editor?.tv_stroke
+          }
+        },
+        onClick: handleMoreClick,
+        children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
+      }) : null, selectedRows?.length > 0 && !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        onClick: handleDeleteRow,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: 'trashIcon'
+        })
+      }) : 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(Box, {
+            sx: {
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'duplicateIcon'
+            })
+          }), "Duplicate"]
+        }), /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: onMenuClick("Delete"),
+          children: [" ", /*#__PURE__*/_jsx(Box, {
+            sx: {
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'trashIcon'
+            })
+          }), "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 { colors } from "../../../Color Picker/defaultColors";
+import Icon from "../../../../common/Icon";
+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") || f === "#000000"));
+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 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(Icon, {
+            icon: 'plusIcon'
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: "Add Options"
+        })]
+      })
+    }), 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(Icon, {
+              icon: 'rightArrow'
+            })
+          })]
+        }, i);
+      })
+    })]
+  }) : null;
+};
+AddOptions.defaultProps = {
+  onEvent: () => {}
+};
+export default AddOptions;