theme-ui#jsx JavaScript Examples
The following examples show how to use
theme-ui#jsx.
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: clone.js From MDXP with MIT License | 6 votes |
|
cloneElement = (element, props, children) => {
children = children || element.props.children;
return jsx(element.type, {
key: element.key,
ref: element.ref,
...element.props,
...props,
children
});
}
Example #2
| Source File: layout.js From gatsby-starter-help-center with MIT License | 4 votes |
|
function SearchInput(props) {
const [text, setText] = React.useState("")
const [focused, setFocused] = React.useState(false)
const data = useStaticQuery(graphql`
query LayoutQuery {
site {
siteMetadata {
title
texts {
searchPlaceholderText
}
}
}
articles: allMarkdownRemark {
nodes {
id
fields {
slug
collection {
icon
}
}
frontmatter {
title
description
}
headings {
# depth
value
}
# excerpt(format: PLAIN)
}
}
}
`)
const items = data.articles.nodes
const fuse = React.useMemo(
() =>
new Fuse(items, {
shouldSort: true,
tokenize: true,
threshold: 0.6,
location: 0,
distance: 100,
minMatchCharLength: 1,
keys: [
"frontmatter.title",
"frontmatter.description",
"headings.value",
],
}),
[items]
)
const [inputItems, setInputItems] = React.useState(data.articles.nodes)
const combobox = useCombobox({
items: inputItems,
onInputValueChange: ({ inputValue }) => {
setInputItems(fuse.search(inputValue).map((node) => node.item))
},
itemToString: (node) => (node ? node.frontmatter.title : ""),
onSelectedItemChange: ({ selectedItem }) => {
navigate(selectedItem.fields.slug)
},
})
return (
<div sx={{ position: "relative" }} {...combobox.getComboboxProps()}>
<label
htmlFor="search"
{...combobox.getLabelProps({
htmlFor: "search",
})}
sx={{
position: "absolute",
left: "18pt",
top: "0",
bottom: "0",
display: "flex",
alignItems: "center",
cursor: "text",
}}
>
<FaSearch color={focused ? "#828A97" : "rgba(255,255,255,0.9)"} />
</label>
<input
id="search"
type="text"
value={text}
autoFocus
onChange={(event) => setText(event.target.value)}
placeholder={data.site.siteMetadata.texts.searchPlaceholderText}
autoComplete="off"
sx={{
backgroundColor: "rgba(255,255,255,0.2)",
transition: "background .4s, box-shadow .2s",
width: "100%",
padding: "20px 32px 21px 56px",
background: "rgba(255,255,255,0.1)",
border: "none",
outline: "none",
color: "searchTextColor",
fontSize: "18px",
lineHeight: "18px",
borderRadius: 2,
"&:focus": {
backgroundColor: "white",
boxShadow: "0 10px 20px rgba(0,0,0,0.14)",
color: "searchTextFocusColor",
},
"::placeholder": {
color: "searchTextPlaceholderColor",
},
"&:focus::placeholder": {
color: "searchTextFocusPlaceholderColor",
},
}}
{...combobox.getInputProps({
id: "search",
onFocus: () => setFocused(true),
onBlur: () => setFocused(false),
})}
/>
<div
{...combobox.getMenuProps()}
sx={{
position: "absolute",
left: 0,
right: 0,
top: "calc(20px + 21px + 18px)",
alignItems: "center",
cursor: "text",
background: "white",
color: "comboboxColor",
zIndex: 4,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
boxShadow: "0 3px 8px 0 rgba(0,0,0,0.03)",
}}
>
{combobox.isOpen &&
inputItems.map((node, index) => {
// skip drafts and "hidden" articles (ones without a collection)
if (!node.fields || !node.fields.collection) return null
const icon = jsx(
icons[node.fields.collection.icon],
{ sx: { color: "iconColor" }, size: "2rem" },
null
)
return (
<Link
key={node.id}
to={node.fields.slug}
sx={{
display: "flex",
pl: 3,
pr: 5,
py: 3,
textDecoration: "none",
background:
combobox.highlightedIndex === index ? "#E5E5E5" : "initial",
"&:hover": {
textDecoration: "none",
},
}}
{...combobox.getItemProps({ item: node, index })}
>
<div
sx={{
display: ["none", "flex"],
alignItems: "center",
pr: 3,
}}
>
{icon}
</div>
<div sx={{ flex: "auto" }}>
<h3 sx={{ my: 0, fontSize: 3 }}>{node.frontmatter.title}</h3>
<p
sx={{
my: 0,
color: "articleDescriptionColor",
fontSize: [1, 2],
}}
>
{node.frontmatter.description}
</p>
</div>
</Link>
)
})}
</div>
</div>
)
}
Example #3
| Source File: index.js From gatsby-starter-help-center with MIT License | 4 votes |
|
render() {
return (
<Layout
location={this.props.location}
title={this.props.data.site.siteMetadata.title}
description={this.props.data.site.siteMetadata.description}
>
<SEO title={this.props.data.site.siteMetadata.title} skipSuffix />
{this.props.data.collections.edges.map(({ node }, index) => {
const articlesOfCollection = concatArticles(node)
const icon = node.icon
? jsx(
icons[node.icon],
{ sx: { color: "iconColor" }, size: "2rem" },
null
)
: null
return (
<Link
key={node.id}
sx={{
boxShadow: `none`,
"&:hover": {
textDecoration: "none",
},
}}
to={node.fields.slug}
>
<article
sx={{
backgroundColor: "paperBackgroundColor",
borderWidth: 1,
borderStyle: "solid",
borderColor: "paperBorderColor",
borderRadius: 3,
py: 4,
px: 2,
position: "relative",
zIndex: "3",
textDecoration: "none",
overflow: "hidden",
width: "100%",
display: "flex",
flexDirection: ["column", "row"],
outline: "none",
mt: index === 0 ? 5 : 0,
mb:
index === this.props.data.collections.edges.length - 1
? 5
: 4,
boxShadow: "0 3px 8px 0 rgba(0,0,0,0.03)",
transition:
"border .15s linear, transform .15s linear, background-color .15s linear, box-shadow .15s linear, opacity .15s linear, transform .15s linear, box-shadow .15s linear",
color: "paperHeadingColor",
"&:hover": {
border: "1px solid rgba(136,149,162,0.2)",
backgroundColor: "paperHoverBackgroundColor",
color: "paperHoverHeadingColor",
},
}}
>
<div
sx={{
flex: "1",
display: "flex",
alignItems: "center",
justifyContent: ["flex-start", "center"],
px: [2, 0],
pb: [3, 0],
}}
>
{icon}
</div>
<div sx={{ flex: "6", px: [2, 0] }}>
<header>
<h3
sx={{
mt: 0,
mb: 2,
color: "inherit",
}}
>
{node.title}
</h3>
</header>
<section
sx={{
color: "paperDescriptionColor",
}}
>
{node.description}
</section>
<small
sx={{
color: "paperDescriptionColor",
}}
>
{articlesOfCollection.length}{" "}
{(() => {
switch (articlesOfCollection.length) {
case 0:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionZeroText
case 1:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionOneText
case 2:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionTwoText
default:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionMultipleText
}
})()}
</small>
</div>
</article>
</Link>
)
})}
</Layout>
)
}
Example #4
| Source File: collection.js From gatsby-starter-help-center with MIT License | 4 votes |
|
render() {
const siteTitle = this.props.data.site.siteMetadata.title
const collection = this.props.data.collection
const articles = concatArticles(collection)
const icon = collection.icon
? jsx(
icons[collection.icon],
{ sx: { color: "iconColor" }, size: "2rem" },
null
)
: null
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title={collection.title} description={collection.description} />
<p sx={{ mt: 1, mb: 2, py: 0 }}>
<Link
to="/"
sx={{
color: "breadcrumbLinkTextColor",
boxShadow: "none",
fontSize: 1,
"&:hover": {
color: "breadcrumbHoverLinkTextColor",
},
}}
>
{this.props.data.site.siteMetadata.texts.allCollectionsText}
</Link>{" "}
<span sx={{ color: "breadcrumbTextColor", fontSize: 1 }}>
›
</span>{" "}
<span sx={{ color: "breadcrumbTextColor", fontSize: 1 }}>
{collection.title}
</span>
</p>
<article
sx={{
backgroundColor: "collectionBackgroundColor",
borderColor: "transparent",
borderStyle: "solid",
borderRadius: 2,
px: [2, 4],
py: 2,
mb: 6,
}}
>
<div
sx={{
display: "flex",
flexDirection: ["column", "row"],
pt: [0, 3],
}}
>
<div
sx={{
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: ["flex-start", "center"],
py: [3, 0],
}}
>
{icon}
</div>
<div sx={{ flex: 4 }}>
<header>
<h2
sx={{
my: 0,
py: 0,
color: "collectionHeading",
}}
>
{collection.title}
</h2>
</header>
<p
sx={{
pt: 2,
pb: 0,
mb: 0,
color: "collectionDescription",
}}
>
{collection.description}
</p>
<small sx={{ color: "collectionDescription" }}>
{articles.length}{" "}
{(() => {
switch (articles.length) {
case 0:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionZeroText
case 1:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionOneText
case 2:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionTwoText
default:
return this.props.data.site.siteMetadata.texts
.articlesInCollectionMultipleText
}
})()}
</small>
</div>
</div>
<ul sx={{ ml: 0, mt: 5, listStyleType: "none" }}>
{(Array.isArray(collection.articles)
? collection.articles
: []
).map((articleNode, index) => {
// This happens when a collection points to an article file which
// does not exist
if (
!articleNode ||
!articleNode.file ||
!articleNode.file.childMarkdownRemark
) {
return null
}
const article = articleNode.file.childMarkdownRemark
if (!article) return null
return (
<li key={article.fields.slug} sx={{ my: 0, py: 0 }}>
<Card
to={article.fields.slug}
title={article.frontmatter.title}
description={article.frontmatter.description}
hasPredecessor={index > 0}
hasSuccessor={index < collection.articles.length - 1}
/>
</li>
)
})}
</ul>
{Array.isArray(collection.sections) &&
collection.sections.map((section) => {
const articlesOfSection = Array.isArray(section.articles)
? section.articles
.filter(({ file }) => file)
.map(({ file }) => file.childMarkdownRemark)
: []
// skip sections without articles
if (articlesOfSection.length === 0) return null
return (
<React.Fragment key={section.id}>
{/* Id must be set for navigation */}
<a
id={slug(section.id)}
href={"#" + slug(section.id)}
sx={{
cursor: "default",
":hover": { textDecoration: "none" },
}}
>
<h3 sx={{ fontSize: 3, mb: 3, color: "initial" }}>
{section.title}
</h3>
</a>
<ul sx={{ ml: 0, listStyleType: "none" }}>
{articlesOfSection.map((article, index) =>
article ? (
<li key={article.fields.slug} sx={{ my: 0, py: 0 }}>
<Card
to={article.fields.slug}
title={article.frontmatter.title}
description={article.frontmatter.description}
hasPredecessor={index > 0}
hasSuccessor={index < articlesOfSection.length - 1}
/>
</li>
) : null
)}
</ul>
</React.Fragment>
)
})}
</article>
</Layout>
)
}
