TabsNoDraggable.js

'use strict';

import _ from 'lodash-compat';
import StyleSheet from 'react-style';
import React from 'react';
import {FontIcon, IconButton, Paper} from 'material-ui';
import {Tabs} from 'react-draggable-tab';

import {COLORS} from '../themes/CommonStyle';
import ClearFix from '../common/ClearFix';
import Utils from '../../utils/Utils';


const TabStyles = StyleSheet.create({

  wrapper: {
    height: '100%',
    width: '100%',
    position: 'relative',
    overflowY: 'hidden',
    overflowX: 'hidden'
  },

  relative: {
    position: 'relative'
  },

  tabBar: {
    // @TODO safari needs prefix. Style should be define in CSS.
    // Can't use duprecated key's for inline-style.
    // See https://github.com/facebook/react/issues/2020
    // display: '-webkit-flex',
    // display: '-ms-flexbox',
    display: 'flex',
    WebkitUserSelect: 'none',
    MozUserSelect: 'none',
    msUserSelect: 'none',
    userSelect: 'none',
    margin: 0,
    listStyle: 'none',
    outline: '0px',
    overflowY: 'hidden',
    overflowX: 'hidden',
    minWidth: '98%',
    maxWidth: '98%',
    float: 'left',
    paddingRight: '20px'
  },

  tabBarAfter: {
    content: '',
    position: 'absolute',
    top: '26px',
    height: '5px',
    left: '0',
    right: '0',
    zIndex: 2,
    backgroundColor: '#222222',
    borderBottom: '1px solid #111111',
    pointerEvents: 'none'
  },

  tab: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    height: '26px',
    fontSize: '11px',
    position: 'relative',
    marginLeft: '10px',
    paddingLeft: '15px',
    paddingRight: '24px',
    WebkutBoxFlex: 1,
    WebkitFlex: 1,
    MozFlex: 1,
    msFlex: 1,
    flex: 1,
    maxWidth: '175px',
    minWidth: '40px',
    transform: 'translate(0px, 0px)'
  },

  tabBefore: {
    content: '',
    position: 'absolute',
    top: '0px',
    width: '25px',
    height: '26px',

    left: '-13px',
    borderTopLeftRadius: '3px',
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },

  tabAfter: {
    content: '',
    position: 'absolute',
    top: '0px',
    width: '25px',
    height: '26px',

    right: '-14px',
    borderTopRightRadius: '3px',
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },

  tabActive: {
    WebkutBoxFlex: 2,
    WebkitFlex: 2,
    MozFlex: 2,
    msFlex: 2,
    flex: 2,
    zIndex: 1,
    color: '#ffffff',
    fontSize: '13px',
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },

  tabTitle: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    marginTop: '8px',
    height: '20px',
    float: 'left',
    textAlign: 'center',
    position: 'relative',
    width: '90%',
    color: 'rgba(255, 255, 255, 0.3)'
  },

  tabBeforeActive: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },

  tabAfterActive: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },

  tabTitleActive: {
    lineHeight: '1.5em',
    color: COLORS.WHITE,
    marginTop:'5px'
  },

  tabCloseIcon:{
    cursor: 'pointer',
    font: '14px/100% arial, sans-serif',
    width: '10%',
    right: '5px',
    marginTop: '8px',
    textDecoration: 'none',
    textShadow: '0 1px 0 #fff',
    float: 'right',
    fontSize: '1.5em',
    lineHeight: '1em',
    filter: 'alpha(opacity=20)',
    opacity: '.2'
  },

  tabCloseIconOnHover:{
    textShadow: '0 1px 0 #red',
    color:'red'
  },

  tabAddButton: {
    cursor: 'pointer',
    fontFamily: "'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif",
    fontSize: '20px',
    textShadow: 'rgb(255, 255, 255) 0px 1px 0px',
    position: 'relative',
    width: '25px',
    height: '26px',
    marginLeft: '20px'
  },

  beforeTitle: {
    position:'absolute',
    top: '6px',
    left: '-8px',
    zIndex: 2
  },

  afterTitle: {
    position:'absolute',
    top: '10px',
    right: '16px',
    zIndex: 2
  }
});

const styles ={
  buttonsWrapper: {
    position: 'absolute',
    zIndex: 2,
    right: '0px'
  },
  navButtonWrapper: {
    backgroundColor: COLORS.WHITE,
    float: 'left',
    width: '36px',
    height: '36px',
    marginLeft: '10px'
  },
  navButton: {
    backgroundColor: COLORS.WHITE,
    width: '24px',
    height: '24px',
    padding: '0px',
    margin:'6px'
  }
};

