apier-react-tabtab/src/DragTabList.js

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

// @flow
import React from 'react';
import SortMethod from './SortMethod';
import {SortableContainer} from 'react-sortable-hoc';
import TabList from './TabList';

const DragTabContainer = SortableContainer(({children, ...props}) => {
  return (
    <TabList {...props}>
      {children}
    </TabList>
  );
});

export default class DragTabList extends SortMethod {
  render() {
    const {children, ...props} = this.props;
    return (
      <DragTabContainer onSortEnd={this.onSortEnd}
                        axis='x'
                        lockAxis='x'
                        helperClass={"tabbar-dragging"}
                        // if no pressDelay, close button cannot be triggered,
                        // because it would always treat click as dnd action
                        // insub move pressDelay to distance , we don't need mobile
                        distance={2}
                        {...props}>
        {children}
      </DragTabContainer>
    );
  }
}

DragTabList.displayName = 'DragTabList';