50 lines
1.3 KiB
TypeScript
Executable File
50 lines
1.3 KiB
TypeScript
Executable File
import React, {useState} from 'react';
|
|
import {useTrans} from '@common/i18n/use-trans';
|
|
import {useFormContext} from 'react-hook-form';
|
|
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
|
|
import clsx from 'clsx';
|
|
import {EditIcon} from '@common/icons/material/Edit';
|
|
import {CreateCustomPagePayload} from '@common/admin/custom-pages/requests/use-create-custom-page';
|
|
|
|
export function ArticleEditorTitle() {
|
|
const [editingTitle, setEditingTitle] = useState(false);
|
|
const {trans} = useTrans();
|
|
const form = useFormContext<CreateCustomPagePayload>();
|
|
const watchedTitle = form.watch('title');
|
|
|
|
const titlePlaceholder = trans({message: 'Title'});
|
|
|
|
if (editingTitle) {
|
|
return (
|
|
<FormTextField
|
|
placeholder={titlePlaceholder}
|
|
autoFocus
|
|
className="mb-30"
|
|
onBlur={() => {
|
|
setEditingTitle(false);
|
|
}}
|
|
name="title"
|
|
required
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<h1
|
|
tabIndex={0}
|
|
onClick={() => {
|
|
setEditingTitle(true);
|
|
}}
|
|
onFocus={() => {
|
|
setEditingTitle(true);
|
|
}}
|
|
className={clsx(
|
|
'hover:bg-primary/focus rounded cursor-pointer',
|
|
!watchedTitle && 'text-muted'
|
|
)}
|
|
>
|
|
{watchedTitle || titlePlaceholder}
|
|
<EditIcon className="icon-sm mx-8 mt-8 align-top text-muted" />
|
|
</h1>
|
|
);
|
|
}
|