Web: Components: added adaptive scroll tabs to tabs-container

web/ASC.Web.Components/src/components/tabs-container/index.js

@@ -89,11 +89,22 @@ class TabContainer extends Component {
       delete newItem.content;
       this.props.onSelect && this.props.onSelect(newItem);
 
-      const position = ref.current.offsetLeft - 40;
-      this.scrollRef.current.scrollLeft(position);
+      this.setTabPosition(index, ref);
     }
   };
 
+  getWidthElements = () => {
+    const arrayWidths = [];
+    const length = this.arrayRefs.length - 1;
+    let widthItem = 0;
+    while (length + 1 !== widthItem) {
+      arrayWidths.push(this.arrayRefs[widthItem].current.offsetWidth);
+      widthItem++;
+    }
+
+    return arrayWidths;
+  };
+
   shouldComponentUpdate(nextProps, nextState) {
     const { activeTab } = this.state;
     const { isDisabled } = this.props;
@@ -106,6 +117,96 @@ class TabContainer extends Component {
     return true;
   }
 
+  componentDidMount() {
+    const { activeTab } = this.state;
+    if (activeTab !== 0 && this.arrayRefs[activeTab].current !== null) {
+      this.secondFunction(activeTab);
+    }
+    console.log("this.scrollRef", this.scrollRef);
+    console.log(
+      "componentDidMount scroll",
+      this.scrollRef.current.getClientWidth()
+    ); //get main container width)
+  }
+
+  setTabPosition = (index, currentRef) => {
+    const arrayOfWidths = this.getWidthElements(); //get tabs widths
+    const scrollLeft = this.scrollRef.current.getScrollLeft(); // get scroll position relative to left side
+    const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
+    const containerWidth = this.scrollRef.current.getClientWidth(); //get main container width
+    //console.log("containerWidth", containerWidth);
+    const currentTabWidth = currentRef.current.offsetWidth;
+    const marginRight = 8;
+
+    //get tabs of left side
+    let leftTabs = 0;
+    let leftFullWidth = 0;
+    while (leftTabs !== index) {
+      leftTabs++;
+      leftFullWidth += arrayOfWidths[leftTabs] + marginRight;
+    }
+    leftFullWidth += arrayOfWidths[0] + marginRight;
+
+    //get tabs of right side
+    let rightTabs = this.arrayRefs.length - 1;
+    let rightFullWidth = 0;
+    while (rightTabs !== index - 1) {
+      rightFullWidth += arrayOfWidths[rightTabs] + marginRight;
+      rightTabs--;
+    }
+
+    //Out of range of left side
+    if (leftFullWidth > containerWidth + scrollLeft) {
+      let prevIndex = index - 1;
+      let widthBlocksInContainer = 0;
+      while (prevIndex !== -1) {
+        widthBlocksInContainer += arrayOfWidths[prevIndex] + marginRight;
+        prevIndex--;
+      }
+
+      const difference = containerWidth - widthBlocksInContainer;
+      const currentContainerWidth = currentTabWidth;
+
+      this.scrollRef.current.scrollLeft(
+        difference * -1 + currentContainerWidth + marginRight
+      );
+    }
+    //Out of range of left side
+    else if (rightFullWidth > staticScroll - scrollLeft) {
+      this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
+    }
+  };
+
+  /*firstFunction = () => {
+    let prevIndex = index - 1;
+    let widthBlocksInContainer = 0;
+    while (prevIndex !== -1) {
+      widthBlocksInContainer += arrayOfWidths[prevIndex] + marginRight;
+      prevIndex--;
+    }
+
+    const difference = containerWidth - widthBlocksInContainer;
+    const currentContainerWidth = currentTabWidth;
+
+    this.scrollRef.current.scrollLeft(
+      difference * -1 + currentContainerWidth + marginRight
+    );
+  }*/
+
+  secondFunction = index => {
+    const arrayOfWidths = this.getWidthElements(); //get tabs widths
+    const marginRight = 8;
+    let rightTabs = this.arrayRefs.length - 1;
+    let rightFullWidth = 0;
+    while (rightTabs !== index - 1) {
+      rightFullWidth += arrayOfWidths[rightTabs] + marginRight;
+      rightTabs--;
+    }
+
+    const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
+    this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
+  };
+
   render() {
     //console.log("Tabs container render");
 
@@ -115,9 +216,10 @@ class TabContainer extends Component {
     return (
       <TabsContainer>
         <Scrollbar
-          values={this.onScrollFrame}
-          autoHide
-          autoHideTimeout={1000}
+          //values={this.onScrollFrame}
+          //autoHide
+          //autoHideTimeout={1000}
+          stype="mediumBlack"
           className="scrollbar"
           ref={this.scrollRef}
         >

web/ASC.Web.Components/src/components/tabs-container/tabs-container.stories.js

@@ -167,6 +167,72 @@ const scrollArrayItems = [
         <input />
       </div>
     )
+  },
+  {
+    key: "tab6",
+    title: "short container",
+    content: (
+      <div>
+        <button>button</button>
+        <button>button</button>
+        <button>button</button>
+      </div>
+    )
+  },
+  {
+    key: "tab7",
+    title: "Very long tabs-container field",
+    content: (
+      <div>
+        <label>label</label>
+        <label>label</label>
+        <label>label</label>
+      </div>
+    )
+  },
+  {
+    key: "tab8",
+    title: "tab container",
+    content: (
+      <div>
+        <input />
+        <input />
+        <input />
+      </div>
+    )
+  },
+  {
+    key: "tab9",
+    title: "Short___",
+    content: (
+      <div>
+        <input />
+        <input />
+        <input />
+      </div>
+    )
+  },
+  {
+    key: "tab10",
+    title: "Short__2",
+    content: (
+      <div>
+        <input />
+        <input />
+        <input />
+      </div>
+    )
+  },
+  {
+    key: "tab11",
+    title: "TabsContainer",
+    content: (
+      <div>
+        <input />
+        <input />
+        <input />
+      </div>
+    )
   }
 ];
 
@@ -189,10 +255,67 @@ storiesOf("Components|TabContainer", module)
           <h5 style={{ marginTop: 100, marginBottom: 20 }}>
             TabsContainer with auto scroll:
           </h5>
-          <TabContainer isDisabled={boolean("isDisabled", false)}>
+          <TabContainer
+            isDisabled={boolean("isDisabled", false)}
+            selectedItem={3}
+          >
             {scrollArrayItems}
           </TabContainer>
         </div>
+
+        <div style={{ marginTop: 32, maxWidth: 430 }}>
+          <h5 style={{ marginTop: 100, marginBottom: 20 }}>
+            TabsContainer with auto scroll:
+          </h5>
+          <TabContainer
+            isDisabled={boolean("isDisabled", false)}
+            selectedItem={5}
+          >
+            {[{
+              key: "tab0",
+              title: "Title00000000",
+              content: <label>LABEL</label>
+            },
+            {
+              key: "tab1",
+              title: "Title00000001",
+              content: <label>LABEL</label>
+            },
+            {
+              key: "tab2",
+              title: "Title00000002",
+              content: <label>LABEL</label>
+            },{
+              key: "tab3",
+              title: "Title00000003",
+              content: <label>LABEL</label>
+            },{
+              key: "tab4",
+              title: "Title00000004",
+              content: <label>LABEL</label>
+            },{
+              key: "tab5",
+              title: "Title00000005",
+              content: <label>LABEL</label>
+            },{
+              key: "tab6",
+              title: "Title00000006",
+              content: <label>LABEL</label>
+            },{
+              key: "tab7",
+              title: "Title00000007",
+              content: <label>LABEL</label>
+            },{
+              key: "tab8",
+              title: "Title00000008",
+              content: <label>LABEL</label>
+            },{
+              key: "tab9",
+              title: "Title00000009",
+              content: <label>LABEL</label>
+            }]}
+          </TabContainer>
+        </div>
       </Section>
     );
   });