wix-style-react/src/CardFolderTabs/CardFolderTabs.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { dataHooks } from './constants';
import Tab from './Tab';
import { st, classes, vars } from './CardFolderTabs.st.css';
import { withFocusable } from 'wix-ui-core/dist/src/hocs/Focusable';

const tabButton = ({
  className,
  id,
  name,
  disabled,
  selected,
  maxTabWidth,
  onTabChange,
  focusableOnFocus,
  focusableOnBlur,
  fluid,
  ellipsis,
  size,
  beforeSelected,
  afterSelected,
}) => {
  return (
    <button
      data-hook={dataHooks.tabButton(id)}
      className={st(
        classes.button,
        {
          selected,
          disabled,
          fluid,
          beforeSelected,
          afterSelected,
        },
        className,
      )}
      style={fluid ? {} : { [vars['maxWidth']]: maxTabWidth }}
      onClick={() => onTabChange(id)}
      disabled={disabled}
      key={id}
      onFocus={focusableOnFocus}
      onBlur={focusableOnBlur}
    >
      <Text
        dataHook={dataHooks.tabText(id)}
        ellipsis={ellipsis}
        className={classes.buttonText}
        size={size}
      >
        {name}
      </Text>
    </button>
  );
};

const TabButton = withFocusable(tabButton);

class CardFolderTabs extends React.PureComponent {
  render() {
    const {
      dataHook,
      className,
      children,
      activeId,
      maxTabWidth,
      onTabChange,
      fluid,
      ellipsis,
      size,
    } = this.props;
    const cardFolderTabs = Array.isArray(children) ? children : [children];
    const selectedTabIndex = cardFolderTabs.findIndex(
      tab => activeId === tab.props.id,
    );
    return (
      <div
        className={st(classes.root, { fluid }, className)}
        data-hook={dataHook}
      >
        <div data-hook={dataHooks.header} className={classes.headerWrapper}>
          {cardFolderTabs.map(({ props }, index) => (
            <TabButton
              key={props.id}
              {...props}
              selected={activeId === props.id}
              beforeSelected={index === selectedTabIndex - 1}
              afterSelected={index === selectedTabIndex + 1}
              maxTabWidth={maxTabWidth}
              fluid={fluid}
              ellipsis={ellipsis}
              size={size}
              onTabChange={
                typeof onTabChange === 'function' ? onTabChange : undefined
              }
            />
          ))}
        </div>
        <div
          data-hook={dataHooks.content}
          className={classes.tabContentWrapper}
        >
          {cardFolderTabs.filter(tab => activeId === tab.props.id)}
        </div>
      </div>
    );
  }
}

CardFolderTabs.displayName = 'CardFolderTabs';

CardFolderTabs.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: PropTypes.string,

  /** Specifies an id of a currently visible tab. */
  activeId: PropTypes.string.isRequired,

  /** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */
  onTabChange: PropTypes.func,

  /** Defines a maximum width of a tab button. */
  maxTabWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /** Stretches tabs to fill a 100% of a parent container width */
  fluid: PropTypes.bool,

  /** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line. */
  ellipsis: PropTypes.bool,

  /** Controls tab label font size */
  size: PropTypes.oneOf(['medium', 'small']),
};

CardFolderTabs.defaultProps = {
  maxTabWidth: '138px',
  ellipsis: true,
  size: 'medium',
  fluid: false,
};

CardFolderTabs.Tab = Tab;

export default CardFolderTabs;