|
|
|
|
@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
|
|
|
|
|
import TextareaAutosize from 'react-textarea-autosize';
|
|
|
|
|
import { Button, Form, TextArea } from 'semantic-ui-react';
|
|
|
|
|
|
|
|
|
|
import { useClosableForm, useField } from '../../../hooks';
|
|
|
|
|
import { useField } from '../../../hooks';
|
|
|
|
|
|
|
|
|
|
import styles from './NameEdit.module.scss';
|
|
|
|
|
|
|
|
|
|
@ -28,12 +28,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
|
|
|
|
|
const submit = useCallback(() => {
|
|
|
|
|
const cleanValue = value.trim();
|
|
|
|
|
|
|
|
|
|
if (!cleanValue) {
|
|
|
|
|
field.current.ref.current.select();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (cleanValue !== defaultValue) {
|
|
|
|
|
if (cleanValue && cleanValue !== defaultValue) {
|
|
|
|
|
onUpdate(cleanValue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -60,10 +55,9 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
|
|
|
|
|
[submit],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
|
|
|
|
|
close,
|
|
|
|
|
isOpened,
|
|
|
|
|
);
|
|
|
|
|
const handleFieldBlur = useCallback(() => {
|
|
|
|
|
submit();
|
|
|
|
|
}, [submit]);
|
|
|
|
|
|
|
|
|
|
const handleSubmit = useCallback(() => {
|
|
|
|
|
submit();
|
|
|
|
|
@ -94,12 +88,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
|
|
|
|
|
/>
|
|
|
|
|
<div className={styles.controls}>
|
|
|
|
|
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
|
|
|
|
|
<Button
|
|
|
|
|
positive
|
|
|
|
|
content={t('action.save')}
|
|
|
|
|
onMouseOver={handleControlMouseOver}
|
|
|
|
|
onMouseOut={handleControlMouseOut}
|
|
|
|
|
/>
|
|
|
|
|
<Button positive content={t('action.save')} />
|
|
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
);
|
|
|
|
|
|