76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
 
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import { Box, Button, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
|
||
|
|
|
||
|
|
type TapToSendBarProps = {
|
||
|
|
previewUrl?: string;
|
||
|
|
label: string;
|
||
|
|
onSend: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* [Gitea #147] Fat-finger guard for touch screens: the first tap on a sticker
|
||
|
|
* or GIF parks it here with a preview; "Send" (or a second tap on the same
|
||
|
|
* item) sends it.
|
||
|
|
*/
|
||
|
|
export function TapToSendBar({ previewUrl, label, onSend, onCancel }: TapToSendBarProps) {
|
||
|
|
const liveRef = useRef<HTMLDivElement>(null);
|
||
|
|
useEffect(() => {
|
||
|
|
liveRef.current?.focus?.();
|
||
|
|
}, [label]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
ref={liveRef}
|
||
|
|
role="status"
|
||
|
|
aria-live="polite"
|
||
|
|
tabIndex={-1}
|
||
|
|
shrink="No"
|
||
|
|
alignItems="Center"
|
||
|
|
gap="300"
|
||
|
|
style={{
|
||
|
|
margin: `0 ${config.space.S300} ${config.space.S200}`,
|
||
|
|
padding: config.space.S200,
|
||
|
|
borderRadius: config.radii.R400,
|
||
|
|
backgroundColor: color.SurfaceVariant.Container,
|
||
|
|
color: color.SurfaceVariant.OnContainer,
|
||
|
|
outline: 'none',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{previewUrl && (
|
||
|
|
<img
|
||
|
|
src={previewUrl}
|
||
|
|
alt=""
|
||
|
|
style={{
|
||
|
|
width: toRem(40),
|
||
|
|
height: toRem(40),
|
||
|
|
objectFit: 'contain',
|
||
|
|
borderRadius: config.radii.R300,
|
||
|
|
flexShrink: 0,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
|
||
|
|
<Text size="T200" priority="300">
|
||
|
|
Tap again to send
|
||
|
|
</Text>
|
||
|
|
<Text size="T300" truncate>
|
||
|
|
{label}
|
||
|
|
</Text>
|
||
|
|
</Box>
|
||
|
|
<Button size="300" variant="Primary" fill="Solid" radii="300" onClick={onSend}>
|
||
|
|
<Text size="B300">Send</Text>
|
||
|
|
</Button>
|
||
|
|
<IconButton
|
||
|
|
size="300"
|
||
|
|
variant="SurfaceVariant"
|
||
|
|
radii="300"
|
||
|
|
onClick={onCancel}
|
||
|
|
aria-label="Cancel"
|
||
|
|
>
|
||
|
|
<Icon size="100" src={Icons.Cross} />
|
||
|
|
</IconButton>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|