Web: Components: TabsContainer: added support for scrolling and multiple mode.

packages/components/tabs-container/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import Text from "../text";
-import { NavItem, Label, StyledScrollbar } from "./styled-tabs-container";
+import { NavItem, StyledScrollbar } from "./styled-tabs-container";
 
 import { ColorTheme, ThemeType } from "../ColorTheme";
 
@@ -19,8 +19,11 @@ class TabContainer extends Component {
       item--;
     }
 
+    const { multiple, selectedItem } = this.props;
+    const selectedIem = multiple ? [selectedItem] : selectedItem;
+
     this.state = {
-      activeTab: this.props.selectedItem,
+      activeTab: selectedIem,
       onScrollHide: true,
     };
 
@@ -28,11 +31,37 @@ class TabContainer extends Component {
   }
 
   titleClick = (index, item, ref) => {
-    if (this.state.activeTab !== index) {
+    const { multiple, onSelect } = this.props;
-      this.setState({ activeTab: index });
+    const { activeTab } = this.state;
+
+    const setSelection = () => {
       let newItem = Object.assign({}, item);
       delete newItem.content;
-      this.props.onSelect && this.props.onSelect(newItem);
+      onSelect && onSelect(newItem);
+    };
+
+    if (multiple) {
+      const indexOperation = () => {
+        let tempArray = [...activeTab];
+
+        if (activeTab.indexOf(index) !== -1) {
+          return activeTab.filter((item) => item !== index);
+        }
+
+        tempArray.push(index);
+        return tempArray;
+      };
+
+      const updatedActiveTab = indexOperation();
+
+      this.setState({ activeTab: updatedActiveTab });
+      setSelection();
+      return;
+    }
+
+    if (activeTab !== index) {
+      this.setState({ activeTab: index });
+      setSelection();
 
       this.setTabPosition(index, ref);
     }
@@ -152,39 +181,54 @@ class TabContainer extends Component {
   render() {
     //console.log("Tabs container render");
 
-    const { isDisabled, elements } = this.props;
+    const { isDisabled, elements, withBodyScroll, multiple } = this.props;
     const { activeTab, onScrollHide } = this.state;
 
+    const content = (
+      <NavItem className="className_items" withBodyScroll={withBodyScroll}>
+        {elements.map((item, index) => {
+          const isSelected = multiple
+            ? activeTab.indexOf(index) !== -1
+            : activeTab === index;
+
+          return (
+            <ColorTheme
+              {...this.props}
+              id={item.id}
+              themeId={ThemeType.TabsContainer}
+              onMouseMove={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
+              ref={this.arrayRefs[index]}
+              onClick={() => this.onClick(index, item)}
+              key={item.key}
+              selected={isSelected}
+              isDisabled={isDisabled}
+              multiple={multiple}
+            >
+              <Text fontWeight={600} className="title_style" fontSize="13px">
+                {item.title}
+              </Text>
+            </ColorTheme>
+          );
+        })}
+      </NavItem>
+    );
+
     return (
       <>
-        <StyledScrollbar
+        {withBodyScroll ? (
-          autoHide={onScrollHide}
+          <StyledScrollbar
-          stype="preMediumBlack"
+            autoHide={onScrollHide}
-          className="scrollbar"
+            stype="preMediumBlack"
-          ref={this.scrollRef}
+            className="scrollbar"
-        >
+            ref={this.scrollRef}
-          <NavItem className="className_items">
+          >
-            {elements.map((item, index) => (
+            {content}
-              <ColorTheme
+          </StyledScrollbar>
-                {...this.props}
+        ) : (
-                id={item.id}
+          content
-                themeId={ThemeType.TabsContainer}
+        )}
-                onMouseMove={this.onMouseEnter}
+        <div>{elements[activeTab]?.content}</div>
-                onMouseLeave={this.onMouseLeave}
-                ref={this.arrayRefs[index]}
-                onClick={() => this.onClick(index, item)}
-                key={item.key}
-                selected={activeTab === index}
-                isDisabled={isDisabled}
-              >
-                <Text fontWeight={600} className="title_style" fontSize="13px">
-                  {item.title}
-                </Text>
-              </ColorTheme>
-            ))}
-          </NavItem>
-        </StyledScrollbar>
-        <div>{elements[activeTab].content}</div>
       </>
     );
   }
@@ -199,10 +243,16 @@ TabContainer.propTypes = {
   onSelect: PropTypes.func,
   /** Selected title of tabs container */
   selectedItem: PropTypes.number,
+  /** Enables Body scroll */
+  withBodyScroll: PropTypes.bool,
+  /** Enables multiple select  */
+  multiple: PropTypes.bool,
 };
 
 TabContainer.defaultProps = {
   selectedItem: 0,
+  withBodyScroll: true,
+  multiple: false,
 };
 
 export default TabContainer;

packages/components/tabs-container/styled-tabs-container.js

@@ -14,6 +14,13 @@ const NavItem = styled.div`
   position: relative;
   white-space: nowrap;
   display: flex;
+
+  ${(props) =>
+    !props.withBodyScroll &&
+    css`
+      gap: 8px;
+      flex-wrap: wrap;
+    `};
 `;
 NavItem.defaultProps = { theme: Base };
 
@@ -26,9 +33,9 @@ const Label = styled.div`
   .title_style {
     text-align: center;
     margin: ${(props) => props.theme.tabsContainer.label.title.margin};
-    overflow: ${(props) =>
+    overflow: ${(props) => props.theme.tabsContainer.label.title.overflow};
-      props.theme.interfaceDirection === "rtl" ? "visible" : "hidden"};
+
-    ${NoUserSelect};
+    ${NoUserSelect}
   }
 
   ${(props) =>
@@ -40,7 +47,7 @@ const Label = styled.div`
   ${(props) =>
     props.selected
       ? css`
-          cursor: default;
+          cursor: ${!props.multiple ? "default" : "pointer"};
           background-color: ${(props) =>
             props.theme.tabsContainer.label.backgroundColor};
           .title_style {