react-device-detect#isSafari TypeScript Examples
The following examples show how to use
react-device-detect#isSafari.
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: ExtensionPageLayout.tsx From roamjs-com with MIT License | 4 votes |
|
ExtensionPageLayout: React.FunctionComponent<{
frontMatter: FrontMatter;
}> = ({ children, frontMatter }) => {
const id = pathToId(frontMatter.__resourcePath);
const label = pathToLabel(frontMatter.__resourcePath).toUpperCase();
const [copied, setCopied] = useState(false);
const onSave = useCopyCode(setCopied);
const randomItems = useMemo(
() =>
prodItems
.filter((a) => a.title.toUpperCase() !== label)
.map((a, i) => ({
sort:
a.title.toUpperCase().localeCompare(label) < 0
? i + prodItems.length - 1
: i,
value: a,
}))
.sort((a, b) => a.sort - b.sort)
.map((a) => a.value),
[label]
);
const [pagination, setPagination] = useState(0);
const onClickLeft = useCallback(
() => setPagination((pagination - rowLength + total) % total),
[pagination, setPagination]
);
const onClickRight = useCallback(
() => setPagination((pagination + rowLength + total) % total),
[pagination, setPagination]
);
return (
<StandardLayout
title={idToTitle(id)}
description={frontMatter.description}
img={`https://roamjs.com/thumbnails/${id}.png`}
>
<Breadcrumbs
page={label}
links={[
{
text: "EXTENSIONS",
href: "/docs",
},
]}
/>
{frontMatter.development && <H2>UNDER DEVELOPMENT</H2>}
<H1>{label}</H1>
<Subtitle>{frontMatter.description}</Subtitle>
<H3>Installation</H3>
{!isSafari && (
<>
<Body>
You could use the Copy Extension button below to individually
install this extension. To install, just paste anywhere in your Roam
graph and click "Yes, I Know What I'm Doing".
</Body>
<div style={{ marginBottom: 24 }}>
<Button
onClick={() => onSave(id)}
color="primary"
variant="contained"
>
COPY EXTENSION
</Button>
{copied && <span style={{ marginLeft: 24 }}>COPIED!</span>}
</div>
<H4>Manual Installation</H4>
<Body>
If the extension doesn't work after using the copy extension button
above, try installing manually using the instructions below.
</Body>
</>
)}
<Body>
First create a <b>block</b> with the text{" "}
<code>{"{{[[roam/js]]}}"}</code> on any page in your Roam DB. Then,
create a single child of this block type three back ticks. A code block
should appear. Copy this code and paste it into the child code block in your graph:
</Body>
<Prism language="javascript">{getSingleCodeContent(id)}</Prism>
<Body>Finally, click "Yes, I Know What I'm Doing".</Body>
<H3>Usage</H3>
{children}
{(!frontMatter.development || frontMatter.loom) && !frontMatter.skipDemo && (
<>
<H3>Demo</H3>
{frontMatter.loom ? (
<Loom id={frontMatter.loom} />
) : (
<DemoVideo src={pathToId(frontMatter.__resourcePath)} />
)}
</>
)}
<H3>Contributors</H3>
<Body>
This extension is brought to you by RoamJS! If you are facing any issues
reach out to{" "}
<ExternalLink href={"mailto:[email protected]"}>
[email protected]
</ExternalLink>{" "}
or click on the chat button on the bottom right. If you get value from
using this extension, consider sponsoring RoamJS by clicking on the
button below!
</Body>
<SponsorDialog id={id} />
{frontMatter.contributors && (
<>
<Body>
A special thanks to those who's contributions also helped make this
extension possible:
</Body>
<ul>
{frontMatter.contributors.split(",").map((s) => {
const parts = s.trim().split(" ");
const name = parts.slice(0, parts.length - 1).join(" ");
const emojis = parts[parts.length - 1];
return (
<li key={s}>
{contributors[name] ? (
<>
<ExternalLink href={contributors[name]}>
{name}
</ExternalLink>
</>
) : (
name
)}{" "}
{emojis
.split("")
.map((s, i) => `${s}${emojis.charAt(i + 1)}`)
.filter((_, i) => i % 2 === 0)
.map((s) => (
<Tooltip title={emojisToTooltip[s]} key={s}>
<span style={{ cursor: "help" }}>{s}</span>
</Tooltip>
))}
</li>
);
})}
</ul>
</>
)}
<div style={{ margin: "128px 0" }}>
<div style={{ width: "100%", textAlign: "center" }}>
<RoamJSDigest />
</div>
</div>
<H3>Other Extensions</H3>
<div
style={{
margin: "16px 0",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<IconButton
icon={"chevronLeft"}
onClick={onClickLeft}
style={{ height: 48 }}
/>
<CardGrid
items={[
...randomItems.slice(pagination, pagination + rowLength),
...(pagination + rowLength > total
? randomItems.slice(0, pagination + rowLength - total)
: []),
]}
width={3}
/>
<IconButton
icon={"chevronRight"}
onClick={onClickRight}
style={{ height: 48 }}
/>
</div>
</StandardLayout>
);
}
Example #2
| Source File: [id].tsx From roamjs-com with MIT License | 4 votes |
|
ExtensionPage = ({
content,
id,
description,
development,
sponsors,
entry,
premium,
author = {
name: "RoamJS",
email: "[email protected]",
},
//@deprecated
loom,
skipDemo,
legacy,
}: {
id: string;
content: MDXRemoteSerializeResult;
description: string;
development: boolean;
entry: string;
sponsors?: ThankYouSponsor[];
premium: {
description: string;
price: number;
usage: "licensed" | "metered";
quantity: number;
} | null;
author?: {
name: string;
email: string;
};
//@deprecated
loom: string;
skipDemo: boolean; // only in video extension
legacy: boolean;
}): React.ReactElement => {
const [randomItems, setRandomItems] = useState([]);
const total = randomItems.length;
const title = idToTitle(id);
const [copied, setCopied] = useState(false);
const [initialLines] = useState("");
const onSave = useCopyCode(setCopied, initialLines);
const mainEntry = legacy ? id : `${id}/main`;
const [pagination, setPagination] = useState(0);
const rowLength = Math.min(4, randomItems.length);
const onClickLeft = useCallback(
() => setPagination((pagination - rowLength + total) % total),
[pagination, setPagination, rowLength]
);
const onClickRight = useCallback(
() => setPagination((pagination + rowLength + total) % total),
[pagination, setPagination, rowLength]
);
useEffect(() => {
axios.get(`${API_URL}/request-path`).then((r) => {
const items = r.data.paths
.filter((p) => p.state !== "PRIVATE" && p.id !== id)
.map((p) => ({
image: `https://roamjs.com/thumbnails/${p.id}.png`,
title: idToTitle(p.id),
description: p.description,
href: `/extensions/${p.id}`,
}))
.map((item) => ({ item, r: Math.random() }))
.sort(({ r: a }, { r: b }) => a - b)
.map(({ item }) => item);
setRandomItems(items);
});
}, [setRandomItems, id]);
return (
<StandardLayout
title={title}
description={description}
img={`https://roamjs.com/thumbnails/${id}.png`}
>
<Breadcrumbs
page={title.toUpperCase()}
links={[
{
text: "EXTENSIONS",
href: "/extensions",
},
]}
/>
{development && <H2>UNDER DEVELOPMENT</H2>}
<div style={{ display: "flex", justifyContent: "space-between" }}>
<H1>{title.toUpperCase()}</H1>
<div style={{ padding: "0 32px", maxWidth: 160 }}>
<span
style={{
display: "inline-block",
verticalAlign: "middle",
height: "100%",
}}
/>
<img
src={`https://roamjs.com/thumbnails/${id}.png`}
style={{
verticalAlign: "middle",
width: "100%",
boxShadow: "0px 3px 14px #00000040",
borderRadius: 8,
}}
/>
</div>
</div>
<Subtitle>{description}</Subtitle>
<hr style={{ marginTop: 28 }} />
<H3>Installation</H3>
{!isSafari && (
<>
<Body>
You could use the Copy Extension button below to individually
install this extension. To install, just paste anywhere in your Roam
graph and click <b>"Yes, I Know What I'm Doing"</b>.
</Body>
<div style={{ marginBottom: 24 }}>
<Button
onClick={() => onSave(mainEntry, entry)}
color="primary"
variant="contained"
>
COPY EXTENSION
</Button>
{copied && <span style={{ marginLeft: 24 }}>COPIED!</span>}
</div>
<H4>Manual Installation</H4>
<Body>
If the extension doesn't work after using the copy extension button
above, try installing manually using the instructions below.
</Body>
</>
)}
<Body>
First create a <b>block</b> with the text{" "}
<code>{"{{[[roam/js]]}}"}</code> on any page in your Roam DB. Then,
create a single child of this block and type three backticks. A code
block should appear. Copy this code and paste it into the child code
block in your graph:
</Body>
<div style={{ marginBottom: 48 }}>
<Prism language="javascript">
{entry ? getCodeContent(id, entry) : getSingleCodeContent(mainEntry)}
</Prism>
</div>
<Body>
Finally, click <b>"Yes, I Know What I'm Doing".</b>
</Body>
<hr style={{ marginTop: 40 }} />
{content.compiledSource ? (
<MDXRemote
{...content}
components={getMdxComponents({
id,
premium,
})}
/>
) : (
"No content"
)}
{legacy && (!development || loom) && !skipDemo && (
<>
<H3>Demo</H3>
{loom ? <Loom id={loom} /> : <DemoVideo src={id} />}
</>
)}
<hr style={{ marginTop: 24 }} />
<H3>Contributors</H3>
<Body>
This extension is brought to you by {author.name}! If you are facing any
issues reach out to{" "}
<ExternalLink href={`mailto:${author.email}`}>
{author.email}
</ExternalLink>{" "}
or click on the chat button on the bottom right.
</Body>
{!premium && (
<>
<Body>
If you get value from using this extension, consider sponsoring{" "}
{author.name} by clicking on the button below!
</Body>
<SponsorDialog id={id} />
{!!sponsors?.length && (
<>
<Body>
A special thanks to those who's contributions also helped make
this extension possible:
</Body>
<ThankYou
sponsors={sponsors}
defaultImgSrc={"/sponsors/default.jpg"}
/>
</>
)}
</>
)}
<SignedOut>
<div style={{ margin: "128px 0" }}>
<div style={{ width: "100%", textAlign: "center" }}>
<RoamJSDigest />
</div>
</div>
</SignedOut>
<H3>Other Extensions</H3>
<div
style={{
margin: "16px 0",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<IconButton
icon={"chevronLeft"}
onClick={onClickLeft}
style={{ height: 48 }}
/>
<CardGrid
items={[
...randomItems.slice(pagination, pagination + rowLength),
...(pagination + rowLength > total
? randomItems.slice(0, pagination + rowLength - total)
: []),
]}
width={3}
/>
<IconButton
icon={"chevronRight"}
onClick={onClickRight}
style={{ height: 48 }}
/>
</div>
</StandardLayout>
);
}
