apier-react-tabtab/src/Tabs.js

A mobile support, draggable, editable and api based Tab for ReactJS

// @flow
import * as React from 'react';

type Props = {
  defaultIndex?: number,
  activeIndex?: number,
  showModalButton?: number | boolean,
  showArrowButton?: 'auto' | boolean,
  ExtraButton?: React.Node,
  onTabChange?: (event: any) => void,
  onTabSequenceChange?: (event: any) => void,
  onTabEdit?: (event: any) => void,
  children: React.Element<*>
};

type State = {
  activeIndex: number
};

export default class Tabs extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    (this: any).handleTabChange = this.handleTabChange.bind(this);
    (this: any).handleTabSequence = this.handleTabSequence.bind(this);
    (this: any).handleEdit = this.handleEdit.bind(this);
    (this: any).state = {
      activeIndex: this.getActiveIndex(props)
    };
  }

  static defaultProps = {
    showModalButton: 4,
    showArrowButton: 'auto',
    onTabChange: () => {},
    onTabSequenceChange: () => {},
    customStyle: {
      TabList: null,
      Tab: null,
      Panel: null,
      ActionButton: null
    }
  };

  getActiveIndex(props: Props) {
    const { defaultIndex, activeIndex } = props;
    if (activeIndex) return activeIndex;
    if (defaultIndex) return defaultIndex;
    return 0;
  }

  UNSAFE_componentWillReceiveProps(nextProps: Props) {
    if (nextProps.activeIndex !== this.props.activeIndex) {
      this.setState({ activeIndex: nextProps.activeIndex });
    }
  }

  handleTabChange(index: number) {
    const { activeIndex, onTabChange } = this.props;
    if (activeIndex !== 0 && !activeIndex) {
      this.setState({ activeIndex: index });
    }
    if (onTabChange) {
      onTabChange(index);
    }
  }

  handleTabSequence({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) {
    const { onTabSequenceChange } = this.props;
    if (onTabSequenceChange) {
      onTabSequenceChange({ oldIndex, newIndex });
    }
  }

  handleEdit({ type, index }: { type: string, index: number }) {
    const { onTabEdit } = this.props;
    if (onTabEdit) {
      onTabEdit({ type, index });
    }
  }

  render() {
    const { children, ...extraProps } = this.props;
    const { activeIndex } = this.state;
    const props = {
      handleTabChange: this.handleTabChange,
      handleTabSequence: this.handleTabSequence,
      handleEdit: this.handleEdit,
      autoCloseModal: this.props.autoCloseModal || false,
      activeIndex,
      ...extraProps
    };

    return (
      <div>
        {React.Children.map(children, child => {
          return React.cloneElement(child, props);
        })}
      </div>
    );
  }
}