53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { useMessages } from 'components/hooks';
|
|
import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
|
|
import styles from './UrlAddForm.module.css';
|
|
|
|
export interface UrlAddFormProps {
|
|
defaultValue?: string;
|
|
onAdd?: (url: string) => void;
|
|
}
|
|
|
|
export function UrlAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
|
|
const [url, setUrl] = useState(defaultValue);
|
|
const { formatMessage, labels } = useMessages();
|
|
|
|
const handleSave = () => {
|
|
onAdd(url);
|
|
setUrl('');
|
|
};
|
|
|
|
const handleChange = e => {
|
|
setUrl(e.target.value);
|
|
};
|
|
|
|
const handleKeyDown = e => {
|
|
if (e.key === 'Enter') {
|
|
e.stopPropagation();
|
|
handleSave();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form>
|
|
<FormRow label={formatMessage(labels.url)}>
|
|
<Flexbox gap={10}>
|
|
<TextField
|
|
className={styles.input}
|
|
value={url}
|
|
onChange={handleChange}
|
|
autoFocus={true}
|
|
autoComplete="off"
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<Button variant="primary" onClick={handleSave}>
|
|
{formatMessage(labels.add)}
|
|
</Button>
|
|
</Flexbox>
|
|
</FormRow>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
export default UrlAddForm;
|