@flozy/editor 5.1.4 → 5.1.6

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,59 @@
+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",
+    ref: anchorRef,
+    children: [/*#__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
+      },
+      open: open,
+      anchorEl: anchorEl,
+      placement: "left",
+      container: anchorRef?.current,
+      className: `tv-tr-pop ${selected ? "active" : ""}`,
+      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,140 @@
+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

@@ -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,59 @@
+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

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

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

@@ -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();
+  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

@@ -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;

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

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

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

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

@@ -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;