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 122         17×       95×       95×                               19× 19× 19×                             95× 95×               38×                             38×               19× 19× 19×               19× 19× 19×               19× 19× 19×               19× 19× 19×                
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;