render()

in website/src/components/Playground/src/CodeGenerators.js [91:157]
61 lines of code
4 McCabe index (conditional complexity)

  render() {
    const {showModal} = this.state;

    const menu = (
      <Menu onClick={this.onClick}>
        {Object.keys(LANGUAGES).map(key => (
          <Menu.Item key={key}>{LANGUAGES[key].title}</Menu.Item>
        ))}
      </Menu>
    );

    const code = showModal
      ? LANGUAGES[showModal].generator(
          this.props.layoutDefinition,
          this.props.direction,
        )
      : '';

    return [
      <Modal
        key="modal"
        title={
          showModal ? (
            <div className="CodeGeneratorsTitle">
              {LANGUAGES[showModal].title}
              <Tooltip
                title={this.state.copied ? 'Copied!' : 'Click to copy'}
                onVisibleChange={() => this.setState({copied: false})}>
                <a onClick={this.onCopy}>copy to clipboard</a>
              </Tooltip>
            </div>
          ) : (
            ''
          )
        }
        visible={Boolean(showModal)}
        footer={null}
        bodyStyle={{padding: 0}}
        onCancel={() => this.setState({showModal: null})}>
        {showModal && (
          <div>
            <textarea
              className="CodeGeneratorsCopyText"
              value={code}
              ref={ref => {
                this._ref = ref;
              }}
            />
            <SyntaxHighlighter
              language={LANGUAGES[showModal].syntax}
              style={styles}
              customStyle={{fontSize: '13px', backgroundColor: 'white'}}
              lineNumberStyle={{userSelect: 'none', opacity: 0.5}}
              codeTagProps={{style: {tabSize: 4}}}
              showLineNumbers>
              {code}
            </SyntaxHighlighter>
          </div>
        )}
      </Modal>,
      <Dropdown overlay={menu} key="dropdown" trigger={['click']}>
        <Button>
          Get Code <Icon type="down" />
        </Button>
      </Dropdown>,
    ];
  }