@flozy/editor 5.1.5 → 5.1.7

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

@@ -0,0 +1,109 @@
+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,
+    title
+  } = props;
+  const {
+    CHARACTERS,
+    readOnly
+  } = customProps || {};
+  const {
+    properties,
+    layouts,
+    rows
+  } = 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);
+    }
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    ...attributes,
+    className: "fe-dataview",
+    sx: classes.root,
+    children: /*#__PURE__*/_jsxs(DataViewProvider, {
+      initialData: {
+        properties,
+        layouts,
+        rows,
+        users: users,
+        tableTitle: title
+      },
+      path: path,
+      editor: editor,
+      children: [/*#__PURE__*/_jsx(FilterView, {
+        classes: classes,
+        onEnter: onEnter,
+        onDelete: onDelete,
+        onDuplicate: onDuplicate,
+        readOnly: readOnly
+      }), /*#__PURE__*/_jsx(LayoutView, {
+        readOnly: readOnly,
+        children: children
+      })]
+    })
+  });
+};
+export default DataView;

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

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Checkbox, Popper } from "@mui/material";
+import DataTypes from "./DataTypes";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnView = props => {
+  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);
+  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: {
+        zIndex: 1000,
+        marginTop: "20px !important"
+      },
+      open: open,
+      anchorEl: anchorEl,
+      placement: "left",
+      container: anchorRef?.current,
+      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
+      })
+    }) : null]
+  });
+};
+export default ColumnView;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Checkbox from "@mui/material/Checkbox";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+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,
+    icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
+    checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+    onChange: handleChange,
+    disabled: readOnly
+  }, rowIndex);
+};
+export default CheckType;

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

@@ -0,0 +1,162 @@
+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 ? /*#__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) {
+    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: {
+            backgroundColor: 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

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

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

@@ -0,0 +1,30 @@
+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
+  });
+};
+export default DateType;

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

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

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

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

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