@flozy/editor 5.1.2 → 5.1.4

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -1,140 +0,0 @@
-import React from "react";
-import TextField from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-import { Box, Chip, useTheme } from "@mui/material";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import useCompStyles from "./styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-const filter = (opt, params, selectedOpt) => {
-  const selectedVals = selectedOpt?.map(m => m?.value);
-  const fv = opt?.filter(f => !selectedVals.includes(f.value));
-  if (params?.inputValue) {
-    fv.filter(f => f?.value?.toLowerCase().indexOf(params?.inputValue?.toLowerCase()) >= 0);
-  }
-  return fv;
-};
-export default function Select(props) {
-  const theme = useTheme();
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCompStyles(theme, appTheme);
-  const {
-    value,
-    onChange,
-    options,
-    multiple = false,
-    limitTags = 2,
-    placeholder = "",
-    disabled = false
-  } = props;
-  return /*#__PURE__*/_jsx(Autocomplete, {
-    disabled: disabled,
-    className: "tv-ac-field",
-    multiple: true,
-    limitTags: limitTags,
-    placeholder: placeholder,
-    value: value || "",
-    onChange: (event, newValue) => {
-      const fv = [];
-      newValue?.forEach(m => {
-        if (multiple) {
-          fv.push({
-            value: m.inputValue || m.value
-          });
-        } else {
-          fv[0] = {
-            value: m.inputValue || m.value
-          };
-        }
-      });
-      onChange(fv);
-    },
-    filterOptions: (options, params) => {
-      const filtered = filter(options, params, value);
-
-      // const { inputValue } = params;
-      // Suggest the creation of a new value
-      // const isExisting = options.some(
-      //   (option) => inputValue?.toLowerCase() === option.value?.toLowerCase()
-      // );
-      // no need of new val now
-      // if (inputValue !== "" && !isExisting) {
-      //   filtered.push({
-      //     inputValue,
-      //     value: `Add "${inputValue}"`,
-      //   });
-      // }
-
-      return filtered;
-    },
-    selectOnFocus: true,
-    clearOnBlur: true,
-    handleHomeEndKeys: true,
-    options: options || [],
-    getOptionLabel: option => {
-      // Value selected with enter, right from the input
-      if (typeof option === "string") {
-        return option;
-      }
-      // Add "xxx" option created dynamically
-      if (option.inputValue) {
-        return option.inputValue;
-      }
-      // Regular option
-      return option.value || "";
-    },
-    renderTags: (value, getTagProps) => {
-      return /*#__PURE__*/_jsx(Box, {
-        className: "tv-ms-tag-wrpr",
-        children: value?.map((option, index) => {
-          const {
-            key,
-            ...tagProps
-          } = getTagProps({
-            index
-          }) || {};
-          return option?.value ? /*#__PURE__*/_jsx(Chip, {
-            variant: "outlined",
-            label: option?.label || option?.value,
-            ...tagProps,
-            sx: {
-              background: option?.color || "#CCC",
-              border: "none"
-            }
-          }, key) : null;
-        })
-      });
-    },
-    renderOption: (props, option) => {
-      const {
-        key,
-        ...optionProps
-      } = props;
-      return /*#__PURE__*/_jsx("li", {
-        ...optionProps,
-        children: /*#__PURE__*/_jsx(Chip, {
-          label: option.label || option.value || "",
-          sx: {
-            backgroundColor: option.color || "#CCC"
-          }
-        })
-      }, key);
-    },
-    freeSolo: true,
-    size: "small",
-    fullWidth: true,
-    renderInput: params => {
-      return /*#__PURE__*/_jsx(TextField, {
-        size: "small",
-        ...params,
-        placeholder: placeholder
-      });
-    },
-    slotProps: {
-      paper: {
-        sx: classes.autocomplete
-      }
-    }
-  });
-}

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js

