All files / src/components MarkdownEditorMenu.js

69.44% Statements 25/36
16.67% Branches 1/6
33.33% Functions 4/12
69.44% Lines 25/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 1091x 1x 1x 1x 1x 1x 1x   1x               2x           2x 2x         2x 2x 2x 2x 2x 2x 2x 2x   2x 2x   2x                                           1x                                                               1x                         1x  
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 if (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;