Further UI fixes for tab panels

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx

@@ -9,6 +9,7 @@ import RSInput from '@/components/RSInput';
 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
@@ -144,7 +145,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
   );
 
   return (
-    <>
+    <AnimateFade>
       <DataTable
         dense
         noFooter
@@ -220,7 +221,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
         height='5.1rem'
         value={state.definition}
       />
-    </>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx

@@ -8,6 +8,7 @@ import BadgeHelp from '@/components/man/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
@@ -101,23 +102,35 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
   }, [substitutes.arguments, template.prototype, updateConstituenta, updateSubstitutes]);
 
   const templatePanel = useMemo(
-    () => <TemplateTab state={template} partialUpdate={updateTemplate} />,
+    () => (
+      <TabPanel>
+        <TemplateTab state={template} partialUpdate={updateTemplate} />
+      </TabPanel>
+    ),
     [template, updateTemplate]
   );
 
   const argumentsPanel = useMemo(
-    () => <ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />,
+    () => (
+      <TabPanel>
+        <ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />
+      </TabPanel>
+    ),
     [schema, substitutes, updateSubstitutes]
   );
 
   const editorPanel = useMemo(
     () => (
-      <FormCreateCst
+      <TabPanel>
-        state={constituenta}
+        <AnimateFade className='cc-column'>
-        partialUpdate={updateConstituenta}
+          <FormCreateCst
-        schema={schema}
+            state={constituenta}
-        setValidated={setValidated}
+            partialUpdate={updateConstituenta}
-      />
+            schema={schema}
+            setValidated={setValidated}
+          />
+        </AnimateFade>
+      </TabPanel>
     ),
     [constituenta, updateConstituenta, schema]
   );
@@ -135,7 +148,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
         <BadgeHelp topic={HelpTopic.RSTEMPLATES} className='max-w-[40rem]' offset={12} />
       </Overlay>
       <Tabs
-        forceRenderTabPanel
         selectedTabClassName='clr-selected'
         className='flex flex-col'
         selectedIndex={activeTab}
@@ -147,13 +159,9 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
           <TabLabel label='Конституента' title='Редактирование атрибутов конституенты' className='w-[8rem]' />
         </TabList>
 
-        <TabPanel style={{ display: activeTab === TabID.TEMPLATE ? '' : 'none' }}>{templatePanel}</TabPanel>
+        {templatePanel}
-
+        {argumentsPanel}
-        <TabPanel style={{ display: activeTab === TabID.ARGUMENTS ? '' : 'none' }}>{argumentsPanel}</TabPanel>
+        {editorPanel}
-
-        <TabPanel className='cc-column' style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
-          {editorPanel}
-        </TabPanel>
       </Tabs>
     </Modal>
   );

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx

@@ -6,6 +6,7 @@ import RSInput from '@/components/RSInput';
 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
@@ -84,8 +85,8 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
   }, [state.filterCategory, category]);
 
   return (
-    <>
+    <AnimateFade>
-      <div className='flex divide-x border-x border-t rounded-t-md'>
+      <div className='flex border-t divide-x border-x rounded-t-md'>
         <SelectSingle
           noBorder
           placeholder='Выберите категорию'
@@ -139,7 +140,7 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
         height='5.1rem'
         value={state.prototype?.definition_formal}
       />
-    </>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import BadgeHelp from '@/components/man/BadgeHelp';
@@ -44,6 +44,24 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
 
   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='Редактирование ссылки'
@@ -76,13 +94,8 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
           />
         </TabList>
 
-        <TabPanel>
+        {entityPanel}
-          <EntityTab initial={initial} schema={schema} setReference={setReference} setIsValid={setIsValid} />
+        {syntacticPanel}
-        </TabPanel>
-
-        <TabPanel>
-          <SyntacticTab initial={initial} setReference={setReference} setIsValid={setIsValid} />
-        </TabPanel>
       </Tabs>
     </Modal>
   );

rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx

@@ -4,9 +4,9 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 
 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import SelectGrammeme from '@/components/select/SelectGrammeme';
-import FlexColumn from '@/components/ui/FlexColumn';
 import Label from '@/components/ui/Label';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
 import { CstMatchMode } from '@/models/miscellaneous';
@@ -59,7 +59,7 @@ function EntityTab({ initial, schema, setIsValid, setReference }: EntityTabProps
   }
 
   return (
-    <FlexColumn>
+    <AnimateFade className='cc-column'>
       <ConstituentaPicker
         id='dlg_reference_entity_picker'
         initialFilter={initial.text}
@@ -108,7 +108,7 @@ function EntityTab({ initial, schema, setIsValid, setReference }: EntityTabProps
           setValue={setSelectedGrams}
         />
       </div>
-    </FlexColumn>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseSyntacticReference } from '@/models/languageAPI';
 
@@ -43,7 +44,7 @@ function SyntacticTab({ initial, setIsValid, setReference }: SyntacticTabProps)
   }, [nominal, offset, setIsValid, setReference]);
 
   return (
-    <div className='flex flex-col gap-2'>
+    <AnimateFade className='flex flex-col gap-2'>
       <TextInput
         id='dlg_reference_offset'
         type='number'
@@ -69,7 +70,7 @@ function SyntacticTab({ initial, setIsValid, setReference }: SyntacticTabProps)
         value={nominal}
         onChange={event => setNominal(event.target.value)}
       />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx

@@ -58,23 +58,39 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
     setSubstitutions([]);
   }, [source.schema]);
 
