xchain-components/src/components/XTab/index.js

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import * as React from 'react';
import { Tab, Icon, Menu } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';

type Props = {
  width?: string,
  height?: string,
  menuWidth?: string | number,
  menuHeight?: string,
  menuBorderRadius?: string,
  menuMargin?: string,
  menuFontSize?: string,
  secondary?: boolean,
  iconHeight?: string,
  tabPanes: Array<{
    icon?: string,
    iconColor?: string,
    name: string,
    content: string | React.Node
  }>,
  paneBackGroundColor?: string,
  paneBorderColor?: string,
  activeTab: number,
  onTabChange: () => void,
  menuPadding?: string,
};


function getMenuItem(tabPane,
  menuWidth, menuHeight, menuBorderRadius, menuPadding, menuMargin, menuFontSize, iconHeight, idx) {
  let menuItem = [];
  if (tabPane.icon !== undefined) {
    menuItem = (
      <Menu.Item
        key={idx}
        style={{
          width: menuWidth,
          height: menuHeight,
          borderRadius: menuBorderRadius,
          padding: menuPadding,
          margin: menuMargin,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Icon
          style={{
            color: tabPane.iconColor,
            fontSize: iconHeight,
            marginBottom: '5px',
          }}
          name={tabPane.icon}
        />
        <XDisplayText displayText={tabPane.name} fontSize={menuFontSize} fontStyle="bold" />
      </Menu.Item>
    );
  } else {
    menuItem = (
      <Menu.Item
        key={idx}
        style={{
          width: menuWidth,
          height: menuHeight,
          padding: menuPadding,
          margin: menuMargin,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <XDisplayText displayText={tabPane.name} fontSize={menuFontSize} fontWeight={500} />
      </Menu.Item>
    );
  }
  return menuItem;
}

const XTab = (props:Props) => {
  const {
    width,
    tabPanes,
    secondary,
    menuWidth, menuHeight, menuBorderRadius, menuPadding, menuMargin, menuFontSize, iconHeight,
    paneBackGroundColor, paneBorderColor, activeTab, onTabChange,
  } = props;
  let tabElement = null;
  if (tabPanes !== undefined && tabPanes !== null) {
    tabElement = (
      <Tab
        style={{
          width,
          boxShadow: 'none',
        }}
        activeIndex={activeTab}
        onTabChange={onTabChange}
        menu={{ secondary, attached: false, tabular: false }}
        panes={
          tabPanes.map((tabPane, idx) => (
            {
              menuItem: getMenuItem(tabPane,
                menuWidth, menuHeight, menuBorderRadius,menuPadding, menuMargin, menuFontSize, iconHeight, idx),
              render: () => (
                <Tab.Pane
                  style={{
                    padding: 0,
                    backgroundColor: paneBackGroundColor,
                    border: `1px ${paneBorderColor} solid`,
                  }}
                >
                  { tabPane.content }
                </Tab.Pane>
              ),
            }
          ))
        }
      />
    );
  }
  return tabElement;
};

XTab.defaultProps = {
  width: '700px',
  height: '32px',
  menuWidth: '140px',
  menuHeight: '40px',
  menuBorderRadius: '0px',
  menuMargin: '0px',
  menuFontSize: '12px',
  secondary: false,
  iconHeight: '20px',
  paneBackGroundColor: 'white',
  paneBorderColor: '#b6c0cb ',
  activeTab: 0,
  menuPadding: '0px 5px'
};
export default XTab;