render()

in website/src/components/Playground/src/index.js [228:321]
91 lines of code
12 McCabe index (conditional complexity)

  render() {
    const {layoutDefinition, selectedNodePath, direction} = this.state;
    const {height} = this.props;

    const selectedNode: ?LayoutRecordT = selectedNodePath
      ? layoutDefinition.getIn(getPath(selectedNodePath))
      : null;

    const playground = (
      <div
        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
        onMouseDown={this.onMouseDown}
        style={{height, maxHeight: height}}
        ref={ref => {
          this._containerRef = ref;
        }}>
        <YogaNode
          layoutDefinition={layoutDefinition}
          selectedNodePath={selectedNodePath}
          onClick={selectedNodePath => this.setState({selectedNodePath})}
          onDoubleClick={this.onAdd}
          direction={direction}
          showGuides={this.props.showGuides}
        />
        {!this.props.renderSidebar && (
          <Sidebar>
            <div className="Actions">
              <Row gutter={15}>
                <Col span={12}>
                  <CodeGenerators
                    layoutDefinition={layoutDefinition}
                    direction={direction}
                  />
                </Col>
                <Col span={12}>
                  {this.props.persist ? (
                    <URLShortener />
                  ) : (
                    <Button
                      href={`/playground?${this.getHash()}`}
                      type="primary">
                      Open Playground
                    </Button>
                  )}
                </Col>
              </Row>
            </div>
            {this.state.selectedNodePath ? (
              <Editor
                node={selectedNode}
                selectedNodeIsRoot={
                  selectedNodePath ? selectedNodePath.length === 0 : false
                }
                onChangeLayout={this.onChangeLayout}
                onChangeSetting={(key, value) => this.setState({[key]: value})}
                direction={direction}
                onRemove={
                  selectedNodePath && selectedNodePath.length > 0
                    ? this.onRemove
                    : undefined
                }
                onAdd={
                  selectedNodePath &&
                  selectedNodePath.length < this.props.maxDepth
                    ? this.onAdd
                    : undefined
                }
              />
            ) : (
              <div className="NoContent">
                Select a node to edit its properties
              </div>
            )}
          </Sidebar>
        )}
      </div>
    );

    if (this.props.renderSidebar) {
      return (
        <div className={`PlaygroundContainer ${this.props.className || ''}`}>
          <div>
            {this.props.renderSidebar(
              layoutDefinition.getIn(getPath(selectedNodePath)),
              this.onChangeLayout,
            )}
          </div>
          {playground}
        </div>
      );
    } else {
      return playground;
    }
  }