semantic-ui-react#Ref JavaScript Examples

render() {
    const { isLoading, error, data } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <EItemHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <EItemMetadata />
                        <EItemFiles />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={180}>
                        <EItemActionMenu offset={-180} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    return (
      <Container fluid className="grid-documents-search">
        <ResultsLoader>
          <EmptyResults />
          <Error renderElement={this.renderError} />
          <Ref innerRef={this.stickyRef}>
            <Container fluid>
              <Sticky context={this.stickyRef} offset={66}>
                <SearchControlsMobile
                  ref={this.stickyRef}
                  modelName="LITERATURE"
                />
              </Sticky>
              <Container textAlign="center">
                <SearchPagination />
              </Container>
              <Container className="fs-search-body" textAlign="center">
                <ResultsGrid overridableId="series_mobile" />
                <Container fluid className="search-results-footer">
                  <SearchFooter />
                </Container>
              </Container>
            </Container>
          </Ref>
        </ResultsLoader>
      </Container>
    );
  }

render() {
    const { data, isLoading, error, deleteProvider } = this.props;

    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <ProviderHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <ProviderDetailsInner data={data} />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <ActionMenu
                          data={data}
                          deleteProviderHandler={deleteProvider}
                        />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { alt, className, src, fallbackSrc, loadFallbackFirst, ...UIprops } =
      this.props;
    const loadingClass = !loadFallbackFirst
      ? `${className} placeholder`
      : `${className} fallback_image`;
    const url = loadFallbackFirst ? fallbackSrc : src;
    return (
      <Ref innerRef={this.myRef}>
        <SUIImage
          className={loadingClass}
          alt={alt}
          src={url}
          {...(!loadFallbackFirst && {
            onError: ({ currentTarget }) => {
              currentTarget.onerror = null; // prevents looping
              this.setSrc(currentTarget, fallbackSrc, true);
            },
            onLoad: () => {
              // Control the loader via ref to make it immediately invisible
              if (!loadFallbackFirst) {
                this.myRef.current.classList.remove("placeholder");
              }
            },
          })}
          {...UIprops}
        />
      </Ref>
    );
  }

render() {
    const { isLoading, error, data } = this.props;
    const metadata = data.metadata || {};
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <OrderHeader data={data} />
                </Container>
                <Divider />
              </Sticky>

              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <Container className="spaced">
                          <OrderStatistics order={metadata} />
                          <br />
                          <OrderSteps order={metadata} />
                        </Container>
                        <OrderPanels data={data} />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <ActionMenu data={metadata} offset={-150} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { isLoading, error, data } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <DocumentHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <Container className="spaced">
                          <div
                            ref={this.anchors.summaryRef}
                            id="document-summary"
                          >
                            <DocumentSummary
                              anchors={this.anchors}
                              document={data}
                            />
                          </div>
                        </Container>
                        <DocumentMetadata anchors={this.anchors} />
                        <DocumentContent anchors={this.anchors} data={data} />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={200}>
                        <DocumentActionMenu offset={-250} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { isLoading, error, data } = this.props;
    const metadata = data.metadata || {};
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <BorrowingRequestHeader brwReq={metadata} />
                </Container>
                <Divider />
              </Sticky>

              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <BorrowingRequestStatistics brwReq={metadata} />
                        <br />
                        <BorrowingRequestSteps brwReq={metadata} />
                        <BorrowingRequestMetadata brwReq={data} />
                        <BorrowingRequestPayment brwReq={metadata} />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <ActionMenu brwReq={metadata} offset={-150} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { isLoading, error, data } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <ItemHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <Container className="spaced">
                          <ItemCirculation />
                          <ItemMetadata />
                          <ItemPendingLoans />
                          <ItemPastLoans />
                        </Container>
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={180}>
                        <ItemActionMenu offset={-180} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { isLoading, error, data, firstLoanRequested } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <LoanHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <Container className="spaced">
                          {data.metadata?.document_pid && (
                            <LoanOverbookedWarning
                              documentPid={data.metadata.document_pid}
                            />
                          )}
                          <Loan />
                          <CurrentItem />
                          <AvailableItems
                            loan={data}
                            firstLoanRequested={firstLoanRequested}
                          />
                        </Container>
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={200}>
                        <LoanActionMenu loan={data} offset={-200} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { data, isLoading, error, deleteLocation } = this.props;

    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <LocationHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <LocationDetailsInner data={data} />
                        <LocationOpeningHours location={data} />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <ActionMenu
                          data={data}
                          deleteLocationHandler={deleteLocation}
                        />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    const { isLoading, error, data, relations } = this.props;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <SeriesHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <div id="metadata">
                          <SeriesMetadataTabs series={data} />
                        </div>
                        <Accordion
                          fluid
                          styled
                          className="highlighted"
                          panels={this.seriesPanels()}
                          exclusive={false}
                          defaultActiveIndex={[0, 1, 2]}
                        />
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <SeriesActionMenu
                          anchors={this.anchors}
                          series={data}
                          relations={relations}
                        />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }

