• Stars
    star
    144
  • Rank 255,590 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Atom like draggable tab react component

React-draggable-tab Build Status npm version

Gyazo

Atom like draggable tab react component.

Demo

View Demo

Installation

npm install --save react-draggable-tab

React v0.14 is supported from react-draggable-tab v0.4.0. For React v0.13.x, please use react-draggable-tab v0.3.3.

API

Tab

Tab is just a case class to check props. props.children will rendered into content area.

Props

  • key: unique key in TabList. PropTypes.string.isRequired

  • beforeTitle: element to show in tab. eg icon. PropTypes.element

  • title: string or element to show in tab. PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired

  • afterTitle: element to show in tab. eg: notification badge PropTypes.element

  • uncloseable: If true, closeButton will not be appeared in tab. PropTypes.bool (Default false)

Style (for each tab)
  • tabClassNames: classNames which will be added to rendered elements.

  • tab: base li element of tab (defult: rdTab)

  • tabBefore: before element of li which emulate :Before selector (defult: rdTabBefore)

  • tabAfter: after element of li which emulate :After selector (defult: rdTabAfter)

  • tabTitle: span element of tab title (defult: rdTabTitle)

  • tabBeforeTitle: span element of tab before title (defult: tabBeforeTitle)

  • tabAfterTitle: span element of tab after title (defult: tabAfterTitle)

  • tabCloseIcon: base span element of close icon (defult: rdCloseIcon)

  • tabActive: selected tab's li, before, after (defult: rdTabActive)

  • tabHover: selected tab's li, before, after (defult: rdTabHover)

  • tabStyles: Inline styles which will be overwritten default and common-tabs inline styles.

  • tab: base li element of tab

  • tabBefore: before element of li which emulate :Before selector.

  • tabAfter: after element of li which emulate :After selector.

  • tabTitle: span element of tab title

  • tabActive: selected tab's li

  • tabBeforeActive: selected tab's li before

  • tabAfterActive: selected tab's li after

  • tabTitleActive: selected tab's title

  • tabOnHover: hovered tab's li

  • tabBeforeOnHover: hovered tab's li before

  • tabAfterOnHover: hovered tab's li after

  • tabTitleOnHover: hovered tab's title

  • tabCloseIcon: base span element of close icon

  • tabCloseIconOnHover: base span element of close icon when hover

  • containerStyle: style object which will be apply to container of rendered tab.

  • hiddenContainerStyle: style object which will be apply to container of hidden tab.

Events

All other props like onXX handler set to Tab will be passed to rendered element except onClick You can use any onXX for Supported events for tab element.

Tabs

Tabs is container for tab. it will render tabBar and content of selected element.

Props

  • tabs: Array of Tab elements. PropTypes.arrayOf(PropTypes.element)

  • selectedTab: key for selectedTab. PropTypes.string default to first tab.

  • disableDrag: disables the ability to drag the tabs. React.PropTypes.bool default is false.

  • tabAddButton: element for add button. PropTypes.element

  • keepSelectedTab: Prevent tab select on drag/move behind tab. PropTypes.bool default false.

  • unclosable: Disable tab to close. PropTypes.bool default false.

  • shouldTabClose(e, key): will be called before tab close event, return false if you want to stop tab close process, default true;

Shortcut key binding
  • shortCutKeys: Short cut key bindings as Mousetrap style.
  • close: key binding to close current tab (onTabClose will be called)
  • create: key binding to create tab (onTabAddButtonClick will be called)
  • moveRight: key binding to move right (onTabSelect will be called)
  • moveLeft: key binding to move left (onTabSelect will be called)
