@flozy/editor 8.0.4 → 8.0.6

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

@@ -16,7 +16,10 @@ const ColumnView = props => {
     selected,
     readOnly
   } = props;
-  const DataType = DataTypes[property?.type] || DataTypes["text"];
+  const {
+    type
+  } = property;
+  const DataType = DataTypes[type] || DataTypes["text"];
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popperRefresh, setPopperRefresh] = useState(new Date().getTime());

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -153,11 +153,9 @@ export default function Select(props) {
         ...optionProps,
         children: /*#__PURE__*/_jsx(Chip, {
           label: option.label || option.value || "",
+          classes: classes.chipText,
           sx: {
-            background: option.color || appTheme?.palette?.editor?.tv_border1,
-            "& .MuiChip-label": {
-              paddingLeft: "12px !important"
-            }
+            background: option.color || appTheme?.palette?.editor?.tv_border1
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
@@ -172,6 +170,7 @@ export default function Select(props) {
     fullWidth: true,
     renderInput: params => {
       return /*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
         size: "small",
         ...params,
         placeholder: placeholder

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js

@@ -3,7 +3,7 @@ const useCompStyles = (theme, appTheme) => ({
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     background: appTheme?.palette?.editor?.tv_pop_bg,
     color: appTheme?.palette?.editor?.tv_text,
-    fontSize: '14px',
+    fontSize: "14px",
     borderRadius: "8px",
     [theme?.breakpoints?.between("xs", "md")]: {},
     "& ul": {
@@ -63,6 +63,11 @@ const useCompStyles = (theme, appTheme) => ({
         }
       }
     }
+  },
+  chipText: {
+    "& .MuiChip-label": {
+      paddingLeft: "12px !important"
+    }
   }
 });
 export default useCompStyles;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -1,7 +1,7 @@
 import React from "react";
 import DatePicker from "react-datepicker";
-import { useDataView } from "../../Providers/DataViewProvider";
 import { Grid } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
 import useCommonStyle from "../../../../commonStyle";
 import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -10,7 +10,10 @@ const useTableStyles = (theme, appTheme) => ({
     borderSpacing: 0,
     borderRadius: "7px 7px 0px 0px",
     overflow: "hidden",
+    width: "auto !important",
+    minWidth: "100%",
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+    tableLayout: "fixed",
     "& thead": {
       background: appTheme?.palette?.editor?.tv_header,
       height: "40px"
@@ -28,6 +31,8 @@ const useTableStyles = (theme, appTheme) => ({
     },
     "& td": {
       height: "40px",
+      maxWidth: "0px !important",
+      minWidth: "0px !important",
       "& input": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         background: "transparent",
@@ -40,6 +45,11 @@ const useTableStyles = (theme, appTheme) => ({
     "& th, tr, td": {
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
     },
+    "& th, & td": {
+      overflowX: "clip",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
@@ -86,13 +96,18 @@ const useTableStyles = (theme, appTheme) => ({
           paddingTop: "3px",
           paddingBottom: "3px",
           paddingLeft: "3px",
-          maxWidth: "250px",
+          // maxWidth: "250px",
           overflow: "hidden",
           position: "relative",
           "& .tv-ms-tag-wrpr": {
             display: "flex",
             flexWrap: "nowrap",
-            overflow: "auto"
+            overflow: "auto",
+            minWidth: "58px",
+            "& .MuiChip-deleteIcon": {
+              minWidth: "22px",
+              minHeight: "22px"
+            }
           },
           "&.Mui-disabled": {
             "& input": {

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

@@ -60,6 +60,7 @@ const SortIcon = props => {
 };
 const THead = props => {
   const thRef = useRef(null);
+  const [headerTextWidth, setHeaderTextWidth] = useState(200);
   const {
     iconType,
     isSort,
@@ -77,6 +78,13 @@ const THead = props => {
       minWidth: 30
     }
   });
+  const finalWidth = size?.width < headerTextWidth ? headerTextWidth : size?.width || 200;
+  useEffect(() => {
+    if (thRef?.current) {
+      const tw = (thRef?.current?.querySelectorAll(".dht-text")[0]?.getBoundingClientRect()?.width || 0) + 16 + 30;
+      setHeaderTextWidth(tw);
+    }
+  }, [thRef?.current, m?.label]);
   useEffect(() => {
     if (isDone) {
       handleResize({
@@ -87,9 +95,9 @@ const THead = props => {
   }, [isDone]);
   return /*#__PURE__*/_jsxs("th", {
     style: {
-      minWidth: size?.width || 200,
-      maxWidth: size?.width || 200,
-      width: size?.width || 200
+      minWidth: finalWidth,
+      maxWidth: finalWidth,
+      width: finalWidth
     },
     ref: thRef,
     children: [/*#__PURE__*/_jsx(Box, {
@@ -107,7 +115,10 @@ const THead = props => {
         }),
         fullWidth: true,
         onClick: onEditProperty(m),
-        children: m.label
+        children: /*#__PURE__*/_jsx("span", {
+          className: "dht-text",
+          children: m.label
+        })
       })
     }), /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
@@ -277,7 +288,9 @@ const TableView = props => {
               children: [/*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
                 style: {
-                  widht: "autp"
+                  maxWidth: "80px",
+                  minWidth: "80px",
+                  width: "auto"
                 },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onAddClick,
@@ -287,7 +300,9 @@ const TableView = props => {
               }), /*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
                 style: {
-                  widht: "autp"
+                  maxWidth: "80px",
+                  minWidth: "80px",
+                  width: "auto"
                 },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onSettings,

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

@@ -58,17 +58,17 @@ const ViewData = props => {
       }
     },
     children: [rows?.map((row, i) => {
-      return /*#__PURE__*/_jsx(Box, {
+      return /*#__PURE__*/_jsxs(Box, {
         component: "tr",
         className: "tv-act-row",
-        children: /*#__PURE__*/_jsx(RenderRow, {
+        children: [/*#__PURE__*/_jsx(RenderRow, {
           rowIndex: row?.id,
           row: row,
           properties: properties,
           onSelect: onSelect,
           selected: selectedRows?.includes(row?.id),
           readOnly: readOnly
-        })
+        }), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
       }, i);
     }), /*#__PURE__*/_jsx("tr", {
       style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "8.0.4",
+  "version": "8.0.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"