render() {
    return (
      <Overridable
        id="LiteratureSearchMobile.layout"
        stickyRef={this.stickyRef}
      >
        <Container fluid className="grid-documents-search">
          <ResultsLoader>
            <EmptyResults />
            <Error />
            <Ref innerRef={this.stickyRef}>
              <Container fluid>
                <Overridable id="LiteratureSearchMobile.Controls">
                  <>
                    <Sticky context={this.stickyRef} offset={66}>
                      <SearchControlsMobile
                        ref={this.stickyRef}
                        modelName="LITERATURE"
                      />
                    </Sticky>
                    <Container textAlign="center">
                      <SearchPagination />
                    </Container>
                  </>
                </Overridable>

                <Overridable id="LiteratureSearchMobile.Body">
                  <Container className="fs-search-body" textAlign="center">
                    <ResultsGrid overridableId="mobile" />
                    <Overridable id="LiteratureSearchMobile.Footer">
                      <Container fluid className="search-results-footer">
                        <SearchFooter />
                        <Container className="search-results-message">
                          <SearchMessage />
                        </Container>
                      </Container>
                    </Overridable>
                  </Container>
                </Overridable>
              </Container>
            </Ref>
          </ResultsLoader>
        </Container>
      </Overridable>
    );
  }

render() {
    return (
      <TranslationsSuspense>
        <StickyHeader
          contextRef={this.contextRef}
          isLoading={this.props.isLoading}
          results={normalizeResults(this.props.results)}
          searchTerm={this.props.searchTerm}
          handleResultSelect={this.handleResultSelect}
          handleSearchChange={this.handleSearchChange}
          addSuccess={this.props.addSuccess}
          messageActive={this.props.messageActive}
          newQ={this.props.newQ}
          handleKeyPress={this.handleKeyPress}
          account={this.props.account}
          onSignOut={this.props.onSignOut}
          handleChangeLanguage={this.handleChangeLanguage}
        />
        <div className="containerDiv">
          <div className="banner clearfix">
            <img
              src="health-care.svg"
              className="health-care"
              alt="health-care"
            />
            <div className="banner-text">
              {this.props.t('patientBoard:banner.text')}
            </div>
            <div className="banner-subtext">
              {this.props.t('patientBoard:banner.subText')}
            </div>
          </div>
          <div className="header-with-link-wrapper">
            <HeaderWithLink
              buttonLabel={this.props.t('patientBoard:addQuestion.askADoctor')}
            />
          </div>

          {this.state.displayNewQuestion && (
            <div
              className="new-answers"
              onClick={this.handleDisplayNewQuestion}
            >
              {this.props.t('patientBoard:answers.seeNew')}
            </div>
          )}
          <Grid centered columns={2} stackable>
            <Grid.Column>
              <div className="patient-header-wrapper">
                {
                  // Visibility is set to hidden for this component.
                  // Please remove visibility:hidden from css while implementing filtering
                  //  <div className="filter-wrapper">
                  //   <div className="button-wrapper">
                  //     <button>filer all</button>
                  //     <button>popular</button>
                  //   </div>
                  // </div>
                }
                <div className="header-container">
                  <div className="board-title">
                    {this.props.t(
                      'patientBoard:questionBoard.answersFromFrontline'
                    )}
                  </div>
                  <div className="board-link">
                    <Link to={loginPath}>
                      {this.props.t('patientBoard:addQuestion.areyouphysician')}
                    </Link>
                  </div>
                </div>
              </div>

              <Ref innerRef={this.contextRef}>
                <div>
                  <QuestionBoard
                    handleClickLike={this.handleClickLike}
                    handleAnswerLike={this.props.handleAnswerLike}
                    results={this.props.results}
                  />

                  {/* <Rail size='mini' position='left'>
         <Sticky context={this.contextRef}>
           <Item.Group divided>
             {_.times(12, (i) => (
               <Item key={i}>

                 <Item.Content>
                   <Item.Header as='a'>Docter Algorithm</Item.Header>
                   <Item.Meta>Links</Item.Meta>
                 </Item.Content>
               </Item>
             ))}
           </Item.Group>
         </Sticky>
       </Rail>
      */}
                </div>
              </Ref>
            </Grid.Column>
            {/*

   <Grid.Column>
   <Iframe
   src={'https://webchat.botframework.com/embed/ntozwu-qna-wellspring-bot?s=inVtGkA7vCM.w7KrGgKpZeqVW9HhSX8KcdjJD6sNOAvOP_EIeUiC5g4'}
   style={'min-width: 400px; width: 100%; min-height: 500px;'}></Iframe>

   </Grid.Column>
   */}
          </Grid>
          {/* <FloatingMenu/> */}
          <Footer />
        </div>
      </TranslationsSuspense>
    );
  }

