@flozy/editor 5.3.0 → 5.3.1

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

@@ -0,0 +1,179 @@
+const useOptionsStyles = (theme, appTheme) => ({
+  popover: {
+    "& .MuiPaper-root": {
+      boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      borderRadius: "12px",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      [theme?.breakpoints?.between("xs", "md")]: {
+        borderRadius: "16px 16px 0px 0px",
+        maxHeight: "50%"
+      },
+      "& .tv-act-ico": {
+        color: appTheme?.palette?.editor?.tv_text,
+        "&.br1": {
+          borderRadius: "6px"
+        },
+        "&.bg": {
+          background: appTheme?.palette?.editor?.tv_ico_bg,
+          "&:hover": {
+            background: "rgba(100, 116, 139, 0.12)"
+          }
+        },
+        "& svg": {
+          width: "16px",
+          height: "16px"
+        }
+      },
+      "& .MuiInputBase-root": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        fontSize: "14px",
+        background: appTheme?.palette?.editor?.tv_input_bg,
+        borderRadius: "8px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+      },
+      "& .MuiList-root": {
+        padding: "4px 2px",
+        "& .MuiListItemButton-root": {
+          color: appTheme?.palette?.editor?.tv_text_primary,
+          padding: "2px 4px",
+          borderRadius: "8px",
+          "& .MuiListItemIcon-root": {
+            minWidth: "38px",
+            "&.needBg": {
+              minWidth: "20px",
+              width: "20px",
+              height: "20px",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              marginRight: "12px",
+              background: appTheme?.palette?.editor?.tv_ico_bg
+            },
+            color: `${appTheme?.palette?.editor?.tv_text} !important`,
+            "& svg": {
+              width: "16px"
+            }
+          },
+          "& .MuiTypography-root": {
+            fontSize: "14px"
+          },
+          "&:hover": {
+            background: appTheme?.palette?.editor?.tv_hover_bg,
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+            "& .MuiListItemIcon-root": {
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+            }
+          }
+        }
+      },
+      "& .st": {
+        borderTop: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        marginTop: "8px",
+        paddingTop: "8px"
+      },
+      "& .sb": {
+        borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        marginBottom: "8px",
+        paddingBottom: "8px"
+      },
+      "& .mt": {
+        marginTop: "8px"
+      },
+      "& .mt-1": {
+        marginTop: "12px"
+      },
+      "& .mb": {
+        marginBottom: "8px"
+      },
+      "& .mb-1": {
+        marginBottom: "12px"
+      },
+      "& .ml": {
+        marginLeft: "8px"
+      },
+      "& .mb-0": {
+        marginBottom: "0px"
+      },
+      "& .ml-0": {
+        marginLeft: "0px !important"
+      },
+      "& .pl-0": {
+        paddingLeft: "0px"
+      },
+      "& .label-desc": {},
+      "& .MuiFormControlLabel-root": {
+        alignItems: "flex-start",
+        margin: "0px 0px 0px 0px",
+        width: "100%",
+        "& .MuiFormControlLabel-label": {
+          marginBottom: "8px",
+          fontSize: "14px"
+        }
+      },
+      "& .label-tp": {
+        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+        fontSize: "14px"
+      },
+      "& .MuiInputBase-input": {
+        height: "32px",
+        padding: "4px 8px"
+      },
+      "& .more-btn-cbs": {
+        color: appTheme?.palette?.editor?.tv_text_primary
+      }
+    }
+  },
+  addProperty: {
+    padding: "12px",
+    width: "253px",
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "bold",
+      padding: "0px 0px 12px 0px",
+      justifyContent: "space-between",
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      marginBottom: "8px",
+      "& span": {
+        display: "flex",
+        alignItems: "center"
+      }
+    },
+    "& .fe-dv-ap-desc": {
+      fontSize: "12px",
+      color: "rgba(148, 163, 184, 1)"
+    },
+    "& .fe-dv-ap-opt-list": {
+      margin: "12px  0px"
+    },
+    "& .fe-tv-addopt": {
+      marginTop: "8px",
+      paddingLeft: "4px",
+      "& .MuiList-root": {
+        maxHeight: "200px",
+        overflowY: "auto"
+      },
+      "& .MuiFormHelperText-root": {
+        color: "red",
+        marginLeft: "2px",
+        marginTop: "4px"
+      }
+    },
+    "& .fe-tv-opt-sub-title": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "8px"
+    },
+    [theme?.breakpoints?.between("xs", "md")]: {
+      width: "100%"
+    }
+  }
+});
+export default useOptionsStyles;

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

@@ -0,0 +1,112 @@
+const useTableStyles = (theme, appTheme) => ({
+  root: {
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    borderRadius: "7px 7px 0px 0px",
+    overflowX: "auto",
+    [theme?.breakpoints?.between("xs", "md")]: {}
+  },
+  table: {
+    borderCollapse: "separate",
+    borderSpacing: 0,
+    borderRadius: "7px 7px 0px 0px",
+    overflow: "hidden",
+    border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    "& thead": {
+      background: appTheme?.palette?.editor?.tv_header,
+      height: "40px"
+    },
+    "& th": {
+      "& svg": {
+        "& .fillStroke": {
+          stroke: appTheme?.palette?.editor?.tv_stroke
+        }
+      }
+    },
+    "& td": {
+      height: "40px",
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        background: "transparent"
+      }
+    },
+    "& th, tr, td": {
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
+    "& .tv-act-btn": {
+      color: appTheme?.palette?.editor?.tv_text,
+      textTransform: "none",
+      "&.ico": {
+        "& svg": {
+          color: appTheme?.palette?.editor?.tv_text
+        }
+      },
+      "&:hover": {
+        color: "rgba(37, 99, 235, 1)",
+        "& svg": {
+          color: "rgba(37, 99, 235, 1)"
+        }
+      }
+    },
+    "& .la": {
+      justifyContent: "start"
+    },
+    "& .react-datepicker__input-container": {
+      "& input": {
+        border: "0px solid transparent"
+      }
+    },
+    "& .tv-ac-field": {
+      "&.MuiAutocomplete-root": {
+        "& .MuiAutocomplete-inputRoot": {
+          display: "flex",
+          flexWrap: "nowrap",
+          paddingTop: "3px",
+          paddingBottom: "3px",
+          paddingLeft: "3px",
+          maxWidth: "250px",
+          overflow: "hidden",
+          position: "relative",
+          "& .tv-ms-tag-wrpr": {
+            display: "flex",
+            flexWrap: "nowrap",
+            overflow: "auto"
+          },
+          "&.Mui-disabled": {
+            "& input": {
+              display: "none"
+            },
+            "& .tv-ms-tag-wrpr": {
+              "& .MuiSvgIcon-root": {
+                display: "none"
+              }
+            }
+          }
+        },
+        "& .MuiAutocomplete-clearIndicator": {
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_text
+          }
+        },
+        "& .MuiAvatar-root": {
+          width: "20px",
+          height: "20px",
+          marginLeft: "8px",
+          fontSize: "16px",
+          padding: "2px",
+          textTransform: "capitalize"
+        },
+        "& .MuiChip-label": {
+          paddingLeft: "6px",
+          paddingRight: "8px"
+        }
+      }
+    },
+    "& .Mui-disabled": {
+      WebkitTextFillColor: "#000 !important",
+      "& .MuiChip-root": {
+        opacity: 1
+      }
+    }
+  }
+});
+export default useTableStyles;

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

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

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

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

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