Style (All tabs will be apply these styles)
  • tabsClassNames: classNames which will be added to rendered elements.

  • tabWrapper: root wrapper div element (defult: rdTabWrapper)

  • tabBar: base ul element of tab bar (defult: rdTabBar)

  • tabBarAfter: after span element of tab bar which emulate :After selector (defult: rdTabBarAfter)

  • tab: base li element of tab (defult: rdTab)

  • tabBefore: before element of li which emulate :Before selector (defult: rdTabBefore)

  • tabAfter: after element of li which emulate :After selector (defult: rdTabAfter)

  • tabTitle: span element of tab title (defult: rdTabTitle)

  • tabBeforeTitle: span element of tab before title (defult: rdTabBeforeTitle)

  • tabBeforeTitle: span element of tab after title (defult: rdTabAfterTitle)

  • tabCloseIcon: base span element of close icon (defult: rdCloseIcon)

  • tabActive: selected tab's li, before, after (defult: rdTabActive)

  • tabsStyles: Inline styles which will be overwritten default inline styles.

  • tabWrapper: root wrapper div element

  • tabBar: base ul element of tab bar

  • tabBarAfter: after span element of tab bar which emulate :After selector

  • tab: base li element of tab

  • tabBefore: before element of li which emulate :Before selector.

  • tabAfter: after element of li which emulate :After selector.

  • tabTitle: span element of tab title

  • tabActive: selected tab's li

  • tabBeforeActive: selected tab's li before

  • tabAfterActive: selected tab's li after

  • tabTitleActive: selected tab's title

  • tabCloseIcon: base span element of close icon

  • tabCloseIconOnHover: base span element of close icon when hover

Events
  • onTabSelect(e, key, currentTabs): Called when tab of key was selected. currentTabs is array of tabs elements sorted with current order.

  • onTabClose(e, key, currentTabs): Called when tab of key was closed. currentTabs is array of tabs elements sorted with current order.

  • onTabPositionChange(e, key, currentTabs): Called when tab of key was moved. currentTabs is array of tabs elements sorted with current order.

  • onTabAddButtonClick(e, currentTabs): Called when tab add button was clicked. currentTabs is array of tabs elements sorted with current order. Basically you will concat currentTabs with new empty tab.

    let newTabs = currentTabs.concat([newTab]);

* onTabDoubleClick(e, key): Called when title was double clicked. Removed from v0.5.0

* onTabMouseEnter(e, key): Called when mouse enter to tab. Removed from v0.5.0

* onTabMouseLeave(e, key): Called when mouse leave from tab. Removed from v0.5.0

Usage example

class App extends React.Component {
  constructor(props) {
    super(props);
    let icon = (<image src='icon.png' style={{height:'13px'}}/>);
    let fonticon = (<icon className='icon-html5'/>);
    let badge = (<DynamicTabBadge />);

    this.state = {
      tabs:[
        (<Tab key={'tab0'} title={'unclosable tab'} unclosable={true} >
          <div>
            <h1>This tab cannot close</h1>
          </div>
        </Tab>),
        (<Tab key={'tab1'} title={'1stTab'} beforeTitle={icon} >
          <div>
            <h1>This is tab1</h1>
          </div>
        </Tab>),
        (<Tab key={'tab2'} title={'2ndTab Too long Toooooooooooooooooo long'} beforeTitle={fonticon} >
          <div>
            <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            </pre>
          </div>
        </Tab>),
        (<Tab key={'tab3'} title={'Dynamic tab'} afterTitle={badge}>
          <DynamicTabContent/>
        </Tab>)
      ],
      badgeCount: 0
    };
  }

  handleTabSelect(e, key, currentTabs) {
    console.log('handleTabSelect key:', key);
    this.setState({selectedTab: key, tabs: currentTabs});
  }

  handleTabClose(e, key, currentTabs) {
    console.log('tabClosed key:', key);
    this.setState({tabs: currentTabs});
  }

  handleTabPositionChange(e, key, currentTabs) {
    console.log('tabPositionChanged key:', key);
    this.setState({tabs: currentTabs});
  }

  handleTabAddButtonClick(e, currentTabs) {
    // key must be unique
    const key = 'newTab_' + Date.now();
    let newTab = (<Tab key={key} title='untitled'>
                    <div>
                      <h1>New Empty Tab</h1>
                    </div>
                  </Tab>);
    let newTabs = currentTabs.concat([newTab]);

    this.setState({
      tabs: newTabs,
      selectedTab: key
    });
  }

