yetangitu/ya-webadb
1
0
Fork 0
mirror of https://github.com/yume-chan/ya-webadb.git synced 2025-10-03 09:49:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

doc(demo): update compatibility info

Browse source
This commit is contained in:
Simon Chan 2021-01-13 12:19:36 +08:00
parent a92f09a4c0
commit f3a921857a
1 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/demo/src/routes/intro.tsx
View file

@ -1,6 +1,6 @@
import { Callout, DirectionalHint, Link, mergeStyleSets, Text } from '@fluentui/react'; import { Callout, DirectionalHint, Link, mergeStyleSets, Text } from '@fluentui/react';
import { useBoolean } from '@uifabric/react-hooks'; import { useBoolean } from '@uifabric/react-hooks';
import React, { useCallback, useRef } from 'react'; import React, { ReactNode, useCallback, useRef } from 'react';
import { ExternalLink } from '../components'; import { ExternalLink } from '../components';
import { withDisplayName } from '../utils'; import { withDisplayName } from '../utils';
@ -14,10 +14,13 @@ const BoldTextStyles = { root: { fontWeight: '600' } };
interface CopyLinkProps { interface CopyLinkProps {
href: string; href: string;
children?: ReactNode;
} }
const CopyLink = withDisplayName('CopyLink')(({ const CopyLink = withDisplayName('CopyLink')(({
href, href,
children,
}: CopyLinkProps) => { }: CopyLinkProps) => {
const calloutTarget = useRef<HTMLButtonElement | null>(null); const calloutTarget = useRef<HTMLButtonElement | null>(null);
const [calloutVisible, { setTrue: showCallout, setFalse: hideCallout }] = useBoolean(false); const [calloutVisible, { setTrue: showCallout, setFalse: hideCallout }] = useBoolean(false);
@ -30,7 +33,7 @@ const CopyLink = withDisplayName('CopyLink')(({
return ( return (
<> <>
<Link onClick={copyLink}>{href}</Link> <Link onClick={copyLink}>{children || href}</Link>
<Callout <Callout
directionalHint={DirectionalHint.topCenter} directionalHint={DirectionalHint.topCenter}
hidden={!calloutVisible} hidden={!calloutVisible}
@ -107,9 +110,16 @@ export const Intro = withDisplayName('Intro')(() => {
Compatibility: Compatibility:
</Text> </Text>
<Text block> <Text block>
Google Chrome (for Windows and Android), and Microsoft Edge (Chromium-based, for Windows) are tested. Other Chromium-based browsers should also work.<br /> <span>Currently, only Chromium-based browsers support the WebUSB API.</span>
On Windows, the experimental new USB backend is required to function. You can enable it from <CopyLink href="chrome://flags/#new-usb-backend" />.<br /> <span> Most recent versions of browsers are recommended.</span><br />
If you have a Samsung device, and got "Access denied" error, please update your browser to a newer version (Chrome 87 or later).
<span>Google is developing new WebUSB implementations for</span>
<ExternalLink href="https://bugs.chromium.org/p/chromium/issues/detail?id=637404" spaceBefore spaceAfter>Windows</ExternalLink>
<span>and</span>
<ExternalLink href="https://bugs.chromium.org/p/chromium/issues/detail?id=1096743" spaceBefore spaceAfter>macOS</ExternalLink>
<span>respectively.</span>
<span> The Windows one is already enabled by default since Chrome 87.</span><br />
<span>It can be turned on or off manually via <CopyLink href="chrome://flags/#new-usb-backend" /></span>
</Text> </Text>
<Text block styles={BoldTextStyles}> <Text block styles={BoldTextStyles}>