@flozy/editor 9.2.8 → 9.3.0

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

@@ -12,7 +12,8 @@ const EditProperty = props => {
     classes,
     onClose,
     mode,
-    onEvent
+    onEvent,
+    translation
   } = props;
   const [edit, setEdit] = useState({
     ...(mode?.edit || {})
@@ -120,7 +121,7 @@ const EditProperty = props => {
           children: /*#__PURE__*/_jsx(Icon, {
             icon: 'leftArrow'
           })
-        }), "Edit Property"]
+        }), translation("Edit Property")]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
@@ -137,7 +138,7 @@ const EditProperty = props => {
     }), /*#__PURE__*/_jsxs(Box, {
       className: "fe-dv-ap-opt-content",
       children: [/*#__PURE__*/_jsx(FormControlLabel, {
-        label: "Field Name",
+        label: translation("Field Name"),
         labelPlacement: "top",
         sx: {
           '& .MuiFormControl-root': {
@@ -149,7 +150,7 @@ const EditProperty = props => {
           value: edit?.label,
           onChange: onChange("label"),
           fullWidth: true,
-          placeholder: "Field Name"
+          placeholder: translation("Field Name")
         })
       }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
@@ -159,7 +160,7 @@ const EditProperty = props => {
           },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
-            children: "Type"
+            children: translation("Type")
           }), /*#__PURE__*/_jsxs(ListItemIcon, {
             sx: {
               display: 'flex',
@@ -183,7 +184,7 @@ const EditProperty = props => {
               })
             }), /*#__PURE__*/_jsx("span", {
               className: "label-tp",
-              children: TYPE_LABELS[edit?.type]
+              children: translation(TYPE_LABELS[edit?.type])
             }), /*#__PURE__*/_jsx(Icon, {
               icon: 'rightArrow'
             })]
@@ -194,11 +195,13 @@ const EditProperty = props => {
       }), /*#__PURE__*/_jsx(AddOptions, {
         edit: edit,
         onUpdate: onUpdate,
-        onEvent: onEvent
+        onEvent: onEvent,
+        translation: translation
       }), /*#__PURE__*/_jsx(FilterProperty, {
         edit: edit,
         onUpdate: onUpdate,
-        onEvent: onEvent
+        onEvent: onEvent,
+        translation: translation
       }), /*#__PURE__*/_jsxs(List, {
         className: "fe-dv-opt-list",
         children: [/*#__PURE__*/_jsxs(ListItemButton, {
@@ -209,8 +212,8 @@ const EditProperty = props => {
             }) : /*#__PURE__*/_jsx(Icon, {
               icon: 'eyeIcon'
             })
-          }), /*#__PURE__*/_jsxs(ListItemText, {
-            children: [edit?.visible ? "Hide" : "Show", " in View"]
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: `${edit?.visible ? translation("Hide") : translation("Show")} ${translation("in View")}`
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Duplicate"),
@@ -219,7 +222,7 @@ const EditProperty = props => {
               icon: 'duplicateIcon'
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
-            children: "Duplicate Property"
+            children: translation("Duplicate Property")
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Delete"),
@@ -228,7 +231,7 @@ const EditProperty = props => {
               icon: 'trashIcon'
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
-            children: "Delete Property"
+            children: translation("Delete Property")
           })]
         })]
       })]

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

@@ -11,7 +11,8 @@ const FilterProperty = props => {
   } = useDataView();
   const {
     edit,
-    onEvent
+    onEvent,
+    translation
   } = props;
   const handleChangeOption = m => () => {
     onEvent("addSort", {
@@ -33,7 +34,7 @@ const FilterProperty = props => {
             icon: m?.Icon
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: m.label
+          primary: translation(m.label)
         })]
       }, i);
     })

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

@@ -7,7 +7,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PropertyList = props => {
   const {
     onSelect,
-    selected
+    selected,
+    translation
   } = props;
   return /*#__PURE__*/_jsx(List, {
     children: PROPERTY_TYPES?.map(({
@@ -22,7 +23,7 @@ const PropertyList = props => {
             icon: rest?.Icon
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: rest?.label
+          primary: translation(rest?.label)
         })]
       }, i);
     })

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

