@flozy/editor 5.5.8 → 5.6.0

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

@@ -0,0 +1,131 @@
+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
+        },
+        '& path': {
+          stroke: appTheme?.palette?.editor?.tv_text
+        }
+      }
+    },
+    "& td": {
+      height: "40px",
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text_primary,
+        background: "transparent",
+        fontSize: '14px'
+      }
+    },
+    "& th, tr, td": {
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
+    "& .tv-act-btn": {
+      color: appTheme?.palette?.editor?.tv_text,
+      textTransform: "none",
+      '& .MuiButton-startIcon': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        borderRadius: '4px',
+        padding: '4px',
+        "& svg": {
+          width: '14px',
+          height: '14px'
+        }
+      },
+      "&.ico": {
+        "& svg": {
+          color: appTheme?.palette?.editor?.tv_text,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.tv_text
+          }
+        }
+      },
+      "&:hover": {
+        color: appTheme?.palette?.editor?.tv_hover_text,
+        "& svg": {
+          color: appTheme?.palette?.editor?.tv_hover_text,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.tv_hover_text
+          }
+        }
+      }
+    },
+    "& .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,253 @@
+import React, { useState } from "react";
+import { Box, Button, useTheme } from "@mui/material";
+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 Icon from "../../../common/Icon";
+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(Box, {
+    sx: {
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervUp'
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
+    sx: {
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervDown'
+    })
+  }) : 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: iconType
+              } = 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, {
+                    icon: iconType
+                  }),
+                  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",
+        color: appTheme?.palette?.editor?.activeColor,
+        '& svg': {
+          width: '18px',
+          height: '18px',
+          strokeWidth: 1.2,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.activeColor
+          }
+        },
+        fontFamily: 'inter'
+      },
+      startIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: 'addRounded'
+      }),
+      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,85 @@
+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,
+    sx: {
+      "& .MuiInputBase-root": {
+        background: "transparent !important"
+      }
+    },
+    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;