@@ -1,40 +0,0 @@
-import React from "react";
-import { MenuItem, Select, useTheme } from "@mui/material";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import useCompStyles from "./styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SimpleSelect = props => {
-  const theme = useTheme();
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCompStyles(theme, appTheme);
-  const {
-    value,
-    options,
-    handleChange,
-    disabled = false
-  } = props;
-  console.log(classes);
-  return /*#__PURE__*/_jsx(Select, {
-    disabled: disabled,
-    value: value,
-    onChange: handleChange,
-    fullWidth: true,
-    size: "small",
-    MenuProps: {
-      PaperProps: {
-        sx: classes.simpleselect,
-        className: "tv-cf-opt-wrpr"
-      }
-    },
-    children: options?.map((m, i) => {
-      return /*#__PURE__*/_jsx(MenuItem, {
-        value: m.key,
-        className: "tv-cf-opt-wrpr",
-        children: m.label
-      }, i);
-    })
-  });
-};
-export default SimpleSelect;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js

@@ -1,59 +0,0 @@
-const useCompStyles = (theme, appTheme) => ({
-  simpleselect: {
-    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-    background: appTheme?.palette?.editor?.tv_pop_bg,
-    color: appTheme?.palette?.editor?.tv_text_primary,
-    borderRadius: "8px",
-    [theme.breakpoints.between("xs", "md")]: {},
-    "& ul": {
-      padding: "4px",
-      "& li": {
-        padding: "4px 6px",
-        borderRadius: "8px",
-        color: appTheme?.palette?.editor?.tv_text_primary,
-        fontSize: "14px",
-        marginTop: "4px",
-        "&.Mui-selected": {
-          background: appTheme?.palette?.editor?.tv_hover_bg,
-          color: appTheme?.palette?.editor?.tv_hover_text,
-          "&:hover": {
-            background: appTheme?.palette?.editor?.tv_hover_bg,
-            color: appTheme?.palette?.editor?.tv_hover_text
-          }
-        },
-        "&:hover": {
-          background: appTheme?.palette?.editor?.tv_hover_bg,
-          color: appTheme?.palette?.editor?.tv_hover_text
-        }
-      }
-    }
-  },
-  autocomplete: {
-    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-    background: appTheme?.palette?.editor?.tv_pop_bg,
-    color: appTheme?.palette?.editor?.tv_text_primary,
-    borderRadius: "8px",
-    "& ul": {
-      padding: "4px",
-      "& .MuiAutocomplete-option": {
-        padding: "4px 6px",
-        borderRadius: "8px",
-        color: appTheme?.palette?.editor?.tv_text_primary,
-        fontSize: "14px",
-        "&.Mui-selected": {
-          background: appTheme?.palette?.editor?.tv_hover_bg,
-          color: appTheme?.palette?.editor?.tv_hover_text,
-          "&:hover": {
-            background: appTheme?.palette?.editor?.tv_hover_bg,
-            color: appTheme?.palette?.editor?.tv_hover_text
-          }
-        },
-        "&:hover": {
-          background: appTheme?.palette?.editor?.tv_hover_bg,
-          color: appTheme?.palette?.editor?.tv_hover_text
-        }
-      }
-    }
-  }
-});
-export default useCompStyles;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -1,26 +0,0 @@
-import React from "react";
-import DatePicker from "react-datepicker";
-import { useDataView } from "../../Providers/DataViewProvider";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DateType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const handleChange = date => {
-    onChange(rowIndex, {
-      [property]: date
-    });
-  };
-  return /*#__PURE__*/_jsx(DatePicker, {
-    disabled: readOnly,
-    selected: value ? new Date(value) : "",
-    onChange: handleChange
-  });
-};
-export default DateType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -1,38 +0,0 @@
-import React from "react";
-import { useDataView } from "../../Providers/DataViewProvider";
-import Select from "./Components/Select";
-import { jsx as _jsx } from "react/jsx-runtime";
-const MultiSelectType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    options,
-    label = "",
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const coloredValues = [...(value || [])]?.map(m => {
-    return {
-      ...m,
-      color: options?.find(f => f.value === m.value)?.color || "#FFF"
-    };
-  });
-  const handleChange = data => {
-    onChange(rowIndex, {
-      [property]: data?.filter(f => f?.value)
-    });
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    value: coloredValues,
-    onChange: handleChange,
-    options: options,
-    multiple: true,
-    limitTags: 2,
-    placeholder: label,
-    disabled: readOnly
-  });
-};
-export default MultiSelectType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { TextField } from "@mui/material";
-import { useDataView } from "../../Providers/DataViewProvider";
-import { jsx as _jsx } from "react/jsx-runtime";
-const NumberType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const handleChange = e => {
-    onChange(rowIndex, {
-      [property]: e?.target?.value
-    });
-  };
-  return /*#__PURE__*/_jsx(TextField, {
-    type: "number",
-    fullWidth: true,
-    className: "fe-tv-type_text",
-    value: value,
-    size: "small",
-    onChange: handleChange,
-    disabled: readOnly
-  });
-};
-export default NumberType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { useDataView } from "../../Providers/DataViewProvider";
-import Select from "./Components/Select";
-import { jsx as _jsx } from "react/jsx-runtime";
-const PersonType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange,
-    users
-  } = useDataView();
-  console.log(users);
-  const handleChange = data => {
-    onChange(rowIndex, {
-      [property]: data?.filter(f => f?.value)
-    });
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    value: value || [],
-    onChange: handleChange,
-    options: users,
-    multiple: false,
-    disabled: readOnly
-  });
-};
-export default PersonType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js

