@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-236

package/es/Tab/Tabs.js

@@ -1,723 +0,0 @@
-/* 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 EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-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 { Box, Container } from "../Layout";
-import ResizeObserver from "../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
-import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./Tabs.module.css";
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
-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: [],
-      searchValue: ''
-    };
-    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim', 'handleChange', 'handleSearchValueClear', 'getMoreList', 'renderEmptyState']);
-    this.tabsObserver = new ResizeObserver(this.onResize);
-    this.tabObserver = {};
-  }
-
-  onTabResize(size, target) {
-    let {
-      align
-    } = this.props;
-    let {
-      tabDimensions
-    } = this.state;
-    let newDim = Object.assign({}, tabDimensions);
-    let elemDim = getTotalDimension(target, align);
-
-    if (elemDim !== 0) {
-      newDim[target.dataset.key] = elemDim;
-    }
-
-    this.setState({
-      tabDimensions: newDim
-    });
-  }
-
-  componentDidMount() {
-    let {
-      children,
-      childType
-    } = this.props;
-    let totalDimension = this.getTotalDimension();
-    let tabDimensions = this.getTabDimensions();
-    let tabKeys = [];
-    let restrictedKeys = ['state', 'props', 'refs', 'context'];
-    React.Children.toArray(children).forEach(child => {
-      if (child && child.props.id && child.type === childType) {
-        if (restrictedKeys.includes(child.props.id)) {
-          throw new Error('Restricted id name found in Tabs, Please avoid these names => ' + restrictedKeys.toString());
-        } else {
-          tabKeys.push(child.props.id);
-        }
-      }
-    });
-    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;
-    }
-
-    if (this.tabObserver) {
-      Object.keys(this.tabObserver).forEach(observer => {
-        this.tabObserver[observer] && this.tabObserver[observer].disconnect();
-      });
-      this.tabObserver = null;
-    }
-  }
-
-  setMaxDim() {
-    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let {
-      selectedTab
-    } = this.props; // let actual = Object.keys(tabDimensions).reduce(
-    //   (sum, tab) => sum + (tabDimensions[tab] || 0),
-    //   0
-    // );
-
-    if (totalDimension && this[selectedTab]) {
-      let {
-        align
-      } = this.props;
-      let newDim = `${remConvert(totalDimension)}rem`;
-      TAB_DIRECTION_MAPPING[align] === 'column' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
-    }
-  }
-
-  getHighlightDim() {
-    let {
-      align
-    } = this.props;
-    return TAB_DIRECTION_MAPPING[align] === 'column' ? this.highlight.offsetLeft : this.highlight.offsetTop;
-  }
-
-  componentDidUpdate(prevProps) {
-    let {
-      children,
-      selectedTab,
-      childType,
-      isPopupOpen
-    } = this.props;
-    let {
-      tabDimensions,
-      totalDimension,
-      tabKeys,
-      searchValue
-    } = this.state;
-
-    if (prevProps.children && children) {
-      /**
-       * To recalculate the dimensions of tabs we are checking the children length.
-       * and also checking the tab id and their order.
-       */
-      let newTabKeys = [];
-      React.Children.toArray(children).forEach(child => {
-        if (child && child.props.id && child.type === childType) {
-          newTabKeys.push(child.props.id);
-        }
-      });
-      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
-          });
-        });
-      }
-
-      if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
-        this.moveHighlight();
-      }
-
-      if (prevProps.isPopupOpen != isPopupOpen && searchValue.length) {
-        this.handleSearchValueClear();
-      }
-    }
-  }
-
-  moveHighlight() {
-    let {
-      isAnimate,
-      needTabBorder,
-      selectedTab,
-      align
-    } = this.props;
-    let {
-      highlightInitialDimension
-    } = this.state;
-    let node = this.highlight;
-
-    if (isAnimate && needTabBorder && node) {
-      let tabActive = this[selectedTab];
-
-      if (tabActive) {
-        let position, dimension;
-
-        if (TAB_DIRECTION_MAPPING[align] === 'column') {
-          position = tabActive.offsetLeft;
-          dimension = tabActive.offsetWidth;
-          node.style.transform = `translateX(${remConvert(position - highlightInitialDimension)}rem)`;
-          node.style.width = `${remConvert(dimension)}rem`;
-        } else if (TAB_DIRECTION_MAPPING[align] === 'row') {
-          position = tabActive.offsetTop;
-          dimension = tabActive.offsetHeight;
-          node.style.transform = `translateY(${remConvert(position - highlightInitialDimension)}rem)`;
-          node.style.height = `${remConvert(dimension)}rem`;
-        }
-      }
-    }
-  }
-
-  getHighlightRef(ele) {
-    this.highlight = ele;
-  }
-
-  getTabsRef(ele) {
-    this.tabsEle = ele;
-
-    if (ele) {
-      this.tabsObserver.observe(ele);
-    } else {
-      this.tabsObserver && this.tabsObserver.disconnect();
-    }
-  }
-
-  onSizeChange() {
-    let totalDimension = this.getTotalDimension();
-    this.setState({
-      totalDimension
-    });
-    this.highlight && this.setState({
-      highlightInitialDimension: this.getHighlightDim()
-    }, () => {
-      this.moveHighlight();
-    });
-  }
-
-  onResize(timer) {
-    let {
-      isResponsive
-    } = this.props;
-
-    if (this.tabsEle && isResponsive) {
-      if (!timer) {
-        this.onSizeChange();
-      } else {
-        setTimeout(() => {
-          this.onSizeChange();
-        }, timer);
-      }
-    }
-  }
-
-  getTotalDimension() {
-    let {
-      align
-    } = this.props;
-    let totalDimension = this.tabsEle && getTotalDimension(this.tabsEle, align);
-    return totalDimension;
-  }
-
-  getTabDimensions() {
-    let {
-      children,
-      align,
-      childType
-    } = this.props;
-    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)
-    }));
-    return tabDimensions;
-  }
-
-  responsiveTab(totalDimension, tabDimensions) {
-    let {
-      children,
-      maxTabsCount,
-      minTabsCount,
-      isResponsive
-    } = this.props;
-    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;
-      let minTabsToBeVisible = 1;
-      React.Children.forEach(children, child => {
-        if (child && child.type === childType && child.props.id) {
-          const elemDimension = tabDimensions[child.props.id];
-          let isMaxCountExceeded = maxTabsTobeVisible <= 0 ? true : false;
-          let isMinCountNotExceeded = minTabsToBeVisible < minTabsCount ? true : false;
-
-          if (child.props.id === selectedTab) {
-            mainTabs.push(child);
-          } else if (isMinCountNotExceeded) {
-            mainTabs.push(child);
-            remainingDimension -= tabDimensions[child.props.id];
-            minTabsToBeVisible++;
-            maxTabsTobeVisible--;
-          } else if (remainingDimension - elemDimension >= 20 && !moreTabs.length && !isMaxCountExceeded) {
-            mainTabs.push(child);
-            remainingDimension -= tabDimensions[child.props.id];
-            maxTabsTobeVisible--;
-          } else {
-            moreTabs.push(child);
-          }
-        } else if ( /*#__PURE__*/React.isValidElement(child)) {
-          otherTabs.push(child);
-        }
-      });
-
-      if (selectedTabDimension > totalDimension) {
-        /* let { align } = this.props;
-        let newDim = `${remConvert(totalDimension)}rem`;
-        let newTabs;
-        if (align === 'vertical') {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-        } else {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-        }
-        mainTabs = newTabs; */
-        this.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);
-        } else {
-          otherTabs.push(child);
-        }
-      });
-    } else {
-      moreTabs = children;
-    }
-
-    return {
-      mainTabs,
-      moreTabs,
-      otherTabs
-    };
-  }
-
-  getTabRef(refName, ele, isVirtual) {
-    this[refName] = ele;
-    let key = isVirtual ? `virtual_${refName}` : refName;
-
-    if (ele) {
-      this.tabObserver[key] = new ResizeObserver(this.onTabResize);
-      this.tabObserver[key].observe(ele);
-    } else {
-      if (this.tabObserver && this.tabObserver[key]) {
-        this.tabObserver[key].disconnect();
-      }
-    }
-  }
-
-  moreTabSelect(tab, value, index, e) {
-    let {
-      onSelect,
-      closePopupOnly
-    } = this.props;
-
-    if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-      cancelBubblingEffect(e);
-      return;
-    }
-
-    e.preventDefault();
-    onSelect(tab);
-    closePopupOnly();
-  }
-
-  onScroll(e) {
-    e.persist();
-    let {
-      onScroll
-    } = this.props;
-    onScroll && throttle(onScroll, 100, e);
-  }
-
-  togglePopup(e) {
-    let {
-      boxPosition,
-      togglePopup,
-      align,
-      removeClose
-    } = this.props;
-    removeClose && removeClose(e);
-    boxPosition = boxPosition ? boxPosition : TAB_POPUP_POSITION_MAPPING[align];
-    togglePopup(e, boxPosition);
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
-  handleChange(value, e) {
-    this.setState({
-      searchValue: value
-    });
-  }
-
-  handleSearchValueClear(e) {
-    this.setState({
-      searchValue: ''
-    });
-  }
-
-  getMoreList(_ref2) {
-    let {
-      moreTabs
-    } = _ref2;
-    const validElements = [];
-    React.Children.map(moreTabs, child => {
-      const isValidElement = /*#__PURE__*/React.isValidElement(child);
-
-      if (isValidElement) {
-        validElements.push(child.props);
-      }
-    });
-    return validElements;
-  }
-
-  handleFilterSuggestions(_ref3) {
-    let {
-      moreTabs
-    } = _ref3;
-    const {
-      showTitleInMoreOptions
-    } = this.props;
-    const {
-      searchValue
-    } = this.state;
-    const options = this.getMoreList({
-      moreTabs
-    });
-    const filteredOptions = options.filter(list => {
-      const {
-        text,
-        title
-      } = list;
-      const value = text ? text : showTitleInMoreOptions ? title : '';
-      return value.toLowerCase().includes(searchValue.toLowerCase());
-    });
-    return filteredOptions;
-  }
-
-  renderEmptyState() {
-    const {
-      searchErrorText
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateContainer
-    }, /*#__PURE__*/React.createElement(EmptySearch, {
-      size: "small"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateTitle
-    }, searchErrorText));
-  }
-
-  renderTabs(mainTabs, moreTabs, isVirtual) {
-    let {
-      selectedTab,
-      moreButtonClass,
-      moreButtonActiveClass,
-      moreBoxClass,
-      menuItemClass,
-      itemClass,
-      itemActiveClass,
-      iconName,
-      isPopupReady,
-      isPopupOpen,
-      getContainerRef,
-      showTitleInMoreOptions,
-      onSelect,
-      moreContainerClass,
-      align,
-      type,
-      isAnimate,
-      needTabBorder,
-      needAppearance,
-      iconSize,
-      getTargetRef,
-      position,
-      customProps,
-      getCustomDropBoxHeaderPlaceHolder,
-      dataSelectorId,
-      dataId,
-      placeHolderText,
-      searchBoxSize,
-      removeClose,
-      isAbsolutePositioningNeeded,
-      isRestrictScroll,
-      positionsOffset,
-      targetOffset
-    } = this.props;
-    const {
-      searchValue
-    } = this.state;
-    let {
-      DropBoxProps = {},
-      ListItemProps = {},
-      MoreButtonProps = {},
-      TextBoxIconProps = {}
-    } = customProps;
-    let popupClass = TAB_DIRECTION_MAPPING[align] === 'column' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
-    const moreTabsListItems = this.handleFilterSuggestions({
-      moreTabs
-    });
-    const hasSearch = moreTabs.length > 4;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
-      if (!child) {
-        return null;
-      }
-
-      let MainTab = child.type;
-      let classProps = {};
-
-      if (itemActiveClass) {
-        classProps.activeClass = itemActiveClass;
-      }
-
-      if (itemClass) {
-        classProps.className = itemClass;
-      }
-
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
-        key: child.props.id,
-        getTabRef: this.getTabRef,
-        onSelect: onSelect,
-        recalculateDimension: this.recalculateDimension,
-        isActive: child.props.id === selectedTab,
-        type: type,
-        isAnimate: isAnimate,
-        needBorder: needTabBorder,
-        needAppearance: needAppearance,
-        align: align,
-        isVirtual: isVirtual,
-        ...classProps
-      });
-    }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
-      className: `${tabsStyle.menu} `,
-      dataSelectorId: `${dataSelectorId}_moreIcon`
-    }, /*#__PURE__*/React.createElement(Container, {
-      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
-      align: "both",
-      onClick: this.togglePopup,
-      dataId: "moreTabs",
-      eleRef: getTargetRef,
-      ...MoreButtonProps,
-      "aria-label": "MoreTabs",
-      role: "link",
-      tagName: "button"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize
-    })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref4 => {
-      let {
-        tabletMode
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
-        customClass: {
-          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: false,
-        isArrow: false,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        ...DropBoxProps,
-        isResponsivePadding: true,
-        needFocusScope: true,
-        dataId: `${dataId}_dropbox`,
-        onClick: removeClose,
-        onClose: this.togglePopup
-      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: tabsStyle.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchValue,
-        onClear: this.handleSearchValueClear,
-        size: searchBoxSize,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
-        },
-        dataId: `${dataId}_search`,
-        autoComplete: false,
-        name: "search",
-        ...TextBoxIconProps
-      })) : null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        shrink: true,
-        scroll: "vertical",
-        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll,
-        dataId: `${dataId}_Tabs`
-      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
-        let {
-          text,
-          id,
-          title,
-          isLink,
-          href,
-          children,
-          dataId
-        } = data;
-        const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.createElement(ListItem, {
-          key: id,
-          value: value,
-          onClick: this.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
-          customClass: {
-            customListItem: menuItemClass
-          },
-          target: "self",
-          dataId: `${dataId}_Tab`,
-          ...ListItemProps
-        }, !showTitleInMoreOptions ? children : null);
-      }) : this.renderEmptyState()));
-    })) : 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: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
-      className: tabsClass,
-      style: style
-    }, /*#__PURE__*/React.createElement(Box, {
-      eleRef: this.getTabsRef,
-      flexible: true
-    }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
-      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
-      className: tabsStyle.hidden
-    }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
-      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? '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
-    })));
-  }
-
-}
-
-Tabs.propTypes = Tabs_propTypes;
-Tabs.defaultProps = { ...Tabs_defaultProps,
-  childType: Tab
-};
-export default Popup(Tabs);