Avoid layout shift due to display of latency result

This commit is contained in:
Haishan 2022-06-07 18:27:31 +08:00
parent 78f3434cb5
commit 3c991ad5d9
4 changed files with 10 additions and 9 deletions

View file

@ -12,7 +12,8 @@
"start": "vite", "start": "vite",
"build": "vite build", "build": "vite build",
"serve": "vite preview", "serve": "vite preview",
"pretty": "prettier --single-quote --write 'src/**/*.{js,scss,ts,tsx,md}'" "pretty": "prettier --single-quote --write 'src/**/*.{js,scss,ts,tsx,md}'",
"fmt": "pnpm lint && pnpm pretty"
}, },
"browserslist": [ "browserslist": [
">0.25%", ">0.25%",

View file

@ -2,6 +2,8 @@ import cx from 'clsx';
import * as React from 'react'; import * as React from 'react';
import { keyCodes } from 'src/misc/keycode'; import { keyCodes } from 'src/misc/keycode';
import { State } from '$src/store/types';
import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies'; import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
import { connect } from '../StateProvider'; import { connect } from '../StateProvider';
import s0 from './Proxy.module.scss'; import s0 from './Proxy.module.scss';
@ -112,9 +114,7 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
}, [name, onClick, isSelectable]); }, [name, onClick, isSelectable]);
const handleKeyDown = React.useCallback( const handleKeyDown = React.useCallback(
(e: React.KeyboardEvent) => { (e: React.KeyboardEvent) => {
if (e.keyCode === keyCodes.Enter) { if (e.key === 'Enter') doSelect();
doSelect();
}
}, },
[doSelect] [doSelect]
); );
@ -139,13 +139,13 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
<span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}> <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
{formatProxyType(proxy.type)} {formatProxyType(proxy.type)}
</span> </span>
{latency && latency.number ? <ProxyLatency number={latency.number} color={color} /> : null} <ProxyLatency number={latency?.number} color={color} />
</div> </div>
</div> </div>
); );
} }
const mapState = (s: any, { name }) => { const mapState = (s: State, { name }) => {
const proxies = getProxies(s); const proxies = getProxies(s);
const delay = getDelay(s); const delay = getDelay(s);
return { return {

View file

@ -3,6 +3,6 @@
color: #eee; color: #eee;
font-size: 0.6em; font-size: 0.6em;
@media (--breakpoint-not-small) { @media (--breakpoint-not-small) {
font-size: 1em; font-size: 0.85em;
} }
} }

View file

@ -3,14 +3,14 @@ import * as React from 'react';
import s0 from './ProxyLatency.module.scss'; import s0 from './ProxyLatency.module.scss';
type ProxyLatencyProps = { type ProxyLatencyProps = {
number: number; number?: number;
color: string; color: string;
}; };
export function ProxyLatency({ number, color }: ProxyLatencyProps) { export function ProxyLatency({ number, color }: ProxyLatencyProps) {
return ( return (
<span className={s0.proxyLatency} style={{ color }}> <span className={s0.proxyLatency} style={{ color }}>
<span>{number} ms</span> {typeof number === 'number' && number !== 0 ? number + ' ms' : ' '}
</span> </span>
); );
} }