All files / javascripts/dashboard/components CssEditor.jsx

84.85% Statements 28/33
50% Branches 5/10
66.67% Functions 2/3
84.85% Lines 28/33
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 1111x   1x 1x   1x 1x 1x     1x             1x   1x         3x   1x           1x             1x 1x 1x 1x   1x 1x 1x 1x 1x   1x     1x             1x 1x                           1x                                                             1x 1x      
import React from 'react';
 
import ModalTrigger from '../../components/ModalTrigger';
import Select from 'react-select';
 
import AceEditor from 'react-ace';
import 'brace/mode/css';
import 'brace/theme/github';
 
 
const propTypes = {
  initialCss: React.PropTypes.string,
  triggerNode: React.PropTypes.node.isRequired,
  onChange: React.PropTypes.func,
  templates: React.PropTypes.array,
};
 
const defaultProps = {
  initialCss: '',
  onChange: () => {},
  templates: [],
};
 
class CssEditor extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      css: props.initialCss,
      cssTemplateOptions: [],
    };
  }
  componentWillMount() {
    this.updateDom();
  }
  changeCss(css) {
    this.setState({ css }, this.updateDom);
    this.props.onChange(css);
  }
  updateDom() {
    const css = this.state.css;
    const className = 'CssEditor-css';
    const head = document.head || document.getElementsByTagName('head')[0];
    let style = document.querySelector('.' + className);
 
    Eif (!style) {
      style = document.createElement('style');
      style.className = className;
      style.type = 'text/css';
      head.appendChild(style);
    }
    Iif (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.innerHTML = css;
    }
  }
  changeCssTemplate(opt) {
    this.changeCss(opt.css);
  }
  renderTemplateSelector() {
    Eif (this.props.templates) {
      return (
        <div style={{ zIndex: 10 }}>
          <h5>Load a template</h5>
          <Select
            options={this.props.templates}
            placeholder="Load a CSS template"
            onChange={this.changeCssTemplate.bind(this)}
          />
        </div>
      );
    }
    return null;
  }
  render() {
    return (
      <ModalTrigger
        triggerNode={this.props.triggerNode}
        modalTitle="CSS"
        isButton
        modalBody={
          <div>
            {this.renderTemplateSelector()}
            <div style={{ zIndex: 1 }}>
              <h5>Live CSS Editor</h5>
              <div style={{ border: 'solid 1px grey' }}>
                <AceEditor
                  mode="css"
                  theme="github"
                  minLines={8}
                  maxLines={30}
                  onChange={this.changeCss.bind(this)}
                  height="200px"
                  width="100%"
                  editorProps={{ $blockScrolling: true }}
                  enableLiveAutocompletion
                  value={this.state.css}
                />
              </div>
            </div>
          </div>
        }
      />
    );
  }
}
CssEditor.propTypes = propTypes;
CssEditor.defaultProps = defaultProps;
 
export default CssEditor;