All files / src/components MarkdownEditorTabs.js

82.76% Statements 24/29
40% Branches 4/10
80% Functions 4/5
82.76% Lines 24/29
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 1044x 4x 4x 4x 4x 4x   4x       20x           20x                     22x 22x 22x   22x 22x 22x   22x 22x         22x 22x 22x           22x                                 2x       4x                                                             4x  
var React = require('react');
var ReactDOM = require('react-dom');
var Reflux = require('reflux');
var MarkdownEditorActions = require('../actions/MarkdownEditorActions');
var MarkdownEditorTabsInteractionStore = require('../stores/MarkdownEditorTabsInteractionStore');
var objectAssign = require('object-assign');
 
var MarkdownEditorTabs = React.createClass({
  mixins: [Reflux.ListenerMixin],
 
  getInitialState: function() {
    return {
      activeTab: 0
    };
  },
 
  componentWillMount: function() {
    this.listenTo(MarkdownEditorTabsInteractionStore, this.handleMDEditorTabsInteractionStoreUpdated);
  },
 
  handleMDEditorTabsInteractionStoreUpdated: function(storeState) {
    if (storeState.activeTab != null) {
      this.setState({activeTab: storeState.activeTab});
    }
  },
 
  render: function() {
 
    var styleActiveTab = MarkdownEditorTabs.defaultProps.styles.styleActiveTab;
    var styleMarkdownEditorTabs = MarkdownEditorTabs.defaultProps.styles.styleMarkdownEditorTabs;
    var styleTab = MarkdownEditorTabs.defaultProps.styles.styleTab;
 
    objectAssign(styleActiveTab, this.props.styles.styleActiveTab);
    objectAssign(styleMarkdownEditorTabs, this.props.styles.styleMarkdownEditorTabs);
    objectAssign(styleTab, this.props.styles.styleTab);
 
    Eif(this.props.hasOwnProperty('styles') && this.props.styles.hasOwnProperty('styleActiveTab')) {
        Object.assign(styleActiveTab, this.props.styles.styleActiveTab);
    }
 
    var editorTabStyle;
    var previewTabStyle;
    Eif (this.state.activeTab === 0) {
      editorTabStyle = styleActiveTab;
      previewTabStyle = styleTab;
    } else if (this.state.activeTab === 1) {
      previewTabStyle = styleActiveTab;
      editorTabStyle = styleTab;
    }
 
    return (
      <div style={styleMarkdownEditorTabs} className='md-editor-tabs'>
        <div style={editorTabStyle}
          className="md-editor-tabs-item"
          onClick={this.handleClick.bind(this, 'clickEditorTab')}>
          <span>Editor</span>
        </div>
        <div style={previewTabStyle}
          className="md-editor-tabs-item"
          onClick={this.handleClick.bind(this, 'clickPreviewTab')}>
          <span>Preview</span>
        </div>
      </div>
    );
  },
 
  handleClick: function(actionName) {
    MarkdownEditorActions[actionName]();
  }
});
 
MarkdownEditorTabs.defaultProps = {
    styles : {
        styleMarkdownEditorTabs : {
            'border': 'none',
            'display': 'flex',
            'justifyContent': 'flex-start'
        },
        styleTab : {
            padding: '0px 20px',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '50px'
         },
         styleActiveTab : {
            padding: '0px 20px',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '50px',
            borderLeft: '1px solid #ddd',
            borderRight: '1px solid #ddd',
            borderTop: '1px solid #ddd',
            backgroundColor: '#fff',
            borderRadius: '3px'
        }
    }
}
 
module.exports = MarkdownEditorTabs;