render()

in src/components/view/LabelWithAlias/LabelWithAlias.tsx [93:132]


  render() {
    return (
      <div ref={this.wrapperRef} className={cx('dropdown open pointer', styles)}>
        <div className={cx('gf-form', styles)}>
          <div className={cx(`gf-form-label reset-offset blue`, styles, commonStyles)} onClick={this.showMenu}>
            {this.props.label}
          </div>
          {this.state.showAlias ? (
            <div className="gf-form-inline">
              <div className={cx('gf-form-label reset-offset m-4', styles, commonStyles)}> as </div>
              <SegmentFrame className="gf-form-inline" hideShadow={true}>
                <SegmentInput
                  className={cx('segment-input', styles)}
                  value={this.props.alias as string}
                  onChange={this.changeAlias}
                />
              </SegmentFrame>
            </div>
          ) : null}
        </div>

        {this.state.showContextMenu ? (
          <ul className="dropdown-menu">
            {this.state.showAlias ? (
              <li className="dropdown-menu-item" onClick={this.removeAlias}>
                <a>Remove alias</a>
              </li>
            ) : (
              <li className="dropdown-menu-item" onClick={this.addAlias}>
                <a>Add alias</a>
              </li>
            )}
            <li className="dropdown-menu-item" onClick={this.remove}>
              <a>Remove {this.props.additionalText != null ? this.props.additionalText : ''}</a>
            </li>
          </ul>
        ) : null}
      </div>
    );
  }