@@ -1,35 +0,0 @@
-import React from "react";
-import { useDataView } from "../../Providers/DataViewProvider";
-import Select from "./Components/Select";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SelectType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    options,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const coloredValues = [...(value || [])]?.map(m => {
-    return {
-      ...m,
-      color: options?.find(f => f.value === m.value)?.color
-    };
-  });
-  const handleChange = data => {
-    onChange(rowIndex, {
-      [property]: data?.filter(f => f?.value)
-    });
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    value: coloredValues,
-    onChange: handleChange,
-    options: options,
-    multiple: false,
-    disabled: readOnly
-  });
-};
-export default SelectType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js

@@ -1,36 +0,0 @@
-import React from "react";
-import { TextField } from "@mui/material";
-import { useDataView } from "../../Providers/DataViewProvider";
-import { jsx as _jsx } from "react/jsx-runtime";
-const TextType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const handleChange = e => {
-    onChange(rowIndex, {
-      [property]: e?.target?.value
-    });
-  };
-  const formatValue = () => {
-    if (typeof value === "string") {
-      return value;
-    } else if (value[0]) {
-      return value?.map(m => m.value).join(", ");
-    }
-  };
-  return /*#__PURE__*/_jsx(TextField, {
-    fullWidth: true,
-    className: "fe-tv-type_text",
-    value: formatValue(value),
-    size: "small",
-    onChange: handleChange,
-    disabled: readOnly
-  });
-};
-export default TextType;

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

@@ -1,17 +0,0 @@
-import TextType from "./TextType";
-import DateType from "./DateType";
-import SelectType from "./SelectType";
-import MultiSelectType from "./MultiSelectType";
-import NumberType from "./NumberType";
-import CheckType from "./CheckType";
-import PersonType from "./PersonType";
-const DataTypes = {
-  text: TextType,
-  date: DateType,
-  select: SelectType,
-  "multi-select": MultiSelectType,
-  number: NumberType,
-  check: CheckType,
-  person: PersonType
-};
-export default DataTypes;

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

@@ -1,29 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ChooseField = props => {
-  const {
-    sort,
-    properties,
-    onChange
-  } = props;
-  const handleChange = e => {
-    onChange(sort, {
-      newKey: e?.target?.value
-    });
-  };
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      width: "120px",
-      mr: 1
-    },
-    className: "tv-cf",
-    children: /*#__PURE__*/_jsx(SimpleSelect, {
-      value: sort?.key,
-      options: properties,
-      handleChange: handleChange
-    })
-  });
-};
-export default ChooseField;

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

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

@@ -1,74 +0,0 @@
-import React from "react";
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
-import { useDataView } from "../../../Providers/DataViewProvider";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ChooseSort from "./ChooseSort";
-import ChooseField from "./ChooseField";
-import ColumnsList from "../../Options/ColumnsList";
-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: {
-      p: 0
-    },
-    children: [sort?.map((m, i) => {
-      return /*#__PURE__*/_jsx(ListItem, {
-        sx: {
-          justifyContent: "space-between"
-        },
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex"
-          },
-          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, {
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
-      }), /*#__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

@@ -1,64 +0,0 @@
-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",
-          size: "small",
-          onClick: onClose,
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
-        })]
-      }), renderMode()]
-    })
-  });
-};
-export default FilterSort;