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 1093x 3x 3x 3x 3x 3x 3x   3x               18x           18x 18x         28x 28x 28x 28x 28x 28x 28x 28x   28x 28x   28x                           8x 3x 5x 5x         1x       1x       1x               1x       1x       1x       1x       3x                         3x  
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();
  },
 
  handleImageButtonClick: function() {
    MarkdownEditorActions.makeImage();
  },
 
  handleItalicButtonClick: function() {
    MarkdownEditorActions.makeItalic();
  },
 
  handleUnderlineButtonClick: function() {
    MarkdownEditorActions.makeUnderline();
  },
 
  handleHeaderButtonClick: function() {
    MarkdownEditorActions.makeHeader();
  },
 
  handleSubHeaderButtonClick: function() {
    MarkdownEditorActions.makeSubHeader();
  },
 
  handleLinkButtonClick: function() {
    MarkdownEditorActions.makeLink();
  },
 
  handleListButtonClick: function() {
    MarkdownEditorActions.makeList();
  }
});
 
MarkdownEditorMenu.defaultProps = {
    styles: { 
        styleMarkdownMenu : {
            'margin': '5px 0',
            'flex': '1',
            'display': 'flex',
            'position': 'absolute',
            'right': '20px',
            'top': '10px'
        }
    }
}
 
module.exports = MarkdownEditorMenu;