@flozy/editor 5.0.4 → 5.0.6

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

@@ -0,0 +1,214 @@
+import React, { useState } from "react";
+import { Box, Button, useTheme } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useDataView } from "../Providers/DataViewProvider";
+import PropertySettings from "./Options";
+import { PROPERTY_TYPES } from "./Options/Constants";
+import useTableStyles from "./TableStyles";
+import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SortIcon = props => {
+  const {
+    sortBy
+  } = props;
+  return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(KeyboardArrowUpIcon, {
+    sx: {
+      color: "rgba(37, 99, 235, 1)"
+    }
+  }) : /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {
+    sx: {
+      color: "rgba(37, 99, 235, 1)"
+    }
+  }) : null;
+};
+const TableView = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const {
+    children,
+    readOnly
+  } = props;
+  const theme = useTheme();
+  const classes = useTableStyles(theme, appTheme);
+  const {
+    properties,
+    onAddProperty,
+    onUpdateProperty,
+    onUpdateSort,
+    sort
+  } = useDataView();
+  const [sortBy] = sort || [];
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [mode, setMode] = useState({
+    mode: null,
+    edit: null
+  });
+  const open = Boolean(anchorEl);
+  const shownProperties = properties?.filter(f => f.visible);
+  const onAddClick = e => {
+    setMode({
+      type: "addProperty"
+    });
+    setAnchorEl(e.currentTarget);
+  };
+  const onEvent = (type, data, navToEdit = true) => {
+    switch (type) {
+      case "addProperty":
+        const np = onAddProperty({
+          type: data?.type
+        }, data?.overrides || {});
+        if (navToEdit) {
+          setMode({
+            type: "editProperty",
+            edit: {
+              ...np
+            }
+          });
+        }
+        break;
+      case "editProperty":
+        setMode({
+          type: "editProperty",
+          edit: {
+            ...data?.edit
+          }
+        });
+        break;
+      case "changeProperty":
+        setMode({
+          type: "changeProperty",
+          edit: {
+            ...(data?.edit || {})
+          }
+        });
+        break;
+      case "updateProperty":
+        const up = onUpdateProperty(data);
+        if (navToEdit) {
+          setMode({
+            type: "editProperty",
+            edit: {
+              ...(up || {})
+            }
+          });
+        }
+        break;
+      case "deleteProperty":
+        onUpdateProperty(data, true);
+        break;
+      case "allProperties":
+        setMode({
+          type: "allProperties",
+          edit: null
+        });
+        break;
+      case "editOption":
+        setMode({
+          type: "editOption",
+          edit: {
+            ...(data?.edit || {})
+          }
+        });
+        break;
+      case "addSort":
+        onUpdateSort(data);
+        break;
+      case "close":
+        onClose();
+        break;
+      default:
+        return;
+    }
+  };
+  const onEditProperty = data => e => {
+    if (!readOnly) {
+      setAnchorEl(e?.currentTarget);
+      onEvent("editProperty", {
+        edit: {
+          ...data
+        }
+      });
+    } else {
+      const currentSort = sortBy?.key === data?.key ? sortBy : null;
+      onUpdateSort({
+        ...(sortBy || data),
+        newKey: data.key,
+        operator: currentSort?.operator === "asc" ? "desc" : "asc"
+      }, false, false);
+    }
+  };
+  const onSettings = e => {
+    setAnchorEl(e?.currentTarget);
+    onEvent("allProperties", {});
+  };
+  const onClose = () => {
+    setMode({});
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: `tv-d-wrapper ${readOnly ? "readOnly" : ""}`,
+      sx: classes.root,
+      contentEditable: false,
+      children: /*#__PURE__*/_jsxs(Box, {
+        component: "table",
+        sx: classes.table,
+        children: [/*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsxs("tr", {
+            children: [shownProperties?.map((m, i) => {
+              const {
+                Icon
+              } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
+              const isSort = sortBy?.key === m.key ? sortBy?.operator : null;
+              return /*#__PURE__*/_jsx("th", {
+                style: {
+                  minWidth: "200px"
+                },
+                children: /*#__PURE__*/_jsx(Button, {
+                  className: "tv-act-btn la",
+                  startIcon: /*#__PURE__*/_jsx(Icon, {}),
+                  endIcon: /*#__PURE__*/_jsx(SortIcon, {
+                    sortBy: isSort
+                  }),
+                  fullWidth: true,
+                  onClick: onEditProperty(m),
+                  children: m.label
+                })
+              }, i);
+            }), !readOnly ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx("th", {
+                className: "tv-act-btn ico",
+                children: /*#__PURE__*/_jsx(Button, {
+                  onClick: onAddClick,
+                  fullWidth: true,
+                  children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
+                })
+              }), /*#__PURE__*/_jsx("th", {
+                className: "tv-act-btn ico",
+                children: /*#__PURE__*/_jsx(Button, {
+                  onClick: onSettings,
+                  fullWidth: true,
+                  children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+                })
+              })]
+            }) : null]
+          })
+        }), children]
+      })
+    }), open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
+      open: open,
+      anchorEl: anchorEl,
+      mode: mode,
+      properties: properties,
+      onClose: onClose,
+      onEvent: onEvent
+    }) : null]
+  });
+};
+export default TableView;

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Button } from "@mui/material";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { useDataView } from "../Providers/DataViewProvider";
+import ColumnView from "./ColumnView";
+// import Formula from "./Formula";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RenderRow = props => {
+  const {
+    rowIndex,
+    row,
+    properties,
+    onSelect,
+    selected,
+    readOnly
+  } = props;
+  const showProperties = properties?.filter(f => f.visible);
+  return showProperties?.map((property, i) => {
+    return /*#__PURE__*/_jsx(ColumnView, {
+      needAnchor: i === 0,
+      row: row,
+      rowIndex: rowIndex,
+      property: property,
+      onSelect: onSelect,
+      selected: selected,
+      readOnly: readOnly
+    }, `${property.key}_${i}`);
+  });
+};
+const ViewData = props => {
+  const {
+    attributes,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps || {};
+  const {
+    properties,
+    rows,
+    onAddRow,
+    selectedRows,
+    setSelectedRows
+  } = useDataView();
+  const onSelect = (id, checked) => {
+    if (checked) {
+      setSelectedRows([...selectedRows, id]);
+    } else {
+      setSelectedRows([...selectedRows?.filter(f => f !== id)]);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "tbody",
+    ...attributes,
+    children: [rows?.map((row, i) => {
+      return /*#__PURE__*/_jsx(Box, {
+        component: "tr",
+        className: "tv-act-row",
+        children: /*#__PURE__*/_jsx(RenderRow, {
+          rowIndex: row?.id,
+          row: row,
+          properties: properties,
+          onSelect: onSelect,
+          selected: selectedRows?.includes(row?.id),
+          readOnly: readOnly
+        })
+      }, i);
+    }), !readOnly ? /*#__PURE__*/_jsx("tr", {
+      children: /*#__PURE__*/_jsx("td", {
+        colSpan: properties?.length + 2,
+        children: /*#__PURE__*/_jsx(Button, {
+          className: "tv-act-btn la",
+          fullWidth: true,
+          onClick: onAddRow,
+          startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
+          children: "Add new row"
+        })
+      })
+    }) : null]
+  });
+};
+export default ViewData;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import TableView from "./TableView";
+import { useDataView } from "../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const LAYOUT_COMPONENT = {
+  table: TableView
+};
+const LayoutView = props => {
+  const {
+    readOnly,
+    children
+  } = props;
+  const {
+    layoutType
+  } = useDataView();
+  const Layout = LAYOUT_COMPONENT[layoutType] || LAYOUT_COMPONENT["table"];
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Layout, {
+      readOnly: readOnly,
+      children: children
+    })
+  });
+};
+export default LayoutView;

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

