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

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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       7x       90x       90x                               18x 18x 18x                             90x 90x               36x                             36x               18x 18x 18x               18x 18x 18x               18x 18x 18x               18x 18x 18x               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;