wix-style-react/src/Tabs/test/examples/TabsTemplate.js

wix-style-react

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tabs from '../../index';
import * as TabPropTypes from '../../core/constants/tab-prop-types';

const items = [
  { id: 1, title: 'First Item' },
  { id: 2, title: 'Second Item' },
  { id: 3, title: 'Third Item' },
  { id: 4, title: 'Fourth item' },
  { id: 6, title: 'Fifth item' },
  { id: 7, title: 'Sixth item' },
  { id: 8, title: 'A very long tab item that may not fit' },
];

class TabsTemplate extends Component {
  state = {
    activeId: items[0].id,
  };

  componentDidUpdate(props) {
    props.onChange(() => {});
  }

  componentDidMount() {
    this.props.onChange(() => {});
  }

  getComponent() {
    const { activeId } = this.state;
    const { type, hasDivider, width, sideContent } = this.props;
    const props = { items, activeId, hasDivider };

    if (type) {
      props.type = type;
    }

    if (type === 'uniformSide' && width) {
      props.width = width;
    }

    return (
      <Tabs
        sideContent={sideContent}
        onClick={item => this.setState({ activeId: item.id })}
        dataHook="story-tabs"
        {...props}
      />
    );
  }

  render() {
    return this.getComponent();
  }
}

TabsTemplate.propTypes = {
  onChange: PropTypes.func.isRequired,
  type: TabPropTypes.type,
  hasDivider: PropTypes.bool,
  width: PropTypes.string,
  sideContent: PropTypes.node,
};

export default TabsTemplate;