# 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;