@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Tab/Tab.js

@@ -0,0 +1,108 @@
+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 */
+import React, { useMemo, useCallback } from 'react';
+import { Tab_defaultProps } from '../../Tab/props/defaultProps';
+import { Tab_propTypes } from '../../Tab/props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../../utils/Common';
+import styles from '../../Tab/Tab.module.css';
+const tabTypes = {
+  alpha: {
+    active: 'alphaActive',
+    tab: 'tabAlpha'
+  },
+  beta: {
+    active: 'betaActive',
+    tab: 'tabBeta'
+  },
+  delta: {
+    active: 'deltaActive',
+    tab: 'tabDelta'
+  }
+};
+export default function Tab(_ref) {
+  let {
+    id,
+    style,
+    text,
+    children,
+    className,
+    dataId,
+    dataSelectorId,
+    title,
+    titlePosition,
+    activeClass,
+    href,
+    isLink,
+    isDisabled,
+    tourId,
+    onClick,
+    isActive,
+    getTabRef,
+    onSelect,
+    type,
+    isAnimate,
+    needBorder,
+    needAppearance,
+    align,
+    isVirtual,
+    customProps
+  } = _ref;
+  let clickListener = useCallback(event => {
+    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
+      event && event.stopPropagation();
+      return;
+    }
+
+    event && event.preventDefault();
+    onSelect(id);
+    onClick && onClick(event);
+  }, [id, isLink, onSelect, onClick]);
+  let styleContent = useMemo(() => tabTypes[type] || {
+    active: 'active',
+    tab: 'tab'
+  }, [type]);
+  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
+  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
+  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
+  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    tourId: tourId,
+    tagName: isLink ? 'a' : 'div',
+    className: tabClass,
+    dataId: `${dataId}_Tab`,
+    onClick: !isDisabled ? clickListener : undefined,
+    style: style,
+    eleRef: getTab,
+    "data-title": title,
+    "data-title-position": titlePosition,
+    adjust: true,
+    href: isLink ? href : undefined,
+    "data-key": id,
+    role: "link",
+    "aria-controls": id,
+    "aria-selected": isActive ? true : false,
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
+  }, customProps), /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "both",
+    className: styles.textContainer
+  }, text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    adjust: true,
+    className: styles.tabText
+  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, children) : null));
+}
+Tab.defaultProps = Tab_defaultProps;
+Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
+//   Tab.docs = {
+//     componentGroup: 'Tab',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Tab/TabContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TabContent_defaultProps } from '../../Tab/props/defaultProps';
+import { TabContent_propTypes } from '../../Tab/props/propTypes';
+import { Container } from '../Layout';
+import style from '../../Tab/TabContent.module.css';
+/* eslint-disable react/forbid-component-props */
+
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id,
+    dataSelectorId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "-1",
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
+  }, children);
+};
+
+TabContent.defaultProps = TabContent_defaultProps;
+TabContent.propTypes = TabContent_propTypes;
+export default TabContent;

package/es/v1/Tab/TabContentWrapper.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TabContentWrapper_defaultProps } from '../../Tab/props/defaultProps';
+import { TabContentWrapper_propTypes } from '../../Tab/props/propTypes';
+import { Box } from '../Layout';
+/* eslint-disable react/forbid-component-props */
+
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll,
+    dataSelectorId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
+
+TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
+TabContentWrapper.propTypes = TabContentWrapper_propTypes;
+export default TabContentWrapper;

package/es/v1/Tab/TabWrapper.js

@@ -0,0 +1,57 @@
+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); }
+
+import React, { useState, useCallback } from 'react';
+import { TabWrapper_defaultProps } from '../../Tab/props/defaultProps';
+import { TabWrapper_propTypes } from '../../Tab/props/propTypes';
+import { Container } from '../Layout';
+
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children,
+    dataSelectorId
+  } = _ref;
+  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
+  const setSelectedTab = useCallback(id => {
+    if (!hookToDisableInternalState) {
+      setSelected(id);
+    }
+
+    onSelect && onSelect(id);
+  }, [hookToDisableInternalState, onSelect]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, React.Children.map(children, child => {
+    let TabsChild = child.type;
+    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
+    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
+    , _extends({}, child.props, {
+      selectedTab: selectedTab,
+      onSelect: setSelectedTab,
+      type: type,
+      isAnimate: isAnimate,
+      needTabBorder: needTabBorder,
+      needBorder: needBorder,
+      needPadding: needPadding,
+      needAppearance: needAppearance,
+      hookToDisableInternalState: hookToDisableInternalState,
+      align: align
+    }));
+  }));
+}
+
+TabWrapper.propTypes = TabWrapper_propTypes;
+TabWrapper.defaultProps = TabWrapper_defaultProps;
+export default TabWrapper;