@flozy/editor 5.3.0 → 5.3.2

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { List, ListItemButton, ListItemIcon, ListItemText, Box } 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 ColumnsList = props => {
+  const {
+    properties
+  } = props;
+  const {
+    onSelect,
+    selected
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "opt-wrpr",
+    children: /*#__PURE__*/_jsx(List, {
+      className: "tv-opt-list",
+      children: properties?.map((m, i) => {
+        const {
+          Icon
+        } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
+        return /*#__PURE__*/_jsxs(ListItemButton, {
+          className: selected?.type === m?.type ? "active" : "",
+          onClick: onSelect(m),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: m?.label
+          })]
+        }, i);
+      })
+    })
+  });
+};
+ColumnsList.defaultProps = {};
+export default ColumnsList;

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

@@ -0,0 +1,101 @@
+import NotesIcon from "@mui/icons-material/Notes";
+import TagIcon from "@mui/icons-material/Tag";
+import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
+import ChecklistIcon from "@mui/icons-material/Checklist";
+import InsertInvitationIcon from "@mui/icons-material/InsertInvitation";
+import PersonIcon from "@mui/icons-material/Person";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+// import FilterListIcon from "@mui/icons-material/FilterList";
+
+export const TYPE_LABELS = {
+  text: "Text",
+  number: "Number",
+  select: "Select",
+  "multi-select": "Multi Select",
+  date: "Date",
+  person: "Person",
+  check: "Checkbox"
+};
+export const PROPERTY_DEFAULTS = {
+  text: {
+    label: TYPE_LABELS?.text,
+    visible: true
+  },
+  number: {
+    label: TYPE_LABELS.number,
+    visible: true
+  },
+  select: {
+    label: TYPE_LABELS.select,
+    visible: true
+  },
+  "multi-select": {
+    label: TYPE_LABELS["multi-select"],
+    visible: true
+  },
+  date: {
+    label: TYPE_LABELS.date,
+    visible: true
+  },
+  check: {
+    label: TYPE_LABELS.check,
+    visible: true
+  },
+  person: {
+    label: TYPE_LABELS.person,
+    visible: true
+  }
+};
+export const PROPERTY_TYPES = [{
+  type: "text",
+  label: TYPE_LABELS.text,
+  Icon: NotesIcon
+}, {
+  type: "number",
+  label: TYPE_LABELS.number,
+  Icon: TagIcon
+}, {
+  type: "select",
+  label: TYPE_LABELS.select,
+  Icon: ArrowDropDownCircleIcon
+}, {
+  type: "multi-select",
+  label: TYPE_LABELS["multi-select"],
+  Icon: ChecklistIcon
+}, {
+  type: "date",
+  label: TYPE_LABELS.date,
+  Icon: InsertInvitationIcon
+}, {
+  type: "check",
+  label: TYPE_LABELS.check,
+  Icon: CheckCircleOutlineIcon
+}, {
+  type: "person",
+  label: TYPE_LABELS.person,
+  Icon: PersonIcon
+}];
+export const FILTER_TYPES = [{
+  type: "sort",
+  operator: "asc",
+  label: "Sort Ascending",
+  value: "",
+  Icon: ArrowUpwardIcon
+}, {
+  type: "sort",
+  operator: "desc",
+  label: "Sort Descending",
+  Icon: ArrowDownwardIcon
+}
+// {
+//   type: "filter",
+//   operator: "contains",
+//   label: "Filter",
+//   value: "",
+//   Icon: FilterListIcon,
+// },
+];
+
+export const DEFAULT_OPTION_COLORS = ["rgba(131, 96, 253, 0.5)", "rgba(180, 180, 180, 1)", "rgba(72, 159, 248, 0.5)", "rgba(254, 122, 0, 0.5)", "rgba(214, 105, 190, 0.5)", "rgba(255, 229, 0, 0.5)"];

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

@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemIcon, ListItemText, FormControlLabel } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ColorButtons from "../../../Color Picker/ColorButtons";
+import ColorPickerStyles from "../../../Color Picker/Styles";
+import { DEFAULT_OPTION_COLORS } from "./Constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EditOption = props => {
+  const {
+    classes,
+    onClose,
+    mode,
+    onEvent
+  } = props;
+  const [edit, setEdit] = useState({
+    ...(mode?.edit || {})
+  });
+  const editData = useRef({
+    ...edit
+  });
+  const {
+    optionIndex
+  } = edit;
+  const selectedOption = edit?.options[optionIndex] || {};
+  const pickerStyles = ColorPickerStyles();
+  useEffect(() => {
+    return () => {
+      // on un-mount update the option change
+      if (editData?.current) {
+        delete editData?.current?.edited;
+        onEvent("updateProperty", {
+          ...editData?.current
+        });
+      }
+    };
+  }, []);
+  const onChange = e => {
+    const updatedOptions = edit?.options.map((m, i) => {
+      if (i === edit?.optionIndex) {
+        return {
+          ...m,
+          [e.target.name]: e?.target?.value
+        };
+      }
+      return m;
+    });
+
+    // for delete
+    if (edit?.optionIndex > -1 && e?.target?.delete) {
+      updatedOptions.splice(edit?.optionIndex, 1);
+    }
+    const latest = {
+      ...edit,
+      options: [...updatedOptions]
+    };
+    setEdit({
+      ...latest
+    });
+    editData.current = {
+      ...latest,
+      edited: true
+    };
+
+    // if delete go back
+    if (e?.target?.delete) {
+      onEvent("editProperty", {
+        edit: {
+          ...latest
+        }
+      });
+    }
+  };
+  const onBack = () => {
+    onEvent("editProperty", {
+      edit: {
+        ...edit
+      }
+    });
+  };
+  const onDeleteOption = () => {
+    onChange({
+      target: {
+        delete: true
+      }
+    });
+  };
+  const onColorChange = color => {
+    onChange({
+      target: {
+        name: "color",
+        value: color
+      }
+    });
+  };
+  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, {})
+        }), "Edit Option"]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "tv-act-ico bg",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "fe-dv-ap-opt-content mt-1 mb",
+      children: /*#__PURE__*/_jsx(FormControlLabel, {
+        className: "ml-0",
+        label: "Option Name",
+        control: /*#__PURE__*/_jsx(TextField, {
+          size: "small",
+          name: "value",
+          value: selectedOption?.value,
+          onChange: onChange,
+          fullWidth: true,
+          placeholder: "Option Name"
+        }),
+        labelPlacement: "top"
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "label-desc mt-1",
+      children: [/*#__PURE__*/_jsx(Box, {
+        className: "label-tp mb",
+        children: "Choose Color"
+      }), /*#__PURE__*/_jsx(Box, {
+        className: "ml",
+        children: /*#__PURE__*/_jsx(ColorButtons, {
+          classes: pickerStyles,
+          onSelect: onColorChange,
+          activeColor: selectedOption?.color,
+          defaultColors: DEFAULT_OPTION_COLORS
+        })
+      })]
+    }), /*#__PURE__*/_jsx(List, {
+      className: "fe-dv-opt-list st",
+      children: /*#__PURE__*/_jsxs(ListItemButton, {
+        onClick: onDeleteOption,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          children: "Delete Option"
+        })]
+      })
+    })]
+  });
+};
+EditOption.defaultProps = {
+  onEvent: () => {}
+};
+export default EditOption;

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;