@flozy/editor 5.2.8 → 5.3.0

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

@@ -1,179 +0,0 @@
-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: "calc(100% - 24px)"
-    }
-  }
-});
-export default useOptionsStyles;

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

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

@@ -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,81 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-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,
-    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/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;