UI fixe for rslist scroll

This commit is contained in:
IRBorisov 2023-12-01 02:57:19 +03:00
parent 840fbbb3f6
commit b118c64b9b
2 changed files with 14 additions and 7 deletions

View File

@ -26,7 +26,7 @@ interface EditorRSListProps {
} }
function EditorRSList({ onOpenEdit, onCreateCst, onDeleteCst, onTemplates }: EditorRSListProps) { function EditorRSList({ onOpenEdit, onCreateCst, onDeleteCst, onTemplates }: EditorRSListProps) {
const { colors, mainHeight } = useConceptTheme(); const { colors, noNavigation } = useConceptTheme();
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const { schema, editorMode: isEditable, cstMoveTo, resetAliases } = useRSForm(); const { schema, editorMode: isEditable, cstMoveTo, resetAliases } = useRSForm();
const [selected, setSelected] = useState<number[]>([]); const [selected, setSelected] = useState<number[]>([]);
@ -289,15 +289,21 @@ function EditorRSList({ onOpenEdit, onCreateCst, onDeleteCst, onTemplates }: Edi
}) })
], [colors]); ], [colors]);
const tableHeight = useMemo(
() => {
return !noNavigation ?
'calc(100vh - 7.2rem - 4px)'
: 'calc(100vh - 4.4rem - 4px)';
}, [noNavigation]);
return ( return (
<div tabIndex={-1} <div tabIndex={-1}
className='w-full outline-none' className='w-full outline-none'
style={{minHeight: mainHeight}}
onKeyDown={handleTableKey} onKeyDown={handleTableKey}
> >
<div className='sticky top-0 flex justify-start w-full gap-1 px-2 border-b py-1 items-center select-none clr-app'> <div className='sticky top-0 flex items-center justify-start w-full gap-1 px-2 py-1 border-b select-none clr-app'>
<div className='min-w-[9rem] max-w-[9rem] whitespace-nowrap small-caps'> <div className='min-w-[9rem] max-w-[9rem] whitespace-nowrap small-caps'>
Выбор {selected.length} из {schema?.stats?.count_all ?? 0} {`Выбор ${selected.length} из ${schema?.stats?.count_all ?? 0}`}
</div> </div>
<RSListToolbar <RSListToolbar
selectedCount={selected.length} selectedCount={selected.length}
@ -312,11 +318,11 @@ function EditorRSList({ onOpenEdit, onCreateCst, onDeleteCst, onTemplates }: Edi
/> />
</div> </div>
<div className='w-full h-full text-sm'> <div className='w-full h-full overflow-auto text-sm' style={{maxHeight: tableHeight}}>
<DataTable dense noFooter <DataTable dense noFooter
data={schema?.items ?? []} data={schema?.items ?? []}
columns={columns} columns={columns}
headPosition='2.3rem' headPosition='0rem'
onRowDoubleClicked={handleRowDoubleClicked} onRowDoubleClicked={handleRowDoubleClicked}
onRowClicked={handleRowClicked} onRowClicked={handleRowClicked}

View File

@ -115,8 +115,9 @@ function RSTabs() {
setActiveTab(activeTab); setActiveTab(activeTab);
setNoFooter(activeTab === RSTabID.CST_EDIT || activeTab === RSTabID.CST_LIST); setNoFooter(activeTab === RSTabID.CST_EDIT || activeTab === RSTabID.CST_LIST);
setActiveID(Number(cstQuery) ?? ((schema && schema?.items.length > 0) ? schema.items[0].id : undefined)); setActiveID(Number(cstQuery) ?? ((schema && schema?.items.length > 0) ? schema.items[0].id : undefined));
setIsModified(false);
return () => setNoFooter(false); return () => setNoFooter(false);
}, [search, setActiveTab, setActiveID, schema, setNoFooter]); }, [search, setActiveTab, setActiveID, schema, setNoFooter, setIsModified]);
function onSelectTab(index: number) { function onSelectTab(index: number) {
navigateTab(index, activeID); navigateTab(index, activeID);