All files / src/mixins ButtonManagerMixin.js

72.22% Statements 26/36
50% Branches 5/10
90.91% Functions 10/11
72.22% Lines 26/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 109 110 111 112 113 114 115 116 117 118 119 120 121 1224x 4x   4x       20x       150x       150x                               30x 30x 30x                             150x 150x               60x                             60x               30x 30x 30x               30x 30x 30x               30x 30x 30x               30x 30x 30x               4x  
var React = require('react');
var ReactDOM = require('react-dom');
 
var ButtonManagerMixin = {
  iconsProviderName: null,
 
  setIconsProvider: function(name) {
    this.iconsProviderName = name;
  },
 
  isFontAwesome: function() {
    return this.iconsProviderName === 'font-awesome';
  },
 
  getStyleMarkdownBtn: function() {
    return {
      'flex': '1',
      'maxWidth': '50px',
      'border': '1px solid #ddd',
      'backgroundColor': 'white',
      'borderRadius': '4px',
      'margin': '0 2px',
      'padding': '2px 3px',
      'cursor': 'pointer',
      'display': 'flex',
      'justifyContent': 'center',
      'alignItems': 'center'
    };
  },
 
  getBoldButton: function(isDisabled, onClickHandler) {
    var _style = this.getStyleMarkdownBtn();
    Eif (this.isFontAwesome()) {
      return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-bold', 'bold-btn');
    } else {
      return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_bold', 'bold-btn');
    }
  },
 
  getButtonMaterializeIcon: function(isDisabled, onClickHandler, styleBtn, iconName, containerClassName) {
    return (
      <div role='button' className={containerClassName} style={styleBtn} disabled={isDisabled} onClick={onClickHandler}>
        <i className='material-icons'>{iconName}</i>
      </div>
    );
  },
 
  getButtonFontAwesomeIcon: function(isDisabled, onClickHandler, styleBtn, iconName, containerClassName) {
    var _className = 'fa ' + iconName;
    return (
      <div role='button' className={containerClassName} style={styleBtn} disabled={isDisabled} onClick={onClickHandler}>
        <i className={_className}></i>
      </div>
    );
  },
 
  getButtonWithoutIcon: function(isDisabled, onClickHandler, additionalClassName, textBtn) {
    var styleBtn = {
      'display': 'flex',
      'minWidth': '50px',
      'border': '1px solid #ddd',
      'color': 'black',
      'backgroundColor': 'white',
      'borderRadius': '4px',
      'margin': '0 2px',
      'padding': '2px 3px',
      'cursor': 'pointer',
      'textAlign': 'center',
      'justifyContent': 'flex-end',
      'alignItems': 'center'
    };
 
    return (
      <div role='button' style={styleBtn} className={additionalClassName} disabled={isDisabled} onClick={onClickHandler}>
        <span>{textBtn}</span>
      </div>
    );
  },
 
  getItalicButton: function(isDisabled, onClickHandler) {
    Eif (this.isFontAwesome()) {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-italic', 'italic-btn');
    } else {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_italic', 'italic-btn');
    }
  },
 
  getMakeListButton: function(isDisabled, onClickHandler) {
    Eif (this.isFontAwesome()) {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-list-ul', 'list-btn');
    } else {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_list_bulleted', 'list-btn');
    }
  },
 
  getImageButton: function(isDisabled, onClickHandler) {
    Eif (this.isFontAwesome()) {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-file-image-o', 'insert-img-btn');
    } else {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'insert_photo', 'insert-img-btn');
    }
  },
 
  getLinkButton: function(isDisabled, onClickHandler) {
    Eif (this.isFontAwesome()) {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-link', 'insert-link-btn');
    } else {
      var _style = this.getStyleMarkdownBtn();
      return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'insert_link', 'insert-link-btn');
    }
  }
};
 
module.exports = ButtonManagerMixin;