semantic-ui-react#Sticky JavaScript Examples
The following examples show how to use
semantic-ui-react#Sticky.
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: 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 #2
| Source File: DocumentRequestDetails.js From react-invenio-app-ils with MIT License | 6 votes |
|
render() {
const { data, isLoading, error } = this.props;
return (
<div ref={this.headerRef}>
<Container fluid>
<Loader isLoading={isLoading}>
<Error error={error}>
{data.metadata ? (
<>
<Sticky context={this.headerRef} className="solid-background">
<Container fluid className="spaced">
<DocumentRequestHeader
created={data.created}
docReq={data.metadata}
/>
<Divider />
</Container>
</Sticky>
<Container fluid>
<Grid columns={2}>
<Grid.Column width={13}>
<DocumentRequestSteps docReq={data.metadata} />
<DocumentRequestMetadata docReq={data.metadata} />
</Grid.Column>
<Grid.Column width={3}>
<DocumentRequestActions docReq={data.metadata} />
</Grid.Column>
</Grid>
</Container>
</>
) : null}
</Error>
</Loader>
</Container>
</div>
);
}
Example #3
| 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 #4
| 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 #5
| Source File: ProviderDetails.js From react-invenio-app-ils with MIT License | 6 votes |
|
render() {
const {
data: { metadata: provider },
deleteProviderHandler,
} = this.props;
return (
<div className="bo-action-menu">
<Sticky context={this.contextRef}>
<EditButton fluid to={ProviderRoutes.providerEditFor(provider.pid)} />
<DeleteRecordModal
deleteHeader={`Are you sure you want to delete the Provider record
with ID ${provider.pid}?`}
refProps={this.createRefProps(provider.pid)}
onDelete={() => deleteProviderHandler(provider.pid)}
trigger={DeleteProviderButton}
/>
<Divider horizontal>Navigation</Divider>
<List>
{this.renderLink(
provider,
borrowingRequestApi,
ILLRoutes.borrowingRequestListWithQuery,
'borrowing requests'
)}
{this.renderLink(
provider,
orderApi,
AcquisitionRoutes.ordersListWithQuery,
'purchase orders'
)}
</List>
</Sticky>
</div>
);
}
Example #6
| Source File: LocationDetails.js From react-invenio-app-ils with MIT License | 6 votes |
|
render() {
const {
data: { metadata: location },
deleteLocationHandler,
} = this.props;
return (
<div className="bo-action-menu">
<Sticky context={this.contextRef}>
<EditButton
fluid
to={BackOfficeRoutes.locationsEditFor(location.pid)}
/>
<DeleteRecordModal
deleteHeader={`Are you sure you want to delete the Location
record with ID ${location.pid}?`}
onDelete={() => deleteLocationHandler(location.pid)}
refProps={this.createRefProps(location.pid)}
trigger={DeleteLocationButton}
/>
</Sticky>
</div>
);
}
Example #7
| 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 #8
| Source File: StickyHeader.js From covid19 with MIT License | 5 votes |
|
render() {
const {
contextRef,
isLoading,
results,
searchTerm,
handleResultSelect,
handleSearchChange,
handleKeyPress,
addSuccess,
messageActive,
newQ,
t,
account,
onSignOut,
handleChangeLanguage,
} = this.props;
return (
<Sticky context={contextRef} className="sticky-container">
<div className="sticky-top">
<a href="https://www.askco19.com/">
<img className="logo" src={logo} alt="Logo" />
</a>
<div>
<LanguageSelector handleChangeLanguage={handleChangeLanguage} />
<SearchBar
isLoading={isLoading}
results={normalizeResults(results)}
value={searchTerm}
handleResultSelect={handleResultSelect}
handleSearchChange={handleSearchChange}
handleKeyPress={handleKeyPress}
/>
</div>
<NavMenu account={account} onSignOut={onSignOut} />
{addSuccess && messageActive && (
<Message positive>
<Message.Header>
{t('patientBoard:stickyHeader.questionSubmitted')}
</Message.Header>
<p>
{t('patientBoard:stickyHeader.checkBackLater')}{' '}
{newQ && newQ.title}
</p>
</Message>
)}
{!addSuccess && messageActive && (
<Message error>
<Message.Header>
{t('patientBoard:stickyHeader.triedToSubmit')}
</Message.Header>
<p>{t('patientBoard:stickyHeader.somethingWentWrong')}</p>
</Message>
)}
</div>
</Sticky>
);
}
Example #9
| 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 #10
| 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 #11
| 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 #12
| Source File: App.js From substrate-evm with The Unlicense | 5 votes |
|
function Main () {
const [accountAddress, setAccountAddress] = useState(null);
const { apiState, keyring, keyringState } = useSubstrate();
const accountPair =
accountAddress &&
keyringState === 'READY' &&
keyring.getPair(accountAddress);
const loader = text => (
<Dimmer active>
<Loader size='small'>{text}</Loader>
</Dimmer>
);
if (apiState === 'ERROR') return loader('Error connecting to the blockchain');
else if (apiState !== 'READY') return loader('Connecting to the blockchain');
if (keyringState !== 'READY') {
return loader(
"Loading accounts (please review any extension's authorization)"
);
}
const contextRef = createRef();
return (
<div ref={contextRef}>
<Sticky context={contextRef}>
<AccountSelector setAccountAddress={setAccountAddress} />
</Sticky>
<Container>
<Grid stackable columns='equal'>
<Grid.Row stretched>
<NodeInfo />
<Metadata />
<BlockNumber />
<BlockNumber finalized />
</Grid.Row>
<Grid.Row stretched>
<EVMAccounts />
</Grid.Row>
<Grid.Row>
<EVMContracts accountPair={accountPair} />
</Grid.Row>
</Grid>
<DeveloperConsole />
</Container>
</div>
);
}
Example #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| Source File: SearchControlsMobile.js From react-invenio-app-ils with MIT License | 5 votes |
|
render() {
const { stickyRef, modelName } = this.props;
const searchConfig = getSearchConfig(modelName);
return (
<Container fluid className="mobile-search-controls">
<Sticky context={stickyRef} offset={66}>
<Container fluid className="fs-search-controls-mobile">
<Menu fluid borderless>
<SearchAggregationsMenu modelName={modelName} />
{searchConfig.SORT_BY.length > 0 ? (
<Sort values={searchConfig.SORT_BY} overridableId="mobile" />
) : null}
</Menu>
<Container>
<Grid columns={2}>
<Grid.Column width={8} className="vertical-align-content">
<div>
<Count
label={(cmp) => (
<div className="mobile-count">{cmp} results found</div>
)}
/>
</div>
</Grid.Column>
<Grid.Column
width={8}
className="vertical-align-content"
textAlign="right"
>
<div>
<SearchResultsPerPage
modelName={modelName}
label={(cmp) => (
<div className="mobile-results-page">
{cmp} results per page
</div>
)}
/>
</div>
</Grid.Column>
</Grid>
</Container>
</Container>
</Sticky>
</Container>
);
}
Example #18
| 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>
);
}
