@flozy/editor 5.4.0 → 5.4.1

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

@@ -1,124 +0,0 @@
-import React from "react";
-import { Node, Path, Transforms } from "slate";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, useTheme } from "@mui/material";
-import { DataViewProvider } from "./Providers/DataViewProvider";
-import useDataViewStyles from "./styles";
-import LayoutView from "./Layouts";
-import FilterView from "./Layouts/FilterView";
-import { insertLineBreakAtEndOfPath } from "../../utils/helper";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const DataView = props => {
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const theme = useTheme();
-  const editor = useSlateStatic();
-  const {
-    attributes,
-    children,
-    element,
-    customProps
-  } = props;
-  const {
-    CHARACTERS,
-    readOnly
-  } = customProps || {};
-  const {
-    properties,
-    layouts,
-    rows,
-    title
-  } = element;
-  const classes = useDataViewStyles(theme, appTheme);
-  const path = ReactEditor.findPath(editor, element);
-  const users = CHARACTERS?.map(m => {
-    const name = [m?.first_name || "", m?.last_name || ""]?.join(" ").trim();
-    return {
-      value: m?.email,
-      name: name || m?.username || m?.email,
-      avatar: m?.avatar || null
-    };
-  });
-  const onDuplicate = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      const dataViewNode = Node.get(editor, newPath);
-      const cloneNode = JSON.parse(JSON.stringify(dataViewNode));
-      const toPath = Path.next(Path.parent(newPath));
-      Transforms.insertNodes(editor, [{
-        type: "paragraph",
-        children: [{
-          ...cloneNode
-        }]
-      }], {
-        at: toPath
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onDelete = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      Transforms.removeNodes(editor, {
-        at: newPath
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onEnter = () => {
-    try {
-      const newPath = ReactEditor.findPath(editor, element);
-      const toPath = Path.previous(Path.parent(newPath));
-      insertLineBreakAtEndOfPath(editor, toPath);
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onTitleChange = value => {
-    try {
-      Transforms.setNodes(editor, {
-        title: value
-      }, {
-        at: path
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  return /*#__PURE__*/_jsx(Box, {
-    ...attributes,
-    className: "fe-dataview",
-    sx: classes.root,
-    contentEditable: false,
-    "data-title": title,
-    children: /*#__PURE__*/_jsxs(DataViewProvider, {
-      data: {
-        properties,
-        layouts,
-        rows
-      },
-      path: path,
-      editor: editor,
-      title: title,
-      users: users,
-      children: [/*#__PURE__*/_jsx(FilterView, {
-        classes: classes,
-        onEnter: onEnter,
-        onDelete: onDelete,
-        onDuplicate: onDuplicate,
-        readOnly: readOnly,
-        title: title,
-        onTitleChange: onTitleChange
-      }), /*#__PURE__*/_jsx(LayoutView, {
-        readOnly: readOnly,
-        children: children
-      })]
-    })
-  });
-};
-export default DataView;

package/dist/Editor/Elements/DataView/DataViewButton.js

@@ -1,23 +0,0 @@
-import React from "react";
-import ToolbarIcon from "../../common/ToolbarIcon";
-import Icon from "../../common/Icon";
-import { insertDataView } from "../../utils/dataView";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DataViewButton = props => {
-  const {
-    editor,
-    icoBtnType
-  } = props;
-  const onClick = () => {
-    insertDataView(editor);
-  };
-  return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "Dynamic Table",
-    onClick: onClick,
-    icon: /*#__PURE__*/_jsx(Icon, {
-      icon: "dataView"
-    }),
-    icoBtnType: icoBtnType
-  });
-};
-export default DataViewButton;

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

@@ -1,67 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Box, Checkbox, Popper, useTheme } from "@mui/material";
-import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone";
-import DataTypes from "./DataTypes";
-import useColumnStyles from "./colStyles";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ColumnView = props => {
-  const theme = useTheme();
-  const {
-    needAnchor,
-    rowIndex,
-    row,
-    property,
-    onSelect,
-    selected,
-    readOnly
-  } = props;
-  const DataType = DataTypes[property?.type] || DataTypes["text"];
-  const anchorRef = useRef(null);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const classes = useColumnStyles(theme);
-  useEffect(() => {
-    if (anchorRef?.current) {
-      setAnchorEl(anchorRef?.current);
-    }
-  }, [anchorRef?.current]);
-  const handleSelect = id => e => {
-    onSelect(id, e.target.checked);
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    component: "td",
-    children: [needAnchor ? /*#__PURE__*/_jsx("span", {
-      ref: anchorRef,
-      style: {
-        position: "absolute",
-        width: "1px"
-      }
-    }) : null, /*#__PURE__*/_jsx(DataType, {
-      options: property?.options,
-      property: property?.key,
-      value: row[property?.key] || "",
-      rowIndex: rowIndex,
-      label: property?.label,
-      readOnly: readOnly
-    }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
-      sx: classes.root,
-      open: open,
-      anchorEl: anchorEl,
-      placement: "left",
-      className: `tv-tr-pop ${selected ? "active" : ""}`,
-      disablePortal: true,
-      children: /*#__PURE__*/_jsx(Checkbox, {
-        onClick: handleSelect(row?.id),
-        size: "small",
-        className: "tv-ck-box",
-        sx: {
-          mr: 0
-        },
-        checked: selected,
-        checkedIcon: /*#__PURE__*/_jsx(CheckBoxTwoToneIcon, {})
-      })
-    }) : null]
-  });
-};
-export default ColumnView;

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

@@ -1,33 +0,0 @@
-import React from "react";
-import { useDataView } from "../../Providers/DataViewProvider";
-import Checkbox from "@mui/material/Checkbox";
-import Icon from "../../../../common/Icon";
-import { jsx as _jsx } from "react/jsx-runtime";
-const CheckType = props => {
-  const {
-    rowIndex,
-    property,
-    value,
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const handleChange = e => {
-    onChange(rowIndex, {
-      [property]: e?.target?.checked
-    });
-  };
-  return /*#__PURE__*/_jsx(Checkbox, {
-    checked: value || false,
-    icon: /*#__PURE__*/_jsx(Icon, {
-      icon: "checkListButton"
-    }),
-    checkedIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "checkListButtonActive"
-    }),
-    onChange: handleChange,
-    disabled: readOnly
-  }, rowIndex);
-};
-export default CheckType;

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

@@ -1,162 +0,0 @@
-import React from "react";
-import TextField from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-import { Avatar, Box, Chip, useTheme } from "@mui/material";
-import { useEditorContext } from "../../../../../hooks/useMouseMove";
-import useCompStyles from "./styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-const AvatarIcon = props => {
-  const {
-    option,
-    avatar
-  } = props;
-  const nameIndex = option.label || option.value;
-  return avatar && nameIndex ? /*#__PURE__*/_jsx(Avatar, {
-    alt: option.label || option.value,
-    src: option.avatar || null,
-    children: nameIndex[0] || ""
-  }) : null;
-};
-const filter = (opt, params, selectedOpt) => {
-  const selectedVals = selectedOpt?.map(m => m?.value);
-  const fv = opt?.filter(f => !selectedVals.includes(f.value));
-  if (params?.inputValue) {
-    return 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: pValue,
-    onChange,
-    options,
-    multiple = false,
-    limitTags = 2,
-    placeholder = "",
-    disabled = false,
-    optionAvatar = false
-  } = props;
-  const value = Array.isArray(pValue) ? pValue : [];
-  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"
-            },
-            avatar: /*#__PURE__*/_jsx(AvatarIcon, {
-              option: option,
-              avatar: optionAvatar
-            })
-          }, key) : null;
-        })
-      });
-    },
-    renderOption: (props, option) => {
-      const {
-        key,
-        ...optionProps
-      } = props;
-      return /*#__PURE__*/_jsx("li", {
-        ...optionProps,
-        children: /*#__PURE__*/_jsx(Chip, {
-          label: option.label || option.value || "",
-          sx: {
-            background: option.color || "#CCC"
-          },
-          avatar: /*#__PURE__*/_jsx(AvatarIcon, {
-            option: option,
-            avatar: optionAvatar
-          })
-        })
-      }, 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,67 +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",
-        "& .MuiAvatar-root": {
-          width: "20px",
-          height: "20px",
-          marginLeft: "8px",
-          fontSize: "16px",
-          padding: "2px",
-          textTransform: "capitalize"
-        },
-        "&.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,35 +0,0 @@
-import React from "react";
-import DatePicker from "react-datepicker";
-import { useDataView } from "../../Providers/DataViewProvider";
-import { jsx as _jsx } from "react/jsx-runtime";
-function isValidDate(dateString) {
-  const date = new Date(dateString);
-  return !isNaN(date.getTime());
-}
-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: isValidDate(value) ? new Date(value) : "",
-    onChange: handleChange,
-    onKeyDown: e => {
-      e.preventDefault();
-      console.log(e?.target.value);
-    },
-    placeholderText: "MM/DD/YYYY"
-  });
-};
-export default DateType;

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

@@ -1,39 +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: pValue,
-    options,
-    label = "",
-    readOnly
-  } = props;
-  const {
-    onChange
-  } = useDataView();
-  const value = Array.isArray(pValue) ? pValue : [];
-  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();
-  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,
-    optionAvatar: true
-  });
-};
-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;