-  const schemaPanel = useMemo(() => <SchemaTab selected={donorID} setSelected={setDonorID} />, [donorID]);
+  const schemaPanel = useMemo(
+    () => (
+      <TabPanel>
+        <SchemaTab selected={donorID} setSelected={setDonorID} />
+      </TabPanel>
+    ),
+    [donorID]
+  );
   const itemsPanel = useMemo(
     () => (
-      <ConstituentsTab schema={source.schema} loading={source.loading} selected={selected} setSelected={setSelected} />
+      <TabPanel>
+        <ConstituentsTab
+          schema={source.schema}
+          loading={source.loading}
+          selected={selected}
+          setSelected={setSelected}
+        />
+      </TabPanel>
     ),
     [source.schema, source.loading, selected]
   );
   const substitutesPanel = useMemo(
     () => (
-      <SubstitutionsTab
+      <TabPanel>
-        receiver={receiver}
+        <SubstitutionsTab
-        source={source.schema}
+          receiver={receiver}
-        selected={selected}
+          source={source.schema}
-        loading={source.loading}
+          selected={selected}
-        substitutions={substitutions}
+          loading={source.loading}
-        setSubstitutions={setSubstitutions}
+          substitutions={substitutions}
-      />
+          setSubstitutions={setSubstitutions}
+        />
+      </TabPanel>
     ),
     [source.schema, source.loading, receiver, selected, substitutions]
   );
@@ -89,7 +105,6 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
       onSubmit={handleSubmit}
     >
       <Tabs
-        forceRenderTabPanel
         selectedTabClassName='clr-selected'
         className='flex flex-col'
         selectedIndex={activeTab}
@@ -101,9 +116,9 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
           <TabLabel label='Отождествления' title='Таблица отождествлений' className='w-[8rem]' />
         </TabList>
 
-        <TabPanel style={{ display: activeTab === TabID.SCHEMA ? '' : 'none' }}>{schemaPanel}</TabPanel>
+        {schemaPanel}
-        <TabPanel style={{ display: activeTab === TabID.SELECTIONS ? '' : 'none' }}>{itemsPanel}</TabPanel>
+        {itemsPanel}
-        <TabPanel style={{ display: activeTab === TabID.SUBSTITUTIONS ? '' : 'none' }}>{substitutesPanel}</TabPanel>
+        {substitutesPanel}
       </Tabs>
     </Modal>
   );

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 
 import SchemaPicker from '@/components/select/SchemaPicker';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';
 
@@ -17,7 +18,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
   const selectedInfo = useMemo(() => library.items.find(item => item.id === selected), [selected, library.items]);
 
   return (
-    <div className='flex flex-col'>
+    <AnimateFade className='flex flex-col'>
       <div className='flex items-center gap-6'>
         <span className='select-none'>Выбрана</span>
         <TextInput
@@ -36,7 +37,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
         value={selected}
         onSelectValue={setSelected}
       />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -166,28 +166,49 @@ function RSTabs() {
 
   const cardPanel = useMemo(
     () => (
-      <EditorRSForm
+      <TabPanel>
-        isModified={isModified} // prettier: split lines
+        <EditorRSForm
-        setIsModified={setIsModified}
+          isModified={isModified} // prettier: split lines
-        onDestroy={onDestroySchema}
+          setIsModified={setIsModified}
-      />
+          onDestroy={onDestroySchema}
+        />
+      </TabPanel>
     ),
     [isModified, onDestroySchema]
   );
 
-  const listPanel = useMemo(() => <EditorRSList onOpenEdit={onOpenCst} />, [onOpenCst]);
+  const listPanel = useMemo(
+    () => (
+      <TabPanel>
+        <EditorRSList onOpenEdit={onOpenCst} />
+      </TabPanel>
+    ),
+    [onOpenCst]
+  );
+
   const editorPanel = useMemo(
     () => (
-      <EditorConstituenta
+      <TabPanel>
-        isModified={isModified}
+        <EditorConstituenta
-        setIsModified={setIsModified}
+          isModified={isModified}
-        activeCst={activeCst}
+          setIsModified={setIsModified}
-        onOpenEdit={onOpenCst}
+          activeCst={activeCst}
-      />
+          onOpenEdit={onOpenCst}
+        />
+      </TabPanel>
     ),
     [isModified, setIsModified, activeCst, onOpenCst]
   );
 
+  const graphPanel = useMemo(
+    () => (
+      <TabPanel>
+        <EditorTermGraph onOpenEdit={onOpenCst} />
+      </TabPanel>
+    ),
+    [onOpenCst]
+  );
+
   return (
     <RSEditState
       selected={selected}
@@ -221,15 +242,10 @@ function RSTabs() {
           </TabList>
 
           <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
-            <TabPanel>{cardPanel}</TabPanel>
+            {cardPanel}
-
+            {listPanel}
-            <TabPanel>{listPanel}</TabPanel>
+            {editorPanel}
-
+            {graphPanel}
-            <TabPanel>{editorPanel}</TabPanel>
-
-            <TabPanel>
-              <EditorTermGraph onOpenEdit={onOpenCst} />
-            </TabPanel>
           </AnimateFade>
         </Tabs>
       ) : null}

rsconcept/frontend/src/styling/overrides.css

@@ -32,7 +32,3 @@
     color: var(--cd-fg-60);
   }
 }
-
-.rdt_TableCell {
-  font-size: 0.875rem;
-}