@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/v1/Tab/Tabs.js

@@ -0,0 +1,523 @@
+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, 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 './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';
+
+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);
+
+    if (elemDim !== 0) {
+      newDim[target.dataset.key] = elemDim;
+    }
+
+    setTabDimensions(newDim);
+  }
+
+  useEffect(() => {
+    let totalDimension = getTotalDimensionLocal();
+    let tabDimensions = 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);
+        }
+      }
+    });
+    setTotalDimension(totalDimension);
+    setTabDimensions(tabDimensions);
+    setRenderVirtualTabs(false);
+    setTabKeys(tabKeys);
+
+    if (highlight.current) {
+      highlightInitialDimension.current = getHighlightDim();
+      moveHighlight();
+    }
+
+    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;
+      }
+    };
+  }, []);
+
+  function setMaxDim() {
+    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    // let actual = Object.keys(tabDimensions).reduce(
+    //   (sum, tab) => sum + (tabDimensions[tab] || 0),
+    //   0
+    // );
+    if (totalDimension && tabElement.current[selectedTab]) {
+      let newDim = `${remConvert(totalDimension)}rem`;
+      align === 'vertical' ? tabElement.current[selectedTab].style.maxWidth = newDim : tabElement.current[selectedTab].style.maxHeight = newDim;
+    }
+  }
+
+  function getHighlightDim() {
+    return align === 'vertical' ? highlight.current.offsetLeft : highlight.current.offsetTop;
+  }
+
+  useEffectCallOnlyAfterState(() => {
+    if (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) {
+        setRenderVirtualTabs(true);
+        setTabKeys(newTabKeys);
+        setTimeout(() => {
+          setTabDimensions(getTabDimensions());
+          setTotalDimension(getTotalDimensionLocal());
+          setRenderVirtualTabs(false);
+        });
+      }
+
+      if (newTabKeys.length === 1) {
+        moveHighlight();
+      }
+    }
+  });
+  useEffectCallOnlyAfterState(() => {
+    tabsObserver.current && tabsObserver.current.replaceResizeHandler(onResize);
+
+    if (children) {
+      moveHighlight();
+    }
+  }, [selectedTab]);
+
+  function moveHighlight() {
+    let node = highlight.current;
+
+    if (isAnimate && needTabBorder && node) {
+      let tabActive = tabElement.current[selectedTab];
+
+      if (tabActive) {
+        let position, dimension;
+
+        if (align === 'vertical') {
+          position = tabActive.offsetLeft;
+          dimension = tabActive.offsetWidth;
+          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.current)}rem)`;
+          node.style.height = `${remConvert(dimension)}rem`;
+        }
+      }
+    }
+  }
+
+  const getHighlightRef = useCallback(ele => {
+    highlight.current = ele;
+  }, []);
+  const getTabsRef = useCallback(ele => {
+    tabsEle.current = ele;
+
+    if (ele) {
+      tabsObserver.current.observe(ele);
+    } else {
+      tabsObserver.current && tabsObserver.current.disconnect();
+    }
+  }, []);
+
+  function onSizeChange() {
+    let totalDimension = getTotalDimensionLocal();
+    setTotalDimension(totalDimension);
+
+    if (highlight.current) {
+      highlightInitialDimension.current = getHighlightDim();
+      moveHighlight();
+    }
+  }
+
+  function onResize(timer) {
+    if (tabsEle.current && isResponsive) {
+      if (!timer) {
+        onSizeChange();
+      } else {
+        setTimeout(() => {
+          onSizeChange();
+        }, timer);
+      }
+    }
+  }
+
+  function getTotalDimensionLocal() {
+    let totalDimension = tabsEle.current && getTotalDimension(tabsEle.current, align);
+    return totalDimension;
+  }
+
+  function getTabDimensions() {
+    let tabDimensions = {};
+    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;
+  }
+
+  function responsiveTab(totalDimension, tabDimensions) {
+    let mainTabs = [],
+        moreTabs = [],
+        otherTabs = [];
+
+    if (totalDimension && isResponsive) {
+      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; */
+        setMaxDim(totalDimension);
+      }
+    } else if (!isResponsive) {
+      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
+    };
+  }
+
+  function getTabRef(refName, ele, isVirtual) {
+    if (ele) {
+      tabElement.current[refName] = ele;
+    } // tabElement.current[refName] = ele
+
+
+    let key = isVirtual ? `virtual_${refName}` : refName;
+
+    if (ele) {
+      tabObserver.current[key] = new ResizeObserver(onTabResize);
+      tabObserver.current[key].observe(ele);
+    } else {
+      if (tabObserver.current && tabObserver.current[key]) {
+        tabObserver.current[key].disconnect();
+      }
+    }
+  }
+
+  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;
+    }
+
+    e.preventDefault();
+    onSelect(tab);
+  }
+
+  function onScrollLocal(e) {
+    e.persist();
+    onScroll && throttle(onScroll, 100, e);
+  }
+
+  function togglePopupLocal(e) {
+    removeClose && removeClose(e);
+    let popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
+    boxPosition = boxPosition ? boxPosition : popupPosition;
+    togglePopup(e, boxPosition);
+  }
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  function renderTabs(mainTabs, moreTabs, isVirtual) {
+    let {
+      moreButtonClass,
+      moreButtonActiveClass,
+      moreBoxClass,
+      menuItemClass,
+      itemClass,
+      itemActiveClass,
+      iconName,
+      isPopupReady,
+      isPopupOpen,
+      getContainerRef,
+      showTitleInMoreOptions,
+      moreContainerClass,
+      align,
+      type,
+      isAnimate,
+      needTabBorder,
+      needAppearance,
+      iconSize,
+      getTargetRef,
+      position,
+      customProps,
+      getCustomDropBoxHeaderPlaceHolder
+    } = props;
+    let {
+      DropBoxProps = {},
+      ListItemProps = {},
+      MoreButtonProps = {}
+    } = customProps;
+    let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    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: getTabRef,
+        onSelect: onSelect // recalculateDimension={tabElement.current[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: togglePopupLocal,
+      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: responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isActive: isPopupReady,
+        isAnimate: true,
+        size: "medium",
+        customClass: {
+          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
+        },
+        boxPosition: position,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        isArrow: false,
+        ...DropBoxProps,
+        isResponsivePadding: true,
+        needFocusScope: true,
+        onClose: togglePopupLocal
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        scroll: "vertical",
+        className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+        onScroll: onScrollLocal
+      }, React.Children.map(moreTabs, child => {
+        if (!child) {
+          return null;
+        }
+
+        let {
+          text,
+          id,
+          title,
+          isLink,
+          href,
+          children,
+          dataId
+        } = child.props;
+        const value = text ? text : showTitleInMoreOptions ? title : null;
+        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
+          key: id,
+          value: value,
+          onClick: moreTabSelect,
+          id: id,
+          title: title || text,
+          isLink: isLink,
+          href: href,
+          autoHover: true,
+          customClass: {
+            customListItem: menuItemClass
+          },
+          target: "self",
+          dataId: `${dataId}_Tab`,
+          ...ListItemProps
+        }, !showTitleInMoreOptions ? children : null);
+      })));
+    })) : null);
+  }
+
+  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,
+  childType: Tab
+};
+export default Popup(Tabs);

package/es/v1/Tab/index.js

@@ -0,0 +1,5 @@
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/v1/Tab/props/defaultProps.js

@@ -0,0 +1,45 @@
+export const Tab_defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {},
+  dataSelectorId: 'tab'
+};
+export const TabContent_defaultProps = {
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
+};
+export const TabContentWrapper_defaultProps = {
+  children: [],
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
+};
+export const Tabs_defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {},
+  dataSelectorId: 'tabs'
+};
+export const TabWrapper_defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
+};

package/es/v1/Tab/props/propTypes.js

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+export const Tab_propTypes = {
+  activeClass: PropTypes.string,
+  align: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getTabRef: PropTypes.func,
+  href: PropTypes.string,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  style: PropTypes.object,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: PropTypes.string,
+  type: PropTypes.string,
+  customProps: PropTypes.object,
+  isVirtual: PropTypes.bool,
+  dataSelectorId: PropTypes.string
+};
+export const TabContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  id: PropTypes.string,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: PropTypes.string
+};
+export const TabContentWrapper_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  onScroll: PropTypes.func,
+  selectedTab: PropTypes.string,
+  style: PropTypes.object,
+  dataSelectorId: PropTypes.string,
+  a11y: PropTypes.object,
+  tagName: PropTypes.string
+};
+export const Tabs_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  boxPosition: PropTypes.string,
+  childType: PropTypes.elementType,
+  children: PropTypes.array,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  highlightClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isResponsive: PropTypes.bool,
+  itemActiveClass: PropTypes.string,
+  itemClass: PropTypes.string,
+  maxTabsCount: PropTypes.number,
+  menuItemClass: PropTypes.string,
+  minTabsCount: PropTypes.number,
+  moreBoxClass: PropTypes.string,
+  moreButtonActiveClass: PropTypes.string,
+  moreButtonClass: PropTypes.string,
+  moreContainerClass: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onScroll: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  selectedTab: PropTypes.string,
+  showTitleInMoreOptions: PropTypes.bool,
+  style: PropTypes.object,
+  togglePopup: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  getTargetRef: PropTypes.func,
+  containerClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    DropBoxProps: PropTypes.object,
+    ListItemProps: PropTypes.object,
+    MoreButtonProps: PropTypes.object
+  }),
+  getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
+  dataSelectorId: PropTypes.string
+};
+export const TabWrapper_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  defaultTab: PropTypes.string,
+  hookToDisableInternalState: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  dataSelectorId: PropTypes.string
+};