render: function()

in site/live_editor.js [144:244]


  render: function () {
    var isJS = this.state.mode === this.MODES.JS;
    var compiledCode = '';
    try {
      compiledCode = this.compileCode({ skipES2015Transform: true });
    } catch (err) {}

    var JSContent = React.createElement(CodeMirrorEditor, {
      key: 'js',
      className: 'playgroundStage CodeMirror-readonly',
      onChange: this.handleCodeChange,
      codeText: compiledCode,
      readOnly: true,
      lineNumbers: this.props.showLineNumbers,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 136
      }
    });

    var JSXContent = React.createElement(CodeMirrorEditor, {
      key: 'jsx',
      onChange: this.handleCodeChange,
      className: 'playgroundStage',
      codeText: this.state.code,
      lineNumbers: this.props.showLineNumbers,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 146
      }
    });

    var JSXTabClassName = 'playground-tab' + (isJS ? '' : ' playground-tab-active');
    var JSTabClassName = 'playground-tab' + (isJS ? ' playground-tab-active' : '');

    var JSTab = React.createElement(
      'div',
      {
        className: JSTabClassName,
        onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JS), __source: {
          fileName: _jsxFileName,
          lineNumber: 160
        }
      },
      'Compiled JS'
    );

    var JSXTab = React.createElement(
      'div',
      {
        className: JSXTabClassName,
        onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JSX), __source: {
          fileName: _jsxFileName,
          lineNumber: 167
        }
      },
      this.props.editorTabTitle
    );

    return React.createElement(
      'div',
      { className: 'playground', __source: {
          fileName: _jsxFileName,
          lineNumber: 174
        }
      },
      React.createElement(
        'div',
        {
          __source: {
            fileName: _jsxFileName,
            lineNumber: 175
          }
        },
        JSXTab,
        this.props.showCompiledJSTab && JSTab
      ),
      React.createElement(
        'div',
        { className: 'playgroundCode', __source: {
            fileName: _jsxFileName,
            lineNumber: 179
          }
        },
        isJS ? JSContent : JSXContent
      ),
      React.createElement(
        'div',
        { className: 'playgroundPreview', __source: {
            fileName: _jsxFileName,
            lineNumber: 182
          }
        },
        React.createElement('div', { ref: 'mount', __source: {
            fileName: _jsxFileName,
            lineNumber: 183
          }
        })
      )
    );
  },