  render() {

    return (
      <Tabs
        tabsClassNames={tabsClassNames}
        tabsStyles={tabsStyles}
        selectedTab={this.state.selectedTab ? this.state.selectedTab : "tab2"}
        onTabSelect={this.handleTabSelect.bind(this)}
        onTabClose={this.handleTabClose.bind(this)}
        onTabAddButtonClick={this.handleTabAddButtonClick.bind(this)}
        onTabPositionChange={this.handleTabPositionChange.bind(this)}
        tabs={this.state.tabs}
        shortCutKeys={
          {
            'close': ['alt+command+w', 'alt+ctrl+w'],
            'create': ['alt+command+t', 'alt+ctrl+t'],
            'moveRight': ['alt+command+tab', 'alt+ctrl+tab'],
            'moveLeft': ['shift+alt+command+tab', 'shift+alt+ctrl+tab']
          }
        }
      />
    )
  }
};

See also example

npm install
npm run start:example

Tests

npm test

Contributors

See list

Known Issue

  • Dynamic tab content.

Tabs do not care any change in Tab content. content needs update by your application side. See 3rdTab in example.

In application, class rdTabBar or your custom class of TabBar needs display: -webkit-flex in CSS like below.

.myTabBar {
  display: -webkit-flex;
}

More Repositories

1

markdown-edit

online markdown editor/viewer
HTML
206
star
2

react-fileupload-progress

React component of Input file and progress bar
JavaScript
102
star
3

slidepad

HTML Slide Generator.
CoffeeScript
27
star
4

ws-tether

websocket-based tethering
JavaScript
8
star
5

react-mousetrap-mixin

React component and mixin for mousetrap
JavaScript
7
star
6

react-magic-effects

Magical effects for react components
JavaScript
6
star
7

m101j

Homework files of M101J MongoDB for Java Developers
Python
4
star
8

ACSEmailOutputBinding

Azure Communication Service Email output binding for Azure Function
C#
2
star
9

react-dropfile-field

Textarea react component with drop file preview
JavaScript
2
star
10

Hello-World

Hello World!
1
star
11

client_boilerplate

Client-side javascript project Boilerplate.
CoffeeScript
1
star
12

ts_boilerplate

JavaScript
1
star
13

webBoard

Realtime online whiteboard app using webSocket. Working on Node-jitsu
JavaScript
1
star
14

connect-ltsv-logger

ltsv format logger for (connect|express)
JavaScript
1
star
15

m102

Homework files of M102 MongoDB for DBAs
JavaScript
1
star
16

georgeosddev.github.com

souce of my Github Pages (http://georgeosddev.github.com)
CoffeeScript
1
star
17

patternMatchify.js

Pattern matching like Scala in JavaScript
JavaScript
1
star
18

backbone-slide.js

A very simple HTML presentation tool using backbone.js
JavaScript
1
star
19

CoffeeScriptServerSample

CoffeeScriptの勉強
CoffeeScript
1
star
20

railsinstaller_demo

Rails Installer Demo
Ruby
1
star
21

xitrum-polymer-sample

Xitrum component demo with Polymer
Scala
1
star
22

jekytrum

Simple static site generator
Scala
1
star
23

booklog

BookLog like Pinterest's interface
CoffeeScript
1
star
24

george-osd-site.docpad

source of http://george-osd-site.cloudfoundry.com/
CoffeeScript
1
star
25

coderwall-badged-icon-generator

Create coderwall-badged-icon
JavaScript
1
star
26

xitrum-leochat

Chat demo of xitrum with LeoFS
Java
1
star
27

voiceShortcut

JavaScript
1
star
28

longo

Asynchronous local database with a flavor of FRP.
JavaScript
1
star
29

syncStopWatch

JavaScript
1
star
30

resume

TypeScript
1
star
31

fluxflex-syncStopWatch

JavaScript
1
star
32

dotfiles

dotfiles
Shell
1
star
33

jwt-decoder

local jwt decoder
JavaScript
1
star
34

SimpleLogger

CoffeeScriptのLogger
CoffeeScript
1
star