@@ -0,0 +1,288 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { Transforms } from "slate";
+import { PROPERTY_DEFAULTS } from "../Layouts/Options/Constants";
+import multiSortRows from "../Utils/multiSortRows";
+import globalSearch from "../Utils/globalSearch";
+
+// Data View context
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataViewContext = /*#__PURE__*/createContext();
+export const useDataView = () => useContext(DataViewContext);
+const DEFAULT_PROPERTIES = [{
+  key: "column1",
+  label: "Name",
+  dataType: "text"
+}, {
+  key: "column2",
+  label: "Status",
+  dataType: "select",
+  options: ["Active", "Inactive"]
+}, {
+  key: "column3",
+  label: "Agree?",
+  dataType: "checkbox"
+}];
+
+// Combined provider
+export const DataViewProvider = ({
+  children,
+  ...props
+}) => {
+  const {
+    initialData,
+    path,
+    editor
+  } = props;
+  const [layouts, setLayouts] = useState(initialData?.layouts || []);
+  const [seletectedLayout, setSelectedLayout] = useState({
+    ...(layouts[0] || {})
+  });
+  const [layoutType, setLayoutType] = useState(seletectedLayout?.type || "table");
+  const [properties, setProperties] = useState(initialData?.properties || [...DEFAULT_PROPERTIES]);
+  const [sort, setSort] = useState(seletectedLayout?.sort || []);
+  const [filter, setFilter] = useState(seletectedLayout?.filter || []);
+  const [rows, setRows] = useState(initialData?.rows || []);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [search, setSearch] = useState("");
+  const [title, setTitle] = useState(initialData?.tableTitle || "");
+  let {
+    users
+  } = initialData || {};
+  users = users?.map(m => {
+    return {
+      value: m?.name
+    };
+  });
+
+  // re-order when sort val changes
+  useEffect(() => {
+    if ((sort?.length > 0 || search) && rows?.length > 0) {
+      const reOrderRows = sort?.length > 0 ? multiSortRows(rows, sort, properties) : [...rows];
+      setRows(globalSearch(reOrderRows, search));
+    } else {
+      // reset to default order
+      setRows(globalSearch(initialData?.rows || [], search));
+    }
+  }, [sort, search]);
+  const onAddProperty = (data, overrides = {}) => {
+    try {
+      const {
+        type
+      } = data;
+      const key = `col_${new Date().getTime()}`;
+      const newProperty = {
+        ...(PROPERTY_DEFAULTS[type] || {}),
+        ...overrides,
+        key: key,
+        type
+      };
+      const updatedProperties = [...properties, {
+        ...newProperty
+      }];
+      Transforms.setNodes(editor, {
+        properties: [...updatedProperties]
+      }, {
+        at: path
+      });
+      setProperties([...updatedProperties]);
+      return newProperty;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onUpdateProperty = (data, isDelete = false) => {
+    try {
+      const {
+        key
+      } = data;
+      let up = {
+        ...data
+      };
+      const updatedProperties = properties?.map(m => {
+        if (m.key === key) {
+          up = {
+            ...m,
+            ...data
+          };
+          return up;
+        }
+        return m;
+      });
+      if (isDelete) {
+        const deleteIndex = updatedProperties.findIndex(f => f.key === key);
+        updatedProperties.splice(deleteIndex, 1);
+      }
+      Transforms.setNodes(editor, {
+        properties: [...updatedProperties]
+      }, {
+        at: path
+      });
+      setProperties([...updatedProperties]);
+      return up;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onChange = (rowIndex, rowData) => {
+    try {
+      const updatedRows = rows?.map(m => {
+        if (m?.id === rowIndex) {
+          m = {
+            ...m,
+            ...rowData
+          };
+        }
+        return m;
+      });
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onAddRow = () => {
+    try {
+      const newRow = properties?.reduce((a, b) => {
+        a[b.key] = "";
+        return a;
+      }, {
+        id: `row_${new Date().getTime()}`
+      });
+      const updatedRows = [...rows, newRow];
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const formatSort = (sorts = [], sortData, isDelete = false) => {
+    let upSort = [];
+    const isUpdate = sorts?.find(f => f.key === sortData?.key);
+    if (isUpdate) {
+      // update if any
+      upSort = sorts?.map(m => {
+        if (m.key === sortData.key) {
+          // if update col
+          if (sortData["newKey"]) {
+            sortData["key"] = sortData["newKey"];
+            delete sortData["newKey"];
+          }
+          return {
+            ...sortData
+          };
+        }
+        return m;
+      });
+    } else {
+      upSort = [...sorts, {
+        ...sortData
+      }];
+    }
+
+    // if no sort
+    if (sorts?.length === 0 && !isDelete) {
+      upSort = [{
+        ...sortData
+      }];
+    }
+
+    // if delete
+    if (isDelete) {
+      const deleteIndex = upSort.findIndex(f => f.key === sortData.key);
+      upSort.splice(deleteIndex, 1);
+    }
+    return upSort;
+  };
+  const onUpdateSort = (sortData = {}, isDelete = false, deleteAll = false) => {
+    try {
+      let upSort = {};
+      const updatedLayouts = layouts?.map((m, i) => {
+        if (seletectedLayout?.key === m.key) {
+          upSort = !deleteAll ? formatSort(m?.sort || [], sortData, isDelete) : [];
+          return {
+            ...m,
+            sort: [...upSort]
+          };
+        }
+        return m;
+      });
+      Transforms.setNodes(editor, {
+        layouts: [...updatedLayouts]
+      }, {
+        at: path
+      });
+      setLayouts(updatedLayouts);
+      setSort(upSort);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDeleteRows = () => {
+    try {
+      const updatedRows = [...rows].filter(f => selectedRows.includes(f.id) === false);
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+      setSelectedRows([]);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onSearch = e => {
+    setSearch(e?.target?.value);
+  };
+  const onTitleChange = value => {
+    try {
+      Transforms.setNodes(editor, {
+        title: value
+      }, {
+        at: path
+      });
+      setTitle(value);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const value = {
+    layoutType,
+    setLayoutType,
+    properties,
+    setProperties,
+    rows,
+    setRows,
+    onAddProperty,
+    layouts,
+    setLayouts,
+    onUpdateProperty,
+    onChange,
+    onAddRow,
+    users: users,
+    onUpdateSort,
+    sort,
+    filter,
+    setSelectedLayout,
+    setFilter,
+    selectedRows,
+    setSelectedRows,
+    onDeleteRows,
+    search,
+    onSearch,
+    title,
+    setTitle: onTitleChange
+  };
+  return /*#__PURE__*/_jsx(DataViewContext.Provider, {
+    value: value,
+    children: children
+  });
+};

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

@@ -0,0 +1,15 @@
+const globalSearch = (array, searchTerm) => {
+  if (!searchTerm) {
+    return array;
+  }
+  const lowerCaseSearchTerm = searchTerm.toLowerCase();
+  return array.filter(item => Object.values(item).some(value => {
+    if (typeof value === "string" && value) {
+      return value?.toLowerCase().includes(lowerCaseSearchTerm);
+    } else if (Array.isArray(value)) {
+      return value?.map(m => m?.value).some(d => d.toLowerCase().includes(lowerCaseSearchTerm));
+    }
+    return false;
+  }));
+};
+export default globalSearch;

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

@@ -0,0 +1,72 @@
+function sortByDate(a, b) {
+  const dateA = new Date(a);
+  const dateB = new Date(b);
+
+  // Check if both dates are valid
+  const isValidA = !isNaN(dateA.getTime());
+  const isValidB = !isNaN(dateB.getTime());
+  if (isValidA && isValidB) {
+    // Compare valid dates
+    return dateA - dateB;
+  } else if (isValidA) {
+    // Invalid date in `b` pushes `a` before `b`
+    return -1;
+  } else if (isValidB) {
+    // Invalid date in `a` pushes `b` before `a`
+    return 1;
+  } else {
+    // Both are invalid, maintain their relative order
+    return 0;
+  }
+}
+
+/**
+ * Multi-sort rows based on multiple criteria.
+ * @param {Array} rows - Array of row objects.
+ * @param {Array} criteria - Array of sort criteria [{key, sortBy}].
+ * @param {Object} columnConfig - Column configurations with data types.
+ */
+const multiSortRows = (rows, criteria, columnConfig) => {
+  return rows.slice().sort((a, b) => {
+    for (let {
+      key,
+      operator
+    } of criteria) {
+      const column = columnConfig.find(col => col.key === key);
+      if (!column) continue;
+      const dataType = column.type;
+      const valueA = a[key];
+      const valueB = b[key];
+      let comparison = 0;
+      switch (dataType) {
+        case "text":
+          comparison = valueA.localeCompare(valueB, undefined, {
+            sensitivity: "base"
+          });
+          break;
+        case "number":
+          comparison = parseInt(valueA || 0) - parseInt(valueB || 0);
+          break;
+        case "select":
+        case "multi-select":
+          comparison = valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
+            sensitivity: "base"
+          });
+          break;
+        case "date":
+          comparison = sortByDate(valueA, valueB);
+          break;
+        case "check":
+          return valueA && operator === "desc" ? 1 : -1;
+        default:
+          break;
+      }
+      if (comparison !== 0) {
+        return operator === "asc" ? comparison : -comparison;
+      }
+    }
+    return 0; // Rows are equal based on all criteria
+  });
+};
+
+export default multiSortRows;