From e9eed37aeefe3f350572581b5c77dd4dad12e030 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sun, 13 Aug 2023 13:18:50 +0300 Subject: [PATCH] Improve dynamic sizes in ConstituentaEdit --- .../frontend/src/components/Common/Loader.tsx | 13 +- .../pages/RSFormPage/EditorConstituenta.tsx | 20 +- .../pages/RSFormPage/EditorRSExpression.tsx | 6 +- .../RSFormPage/elements/ParsingResult.tsx | 3 +- .../elements/ViewSideConstituents.tsx | 188 ++++++++++-------- 5 files changed, 129 insertions(+), 101 deletions(-) diff --git a/rsconcept/frontend/src/components/Common/Loader.tsx b/rsconcept/frontend/src/components/Common/Loader.tsx index 5c6d319e..85338b78 100644 --- a/rsconcept/frontend/src/components/Common/Loader.tsx +++ b/rsconcept/frontend/src/components/Common/Loader.tsx @@ -1,9 +1,18 @@ import { ThreeDots } from 'react-loader-spinner'; -export function Loader() { +interface LoaderProps { + size?: number +} + +export function Loader({size=10}: LoaderProps) { return (
- +
); } diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx index 081a66a6..de5bbe0b 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx @@ -13,6 +13,9 @@ import { getCstTypeLabel, getCstTypificationLabel, mapStatusInfo } from '../../u import EditorRSExpression from './EditorRSExpression'; import ViewSideConstituents from './elements/ViewSideConstituents'; +// Max height of content for left enditor pane +const UNFOLDED_HEIGHT = '59.1rem'; + interface EditorConstituentaProps { activeID?: number onOpenEdit: (cstID: number) => void @@ -109,8 +112,8 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe } return ( -
-
+
+
- +
+ +
); } diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx index dc0e17b7..bb973e91 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx @@ -247,9 +247,9 @@ function EditorRSExpression({
{isActive && !disabled && EditButtons} - { (loading || parseData) && -
- { loading && } + { (isActive || loading || parseData) && +
+ { loading && } { !loading && parseData && - Дерево разбора: + Дерево разбора - {data.astText}

}
) diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx index 3bf5709d..debff828 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx @@ -11,14 +11,18 @@ import ConstituentaTooltip from './ConstituentaTooltip'; import DependencyModePicker from './DependencyModePicker'; import MatchModePicker from './MatchModePicker'; +// Height that should be left to accomodate navigation panel + bottom margin +const LOCAL_NAVIGATION_H = '2.6rem'; + interface ViewSideConstituentsProps { expression: string + baseHeight: string activeID?: number onOpenEdit: (cstID: number) => void } -function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideConstituentsProps) { - const { darkMode } = useConceptTheme(); +function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }: ViewSideConstituentsProps) { + const { darkMode, noNavigation } = useConceptTheme(); const { schema } = useRSForm(); const [filterMatch, setFilterMatch] = useLocalStorage('side-filter-match', CstMatchMode.ALL); @@ -27,7 +31,8 @@ function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideCons const [filteredData, setFilteredData] = useState(schema?.items ?? []); - useEffect(() => { + useEffect( + () => { if (!schema?.items) { setFilteredData([]); return; @@ -67,8 +72,8 @@ function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideCons } }, [onOpenEdit]); - const conditionalRowStyles = useMemo(() => - [ + const conditionalRowStyles = useMemo( + () => [ { when: (cst: IConstituenta) => cst.id === activeID, style: { @@ -77,92 +82,101 @@ function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideCons } ], [activeID, darkMode]); - const columns = useMemo(() => - [ - { - id: 'id', - selector: (cst: IConstituenta) => cst.id, - omit: true + const columns = useMemo( + () => [ + { + id: 'id', + selector: (cst: IConstituenta) => cst.id, + omit: true + }, + { + name: 'ID', + id: 'alias', + cell: (cst: IConstituenta) => { + const info = mapStatusInfo.get(cst.status)!; + return (<> +
+ {cst.alias} +
+ + ); }, - { - name: 'ID', - id: 'alias', - cell: (cst: IConstituenta) => { - const info = mapStatusInfo.get(cst.status)!; - return (<> -
- {cst.alias} -
- - ); - }, - width: '65px', - maxWidth: '65px', - conditionalCellStyles: [ - { - when: (cst: IConstituenta) => cst.id <= 0, - classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] - } - ] - }, - { - name: 'Описание', - id: 'description', - selector: (cst: IConstituenta) => getCstDescription(cst), - minWidth: '350px', - wrap: true, - conditionalCellStyles: [ - { - when: (cst: IConstituenta) => cst.id <= 0, - classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] - } - ] - }, - { - name: 'Выражение', - id: 'expression', - selector: (cst: IConstituenta) => cst.definition?.formal ?? '', - minWidth: '200px', - hide: 1600, - grow: 2, - wrap: true, - conditionalCellStyles: [ - { - when: (cst: IConstituenta) => cst.id <= 0, - classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] - } - ] - } - ], [] - ); - - return ( -
-
-
- - { setFilterText(event.target.value); }} - /> - -
-
+ width: '65px', + maxWidth: '65px', + conditionalCellStyles: [ + { + when: (cst: IConstituenta) => cst.id <= 0, + classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] + } + ] + }, + { + name: 'Описание', + id: 'description', + selector: (cst: IConstituenta) => getCstDescription(cst), + minWidth: '350px', + wrap: true, + conditionalCellStyles: [ + { + when: (cst: IConstituenta) => cst.id <= 0, + classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] + } + ] + }, + { + name: 'Выражение', + id: 'expression', + selector: (cst: IConstituenta) => cst.definition?.formal ?? '', + minWidth: '200px', + hide: 1600, + grow: 2, + wrap: true, + conditionalCellStyles: [ + { + when: (cst: IConstituenta) => cst.id <= 0, + classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]'] + } + ] + } + ], []); + + const maxHeight = useMemo( + () => { + const siblingHeight = `${baseHeight} - ${LOCAL_NAVIGATION_H}` + return (noNavigation ? + `calc(min(100vh - 5.2rem, ${siblingHeight}))` + : `calc(min(100vh - 8.7rem, ${siblingHeight}))`); + }, [noNavigation, baseHeight]); + + return (<> +
+ + setFilterText(event.target.value)} + /> + +
+
-

Список конституент пуст

-

Измените параметры фильтра

- } + conditionalRowStyles={conditionalRowStyles} + noDataComponent={ + +

Список конституент пуст

+

Измените параметры фильтра

+ + } striped highlightOnHover @@ -173,7 +187,7 @@ function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideCons dense />
-); + ); } export default ViewSideConstituents;