@zohodesk/components 1.2.20 → 1.2.21

package/es/v1/Tab/Tabs.js

@@ -1,51 +1,60 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/* eslint-disable react/forbid-component-props */
-
-/* eslint css-modules/no-unused-class: [2, {
-      markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
-        ]
-    }]
-*/
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
 import Tab from './Tab';
 import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
-import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../../utils/Common';
+import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
 import { Box, Container } from '../Layout';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from '../../Tab/Tabs.module.css';
+import tabsStyle from './v1Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
-class Tabs extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      totalDimension: null,
-      tabDimensions: {},
-      highlightInitialDimension: null,
-      renderVirtualTabs: true,
-      tabKeys: []
-    };
-    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
-    this.tabsObserver = new ResizeObserver(this.onResize);
-    this.tabObserver = {};
-  }
-
-  onTabResize(size, target) {
-    let {
-      align
-    } = this.props;
-    let {
-      tabDimensions
-    } = this.state;
+const Tabs = props => {
+  const [totalDimension, setTotalDimension] = useState(null);
+  const [tabDimensions, setTabDimensions] = useState({});
+  const highlightInitialDimension = useRef(null);
+  const [renderVirtualTabs, setRenderVirtualTabs] = useState(true);
+  const [tabKeys, setTabKeys] = useState([]);
+  const tabsObserver = useRef(new ResizeObserver(onResize));
+  const tabObserver = useRef({});
+  const highlight = useRef(null);
+  const tabsEle = useRef(null);
+  const tabElement = useRef({});
+  let {
+    style,
+    className,
+    dataId,
+    highlightClass,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    align,
+    boxPosition,
+    removeClose,
+    togglePopup,
+    needAppearance,
+    children,
+    onSelect,
+    onScroll,
+    isResponsive,
+    maxTabsCount,
+    minTabsCount,
+    childType,
+    containerClass,
+    dataSelectorId,
+    selectedTab
+  } = props;
+
+  function onTabResize(size, target) {
     let newDim = Object.assign({}, tabDimensions);
     let elemDim = getTotalDimension(target, align);
 
@@ -53,18 +62,12 @@ class Tabs extends React.Component {
       newDim[target.dataset.key] = elemDim;
     }
 
-    this.setState({
-      tabDimensions: newDim
-    });
+    setTabDimensions(newDim);
   }
 
-  componentDidMount() {
-    let {
-      children,
-      childType
-    } = this.props;
-    let totalDimension = this.getTotalDimension();
-    let tabDimensions = this.getTabDimensions();
+  useEffect(() => {
+    let totalDimension = getTotalDimensionLocal();
+    let tabDimensions = getTabDimensions();
     let tabKeys = [];
     let restrictedKeys = ['state', 'props', 'refs', 'context'];
     React.Children.toArray(children).forEach(child => {
@@ -76,71 +79,50 @@ class Tabs extends React.Component {
         }
       }
     });
-    this.setState({
-      totalDimension,
-      tabDimensions,
-      renderVirtualTabs: false,
-      tabKeys
-    });
-    this.highlight && this.setState({
-      highlightInitialDimension: this.getHighlightDim()
-    }, () => {
-      this.moveHighlight();
-    });
-  }
-
-  componentWillUnmount() {
-    if (this.tabsObserver) {
-      this.tabsObserver.disconnect();
-      this.tabsObserver = null;
+    setTotalDimension(totalDimension);
+    setTabDimensions(tabDimensions);
+    setRenderVirtualTabs(false);
+    setTabKeys(tabKeys);
+
+    if (highlight.current) {
+      highlightInitialDimension.current = getHighlightDim();
+      moveHighlight();
     }
 
-    if (this.tabObserver) {
-      Object.keys(this.tabObserver).forEach(observer => {
-        this.tabObserver[observer] && this.tabObserver[observer].disconnect();
-      });
-      this.tabObserver = null;
-    }
-  }
+    return () => {
+      if (tabsObserver.current) {
+        tabsObserver.current.disconnect();
+        tabsObserver.current = null;
+      }
+
+      if (tabObserver.current) {
+        Object.keys(tabObserver.current).forEach(observer => {
+          tabObserver.current[observer] && tabObserver.current[observer].disconnect();
+        });
+        tabObserver.current = null;
+      }
+    };
+  }, []);
 
-  setMaxDim() {
+  function setMaxDim() {
     let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let {
-      selectedTab
-    } = this.props; // let actual = Object.keys(tabDimensions).reduce(
+
+    // let actual = Object.keys(tabDimensions).reduce(
     //   (sum, tab) => sum + (tabDimensions[tab] || 0),
     //   0
     // );
-
-    if (totalDimension && this[selectedTab]) {
-      let {
-        align
-      } = this.props;
+    if (totalDimension && tabElement.current[selectedTab]) {
       let newDim = `${remConvert(totalDimension)}rem`;
-      align === 'vertical' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
+      align === 'vertical' ? tabElement.current[selectedTab].style.maxWidth = newDim : tabElement.current[selectedTab].style.maxHeight = newDim;
     }
   }
 
-  getHighlightDim() {
-    let {
-      align
-    } = this.props;
-    return align === 'vertical' ? this.highlight.offsetLeft : this.highlight.offsetTop;
+  function getHighlightDim() {
+    return align === 'vertical' ? highlight.current.offsetLeft : highlight.current.offsetTop;
   }
 
-  componentDidUpdate(prevProps) {
-    let {
-      children,
-      selectedTab,
-      childType
-    } = this.props;
-    let {
-      tabDimensions,
-      totalDimension,
-      tabKeys
-    } = this.state;
-
-    if (prevProps.children && children) {
+  useEffectCallOnlyAfterState(() => {
+    if (children) {
       /**
        * To recalculate the dimensions of tabs we are checking the children length.
        * and also checking the tab id and their order.
@@ -154,40 +136,33 @@ class Tabs extends React.Component {
       let isSameTabKeys = newTabKeys.every((current, index) => tabKeys[index] === current);
 
       if (newTabKeys.length !== tabKeys.length || !isSameTabKeys) {
-        this.setState({
-          renderVirtualTabs: true,
-          tabKeys: newTabKeys
-        }, () => {
-          totalDimension = this.getTotalDimension();
-          tabDimensions = this.getTabDimensions();
-          this.setState({
-            tabDimensions,
-            totalDimension,
-            renderVirtualTabs: false
-          });
+        setRenderVirtualTabs(true);
+        setTabKeys(newTabKeys);
+        setTimeout(() => {
+          setTabDimensions(getTabDimensions());
+          setTotalDimension(getTotalDimensionLocal());
+          setRenderVirtualTabs(false);
         });
       }
 
-      if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
-        this.moveHighlight();
+      if (newTabKeys.length === 1) {
+        moveHighlight();
       }
     }
-  }
+  });
+  useEffectCallOnlyAfterState(() => {
+    tabsObserver.current && tabsObserver.current.replaceResizeHandler(onResize);
 
-  moveHighlight() {
-    let {
-      isAnimate,
-      needTabBorder,
-      selectedTab,
-      align
-    } = this.props;
-    let {
-      highlightInitialDimension
-    } = this.state;
-    let node = this.highlight;
+    if (children) {
+      moveHighlight();
+    }
+  }, [selectedTab]);
+
+  function moveHighlight() {
+    let node = highlight.current;
 
     if (isAnimate && needTabBorder && node) {
-      let tabActive = this[selectedTab];
+      let tabActive = tabElement.current[selectedTab];
 
       if (tabActive) {
         let position, dimension;
@@ -195,97 +170,72 @@ class Tabs extends React.Component {
         if (align === 'vertical') {
           position = tabActive.offsetLeft;
           dimension = tabActive.offsetWidth;
-          node.style.transform = `translateX(${remConvert(position - highlightInitialDimension)}rem)`;
+          node.style.transform = `translateX(${remConvert(position - highlightInitialDimension.current)}rem)`;
           node.style.width = `${remConvert(dimension)}rem`;
         } else if (align === 'horizontal') {
           position = tabActive.offsetTop;
           dimension = tabActive.offsetHeight;
-          node.style.transform = `translateY(${remConvert(position - highlightInitialDimension)}rem)`;
+          node.style.transform = `translateY(${remConvert(position - highlightInitialDimension.current)}rem)`;
           node.style.height = `${remConvert(dimension)}rem`;
         }
       }
     }
   }
 
-  getHighlightRef(ele) {
-    this.highlight = ele;
-  }
-
-  getTabsRef(ele) {
-    this.tabsEle = ele;
+  const getHighlightRef = useCallback(ele => {
+    highlight.current = ele;
+  }, []);
+  const getTabsRef = useCallback(ele => {
+    tabsEle.current = ele;
 
     if (ele) {
-      this.tabsObserver.observe(ele);
+      tabsObserver.current.observe(ele);
     } else {
-      this.tabsObserver && this.tabsObserver.disconnect();
+      tabsObserver.current && tabsObserver.current.disconnect();
     }
-  }
+  }, []);
 
-  onSizeChange() {
-    let totalDimension = this.getTotalDimension();
-    this.setState({
-      totalDimension
-    });
-    this.highlight && this.setState({
-      highlightInitialDimension: this.getHighlightDim()
-    }, () => {
-      this.moveHighlight();
-    });
-  }
+  function onSizeChange() {
+    let totalDimension = getTotalDimensionLocal();
+    setTotalDimension(totalDimension);
 
-  onResize(timer) {
-    let {
-      isResponsive
-    } = this.props;
+    if (highlight.current) {
+      highlightInitialDimension.current = getHighlightDim();
+      moveHighlight();
+    }
+  }
 
-    if (this.tabsEle && isResponsive) {
+  function onResize(timer) {
+    if (tabsEle.current && isResponsive) {
       if (!timer) {
-        this.onSizeChange();
+        onSizeChange();
       } else {
         setTimeout(() => {
-          this.onSizeChange();
+          onSizeChange();
         }, timer);
       }
     }
   }
 
-  getTotalDimension() {
-    let {
-      align
-    } = this.props;
-    let totalDimension = this.tabsEle && getTotalDimension(this.tabsEle, align);
+  function getTotalDimensionLocal() {
+    let totalDimension = tabsEle.current && getTotalDimension(tabsEle.current, align);
     return totalDimension;
   }
 
-  getTabDimensions() {
-    let {
-      children,
-      align,
-      childType
-    } = this.props;
+  function getTabDimensions() {
     let tabDimensions = {};
-    React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && this[child.props.id] && Object.assign(tabDimensions, {
-      [child.props.id]: this[child.props.id] && getTotalDimension(this[child.props.id], align)
+    React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && tabElement.current[child.props.id] && Object.assign(tabDimensions, {
+      [child.props.id]: tabElement.current[child.props.id] && getTotalDimension(tabElement.current[child.props.id], align)
     }));
     return tabDimensions;
   }
 
-  responsiveTab(totalDimension, tabDimensions) {
-    let {
-      children,
-      maxTabsCount,
-      minTabsCount,
-      isResponsive
-    } = this.props;
+  function responsiveTab(totalDimension, tabDimensions) {
     let mainTabs = [],
         moreTabs = [],
         otherTabs = [];
 
     if (totalDimension && isResponsive) {
-      let {
-        childType,
-        selectedTab
-      } = this.props;
       let selectedTabDimension = tabDimensions[selectedTab] || 0;
       let remainingDimension = totalDimension - selectedTabDimension;
       let maxTabsTobeVisible = maxTabsCount - 1;
@@ -325,12 +275,9 @@ class Tabs extends React.Component {
           newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
         }
         mainTabs = newTabs; */
-        this.setMaxDim(totalDimension);
+        setMaxDim(totalDimension);
       }
     } else if (!isResponsive) {
-      let {
-        childType
-      } = this.props;
       React.Children.forEach(children, child => {
         if (child && child.type === childType && child.props.id) {
           mainTabs.push(child);
@@ -349,25 +296,25 @@ class Tabs extends React.Component {
     };
   }
 
-  getTabRef(refName, ele, isVirtual) {
-    this[refName] = ele;
+  function getTabRef(refName, ele, isVirtual) {
+    if (ele) {
+      tabElement.current[refName] = ele;
+    } // tabElement.current[refName] = ele
+
+
     let key = isVirtual ? `virtual_${refName}` : refName;
 
     if (ele) {
-      this.tabObserver[key] = new ResizeObserver(this.onTabResize);
-      this.tabObserver[key].observe(ele);
+      tabObserver.current[key] = new ResizeObserver(onTabResize);
+      tabObserver.current[key].observe(ele);
     } else {
-      if (this.tabObserver && this.tabObserver[key]) {
-        this.tabObserver[key].disconnect();
+      if (tabObserver.current && tabObserver.current[key]) {
+        tabObserver.current[key].disconnect();
       }
     }
   }
 
-  moreTabSelect(tab, value, index, e) {
-    let {
-      onSelect
-    } = this.props;
-
+  function moreTabSelect(tab, value, index, e) {
     if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
       cancelBubblingEffect(e);
       return;
@@ -377,28 +324,19 @@ class Tabs extends React.Component {
     onSelect(tab);
   }
 
-  onScroll(e) {
+  function onScrollLocal(e) {
     e.persist();
-    let {
-      onScroll
-    } = this.props;
     onScroll && throttle(onScroll, 100, e);
   }
 
-  togglePopup(e) {
-    let {
-      boxPosition,
-      togglePopup,
-      align,
-      removeClose
-    } = this.props;
+  function togglePopupLocal(e) {
     removeClose && removeClose(e);
     let popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
     boxPosition = boxPosition ? boxPosition : popupPosition;
     togglePopup(e, boxPosition);
   }
 
-  responsiveFunc(_ref) {
+  function responsiveFunc(_ref) {
     let {
       mediaQueryOR
     } = _ref;
@@ -409,9 +347,8 @@ class Tabs extends React.Component {
     };
   }
 
-  renderTabs(mainTabs, moreTabs, isVirtual) {
+  function renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
-      selectedTab,
       moreButtonClass,
       moreButtonActiveClass,
       moreBoxClass,
@@ -423,7 +360,6 @@ class Tabs extends React.Component {
       isPopupOpen,
       getContainerRef,
       showTitleInMoreOptions,
-      onSelect,
       moreContainerClass,
       align,
       type,
@@ -434,9 +370,8 @@ class Tabs extends React.Component {
       getTargetRef,
       position,
       customProps,
-      getCustomDropBoxHeaderPlaceHolder,
-      dataSelectorId
-    } = this.props;
+      getCustomDropBoxHeaderPlaceHolder
+    } = props;
     let {
       DropBoxProps = {},
       ListItemProps = {},
@@ -461,9 +396,9 @@ class Tabs extends React.Component {
 
       return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
         key: child.props.id,
-        getTabRef: this.getTabRef,
-        onSelect: onSelect,
-        recalculateDimension: this.recalculateDimension,
+        getTabRef: getTabRef,
+        onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
+        ,
         isActive: child.props.id === selectedTab,
         type: type,
         isAnimate: isAnimate,
@@ -478,7 +413,7 @@ class Tabs extends React.Component {
     }, /*#__PURE__*/React.createElement(Container, _extends({
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
-      onClick: this.togglePopup,
+      onClick: togglePopupLocal,
       dataId: "moreTabs",
       eleRef: getTargetRef
     }, MoreButtonProps, {
@@ -489,7 +424,7 @@ class Tabs extends React.Component {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
+      query: responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
       let {
@@ -509,13 +444,13 @@ class Tabs extends React.Component {
       }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+        onClose: togglePopupLocal
+      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll
+        onScroll: onScrollLocal
       }, React.Children.map(moreTabs, child => {
         if (!child) {
           return null;
@@ -534,7 +469,7 @@ class Tabs extends React.Component {
         return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
           key: id,
           value: value,
-          onClick: this.moreTabSelect,
+          onClick: moreTabSelect,
           id: id,
           title: title || text,
           isLink: isLink,
@@ -550,60 +485,36 @@ class Tabs extends React.Component {
     })) : null);
   }
 
-  render() {
-    let {
-      style,
-      className,
-      dataId,
-      highlightClass,
-      type,
-      isAnimate,
-      needTabBorder,
-      needBorder,
-      needPadding,
-      align,
-      needAppearance,
-      children,
-      containerClass,
-      dataSelectorId
-    } = this.props;
-    let {
-      totalDimension,
-      tabDimensions,
-      renderVirtualTabs
-    } = this.state;
-    let {
-      mainTabs,
-      moreTabs,
-      otherTabs
-    } = this.responsiveTab(totalDimension, tabDimensions);
-    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
-    let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
-    let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
-    return /*#__PURE__*/React.createElement(Box, {
-      className: containerClass,
-      dataSelectorId: dataSelectorId
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column',
-      className: tabsClass,
-      style: style
-    }, /*#__PURE__*/React.createElement(Box, {
-      eleRef: this.getTabsRef,
-      flexible: true
-    }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column',
-      className: tabsStyle.hidden
-    }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column'
-    }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: hlClass,
-      ref: this.getHighlightRef,
-      "data-id": dataId,
-      "data-test-id": dataId
-    })));
-  }
-
-}
+  let {
+    mainTabs,
+    moreTabs,
+    otherTabs
+  } = responsiveTab(totalDimension, tabDimensions);
+  let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
+  let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
+  let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: containerClass,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: align === 'vertical' ? 'row' : 'column',
+    className: tabsClass,
+    style: style
+  }, /*#__PURE__*/React.createElement(Box, {
+    eleRef: getTabsRef,
+    flexible: true
+  }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
+    alignBox: align === 'vertical' ? 'row' : 'column',
+    className: tabsStyle.hidden
+  }, renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
+    alignBox: align === 'vertical' ? 'row' : 'column'
+  }, renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
+    className: hlClass,
+    ref: getHighlightRef,
+    "data-id": dataId,
+    "data-test-id": dataId
+  })));
+};
 
 Tabs.propTypes = Tabs_propTypes;
 Tabs.defaultProps = { ...Tabs_defaultProps,