render()

in src/components/CodeEditor/CodeEditor.js [51:247]

• 186 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const {containerNodeID} = this.props;
    const {
      compiledES6,
      code,
      error,
      showBabelErrorMessage,
      showJSX,
    } = this.state;

    let errorMessage;
    if (showBabelErrorMessage) {
      errorMessage = (
        <span>
          Không thể tải được Babel.
          <br />
          <br />
          Lỗi này có thể do phần mềm chặn quảng cáo. Nếu bạn sử dụng chúng, cân
          nhắc thêm reactjs.org vào danh sách cho phép để trình live code này có
          thể chạy được.
        </span>
      );
    } else if (error != null) {
      errorMessage = error.message;
    }

    return (
      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
        <div
          css={{
            [media.greaterThan('medium')]: {
              display: 'flex',
              alignItems: 'stretch',
              flexDirection: 'row',
            },

            [media.lessThan('small')]: {
              display: 'block',
            },
          }}>
          <div
            css={{
              flex: '0 0 70%',
              overflow: 'hidden',
              borderRadius: '10px 0 0 10px',

              [media.lessThan('medium')]: {
                borderRadius: '10px 10px 0 0',
              },
            }}>
            <div
              css={{
                padding: '0px 10px',
                background: colors.darker,
                color: colors.white,
              }}>
              <MetaTitle onDark={true}>
                Trình Chỉnh Sửa JSX
                <label
                  css={{
                    fontSize: 14,
                    float: 'right',
                    cursor: 'pointer',
                  }}>
                  <input
                    checked={this.state.showJSX}
                    onChange={event =>
                      this.setState({showJSX: event.target.checked})
                    }
                    type="checkbox"
                  />{' '}
                  JSX?
                </label>
              </MetaTitle>
            </div>
            <div
              css={{
                height: '100%',
                width: '100%',
                borderRadius: '0',
                maxHeight: '340px !important',
                marginTop: '0 !important',
                marginLeft: '0 !important',
                paddingLeft: '0 !important',
                marginRight: '0 !important',
                paddingRight: '0 !important',
                marginBottom: '0 !important',
                paddingBottom: '20px !important',
                [media.lessThan('medium')]: {
                  marginBottom: '0 !important',
                },

                '& pre.prism-code[contenteditable]': {
                  outline: 0,
                  overflow: 'auto',
                  marginRight: '0 !important',
                  marginBottom: '0 !important',
                },
              }}
              className="gatsby-highlight">
              <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
            </div>
          </div>
          {error && (
            <div
              css={{
                flex: '0 0 30%',
                overflow: 'hidden',
                border: `1px solid ${colors.error}`,
                borderRadius: '0 10px 10px 0',
                fontSize: 12,
                lineHeight: 1.5,

                [media.lessThan('medium')]: {
                  borderRadius: '0 0 10px 10px',
                },
              }}>
              <div
                css={{
                  padding: '0px 10px',
                  background: colors.error,
                  color: colors.white,
                }}>
                <MetaTitle
                  cssProps={{
                    color: colors.white,
                  }}>
                  Error
                </MetaTitle>
              </div>
              <pre
                css={{
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  color: colors.error,
                  padding: 10,
                }}>
                {errorMessage}
              </pre>
            </div>
          )}
          {!error && (
            <div
              css={{
                flex: '0 0 30%',
                overflow: 'hidden',
                border: `1px solid ${colors.divider}`,
                borderRadius: '0 10px 10px 0',

                [media.lessThan('medium')]: {
                  borderRadius: '0 0 10px 10px',
                },
              }}>
              <div
                css={{
                  padding: '0 10px',
                  backgroundColor: colors.divider,
                }}>
                <MetaTitle>Kết quả</MetaTitle>
              </div>
              <div
                id={containerNodeID}
                css={{
                  padding: 10,
                  maxHeight: '340px !important',
                  overflow: 'auto',

                  '& input': {
                    width: '100%',
                    display: 'block',
                    border: '1px solid #ccc', // TODO
                    padding: 5,
                  },

                  '& button': {
                    marginTop: 10,
                    padding: '5px 10px',
                  },

                  '& label': {
                    display: 'block',
                    marginTop: 10,
                  },

                  '& textarea': {
                    width: '100%',
                    height: 60,
                    padding: 5,
                  },
                }}
              />
            </div>
          )}
        </div>
      </LiveProvider>
    );
  }