Small UI fixes

This commit is contained in:
IRBorisov 2023-11-07 10:05:50 +03:00
parent 3e5dda2db2
commit dc0e527a0b
3 changed files with 15 additions and 12 deletions

View File

@ -90,7 +90,7 @@ function ConstituentaPicker({
className='overflow-y-auto text-sm border select-none' className='overflow-y-auto text-sm border select-none'
style={{ maxHeight: size, minHeight: size }} style={{ maxHeight: size, minHeight: size }}
> >
<DataTable dense noHeader <DataTable dense noHeader noFooter
data={filteredData} data={filteredData}
columns={columns} columns={columns}
conditionalRowStyles={conditionalRowStyles} conditionalRowStyles={conditionalRowStyles}

View File

@ -128,13 +128,13 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
return ( return (
<div className='flex flex-col gap-3'> <div className='flex flex-col gap-3'>
<div className='overflow-y-auto text-sm border select-none max-h-[7.5rem] min-h-[7.5rem]'> <div className='overflow-y-auto text-sm border select-none max-h-[5.8rem] min-h-[5.8rem]'>
<DataTable dense <DataTable dense noFooter
data={state.arguments} data={state.arguments}
columns={columns} columns={columns}
conditionalRowStyles={conditionalRowStyles} conditionalRowStyles={conditionalRowStyles}
noDataComponent={ noDataComponent={
<span className='flex flex-col justify-center p-2 text-center min-h-[5rem]'> <span className='flex flex-col justify-center p-2 text-center min-h-[3.6rem]'>
<p>Аргументы отсутствуют</p> <p>Аргументы отсутствуют</p>
</span> </span>
} }
@ -142,7 +142,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
/> />
</div> </div>
<div className='flex items-center justify-center w-full gap-2 select-none'> <div className='flex items-center justify-center w-full gap-2 py-1 select-none'>
<span title='Выберите аргумент из списка сверху и значение из списка снизу' <span title='Выберите аргумент из списка сверху и значение из списка снизу'
className='font-semibold text-center' className='font-semibold text-center'
> >
@ -171,10 +171,11 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
data={schema?.items} data={schema?.items}
onSelectValue={handleSelectConstituenta} onSelectValue={handleSelectConstituenta}
prefixID={prefixes.cst_modal_list} prefixID={prefixes.cst_modal_list}
rows={5} rows={7}
/> />
<RSInput id='result' <RSInput id='result'
dimensions='w-full mt-[0.3rem]'
placeholder='Итоговое определение' placeholder='Итоговое определение'
height='4.8rem' height='4.8rem'
value={state.definition} value={state.definition}

View File

@ -1,4 +1,4 @@
import { useEffect, useLayoutEffect, useState } from 'react'; import { useLayoutEffect, useState } from 'react';
import { TabList, TabPanel, Tabs } from 'react-tabs'; import { TabList, TabPanel, Tabs } from 'react-tabs';
import ConceptTab from '../../components/Common/ConceptTab'; import ConceptTab from '../../components/Common/ConceptTab';
@ -27,7 +27,7 @@ export enum TabID {
} }
function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituentaTemplateProps) { function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituentaTemplateProps) {
const [validated, setValidated] = useState(false); const [ validated, setValidated ] = useState(false);
const [ template, updateTemplate ] = usePartialUpdate<ITemplateState>({}); const [ template, updateTemplate ] = usePartialUpdate<ITemplateState>({});
const [ substitutes, updateSubstitutes ] = usePartialUpdate<IArgumentsState>({ const [ substitutes, updateSubstitutes ] = usePartialUpdate<IArgumentsState>({
definition: '', definition: '',
@ -53,7 +53,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituen
updateConstituenta({ alias: createAliasFor(constituenta.cst_type, schema) }); updateConstituenta({ alias: createAliasFor(constituenta.cst_type, schema) });
}, [constituenta.cst_type, updateConstituenta, schema]); }, [constituenta.cst_type, updateConstituenta, schema]);
useEffect( useLayoutEffect(
() => { () => {
setValidated(validateCstAlias(constituenta.alias, constituenta.cst_type, schema)); setValidated(validateCstAlias(constituenta.alias, constituenta.cst_type, schema));
}, [constituenta.alias, constituenta.cst_type, schema]); }, [constituenta.alias, constituenta.cst_type, schema]);
@ -119,6 +119,8 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituen
selectedIndex={activeTab} selectedIndex={activeTab}
onSelect={setActiveTab} onSelect={setActiveTab}
defaultFocus defaultFocus
forceRenderTabPanel
selectedTabClassName='clr-selected' selectedTabClassName='clr-selected'
className='flex flex-col items-center' className='flex flex-col items-center'
> >
@ -148,14 +150,14 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituen
</div> </div>
<div className='w-full'> <div className='w-full'>
<TabPanel> <TabPanel style={{ display: activeTab === TabID.TEMPLATE ? '': 'none' }}>
<TemplateTab <TemplateTab
state={template} state={template}
partialUpdate={updateTemplate} partialUpdate={updateTemplate}
/> />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel style={{ display: activeTab === TabID.ARGUMENTS ? '': 'none' }}>
<ArgumentsTab <ArgumentsTab
schema={schema} schema={schema}
state={substitutes} state={substitutes}
@ -163,7 +165,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate }: DlgConstituen
/> />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel style={{ display: activeTab === TabID.CONSTITUENTA ? '': 'none' }}>
<ConstituentaTab <ConstituentaTab
state={constituenta} state={constituenta}
partialUpdate={updateConstituenta} partialUpdate={updateConstituenta}