react-icons/fa#FaEllipsisH JavaScript Examples
The following examples show how to use
react-icons/fa#FaEllipsisH.
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: Article.js From testnets-cardano-org with MIT License | 4 votes |
|
Article = ({ pageContext }) => {
const [position, setPosition] = useState('top')
const [navigationHeights, setNavigationHeights] = useState({
min: null,
max: null,
})
const [maxWidth, setMaxWidth] = useState(null)
const [mobileTopNavigationOpen, setMobileTopNavigationOpen] = useState(false)
const [mobileBottomNavigationOpen, setMobileBottomNavigationOpen] =
useState(false)
function getReportIssueHref({ pathname, query, hash }) {
const baseHref = `https://github.com/${config.gitHubRepository}/issues/new?assignees=&labels=content&template=content-issue.md&title=`
return `${baseHref}${encodeURIComponent(
`Invalid content ${pathname}${query || ''}${hash || ''}`
)}`
}
const renderDownloaders = (loc) => {
if (!loc) return
if (!loc.href) return
if (loc.href.includes('/cardano/get-started/wallet/')) {
return <CardanoDownloader />
}
}
/**
* Replaces references to custom components with rendered component
* e.g. <!-- include components/OtherComponent --> -> renders components/MarkdownComponents/OtherComponent if it exists
* e.g. <!-- embed youtube/123 --> -> Renders embedded youtube video with id 123
*/
function renderArticleContent() {
let remainingContent = pageContext.content
const contentParts = []
// Matches <!-- include components/<MyComponent> --> - where <MyComponent> is Alpha string reference to component
// Or <!-- embed youtube/id --> - where id is the YouTube video id to embed
// Or <!-- embed grafana/url --> - where url is the Grafana URL
// in src/components/MarkdownComponent/index.js
const pattern =
/<!--\s(include|embed)\s(components|youtube|grafana)\/([^\s]+)\s-->/
let match = remainingContent.match(pattern)
let matchIndex = match ? match.index : -1
while (remainingContent.length > 0 && matchIndex >= 0) {
if (matchIndex > 0) {
contentParts.push(
<Markdown source={remainingContent.substring(0, matchIndex)} />
)
}
const [_, type, category, value] = match
if (type === 'include' && category === 'components') {
const Component = MarkdownComponents[value]
if (Component) contentParts.push(<Component />)
} else if (type === 'embed' && category === 'youtube' && value) {
contentParts.push(
<YouTube
videoId={value}
opts={{
width: '100%',
height: '350px',
}}
/>
)
} else if (type === 'embed' && category === 'grafana' && value) {
contentParts.push(<Grafana embedLink={value} />)
}
remainingContent = remainingContent.substring(
matchIndex + match[0].length
)
match = remainingContent.match(pattern)
matchIndex = match ? match.index : -1
}
if (remainingContent)
contentParts.push(<Markdown source={remainingContent} />)
return (
<Fragment>
{contentParts.map((content, index) => (
<Fragment key={index}>{content}</Fragment>
))}
</Fragment>
)
}
return (
<GlobalContentQuery
render={(content) => (
<Layout
template={Blank}
headData={{
title: pageContext.pageTitle,
meta: [{ name: 'description', content: '' }],
}}
>
<Container>
<Location>
{({ location }) => (
<PageContent>
{pageContext.navigationContext.children.length > 0 && (
<SideNavigationContainer
navigationheights={navigationHeights}
maxWidth={maxWidth}
className={`position-${position}`}
>
<div>
<NavigationTree
ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
lang={pageContext.lang}
items={pageContext.navigationContext.children}
path={`/${pageContext.navigationContext.key}`}
currentPathname={location.pathname}
position={position}
setPosition={setPosition}
navigationHeights={navigationHeights}
setNavigationHeights={setNavigationHeights}
maxWidth={maxWidth}
setMaxWidth={setMaxWidth}
/>
</div>
</SideNavigationContainer>
)}
<MainContent
className={
pageContext.navigationContext.children.length === 0
? 'no-nav'
: ''
}
>
{pageContext.navigationContext.children.length > 0 && (
<MobileInlineNavigation
className={mobileTopNavigationOpen ? 'open' : ''}
>
<div>
<NavigationTree
lang={pageContext.lang}
ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
items={pageContext.navigationContext.children}
path={`/${pageContext.navigationContext.key}`}
currentPathname={location.pathname}
autoScroll={false}
/>
</div>
<a
href="#"
aria-hidden="true"
tracking={{
label: 'toggle_mobile_article_navigation_top',
}}
onClick={(e) => {
e.preventDefault()
setMobileTopNavigationOpen(!mobileTopNavigationOpen)
}}
>
{mobileTopNavigationOpen && <FaChevronUp />}
{!mobileTopNavigationOpen && <FaEllipsisH />}
</a>
</MobileInlineNavigation>
)}
<MarkdownContent>{renderArticleContent()}</MarkdownContent>
<MarkdownContent>
{renderDownloaders(location)}
</MarkdownContent>
<MarkdownContent>
{!pageContext.hasNoChildContent &&
(pageContext.previous || pageContext.next) && (
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
width="100%"
>
{pageContext.previous &&
pageContext.previous.path !==
'/testnets/cardano/' && (
<Link
href={pageContext.previous.path}
title={pageContext.previous.title}
>
← {content.previous}
</Link>
)}
{pageContext.next && (
<Link
href={pageContext.next.path}
title={pageContext.next.title}
>
{content.next} →
</Link>
)}
</Box>
)}
</MarkdownContent>
<Box marginTop={2} marginBottom={2}>
{config.gitHubRepository && (
<Box display="flex">
<ReportAnIssueLink
href={getReportIssueHref(location)}
tracking={{
category: 'article',
label: 'report_an_issue',
}}
>
<Box
display="flex"
marginRight={1}
flexDirection="column"
justifyContent="center"
>
<FaGithub />
</Box>
<Box
display="flex"
flexDirection="column"
justifyContent="center"
>
<p>{content.report_an_issue}</p>
</Box>
</ReportAnIssueLink>
</Box>
)}
</Box>
{pageContext.navigationContext.children.length > 0 && (
<MobileInlineNavigation
className={mobileBottomNavigationOpen ? 'open' : ''}
>
<div>
<NavigationTree
lang={pageContext.lang}
ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
items={pageContext.navigationContext.children}
path={`/${pageContext.navigationContext.key}`}
currentPathname={location.pathname}
autoScroll={false}
/>
</div>
<a
href="#"
aria-hidden="true"
tracking={{
label: 'toggle_mobile_article_navigation_bottom',
}}
onClick={(e) => {
e.preventDefault()
setMobileBottomNavigationOpen(
!mobileBottomNavigationOpen
)
}}
>
{mobileBottomNavigationOpen && <FaChevronUp />}
{!mobileBottomNavigationOpen && <FaEllipsisH />}
</a>
</MobileInlineNavigation>
)}
</MainContent>
</PageContent>
)}
</Location>
<Theme.Consumer>
{({ theme, key }) => (
<Footer theme={theme.palette.type} variant={key} />
)}
</Theme.Consumer>
</Container>
</Layout>
)}
/>
)
}