@@ -41,7 +41,8 @@ const PropertySettings = props => {
     anchorEl,
     mode,
     onClose,
-    onEvent
+    onEvent,
+    translation
   } = props;
   const classes = useOptionsStyles(theme, appTheme);
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
@@ -53,35 +54,40 @@ const PropertySettings = props => {
           classes: classes,
           onClose: onClose,
           onEvent: onEvent,
-          mode: mode
+          mode: mode,
+          translation: translation
         });
       case "editProperty":
         return /*#__PURE__*/_jsx(EditProperty, {
           classes: classes,
           onClose: onClose,
           onEvent: onEvent,
-          mode: mode
+          mode: mode,
+          translation: translation
         });
       case "changeProperty":
         return /*#__PURE__*/_jsx(ChangeProperty, {
           classes: classes,
           onClose: onClose,
           onEvent: onEvent,
-          mode: mode
+          mode: mode,
+          translation: translation
         });
       case "allProperties":
         return /*#__PURE__*/_jsx(AllProperties, {
           classes: classes,
           onClose: onClose,
           onEvent: onEvent,
-          mode: mode
+          mode: mode,
+          translation: translation
         });
       case "editOption":
         return /*#__PURE__*/_jsx(EditOption, {
           classes: classes,
           onClose: onClose,
           onEvent: onEvent,
-          mode: mode
+          mode: mode,
+          translation: translation
         });
       default:
         return null;

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

@@ -10,12 +10,16 @@ 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"
     },
     "& th": {
+      position: "relative",
       "& svg": {
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
@@ -27,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",
@@ -39,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",
@@ -85,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": {
@@ -129,6 +145,20 @@ const useTableStyles = (theme, appTheme) => ({
         opacity: 1
       }
     }
+  },
+  cellResizer: {
+    position: "absolute",
+    cursor: "col-resize",
+    right: "0px",
+    top: 0,
+    width: "3px",
+    borderRadius: "0px",
+    zIndex: 1,
+    background: "transparent",
+    height: "100%",
+    "&:hover, &.active": {
+      background: "#2563EB"
+    }
   }
 });
 export default useTableStyles;

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
@@ -7,47 +7,139 @@ import useTableStyles from "./TableStyles";
 import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import Icon from "../../../common/Icon";
