@flozy/editor 1.8.2 → 1.8.4

package/dist/Editor/Toolbar/Basic/index.js

@@ -7,14 +7,20 @@ import LinkButton from "../../Elements/Link/LinkButton";
 import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
 import ColorPickerButton from "../../common/ColorPickerButton";
 import { colors } from "../../Elements/Color Picker/defaultColors";
+import VariableButton from "../../Elements/Variables/VariableButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
-const BasicToolbar = ({
-  toolbars
-}) => {
+const BasicToolbar = props => {
   const editor = useSlateStatic();
 
+  // props
+  const {
+    otherProps: {
+      variableOptions
+    }
+  } = props;
+
   // state
   const [activeColor, setActiveColor] = useState("#000000");
   const fontStyle = allTools.filter(f => f.basic);
@@ -38,8 +44,7 @@ const BasicToolbar = ({
       active: isBlockActive(editor, link.format),
       editor: editor
     }, link.id), /*#__PURE__*/_jsx(Tooltip, {
-      arrow: true,
-      title: "Current Color",
+      title: "Font Color",
       children: /*#__PURE__*/_jsx(ColorPickerButton, {
         value: activeColor || "#0000",
         onSave: color => {
@@ -47,7 +52,15 @@ const BasicToolbar = ({
         },
         defaultColors: colors
       })
+    }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
+      placeholder: "Variables",
+      options: variableOptions
     })]
   });
 };
+BasicToolbar.defaultProps = {
+  otherProps: {
+    variableOptions: []
+  }
+};
 export default BasicToolbar;

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -3,6 +3,9 @@ import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { sizeMap } from "../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
+import { getBreakPointsValue } from "../../helper/theme.js";
+import useWindowResize from "../../hooks/useWindowResize.js";
+import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,15 +14,35 @@ const TextSize = ({
   format,
   fullWidth
 }) => {
-  const value = activeMark(editor, format);
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
+  const [size] = useWindowResize();
+  const val = activeMark(editor, format);
+  const value = getBreakPointsValue(val, size?.device);
+  const updateMarkData = newVal => {
+    let upData = {
+      ...getBreakPointsValue(val),
+      [size?.device]: `${newVal}px`
+    };
+
+    // if desktop update to all other devices
+    // to avoid default normal size
+    if (size?.device === "lg") {
+      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
+        a[b] = `${newVal}px`;
+        return a;
+      }, {});
+    }
     addMarkData(editor, {
       format,
-      value: `${inc || 8}px`
+      value: {
+        ...upData
+      }
     });
   };
+  const onChangeSize = e => {
+    let inc = parseInt(e.target.value) || 8;
+    inc = inc > 200 ? 200 : inc;
+    updateMarkData(inc || 8);
+  };
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
@@ -32,17 +55,11 @@ const TextSize = ({
   const onIncreaseSize = () => {
     let inc = (combinedOldVal || 0) + 1;
     inc = inc > 200 ? 200 : inc;
-    addMarkData(editor, {
-      format,
-      value: `${inc}px`
-    });
+    updateMarkData(inc);
   };
   const onDecreaseSize = () => {
     const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    addMarkData(editor, {
-      format,
-      value: `${newVal}px`
-    });
+    updateMarkData(newVal);
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
 import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
 import MENU_OPTIONS from "./Options/Options";
@@ -37,6 +37,11 @@ const MiniToolbar = props => {
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
   const DialogComp = !fullScreen ? Popper : Dialog;
+  useEffect(() => {
+    if (popper) {
+      setPopper(null);
+    }
+  }, [editor.selection]);
   const handleClick = type => e => {
     setPopper(type);
     setAnchorEl(e.currentTarget);
@@ -51,6 +56,7 @@ const MiniToolbar = props => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
+      className: "mini-tool-wrpr-ei",
       sx: classes.root,
       children: MENU_OPTIONS.map(({
         type,

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -185,8 +185,16 @@ const iconList = {
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
   docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
   colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+    style: {
+      fill: "#64748B"
+    },
     size: 20
-  })
+  }),
+  leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
+  rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
+  checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
+  checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
+  excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -74,7 +74,7 @@ const ImageSelector = props => {
               }),
               iconPosition: "start",
               value: "upload",
-              label: "Upload Media"
+              label: `Upload ${title}`
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
@@ -83,7 +83,7 @@ const ImageSelector = props => {
               }),
               iconPosition: "start",
               value: "choose",
-              label: "Choose Media"
+              label: `Choose ${title}`
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
               sx: classes.tab,

package/dist/Editor/common/Section/index.js

@@ -4,6 +4,7 @@ import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Section = props => {
@@ -25,12 +26,6 @@ const Section = props => {
     sectionGridSize,
     sectionAlignment
   } = element;
-  const {
-    left: ssleft,
-    top: sstop,
-    right: ssright,
-    bottom: ssbottom
-  } = sectionBannerSpacing || {};
   const {
     topLeft: ssTopLeft,
     topRight: ssTopRight,
@@ -49,9 +44,9 @@ const Section = props => {
   const Toolbar = () => {
     return !readOnly ? /*#__PURE__*/_jsx(Box, {
       component: "div",
-      className: "element-toolbar ss hr section-tw",
+      className: "element-toolbar no-border-button ss hr section-tw",
       style: {
-        left: "20px",
+        left: "-28px",
         top: "0px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -83,20 +78,19 @@ const Section = props => {
       at: path
     });
   };
+  const needHover = element?.children?.find(f => f.type === "grid") ? "needHover" : "";
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
   return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
     component: "section",
-    className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
-    style: {
-      position: "relative",
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
+    sx: {
       background: sectionBgColor,
       ...sectionBgImage,
-      paddingLeft: `${ssleft}px`,
-      paddingRight: `${ssright}px`,
-      paddingTop: `${sstop || 2}px`,
-      paddingBottom: `${ssbottom || 2}px`,
+      padding: {
+        ...getTRBLBreakPoints(sectionBannerSpacing)
+      },
       borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
@@ -105,7 +99,10 @@ const Section = props => {
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
-        width: `${(sectionGridSize || 8) / 12 * 100}%`
+        position: "relative",
+        width: {
+          ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
+        }
       },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,12 +1,14 @@
 import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
+import { getBreakPointsValue } from "../../../helper/theme";
+import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     elementProps
@@ -19,6 +21,8 @@ const BannerSpacing = props => {
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -28,9 +32,12 @@ const BannerSpacing = props => {
     }
     onChange({
       [key]: {
-        ...value,
-        [e.target.name]: e.target.value,
-        ...changeAll
+        ...getBreakPointsValue(val),
+        [size?.device]: {
+          ...value,
+          ...changeAll,
+          [e.target.name]: e.target.value
+        }
       }
     });
   };
@@ -64,8 +71,10 @@ const BannerSpacing = props => {
         "aria-label": "Default",
         valueLabelDisplay: "auto",
         max: 100,
+        name: "top",
         onChange: handleChange
       }), /*#__PURE__*/_jsx("input", {
+        name: "top",
         value: !lockSpacing ? "" : value?.top || 0,
         className: "sliderInput",
         disabled: !lockSpacing,

package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js

@@ -1,19 +1,26 @@
 import React from "react";
 import { Grid, Slider, Typography } from "@mui/material";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridSize = props => {
   const {
-    value,
+    value: val,
     data,
     onChange
   } = props;
   const {
     key
   } = data;
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     onChange({
-      [key]: e.target.value
+      [key]: {
+        ...getBreakPointsValue(val),
+        [size?.device]: e.target.value
+      }
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -27,7 +34,7 @@ const GridSize = props => {
         fontWeight: 500,
         marginBottom: "5px"
       },
-      children: ["Grid Size: ", value || 12]
+      children: [data?.label || "Grid Size", ": ", value || 12]
     }), /*#__PURE__*/_jsx("div", {
       className: "sld-wrpr",
       children: /*#__PURE__*/_jsx(Slider, {

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -33,6 +33,9 @@ const formStyle = [{
     width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
         children: option.text
       });
     }

package/dist/Editor/common/StyleBuilder/sectionStyle.js

@@ -46,7 +46,7 @@ const gridStyle = [{
   tab: "Size",
   value: "gridSize",
   fields: [{
-    label: "Grid Size",
+    label: "Width Size",
     key: "sectionGridSize",
     type: "gridSize"
   }]

package/dist/Editor/common/iconslist.js

@@ -1545,4 +1545,96 @@ export const WorkflowIcon = () => {
       fill: "#f3b814"
     })]
   });
-};
+};
+export const LeftArrow = () => /*#__PURE__*/_jsx("svg", {
+  width: "9",
+  height: "12",
+  viewBox: "0 0 9 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.10104 12.8839L1.23438 7.00052L7.10104 1.11719",
+    stroke: "#2563EB",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+export const RightArrow = () => /*#__PURE__*/_jsx("svg", {
+  width: "9",
+  height: "12",
+  viewBox: "0 0 9 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M1.89896 12.8839L7.76562 7.00052L1.89896 1.11719",
+    stroke: "#2563EB",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+export const CheckListButton = () => /*#__PURE__*/_jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "23",
+    height: "23",
+    rx: "11.5",
+    fill: "#F4F6F9",
+    stroke: "#E0E0E0"
+  })
+});
+export const CheckListButtonActive = () => /*#__PURE__*/_jsxs("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "23",
+    height: "23",
+    rx: "11.5",
+    fill: "#2563EB"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7.0625 12.0896L10.6849 15.7105L17.9267 8.46875",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const ExcelIcon = () => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0,0,256,256",
+  width: "30px",
+  height: "30px",
+  children: /*#__PURE__*/_jsx("g", {
+    fill: "#22622c",
+    fillRule: "nonzero",
+    stroke: "none",
+    strokeWidth: "1",
+    strokeLinecap: "butt",
+    strokeLinejoin: "miter",
+    strokeMiterlimit: "10",
+    strokeDasharray: "",
+    strokeDashoffset: "0",
+    fontFamily: "none",
+    fontWeight: "none",
+    fontSize: "none",
+    textAnchor: "none",
+    children: /*#__PURE__*/_jsx("g", {
+      transform: "scale(8.53333,8.53333)",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M15,3c-0.13457,0.00082 -0.26871,0.01521 -0.40039,0.04297l-0.00195,-0.00195l-9.96875,1.99414l-0.00195,0.00195c-0.94311,0.17905 -1.62599,1.00293 -1.62695,1.96289v16c0.00021,0.9613 0.68429,1.78648 1.62891,1.96484l9.96875,1.99414c0.13238,0.02723 0.26719,0.04097 0.40234,0.04102c1.10457,0 2,-0.89543 2,-2v-20c0,-1.10457 -0.89543,-2 -2,-2zM19,5v3h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v3h6c1.105,0 2,-0.895 2,-2v-16c0,-1.105 -0.895,-2 -2,-2zM23,8h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM6.18555,10h2.40234l1.24414,2.99023c0.101,0.244 0.18177,0.52666 0.25977,0.84766h0.0332c0.045,-0.193 0.13353,-0.48609 0.26953,-0.87109l1.39063,-2.9668h2.1875l-2.61328,4.95508l2.69141,5.04297h-2.33398l-1.50391,-3.25781c-0.057,-0.115 -0.12369,-0.34697 -0.17969,-0.66797h-0.02148c-0.034,0.154 -0.10113,0.38631 -0.20313,0.69531l-1.51367,3.23242h-2.3457l2.7832,-5.00586zM23,12h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,16h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1zM23,20h1c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1h-1z"
+      })
+    })
+  })
+});

package/dist/Editor/helper/theme.js

@@ -0,0 +1,83 @@
+import { sizeMap } from "../utils/font";
+export const breakpoints = {
+  small: 0,
+  mobile: 600,
+  tablet: 900
+};
+export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
+export const getDevice = width => {
+  if (width > 0 && width < breakpoints.mobile) {
+    return "xs";
+  } else {
+    return "lg";
+  }
+};
+const copyAllLg = (value, ot) => {
+  return BREAKPOINTS_DEVICES.reduce((a, b) => {
+    return {
+      ...a,
+      [b]: overrides[ot] ? overrides[ot](value) : value
+    };
+  }, {});
+};
+const overrideValues = (value, ot) => {
+  return Object.keys(value).reduce((a, b) => {
+    return {
+      ...a,
+      [b]: overrides[ot] ? overrides[ot](value[b]) : value
+    };
+  }, {});
+};
+const overrides = {
+  overrideText: val => {
+    return sizeMap[val] || val;
+  },
+  overrideGridSize: val => {
+    return `${(val || 8) / 12 * 100}%`;
+  }
+};
+export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
+  try {
+    if (breakpoint) {
+      if (typeof value !== "object") {
+        return value;
+      }
+      return value ? value[breakpoint] || value["lg"] : value;
+    } else if (typeof value === "object") {
+      return !breakpoint && value["lg"] ? !ov ? value : overrideValues(value, ot) : value[breakpoint] || copyAllLg(value, ot);
+    } else {
+      // consider without breakpoints
+      return copyAllLg(value, ot);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const getTRBLBreakPoints = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const {
+          top,
+          right,
+          bottom,
+          left
+        } = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: `${top || 0}px ${right || 0}px ${bottom || 0}px ${left || 0}px`
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/hooks/useWindowMessage.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+const useWindowMessage = props => {
+  const {
+    type
+  } = props;
+  const [message, setMessage] = useState(null);
+  useEffect(() => {
+    if (window.addEventListener) {
+      window.addEventListener("message", onMessage, false);
+    } else {
+      window.attachEvent("onmessage", onMessage);
+    }
+    return () => {
+      if (window.addEventListener) {
+        window.removeEventListener("message", onMessage, false);
+      } else {
+        window.detachEvent("onmessage", onMessage);
+      }
+    };
+  }, []);
+  const onMessage = e => {
+    if (e?.data && e?.data[type]) {
+      setMessage(e?.data[type]);
+    }
+  };
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "http://localhost:3000");
+    }
+  };
+  return [message, sendMessage];
+};
+export default useWindowMessage;

package/dist/Editor/hooks/useWindowResize.js

@@ -1,13 +1,16 @@
 import { useEffect, useState } from "react";
+import { getDevice } from "../helper/theme";
 const useWindowResize = () => {
   const [size, setSize] = useState({
     width: window.innerWidth,
-    height: window.innerHeight
+    height: window.innerHeight,
+    device: getDevice(window.innerWidth)
   });
   const onResize = () => {
     setSize({
       width: window.innerWidth,
-      height: window.innerHeight
+      height: window.innerHeight,
+      device: getDevice(window.innerWidth)
     });
   };
   useEffect(() => {