const FIXED_ICON_COLORS = {
  color: COLORS.GREEN,
  hoverColor: COLORS.GREEN
};

class TabsNoDraggable extends Tabs {
  constructor(props) {
    super(props);
  }

  goNext(e){
    let key = this._getNextTabKey(this.state.selectedTab);
    if (key){
      this.props.onTabSelect(e, key, this._getCurrentOpenTabs());
    }
  }

  goPrev(e){
    let key = this._getPrevTabKey(this.state.selectedTab);
    if (key){
      this.props.onTabSelect(e, key, this._getCurrentOpenTabs());
    }
  }

  render() {

    // override inline tabs styles
    let tabInlineStyles = {
    };
    tabInlineStyles.tabBar = Utils.overwrite(TabStyles.tabBar, this.props.tabsStyles.tabBar);
    tabInlineStyles.tabBarAfter = Utils.overwrite(TabStyles.tabBarAfter, this.props.tabsStyles.tabBarAfter);
    tabInlineStyles.tab = Utils.overwrite(TabStyles.tab, this.props.tabsStyles.tab);
    tabInlineStyles.tabBefore = Utils.overwrite(TabStyles.tabBefore, this.props.tabsStyles.tabBefore);
    tabInlineStyles.tabAfter = Utils.overwrite(TabStyles.tabAfter, this.props.tabsStyles.tabAfter);
    tabInlineStyles.tabTitle = Utils.overwrite(TabStyles.tabTitle, this.props.tabsStyles.tabTitle);
    tabInlineStyles.tabCloseIcon = Utils.overwrite(TabStyles.tabCloseIcon, this.props.tabsStyles.tabCloseIcon);
    tabInlineStyles.tabCloseIconOnHover = Utils.overwrite(TabStyles.tabCloseIconOnHover, this.props.tabsStyles.tabCloseIconOnHover);

    tabInlineStyles.tabActive = Utils.overwrite(TabStyles.tabActive, this.props.tabsStyles.tabActive);
    tabInlineStyles.tabTitleActive = Utils.overwrite(TabStyles.tabTitleActive, this.props.tabsStyles.tabTitleActive);
    tabInlineStyles.tabBeforeActive = Utils.overwrite(TabStyles.tabBeforeActive, this.props.tabsStyles.tabBeforeActive);
    tabInlineStyles.tabAfterActive = Utils.overwrite(TabStyles.tabAfterActive, this.props.tabsStyles.tabAfterActive);

    // append tabs classNames
    // let tabClassNames = {
    // };
    // tabClassNames.tabBar = classNames('rdTabBar', this.props.tabsClassNames.tabBar);
    // tabClassNames.tabBarAfter = classNames('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
    // tabClassNames.tab = classNames('rdTab', this.props.tabsClassNames.tab);
    // tabClassNames.tabBefore = classNames('rdTabBefore', this.props.tabsClassNames.tabBefore);
    // tabClassNames.tabAfter = classNames('rdTabAfter', this.props.tabsClassNames.tabAfter);
    // tabClassNames.tabTitle = classNames('rdTabTitle', this.props.tabsClassNames.tabTitle);
    // tabClassNames.tabBeforeTitle = classNames('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
    // tabClassNames.tabAfterTitle = classNames('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
    // tabClassNames.tabCloseIcon = classNames('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
    // tabClassNames.tabActive = classNames('rdTabActive', this.props.tabsClassNames.tabActive);


    let content = [];
    let tabs = _.map(this.state.tabs, (tab) => {

      if (this.state.closedTabs.indexOf(tab.key) > -1) {
        return '';
      }

      // override inline each tab styles
      let tabStyle = Utils.overwrite(tabInlineStyles.tab, tab.props.tabStyles.tab);
      let tabBeforeStyle = Utils.overwrite(tabInlineStyles.tabBefore, tab.props.tabStyles.tabBefore);
      let tabAfterStyle = Utils.overwrite(tabInlineStyles.tabAfter, tab.props.tabStyles.tabAfter);
      let tabTiteleStyle = Utils.overwrite(tabInlineStyles.tabTitle, tab.props.tabStyles.tabTitle);

      if (this.state.selectedTab === tab.key) {
        tabStyle = Utils.overwrite(Utils.overwrite(tabInlineStyles.tab, tabInlineStyles.tabActive), tab.props.tabStyles.tabActive);
        tabBeforeStyle = Utils.overwrite(Utils.overwrite(tabInlineStyles.tabBefore, tabInlineStyles.tabBeforeActive), tab.props.tabStyles.tabBeforeActive);
        tabAfterStyle = Utils.overwrite(Utils.overwrite(tabInlineStyles.tabAfter, tabInlineStyles.tabAfterActive), tab.props.tabStyles.tabAfterActive);
        tabTiteleStyle = Utils.overwrite(Utils.overwrite(tabInlineStyles.tabTitle, tabInlineStyles.tabTitleActive), tab.props.tabStyles.tabTitleActive);
        content.push(
          <div style={{width: '100%', position: 'relative', textAlign: 'initial'}} key={tab.key}>
            {tab}
          </div>
        );
      } else {
        content.push(<span key={tab.key}/>);
      }
      let tabTitle = tab.props.title;
      return (
        <li style={tabStyle} className={'rdTab'}
            onClick={this.handleTabClick.bind(this, tab.key)}
            onMouseDown={this.handleMouseDown.bind(this, tab.key)}
            ref={tab.key}
            key={tab.key}>
          <span style={TabStyles.beforeTitle} className={'rdTabBeforeTitle'}>{tab.props.beforeTitle}</span>
          <p onDoubleClick={this.doubleClickHandlerWithKey(tab.key)} style={tabTiteleStyle} className={'rdTabTitle'}>{tabTitle}</p>
          <span style={TabStyles.afterTitle} className={'rdTabAfterTitle'}>{tab.props.afterTitle}</span>
          <span style={tabBeforeStyle} className={'rdTabBefore'}></span>
          <span style={tabAfterStyle} className={'rdTabAfter'}></span>
        </li>
      );
    });

    return (
      <div style={TabStyles.wrapper}>
        <div style={TabStyles.relative}>
          <ul tabIndex='-1' style={tabInlineStyles.tabBar} className={'rdTabBar'}>
            {tabs}
          </ul>
          <div style={styles.buttonsWrapper}>
            <Paper
              circle={true}
              zDepth={0}
              style={styles.navButtonWrapper}
              onClick={this.goPrev.bind(this)}>
              <IconButton style={styles.navButton}>
                <FontIcon className="icon-ic_chevron_left_white_24px" style={{fontSize: '10px'}} {...FIXED_ICON_COLORS} />
              </IconButton>
            </Paper>
            <Paper
              circle={true}
              zDepth={0}
              style={styles.navButtonWrapper}
              onClick={this.goNext.bind(this)}>
              <IconButton style={styles.navButton}>
                <FontIcon className="icon-ic_chevron_right_white_24px" style={{fontSize: '10px'}} {...FIXED_ICON_COLORS} />
              </IconButton>
            </Paper>
            <ClearFix/>
          </div>
          <ClearFix/>
        </div>
        {content}
      </div>
    );
  }
}

