105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
'use client';
|
||
|
||
import clsx from 'clsx';
|
||
import { useMemo, useState } from 'react';
|
||
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
||
|
||
import BadgeHelp from '@/components/info/BadgeHelp';
|
||
import Modal from '@/components/ui/Modal';
|
||
import Overlay from '@/components/ui/Overlay';
|
||
import TabLabel from '@/components/ui/TabLabel';
|
||
import { ReferenceType } from '@/models/language';
|
||
import { HelpTopic } from '@/models/miscellaneous';
|
||
import { IRSForm } from '@/models/rsform';
|
||
import { labelReferenceType } from '@/utils/labels';
|
||
|
||
import EntityTab from './EntityTab';
|
||
import SyntacticTab from './SyntacticTab';
|
||
|
||
export interface IReferenceInputState {
|
||
type: ReferenceType;
|
||
refRaw?: string;
|
||
text?: string;
|
||
mainRefs: string[];
|
||
basePosition: number;
|
||
}
|
||
|
||
interface DlgEditReferenceProps {
|
||
hideWindow: () => void;
|
||
schema: IRSForm;
|
||
initial: IReferenceInputState;
|
||
onSave: (newRef: string) => void;
|
||
}
|
||
|
||
export enum TabID {
|
||
ENTITY = 0,
|
||
SYNTACTIC = 1
|
||
}
|
||
|
||
function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditReferenceProps) {
|
||
const [activeTab, setActiveTab] = useState(initial.type === ReferenceType.ENTITY ? TabID.ENTITY : TabID.SYNTACTIC);
|
||
|
||
const [reference, setReference] = useState('');
|
||
const [isValid, setIsValid] = useState(false);
|
||
|
||
const handleSubmit = () => onSave(reference);
|
||
|
||
const entityPanel = useMemo(
|
||
() => (
|
||
<TabPanel>
|
||
<EntityTab initial={initial} schema={schema} setReference={setReference} setIsValid={setIsValid} />
|
||
</TabPanel>
|
||
),
|
||
[initial, schema]
|
||
);
|
||
|
||
const syntacticPanel = useMemo(
|
||
() => (
|
||
<TabPanel>
|
||
<SyntacticTab initial={initial} setReference={setReference} setIsValid={setIsValid} />
|
||
</TabPanel>
|
||
),
|
||
[initial]
|
||
);
|
||
|
||
return (
|
||
<Modal
|
||
header='Редактирование ссылки'
|
||
submitText='Сохранить ссылку'
|
||
hideWindow={hideWindow}
|
||
canSubmit={isValid}
|
||
onSubmit={handleSubmit}
|
||
className='w-[40rem] px-6 min-h-[34rem]'
|
||
>
|
||
<Overlay position='top-0 right-[4rem]'>
|
||
<BadgeHelp topic={HelpTopic.TERM_CONTROL} className='max-w-[35rem]' offset={14} />
|
||
</Overlay>
|
||
|
||
<Tabs
|
||
selectedTabClassName='clr-selected'
|
||
className='flex flex-col'
|
||
selectedIndex={activeTab}
|
||
onSelect={setActiveTab}
|
||
>
|
||
<TabList className={clsx('mb-3 self-center', 'flex', 'border divide-x rounded-none')}>
|
||
<TabLabel
|
||
title='Отсылка на термин в заданной словоформе'
|
||
label={labelReferenceType(ReferenceType.ENTITY)}
|
||
className='w-[12rem]'
|
||
/>
|
||
<TabLabel
|
||
title='Установление синтаксической связи с отсылкой на термин'
|
||
label={labelReferenceType(ReferenceType.SYNTACTIC)}
|
||
className='w-[12rem]'
|
||
/>
|
||
</TabList>
|
||
|
||
{entityPanel}
|
||
{syntacticPanel}
|
||
</Tabs>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
export default DlgEditReference;
|