LicenseFieldItem = ({
  license,
  moveLicense,
  replaceLicense,
  removeLicense,
  searchConfig,
  serializeLicenses,
}) => {
  const dropRef = React.useRef(null);
  const [_, drag, preview] = useDrag({
    item: { index: license.index, type: 'license' },
  });
  const [{ hidden }, drop] = useDrop({
    accept: 'license',
    hover(item, monitor) {
      if (!dropRef.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = license.index;

      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return;
      }

      if (monitor.isOver({ shallow: true })) {
        moveLicense(dragIndex, hoverIndex);
        item.index = hoverIndex;
      }
    },
    collect: (monitor) => ({
      hidden: monitor.isOver({ shallow: true }),
    }),
  });

  // Initialize the ref explicitely
  drop(dropRef);
  return (
    <Ref innerRef={dropRef} key={license.key}>
      <List.Item
        key={license.key}
        className={
          hidden ? 'deposit-drag-listitem hidden' : 'deposit-drag-listitem'
        }
      >
        <List.Content floated="right">
          <LicenseModal
            searchConfig={searchConfig}
            onLicenseChange={(selectedLicense) => {
              replaceLicense(license.index, selectedLicense);
            }}
            mode={license.type}
            initialLicense={license.initial}
            action="edit"
            trigger={
              <Button size="mini" primary type="button">
                {i18next.t('Edit')}
              </Button>
            }
            serializeLicenses={serializeLicenses}
          />
          <Button
            size="mini"
            type="button"
            onClick={() => {
              removeLicense(license.index);
            }}
          >
            {i18next.t('Remove')}
          </Button>
        </List.Content>
        <Ref innerRef={drag}>
          <List.Icon name="bars" className="drag-anchor" />
        </Ref>
        <Ref innerRef={preview}>
          <List.Content>
            <List.Header>{license.title}</List.Header>
            {license.description && (
              <List.Description>
                {_truncate(license.description, { length: 300 })}
              </List.Description>
            )}
            {license.link && (
              <span>
                <a href={license.link} target="_blank" rel="noopener noreferrer">
                  {license.description && <span>&nbsp;</span>}
                  {i18next.t('Read more')}
                </a>
              </span>
            )}
          </List.Content>
        </Ref>
      </List.Item>
    </Ref>
  );
}

FundingFieldItem = ({
  compKey,
  index,
  fundingItem,
  awardType,
  moveFunding,
  replaceFunding,
  removeFunding,
  searchConfig,
  deserializeAward,
  deserializeFunder,
  computeFundingContents
}) => {
  const dropRef = React.useRef(null);
  const [_, drag, preview] = useDrag({
    item: { index, type: 'award' },
  });
  const [{ hidden }, drop] = useDrop({
    accept: 'award',
    hover(item, monitor) {
      if (!dropRef.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;

      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return;
      }

      if (monitor.isOver({ shallow: true })) {
        moveFunding(dragIndex, hoverIndex);
        item.index = hoverIndex;
      }
    },
    collect: (monitor) => ({
      hidden: monitor.isOver({ shallow: true }),
    }),
  });

  let { headerContent, descriptionContent, awardOrFunder } = computeFundingContents(fundingItem);

  // Initialize the ref explicitely
  drop(dropRef);
  return (
    <Ref innerRef={dropRef} key={compKey}>
      <List.Item
        key={compKey}
        className={
          hidden ? 'deposit-drag-listitem hidden' : 'deposit-drag-listitem'
        }
      >
        <List.Content floated="right">
          <FundingModal
            searchConfig={searchConfig}
            onAwardChange={(selectedFunding) => {
              replaceFunding(index, selectedFunding);
            }}
            mode={awardType}
            action="edit"
            trigger={
              <Button size="mini" primary type="button">
                {i18next.t('Edit')}
              </Button>
            }
            deserializeAward={deserializeAward}
            deserializeFunder={deserializeFunder}
            computeFundingContents={computeFundingContents}
            initialFunding={fundingItem}
          />
          <Button size="mini" type="button" onClick={() => removeFunding(index)}>
            {i18next.t('Remove')}
          </Button>
        </List.Content>

        <Ref innerRef={drag}>
          <List.Icon name="bars" className="drag-anchor" />
        </Ref>
        <Ref innerRef={preview}>
          <List.Content>
            <List.Header>
              {(
                <>
                  <span className="mr-5">
                    {headerContent}
                  </span>

                  {awardOrFunder === 'award'
                    ? (fundingItem?.award?.number && (
                      <Label basic size="mini" className="mr-5">
                        {fundingItem.award.number}
                      </Label>)
                    )
                    : ''}
                  {
                    awardOrFunder === 'award'
                    ? (fundingItem?.award?.url && (
                      <a
                      href={`${fundingItem.award.url}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={i18next.t('Open external link')}
                    >
                      <Icon link name="external alternate" />
                    </a>
                    ))
                    : ''
                  }
                </>
              )}
            </List.Header>
            <List.Description>
              {descriptionContent ? descriptionContent : <br/>}
            </List.Description>
          </List.Content>
        </Ref>
      </List.Item>
    </Ref>
  );
}

CreatibutorsFieldItem = ({
  compKey,
  identifiersError,
  index,
  replaceCreatibutor,
  removeCreatibutor,
  moveCreatibutor,
  addLabel,
  editLabel,
  initialCreatibutor,
  displayName,
  roleOptions,
  schema,
  autocompleteNames,
}) => {
  const dropRef = React.useRef(null);
  const [_, drag, preview] = useDrag({
    item: { index, type: 'creatibutor' },
  });
  const [{ hidden }, drop] = useDrop({
    accept: 'creatibutor',
    hover(item, monitor) {
      if (!dropRef.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;

      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return;
      }

      if (monitor.isOver({ shallow: true })) {
        moveCreatibutor(dragIndex, hoverIndex);
        item.index = hoverIndex;
      }
    },
    collect: (monitor) => ({
      hidden: monitor.isOver({ shallow: true }),
    }),
  });

  const renderRole = (role, roleOptions) => {
    if (role) {
      const friendlyRole =
        roleOptions.find(({ value }) => value === role)?.text ?? role;

      return <Label size="tiny">{friendlyRole}</Label>;
    }
  };
  const firstError =
    identifiersError &&
    identifiersError.find((elem) => ![undefined, null].includes(elem));

  // Initialize the ref explicitely
  drop(dropRef);
  return (
    <Ref innerRef={dropRef} key={compKey}>
      <List.Item
        key={compKey}
        className={
          hidden ? 'deposit-drag-listitem hidden' : 'deposit-drag-listitem'
        }
      >
        <List.Content floated="right">
          <CreatibutorsModal
            addLabel={addLabel}
            editLabel={editLabel}
            onCreatibutorChange={(selectedCreatibutor) => {
              replaceCreatibutor(index, selectedCreatibutor);
            }}
            initialCreatibutor={initialCreatibutor}
            roleOptions={roleOptions}
            schema={schema}
            autocompleteNames={autocompleteNames}
            action="edit"
            trigger={
              <Button size="mini" primary type="button">
                {i18next.t('Edit')}
              </Button>
            }
          />
          <Button
            size="mini"
            type="button"
            onClick={() => removeCreatibutor(index)}
          >
            {i18next.t('Remove')}
          </Button>
        </List.Content>
        <Ref innerRef={drag}>
          <List.Icon name="bars" className="drag-anchor" />
        </Ref>
        <Ref innerRef={preview}>
          <List.Content>
            <List.Description>
              <span className="creatibutor">
                {_get(initialCreatibutor, 'person_or_org.identifiers', []).some(
                  (identifier) => identifier.scheme === 'orcid'
                ) && (
                  <img
                    alt="ORCID logo"
                    className="inline-id-icon mr-5"
                    src="/static/images/orcid.svg"
                    width="16"
                    height="16"
                  />
                )}
                {_get(initialCreatibutor, 'person_or_org.identifiers', []).some(
                  (identifier) => identifier.scheme === 'ror'
                ) && (
                  <img
                    alt="ROR logo"
                    className="inline-id-icon mr-5"
                    src="/static/images/ror-icon.svg"
                    width="16"
                    height="16"
                  />
                )}
                {_get(initialCreatibutor, 'person_or_org.identifiers', []).some(
                  (identifier) => identifier.scheme === 'gnd'
                ) && (
                  <img
                    alt="GND logo"
                    className="inline-id-icon mr-5"
                    src="/static/images/gnd-icon.svg"
                    width="16"
                    height="16"
                  />
                )}
                {displayName}{' '}
                {renderRole(initialCreatibutor?.role, roleOptions)}
              </span>
            </List.Description>
            {firstError && (
              <Label pointing="left" prompt>
                {firstError.scheme ? firstError.scheme : 'Invalid identifiers'}
              </Label>
            )}
          </List.Content>
        </Ref>
      </List.Item>
    </Ref>
  );
}

render() {
    const { isLoading, error, data, match, currentLoans } = this.props;
    const currentPatronPid = match.params.patronPid;
    return (
      <div ref={this.headerRef}>
        <Container fluid>
          <Loader isLoading={isLoading}>
            <Error error={error}>
              <Sticky context={this.headerRef} className="solid-background">
                <Container fluid className="spaced">
                  <PatronHeader data={data} />
                </Container>
                <Divider />
              </Sticky>
              <Container fluid>
                <Ref innerRef={this.menuRef}>
                  <Grid columns={2}>
                    <Grid.Column width={13}>
                      <Container className="spaced">
                        <Overridable
                          id="Backoffice.PatronDetails.Metadata"
                          patron={data}
                        />

                        <Header attached="top" as="h3">
                          Checkout
                        </Header>
                        <Segment
                          attached
                          className="bo-metadata-segment"
                          id="patron-checkout"
                        >
                          <ItemsCheckout />
                          <ItemsSearch />
                        </Segment>

                        <Header attached="top" as="h3">
                          Ongoing loans
                        </Header>
                        <Segment
                          attached
                          id="ongoing-loans"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronCurrentLoans />
                        </Segment>

                        <Header attached="top" as="h3">
                          Pending loans requests
                        </Header>
                        <Segment
                          attached
                          id="loan-requests"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronPendingLoans />
                        </Segment>

                        <Header attached="top" as="h3">
                          Ongoing interlibrary loans
                        </Header>
                        <Segment
                          attached
                          id="ongoing-borrowing-requests"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronCurrentBorrowingRequests />
                        </Segment>

                        <Header attached="top" as="h3">
                          Requests for new literature
                        </Header>
                        <Segment
                          attached
                          id="literature-requests"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronDocumentRequests />
                        </Segment>

                        <Header attached="top" as="h3">
                          Loans history
                        </Header>
                        <Segment
                          attached
                          id="loans-history"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronPastLoans />
                        </Segment>

                        <Header attached="top" as="h3">
                          Interlibrary loans history
                        </Header>
                        <Segment
                          attached
                          id="borrowing-requests-history"
                          className="bo-metadata-segment no-padding"
                        >
                          <PatronPastBorrowingRequests />
                        </Segment>
                      </Container>
                    </Grid.Column>
                    <Grid.Column width={3}>
                      <Sticky context={this.menuRef} offset={150}>
                        <PatronBulkExtendLoans
                          patronPid={currentPatronPid}
                          hidden={currentLoans.total === 0}
                          fluid
                          color="blue"
                        />
                        <Divider horizontal> Navigation </Divider>
                        <PatronActionMenu offset={-150} />
                      </Sticky>
                    </Grid.Column>
                  </Grid>
                </Ref>
              </Container>
            </Error>
          </Loader>
        </Container>
      </div>
    );
  }