TabsNoDraggable.defaultProps = {
  tabsClassNames: {
    tabBar: '',
    tabBarAfter: '',
    tab: '',
    tabBefore: '',
    tabAfter: '',
    tabBeforeTitle: '',
    tabTitle: '',
    tabAfterTitle: '',
    tabCloseIcon: '',
    tabActive: ''
  },
  tabsStyles: {},
  shortCutKeys:{},
  tabAddButton: (<span>{'+'}</span>),
  onTabSelect: () => {},
  onTabClose: () => {},
  onTabAddButtonClick: () => {},
  onTabPositionChange: () => {},
  onTabDoubleClick: () => {}
};

TabsNoDraggable.propTypes = {
  tabs: React.PropTypes.arrayOf(React.PropTypes.element),

  selectedTab: React.PropTypes.string,
  tabsStyles: React.PropTypes.shape({
    tabBar: React.PropTypes.object,
    tabBarAfter: React.PropTypes.object,
    tab: React.PropTypes.object,
    tabBefore: React.PropTypes.object,
    tabAfter: React.PropTypes.object,
    tabTitle: React.PropTypes.object,
    tabActive: React.PropTypes.object,
    tabTitleActive: React.PropTypes.object,
    tabBeforeActive: React.PropTypes.object,
    tabAfterActive: React.PropTypes.object,
    tabCloseIcon: React.PropTypes.object,
    tabCloseIconOnHover: React.PropTypes.object
  }),
  shortCutKeys: React.PropTypes.shape({
    close:React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
    create:React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
    moveRight:React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
    moveLeft:React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)])
  }),
  tabAddButton: React.PropTypes.element,
  onTabSelect: React.PropTypes.func,
  onTabClose: React.PropTypes.func,
  onTabAddButtonClick: React.PropTypes.func,
  onTabPositionChange: React.PropTypes.func,
  onTabDoubleClick: React.PropTypes.func

};

export default TabsNoDraggable;