render()

in components/base-ui/packages/base-ui/lib/parts/documentation-client/DocumentationClient.js [47:144]

• 97 lines of code
• 6 McCabe index (conditional complexity)

  render() {
    const { urlSuffix } = this.props;
    let iframeUrl;
    if (isLocalDev) {
      iframeUrl = `${docsUrl}/${urlSuffix}/index.html`;
    } else {
      iframeUrl = `${docsUrl}/${urlSuffix}`;
    }

    return (
      <div
        style={{
          width: '70px',
          height: '70px',
          position: 'fixed',
          right: '25px',
          bottom: '25px',
        }}
      >
        <Popup
          position="top right"
          style={{
            borderColor: '#2185d0',
            borderRadius: '5px',
            padding: 0,
            width: '400px',
          }}
          open={this.isOpen}
          on="click"
          size="huge"
          wide="very"
          trigger={
            <Button
              circular
              icon={this.isOpen ? 'close' : 'help'}
              size="huge"
              color={this.isOpen ? 'grey' : 'blue'}
              onClick={this.handleToggle}
            />
          }
        >
          <div
            style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Label attached="top" color="blue" size="huge">
              Help
              <a
                href={iframeUrl}
                style={{ position: 'absolute', marginLeft: '10px', marginTop: '3px', fontSize: '16px' }}
                target="_blank"
                rel="noopener noreferrer"
              >
                (click to open in new tab)
              </a>
            </Label>
            <Loader
              style={{
                display: 'inline-block',
                visibility: this.isFrameLoaded ? 'hidden' : 'visibile',
                position: 'absolute',
                left: '50%',
                bottom: '50%',
                transform: 'translate(-50%, 45%)',
                height: '100%',
                width: '100%',
              }}
              active
              size="big"
              inline="centered"
            />
            <Embed
              defaultActive
              style={{
                flexGrow: '1',
                backgroundColor: 'transparent',
                marginTop: '50px',
                height: '500px',
              }}
              iframe={{
                onLoad: this.onFrameLoaded,
                onError: this.onFrameLoaded,
                scrolling: 'auto',
                style: {
                  visibility: this.isFrameLoaded ? 'visible' : 'hidden',
                },
              }}
              url={iframeUrl}
            />
          </div>
        </Popup>
      </div>
    );
  }