# All files / src/components MarkdownEditorMenu.js

97.22% Statements 35/36
83.33% Branches 5/6
91.67% Functions 11/12
97.22% Lines 35/36

    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
    104
    105
    106
    107
    108
    1094x
    4x
    4x
    4x
    4x
    4x
    4x

    4x

    20x

    20x
    20x

    30x
    30x
    30x
    30x
    30x
    30x
    30x
    30x

    30x
    30x

    30x

    8x
    3x
    5x
    5x

    2x

    1x

    1x

    1x

    1x

    1x

    1x

    4x

    4x
     var React = require('react');
    var ReactDOM = require('react-dom');
    var Reflux = require('reflux');
    var ButtonManagerMixin = require('../mixins/ButtonManagerMixin');
    var MarkdownSelectionStore = require('../stores/MarkdownSelectionStore');
    var MarkdownEditorActions = require('../actions/MarkdownEditorActions');
    var objectAssign = require('object-assign');

    var MarkdownEditorMenu = React.createClass({
      mixins: [Reflux.ListenerMixin, ButtonManagerMixin],

      propTypes: {
        iconsSet: React.PropTypes.string.isRequired
      },

      getInitialState: function() {
        return {
          enabled: false
        };
      },

      componentWillMount: function() {
        this.listenTo(MarkdownSelectionStore, this.handleMarkdownSelectionStore);
        this.setIconsProvider(this.props.iconsSet);
      },

      render: function() {

        var _disabled = (!this.state.enabled) ? 'disabled' : '';
        var boldButton = this.getBoldButton(_disabled, this.handleBoldButtonClick);
        var italicButton = this.getItalicButton(_disabled, this.handleItalicButtonClick);
        var makeListButton = this.getMakeListButton(_disabled, this.handleListButtonClick);
        var imageButton = this.getImageButton(_disabled, this.handleImageButtonClick);
        var linkButton = this.getLinkButton(_disabled, this.handleLinkButtonClick);
        var headerButton = this.getButtonWithoutIcon(_disabled, this.handleHeaderButtonClick, 'md-editor-menu-header', 'Header');
        var subHeaderButton = this.getButtonWithoutIcon(_disabled, this.handleSubHeaderButtonClick, 'md-editor-menu-subheader', 'Subheader');

        var styleMarkdownMenu = MarkdownEditorMenu.defaultProps.styles.styleMarkdownMenu;
        objectAssign(styleMarkdownMenu, this.props.styles.styleMarkdownMenu);

        return (
          <div style={styleMarkdownMenu} className='md-editor-menu'>
            {boldButton}
            {italicButton}
            {headerButton}
            {subHeaderButton}
            {makeListButton}
            {imageButton}
            {linkButton}
          </div>
        );
      },

      handleMarkdownSelectionStore: function(data) {
        if (data.type === 'clear') {
          this.setState({enabled: false});
        } else Eif (data.type === 'set') {
          this.setState({enabled: true});
        }
      },

      handleBoldButtonClick: function() {
        MarkdownEditorActions.makeBold(this.props.instanceRef);
      },

      handleImageButtonClick: function() {
        MarkdownEditorActions.makeImage(this.props.instanceRef);
      },

      handleItalicButtonClick: function() {
        MarkdownEditorActions.makeItalic(this.props.instanceRef);
      },

      handleUnderlineButtonClick: function() {
        MarkdownEditorActions.makeUnderline(this.props.instanceRef);
      },

      handleHeaderButtonClick: function() {
        MarkdownEditorActions.makeHeader(this.props.instanceRef);
      },

      handleSubHeaderButtonClick: function() {
        MarkdownEditorActions.makeSubHeader(this.props.instanceRef);
      },

      handleLinkButtonClick: function() {
        MarkdownEditorActions.makeLink(this.props.instanceRef);
      },

      handleListButtonClick: function() {
        MarkdownEditorActions.makeList(this.props.instanceRef);
      }
    });

    MarkdownEditorMenu.defaultProps = {
        styles: {
            styleMarkdownMenu : {
                'margin': '5px 0',
                'flex': '1',
                'display': 'flex',
                'position': 'absolute',
                'right': '20px',
                'top': '10px'
            }
        }
    }

    module.exports = MarkdownEditorMenu;