+import useTableResize from "../../../utils/customHooks/useTableResize";
 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 Resizer = ({
+  classes,
+  onMouseDown,
+  height,
+  resizing
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: `cell-resizer ${resizing ? "active" : ""}`,
+      contentEditable: false,
+      onPointerDown: onMouseDown,
+      sx: classes.cellResizer,
+      style: {
+        height: `${height}px`
+      }
+    })
+  });
+};
 const SortIcon = props => {
   const {
     sortBy
   } = props;
   return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(Box, {
     sx: {
-      '& svg': {
-        '& path': {
+      "& svg": {
+        "& path": {
           stroke: "rgba(37, 99, 235, 1) !important"
         }
       }
     },
     children: /*#__PURE__*/_jsx(Icon, {
-      icon: 'chervUp'
+      icon: "chervUp"
     })
   }) : /*#__PURE__*/_jsx(Box, {
     sx: {
-      '& svg': {
-        '& path': {
+      "& svg": {
+        "& path": {
           stroke: "rgba(37, 99, 235, 1) !important"
         }
       }
     },
     children: /*#__PURE__*/_jsx(Icon, {
-      icon: 'chervDown'
+      icon: "chervDown"
     })
   }) : null;
 };
+const THead = props => {
+  const thRef = useRef(null);
+  const [headerTextWidth, setHeaderTextWidth] = useState(200);
+  const {
+    iconType,
+    isSort,
+    classes,
+    onEditProperty,
+    m,
+    tableRef,
+    handleResize
+  } = props;
+  // do not remove extra coma it will lead to swap of variable
+  const [size, onMouseDown, resizing,, isDone] = useTableResize({
+    parentDOM: thRef?.current,
+    size: m?.size,
+    minMaxProps: {
+      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({
+        ...m,
+        size: size
+      });
+    }
+  }, [isDone]);
+  return /*#__PURE__*/_jsxs("th", {
+    style: {
+      minWidth: finalWidth,
+      maxWidth: finalWidth,
+      width: finalWidth
+    },
+    ref: thRef,
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        maxWidth: "100%",
+        overflow: "hidden"
+      },
+      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: /*#__PURE__*/_jsx("span", {
+          className: "dht-text",
+          children: m.label
+        })
+      })
+    }), /*#__PURE__*/_jsx(Resizer, {
+      classes: classes,
+      onMouseDown: onMouseDown,
+      height: tableRef?.current?.getBoundingClientRect()?.height,
+      resizing: resizing
+    })]
+  });
+};
 const TableView = props => {
   const {
     theme: appTheme
   } = useEditorContext();
   const {
     children,
-    readOnly
+    readOnly,
+    translation
   } = props;
   const theme = useTheme();
   const classes = useTableStyles(theme, appTheme);
+  const tableRef = useRef(null);
   const {
     properties,
     onAddProperty,
@@ -75,7 +167,7 @@ const TableView = props => {
       case "addProperty":
         const np = onAddProperty({
           type: data?.type
-        }, data?.overrides || {});
+        }, data?.overrides || {}, translation);
         if (navToEdit) {
           setMode({
             type: "editProperty",
@@ -164,6 +256,9 @@ const TableView = props => {
     setMode({});
     setAnchorEl(null);
   };
+  const handleResize = data => {
+    onUpdateProperty(data);
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -173,6 +268,7 @@ const TableView = props => {
       children: /*#__PURE__*/_jsxs(Box, {
         component: "table",
         sx: classes.table,
+        ref: tableRef,
         children: [/*#__PURE__*/_jsx("thead", {
           children: /*#__PURE__*/_jsxs("tr", {
             children: [shownProperties?.map((m, i) => {
@@ -180,26 +276,23 @@ const TableView = props => {
                 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
-                })
+              return /*#__PURE__*/_jsx(THead, {
+                iconType: iconType,
+                isSort: isSort,
+                onEditProperty: onEditProperty,
+                m: m,
+                classes: classes,
+                tableRef: tableRef,
+                handleResize: handleResize
               }, i);
             }), !readOnly ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
+                style: {
+                  maxWidth: "80px",
+                  minWidth: "80px",
+                  width: "auto"
+                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onAddClick,
                   fullWidth: true,
@@ -207,6 +300,11 @@ const TableView = props => {
                 })
               }), /*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
+                style: {
+                  maxWidth: "80px",
+                  minWidth: "80px",
+                  width: "auto"
+                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onSettings,
                   fullWidth: true,
@@ -226,27 +324,28 @@ const TableView = props => {
         textTransform: "none",
         justifyContent: "start",
         color: appTheme?.palette?.editor?.activeColor,
-        '& svg': {
-          width: '18px',
-          height: '18px',
+        "& svg": {
+          width: "18px",
+          height: "18px",
           strokeWidth: 1.2,
-          '& path': {
+          "& path": {
             stroke: appTheme?.palette?.editor?.activeColor
           }
         },
-        fontFamily: 'inter'
+        fontFamily: "inter"
       },
       startIcon: /*#__PURE__*/_jsx(Icon, {
-        icon: 'addRounded'
+        icon: "addRounded"
       }),
-      children: "Add new row"
+      children: translation("Add new row")
     }) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
       open: open,
       anchorEl: anchorEl,
       mode: mode,
       properties: properties,
       onClose: onClose,
-      onEvent: onEvent
+      onEvent: onEvent,
+      translation: translation
     }) : null]
   });
 };

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/dist/Editor/Elements/DataView/Layouts/index.js

@@ -9,7 +9,8 @@ const LAYOUT_COMPONENT = {
 const LayoutView = props => {
   const {
     readOnly,
-    children
+    children,
+    translation
   } = props;
   const {
     layoutType
@@ -18,6 +19,7 @@ const LayoutView = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Layout, {
       readOnly: readOnly,
+      translation: translation,
       children: children
     })
   });

package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { Editor, Transforms, Node } from "slate";
+import { Transforms, Node } from "slate";
 import { PROPERTY_DEFAULTS } from "../Layouts/Options/Constants";
 import multiSortRows from "../Utils/multiSortRows";
 import globalSearch from "../Utils/globalSearch";
@@ -67,15 +67,18 @@ export const DataViewProvider = ({
       setRows(globalSearch(initialData?.rows || [], search));
     }
   }, [sort, search]);
-  const onAddProperty = (data, overrides = {}) => {
+  const onAddProperty = (data, overrides = {}, translation) => {
     try {
       const {
         type
       } = data;
       const key = `col_${new Date().getTime()}`;
+      const defaultProperty = PROPERTY_DEFAULTS[type] || {};
+      const translatedLabel = translation ? translation(defaultProperty.label) : defaultProperty.label;
       const newProperty = {
-        ...(PROPERTY_DEFAULTS[type] || {}),
+        ...defaultProperty,
         ...overrides,
+        label: translatedLabel,
         key: key,
         type
       };

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

@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
     },
     "& table th": {
       cursor: "pointer",
-      width: "200px"
+      minWidth: "200px"
     },
     "& table, th, td": {
       border: "1px solid black",
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         "& .tv-ck-box": {
           "& svg": {
             color: appTheme?.palette?.editor?.tv_border,
-            '& rect': {
+            "& rect": {
               fill: appTheme?.palette?.editor?.tv_chk_box_fill,
               stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
             }
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
           "&.Mui-checked": {
             "& svg": {
               color: "rgba(37, 99, 235, 1)",
-              '& rect': {
+              "& rect": {
                 fill: appTheme?.palette?.editor?.activeColor,
-                stroke: 'none'
+                stroke: "none"
               }
             }
           }
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px",
-        minWidth: '148px'
+        minWidth: "148px"
       },
       "& input": {
         paddingBottom: "0px",
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
-      fontFamily: 'Inter !important',
+      fontFamily: "Inter !important",
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
-        padding: '6px 8px',
+        padding: "6px 8px",
         "& svg": {
           width: "16px",
           height: "16px",
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
-            '& path': {
+            "& path": {
               stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }