added auto offset

packages/asc-web-components/submenu/autoOffset.js

@@ -0,0 +1,91 @@
+import { tablet } from "../utils/device";
+import DomHelpers from "../utils/domHelpers";
+
+const pGap = 14;
+const fGap = 4;
+const offset = 32;
+const wrapperPadding = DomHelpers.getViewport() <= tablet ? 16 : 20;
+
+export const countAutoOffset = (data, submenuItemsRef) => {
+  const refCurrent = submenuItemsRef.current;
+
+  const textWidths = data.map((d) => countTextWidth(d.name));
+  const itemsAndGaps = countItemsAndGaps(textWidths);
+
+  const submenuWidth = refCurrent.offsetWidth;
+  const marker = refCurrent.scrollLeft + submenuWidth - wrapperPadding;
+
+  const [itemOnMarker] = itemsAndGaps.filter(
+    (obj) => obj.start < marker && marker < obj.end
+  );
+
+  if (
+    itemOnMarker.type === "gap" &&
+    itemOnMarker !== itemsAndGaps[itemsAndGaps.length - 1]
+  )
+    return itemOnMarker.end - marker + offset - wrapperPadding;
+  if (
+    itemOnMarker.type === "item" &&
+    itemOnMarker.end - marker < 15 &&
+    itemOnMarker !== itemsAndGaps[itemsAndGaps.length - 2]
+  )
+    return marker - itemOnMarker.end + offset * 2;
+  return 0;
+};
+
+const countTextWidth = (text) => {
+  const inputText = text;
+  const font = "600 13px open sans";
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context.font = font;
+  return context.measureText(inputText).width;
+};
+
+const countItemsAndGaps = (textWidths) => {
+  const result = [];
+
+  textWidths.forEach((tw) => {
+    if (!result.length)
+      result.push(
+        {
+          type: "gap",
+          length: pGap,
+          start: 0,
+          end: pGap + wrapperPadding,
+        },
+        {
+          type: "item",
+          length: tw,
+          start: pGap,
+          end: pGap + tw,
+        }
+      );
+    else {
+      const lastItem = result[result.length - 1];
+      result.push(
+        {
+          type: "gap",
+          length: pGap * 2 + fGap,
+          start: lastItem.end,
+          end: lastItem.end + pGap * 2 + fGap,
+        },
+        {
+          type: "item",
+          length: tw,
+          start: lastItem.end + pGap * 2 + fGap,
+          end: lastItem.end + pGap * 2 + fGap + tw,
+        }
+      );
+    }
+  });
+
+  result.push({
+    type: "gap",
+    length: pGap,
+    start: result[result.length - 1].end,
+    end: result[result.length - 1].end + pGap + wrapperPadding,
+  });
+
+  return result;
+};

packages/asc-web-components/submenu/index.js

@@ -2,7 +2,9 @@ import PropTypes from "prop-types";
 import React, { useEffect, useRef, useState } from "react";
 
 import Text from "../text";
+import { tablet } from "../utils/device";
 import DomHelpers from "../utils/domHelpers";
+import { countAutoOffset } from "./autoOffset";
 import {
   StyledSubmenu,
   StyledSubmenuBottomLine,
@@ -25,49 +27,47 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
     if (item) setCurrentItem(item);
   };
 
-  const ref = useRef();
+  const submenuItemsRef = useRef();
 
-  const test = useRef();
-  let testText = "";
-  const textWidths = data.map((d) => {
-    testText = d.name;
-  });
+  if (submenuItemsRef.current) {
+    const offset = countAutoOffset(data, submenuItemsRef);
+    submenuItemsRef.current.scrollLeft += offset;
+  }
 
   useEffect(() => {
-    //console.log(test.current ? test.current.offsetWidth : 0);
-  }, [test.current]);
-
-  useEffect(() => {
-    if (!ref.current) return;
+    if (!submenuItemsRef.current) return;
     let isDown = false;
     let startX;
     let scrollLeft;
 
-    ref.current.addEventListener("mousedown", (e) => {
+    submenuItemsRef.current.addEventListener("mousedown", (e) => {
+      e.preventDefault();
       isDown = true;
-      startX = e.pageX - ref.current.offsetLeft;
-      scrollLeft = ref.current.scrollLeft;
+      startX = e.pageX - submenuItemsRef.current.offsetLeft;
+      scrollLeft = submenuItemsRef.current.scrollLeft;
     });
 
-    ref.current.addEventListener("mousemove", (e) => {
+    submenuItemsRef.current.addEventListener("mousemove", (e) => {
       if (!isDown) return;
       e.preventDefault();
-      const x = e.pageX - ref.current.offsetLeft;
+      const x = e.pageX - submenuItemsRef.current.offsetLeft;
       const walk = x - startX;
-      ref.current.scrollLeft = scrollLeft - walk;
-      //console.log(ref.current.scrollLeft);
+      submenuItemsRef.current.scrollLeft = scrollLeft - walk;
     });
 
-    ref.current.addEventListener("mouseup", () => (isDown = false));
-    ref.current.addEventListener("mouseleave", () => (isDown = false));
-  }, [ref]);
+    submenuItemsRef.current.addEventListener("mouseup", () => {
+      const offset = countAutoOffset(data, submenuItemsRef);
+      submenuItemsRef.current.scrollLeft += offset;
+      isDown = false;
+    });
+    submenuItemsRef.current.addEventListener("mouseleave", () => {
+      isDown = false;
+    });
+  }, [submenuItemsRef]);
 
   return (
     <StyledSubmenu {...rest}>
-      {/* <div className="text" ref={test}>
-        {testText}
-      </div> */}
-      <StyledSubmenuItems ref={ref} role="list">
+      <StyledSubmenuItems ref={submenuItemsRef} role="list">
         {data.map((d) => {
           const isActive = d === currentItem;
           return (

packages/asc-web-components/submenu/styled-submenu.js

@@ -56,16 +56,17 @@ export const StyledSubmenuItems = styled.div`
 export const StyledSubmenuItem = styled.div.attrs((props) => ({
   id: props._key,
 }))`
+  scroll-behavior: smooth;
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  padding: 4px 14px;
   line-height: 20px;
 `;
 
 export const StyledSubmenuItemText = styled.div`
   width: 100%;
   display: flex;
-  padding: 4px 14px;
 `;
 
 export const StyledSubmenuItemLabel = styled.div`