@flozy/editor 5.3.4 → 5.3.6

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

@@ -1,227 +0,0 @@
-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 AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-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,
-    onAddRow
-  } = 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]
-      })
-    }), !readOnly ? /*#__PURE__*/_jsx(Button, {
-      contentEditable: false,
-      className: "tv-act-btn la",
-      fullWidth: true,
-      onClick: onAddRow,
-      sx: {
-        textTransform: "none",
-        justifyContent: "start"
-      },
-      startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
-      children: "Add new row"
-    }) : null, 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

@@ -1,80 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { useDataView } from "../Providers/DataViewProvider";
-import ColumnView from "./ColumnView";
-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,
-    children,
-    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__*/_jsxs(Box, {
-    component: "tbody",
-    ...attributes,
-    contentEditable: false,
-    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);
-    }), /*#__PURE__*/_jsx("tr", {
-      style: {
-        visibility: "hidden",
-        display: "none"
-      },
-      "aria-hidden": "true",
-      children: /*#__PURE__*/_jsx("td", {
-        children: children
-      })
-    })]
-  });
-};
-export default ViewData;

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

@@ -1,10 +0,0 @@
-const useColumnStyles = theme => ({
-  root: {
-    zIndex: 1000,
-    marginTop: "20px !important",
-    [theme?.breakpoints?.between("xs", "md")]: {
-      left: "-32px !important"
-    }
-  }
-});
-export default useColumnStyles;

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

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

@@ -1,281 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { Editor, Transforms, Node } 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 {
-    data: initialData,
-    path,
-    editor,
-    users: peoples
-  } = props;
-  const dataViewNode = Node.get(editor, path);
-  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 users = peoples?.map(m => {
-    return {
-      value: m?.name
-    };
-  });
-
-  // for undo and redo
-  // minimal added for perforamnce issue avoid
-  useEffect(() => {
-    setRows(dataViewNode?.rows);
-  }, [dataViewNode?.rows?.length]);
-  useEffect(() => {
-    setProperties(dataViewNode?.properties);
-  }, [dataViewNode?.properties?.length]);
-
-  // re-order when sort val changes
-  useEffect(() => {
-    if ((sort?.length > 0 || search) && rows?.length > 0) {
-      const reOrderRows = sort?.length > 0 ? multiSortRows(initialData?.rows, sort, properties) : [...initialData?.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 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
-  };
-  return /*#__PURE__*/_jsx(DataViewContext.Provider, {
-    value: value,
-    children: children
-  });
-};

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

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

@@ -1,74 +0,0 @@
-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":
-          if (Array.isArray(valueA) && Array.isArray(valueB)) {
-            comparison = Array.isArray(valueA) ? valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
-              sensitivity: "base"
-            }) : 0;
-          }
-          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;