@flozy/editor 5.1.5 → 5.1.6

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

@@ -0,0 +1,70 @@
+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";
+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,
+    selectedRows,
+    setSelectedRows
+  } = useDataView();
+  const onSelect = (id, checked) => {
+    if (checked) {
+      setSelectedRows([...selectedRows, id]);
+    } else {
+      setSelectedRows([...selectedRows?.filter(f => f !== id)]);
+    }
+  };
+  return /*#__PURE__*/_jsx(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);
+    })
+  });
+};
+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;

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

@@ -0,0 +1,143 @@
+const useDataViewStyles = (theme, appTheme) => ({
+  root: {
+    width: "100%",
+    overflowX: "auto",
+    marginTop: "8px",
+    "& table": {
+      width: "100%",
+      "& th.fe-tv-ap-ico": {
+        width: "50px"
+      }
+    },
+    "& table th": {
+      cursor: "pointer",
+      width: "200px"
+    },
+    "& table, th, td": {
+      border: "1px solid black",
+      borderCollapse: "collapse"
+    },
+    "& .react-datepicker-wrapper": {
+      width: "100%",
+      "& input": {
+        padding: "6px 12px"
+      }
+    },
+    "& .MuiInputBase-root": {
+      "& fieldset": {
+        border: "none"
+      }
+    },
+    // filter view
+    "& .fe-tv-fv": {
+      marginBottom: "8px",
+      "& .mr": {
+        marginRight: "4px"
+      },
+      [theme.breakpoints.between("xs", "md")]: {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    "& .tv-act-row": {
+      "& .tv-tr-pop": {
+        opacity: 0,
+        "&.active": {
+          opacity: 1
+        },
+        "& .tv-ck-box": {
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_border
+          },
+          "&.Mui-checked": {
+            "& svg": {
+              color: "rgba(37, 99, 235, 1)"
+            }
+          }
+        }
+      },
+      "&:hover": {
+        "& .tv-tr-pop": {
+          opacity: 1
+        }
+      }
+    }
+  },
+  filterView: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    "& .MuiButtonBase-root": {
+      padding: "6px",
+      width: "24px",
+      height: "24px",
+      "&.active": {
+        color: "rgba(37, 99, 235, 1)"
+      }
+    },
+    "& .tv-sb": {
+      display: "flex",
+      border: "1px solid transparent",
+      width: "24px",
+      transition: "width 1s",
+      "&.open": {
+        width: "fit-content",
+        border: "1px solid rgba(236, 236, 236, 1)",
+        borderRadius: "8px"
+      },
+      "& input": {
+        paddingBottom: "0px",
+        fontSize: "14px"
+      }
+    },
+    "& .tv-title-wrpr, .tv-fi-wrpr": {
+      display: "flex",
+      "& button": {
+        color: appTheme?.palette?.editor?.tv_text
+      },
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text
+      }
+    },
+    "& .tv-title-wrpr": {
+      width: "80%",
+      marginRight: "8px",
+      "& .MuiInputBase-root": {
+        width: "100%"
+      },
+      [theme.breakpoints.between("xs", "md")]: {
+        width: "100%",
+        marginRight: "0px"
+      }
+    },
+    "& .tv-fi-wrpr": {
+      [theme.breakpoints.between("xs", "md")]: {
+        width: "100%",
+        justifyContent: "end"
+      }
+    }
+  },
+  basicMenu: {
+    "& .MuiPaper-root": {
+      padding: "0px 6px",
+      width: "150px",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      borderRadius: "8px",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      "& .MuiButtonBase-root": {
+        fontSize: "14px",
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          borderRadius: "8px",
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  }
+});
+export default useDataViewStyles;

package/dist/Editor/Elements/Divider/Divider.js

@@ -18,9 +18,9 @@ const Divider = props => {
     theme
   } = useEditorContext();
   const {
-    borderColor = theme?.palette?.primary?.main || '#0F172A',
-    borderWidth = '1px',
-    borderStyle = 'solid'
+    borderColor = theme?.palette?.primary?.main || "#0F172A",
+    borderWidth = "1px",
+    borderStyle = "solid"
   } = element;
   const {
     readOnly
@@ -33,7 +33,7 @@ const Divider = props => {
   } = useEditorContext();
   const [showTool] = useEditorSelection(editor);
   const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
+  const width = borderWidth?.includes("px") ? borderWidth : `${borderWidth}px`;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -44,8 +44,8 @@ const Divider = props => {
     onSettings
   }) => {
     const hoverStyles = readOnly ? {
-      '&.MuiIconButton-root:hover': {
-        background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
+      "&.MuiIconButton-root:hover": {
+        background: theme?.palette?.type === "dark" ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
       }
     } : {};
     return /*#__PURE__*/_jsx("div", {
@@ -61,11 +61,11 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
-            border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
-            boxShadow: '0px 0px 4px 0px #00000040',
-            borderRadius: '50%',
-            '& svg': {
+            background: theme?.palette?.type === "dark" ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
+            border: theme?.palette?.type === "dark" ? "1px solid #E4E8EB33" : "none",
+            boxShadow: "0px 0px 4px 0px #00000040",
+            borderRadius: "50%",
+            "& svg": {
               stroke: theme?.palette?.text?.secondary3
             },
             ...hoverStyles
@@ -103,14 +103,15 @@ const Divider = props => {
     className: `dividerComponent`,
     style: {
       userSelect: "none",
-      position: 'relative'
+      position: "relative"
     },
     contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
       style: {
-        zIndex: 1000
+        zIndex: 1000,
+        left: "50%"
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,
@@ -126,7 +127,7 @@ const Divider = props => {
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
         height: borderColor?.includes("linear") ? borderWidth : undefined,
-        marginTop: '15px'
+        marginTop: "15px"
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {