semantic-ui-react#Ref JavaScript Examples
The following examples show how to use
semantic-ui-react#Ref.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: EItemDetails.js From react-invenio-app-ils with MIT License | 6 votes |
|
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>
);
}
Example #2
| Source File: SeriesLiteratureSearchMobile.js From react-invenio-app-ils with MIT License | 6 votes |
|
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>
);
}
Example #3
| Source File: ProviderDetails.js From react-invenio-app-ils with MIT License | 6 votes |
|
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>
);
}
Example #4
| Source File: Image.js From react-invenio-forms with MIT License | 6 votes |
|
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>
);
}
Example #5
| Source File: OrderDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #6
| Source File: DocumentDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #7
| Source File: BorrowingRequestDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #8
| Source File: ItemDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #9
| Source File: LoanDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #10
| Source File: LocationDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #11
| Source File: SeriesDetails.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #12
| Source File: LiteratureSearchMobile.js From react-invenio-app-ils with MIT License | 5 votes |
|
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>
);
}
Example #13
| Source File: PatientBoard.js From covid19 with MIT License | 4 votes |
|
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>
);
}
Example #14
| Source File: LicenseFieldItem.js From react-invenio-deposit with MIT License | 4 votes |
|
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> </span>}
{i18next.t('Read more')}
</a>
</span>
)}
</List.Content>
</Ref>
</List.Item>
</Ref>
);
}
Example #15
| Source File: FundingFieldItem.js From react-invenio-deposit with MIT License | 4 votes |
|
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>
);
}
Example #16
| Source File: CreatibutorsFieldItem.js From react-invenio-deposit with MIT License | 4 votes |
|
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>
);
}
Example #17
| Source File: PatronDetails.js From react-invenio-app-ils with MIT License | 4 votes |
|
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>
);
}
