From c44dc92545a2efeab2e573c5468f617a03dc8054 Mon Sep 17 00:00:00 2001 From: Andrey Medvedev Date: Mon, 21 Aug 2023 10:30:52 +0300 Subject: [PATCH 1/4] DEBUG --- .../components/ModalPage/ModalPage.module.css | 2 +- .../vkui/src/components/ModalRoot/Readme.md | 20 +++++++++++++++++-- packages/vkui/src/styles/constants.css | 6 +++--- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css index 2433bb7bbd..04cb6ce69b 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.module.css +++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css @@ -123,7 +123,7 @@ height: 100%; } -.ModalPage__content-in::after { +.ModalPage__content-wrap::after { content: ''; height: var(--vkui_internal--safe_area_inset_bottom); display: block; diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md index 445b6237ec..2444684871 100644 --- a/packages/vkui/src/components/ModalRoot/Readme.md +++ b/packages/vkui/src/components/ModalRoot/Readme.md @@ -38,6 +38,7 @@ const App = () => { Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение. ```jsx { "props": { "layout": false, "adaptivity": true, "showCustomPanelHeaderAfterProps": true } } +import { AppRootPortal } from '../AppRoot/AppRootPortal'; const MODAL_PAGE_FILTERS = 'filters'; const MODAL_PAGE_COUNTRIES = 'countries'; const MODAL_PAGE_STORY_FEEDBACK = 'story-feedback'; @@ -91,7 +92,7 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => { const App = () => { const { sizeX } = useAdaptivityConditionalRender(); - const [activeModal, setActiveModal] = useState(null); + const [activeModal, setActiveModal] = useState(MODAL_PAGE_FULLSCREEN); const [modalHistory, setModalHistory] = useState([]); const [randomUser] = useState(() => getRandomUser()); const [users] = useState(() => @@ -494,7 +495,22 @@ const App = () => { ); }; -; +
+ + +
+
; ``` ### FAQ diff --git a/packages/vkui/src/styles/constants.css b/packages/vkui/src/styles/constants.css index d80e5d325f..7cba7129b7 100644 --- a/packages/vkui/src/styles/constants.css +++ b/packages/vkui/src/styles/constants.css @@ -24,7 +24,7 @@ /* insets */ --vkui_internal--safe_area_inset_top: 0px; --vkui_internal--safe_area_inset_right: 0px; - --vkui_internal--safe_area_inset_bottom: 0px; + --vkui_internal--safe_area_inset_bottom: 50px; --vkui_internal--safe_area_inset_left: 0px; /* animations */ @@ -84,7 +84,7 @@ :root { --vkui_internal--safe_area_inset_top: constant(safe-area-inset-top); --vkui_internal--safe_area_inset_right: constant(safe-area-inset-right); - --vkui_internal--safe_area_inset_bottom: constant(safe-area-inset-bottom); + --vkui_internal--safe_area_inset_bottom: 50px; --vkui_internal--safe_area_inset_left: constant(safe-area-inset-left); } } @@ -93,7 +93,7 @@ :root { --vkui_internal--safe_area_inset_top: env(safe-area-inset-top); --vkui_internal--safe_area_inset_right: env(safe-area-inset-right); - --vkui_internal--safe_area_inset_bottom: env(safe-area-inset-bottom); + --vkui_internal--safe_area_inset_bottom: 50px; --vkui_internal--safe_area_inset_left: env(safe-area-inset-left); } } From 164154ebd398bbf091c22bd9f26a81e9b885c6a6 Mon Sep 17 00:00:00 2001 From: Andrey Medvedev Date: Tue, 29 Aug 2023 12:25:09 +0300 Subject: [PATCH 2/4] Apply bottom-inset height in ModalPage transition calculation Added new ref specially for bottom-inset to be able to get the inset value by getting height of the element. Use the bottom-inset value in content height during transition calculation to make sure we move modal up not only by the height of the content, but also by the height of the bottom-inset otherwise modal content might be hidden by the bottom-inset. Use this ref for new div element inside content-wrap. Div element we need not only to use in calculation but also to limit content scroll to make sure scroll visually ended before the bottom-inset. --- .../vkui/src/components/ModalPage/ModalPage.module.css | 9 ++++++--- packages/vkui/src/components/ModalPage/ModalPage.tsx | 1 + packages/vkui/src/components/ModalRoot/ModalRoot.tsx | 7 ++++--- .../vkui/src/components/ModalRoot/ModalRootContext.tsx | 1 + packages/vkui/src/components/ModalRoot/types.ts | 1 + 5 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css index 04cb6ce69b..559a102faa 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.module.css +++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css @@ -123,10 +123,13 @@ height: 100%; } -.ModalPage__content-wrap::after { - content: ''; +/* существует для того, чтобы использовать в расчёте translateY + * чтобы поднять ModalCard не только на высоту контента, но и на высоту bottom-inset + * особенно важно для ModalCard c динамической высотой + */ +.ModalPage__bottom-inset { height: var(--vkui_internal--safe_area_inset_bottom); - display: block; + flex-shrink: 0; } /** diff --git a/packages/vkui/src/components/ModalPage/ModalPage.tsx b/packages/vkui/src/components/ModalPage/ModalPage.tsx index 6d7cca5a40..3c716163f6 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.tsx +++ b/packages/vkui/src/components/ModalPage/ModalPage.tsx @@ -142,6 +142,7 @@ export const ModalPage = ({ >
{children}
+
{isCloseButtonShown && } diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx index b8af49ba48..4fda3c8dff 100644 --- a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx +++ b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx @@ -642,9 +642,10 @@ function initModal(modalState: ModalsStateEntry) { } function initPageModal(modalState: ModalsStateEntry) { - const { contentElement } = modalState; - const contentHeight = (contentElement?.firstElementChild as HTMLElement).offsetHeight; - + const { contentElement, bottomInset } = modalState; + const contentElementHeight = (contentElement?.firstElementChild as HTMLElement).offsetHeight; + const bottomInsetHeight = bottomInset?.offsetHeight || 0; + const contentHeight = contentElementHeight + bottomInsetHeight; let prevTranslateY = modalState.translateY; modalState.expandable = diff --git a/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx b/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx index 1d4123b06c..c4ae28a67c 100644 --- a/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx +++ b/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx @@ -42,6 +42,7 @@ export function useModalRegistry(id: string | undefined, type: ModalType) { innerElement: (e) => (elements.innerElement = e), headerElement: (e) => (elements.headerElement = e), contentElement: (e) => (elements.contentElement = e), + bottomInset: (e) => (elements.bottomInset = e), }).current; return { refs }; } diff --git a/packages/vkui/src/components/ModalRoot/types.ts b/packages/vkui/src/components/ModalRoot/types.ts index 6a27ee5016..adf9c9d855 100644 --- a/packages/vkui/src/components/ModalRoot/types.ts +++ b/packages/vkui/src/components/ModalRoot/types.ts @@ -16,6 +16,7 @@ export interface ModalElements { innerElement?: HTMLElement | null; headerElement?: HTMLElement | null; contentElement?: HTMLElement | null; + bottomInset?: HTMLElement | null; } export interface ModalsStateEntry extends ModalElements { From 370baf083f2dfaf2f36158546a3e33d708794460 Mon Sep 17 00:00:00 2001 From: Andrey Medvedev Date: Tue, 29 Aug 2023 12:34:25 +0300 Subject: [PATCH 3/4] Revert "DEBUG" This reverts commit b0a36a0266b2c5cef6dea23e10c6d6a5432cc88a. --- .../vkui/src/components/ModalRoot/Readme.md | 20 ++----------------- packages/vkui/src/styles/constants.css | 6 +++--- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md index 2444684871..445b6237ec 100644 --- a/packages/vkui/src/components/ModalRoot/Readme.md +++ b/packages/vkui/src/components/ModalRoot/Readme.md @@ -38,7 +38,6 @@ const App = () => { Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение. ```jsx { "props": { "layout": false, "adaptivity": true, "showCustomPanelHeaderAfterProps": true } } -import { AppRootPortal } from '../AppRoot/AppRootPortal'; const MODAL_PAGE_FILTERS = 'filters'; const MODAL_PAGE_COUNTRIES = 'countries'; const MODAL_PAGE_STORY_FEEDBACK = 'story-feedback'; @@ -92,7 +91,7 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => { const App = () => { const { sizeX } = useAdaptivityConditionalRender(); - const [activeModal, setActiveModal] = useState(MODAL_PAGE_FULLSCREEN); + const [activeModal, setActiveModal] = useState(null); const [modalHistory, setModalHistory] = useState([]); const [randomUser] = useState(() => getRandomUser()); const [users] = useState(() => @@ -495,22 +494,7 @@ const App = () => { ); }; -
- - -
-
; +; ``` ### FAQ diff --git a/packages/vkui/src/styles/constants.css b/packages/vkui/src/styles/constants.css index 7cba7129b7..d80e5d325f 100644 --- a/packages/vkui/src/styles/constants.css +++ b/packages/vkui/src/styles/constants.css @@ -24,7 +24,7 @@ /* insets */ --vkui_internal--safe_area_inset_top: 0px; --vkui_internal--safe_area_inset_right: 0px; - --vkui_internal--safe_area_inset_bottom: 50px; + --vkui_internal--safe_area_inset_bottom: 0px; --vkui_internal--safe_area_inset_left: 0px; /* animations */ @@ -84,7 +84,7 @@ :root { --vkui_internal--safe_area_inset_top: constant(safe-area-inset-top); --vkui_internal--safe_area_inset_right: constant(safe-area-inset-right); - --vkui_internal--safe_area_inset_bottom: 50px; + --vkui_internal--safe_area_inset_bottom: constant(safe-area-inset-bottom); --vkui_internal--safe_area_inset_left: constant(safe-area-inset-left); } } @@ -93,7 +93,7 @@ :root { --vkui_internal--safe_area_inset_top: env(safe-area-inset-top); --vkui_internal--safe_area_inset_right: env(safe-area-inset-right); - --vkui_internal--safe_area_inset_bottom: 50px; + --vkui_internal--safe_area_inset_bottom: env(safe-area-inset-bottom); --vkui_internal--safe_area_inset_left: env(safe-area-inset-left); } } From 56bd22f221a6b8898a9037f39e91562c3031a4df Mon Sep 17 00:00:00 2001 From: Andrey Medvedev Date: Wed, 30 Aug 2023 11:24:44 +0300 Subject: [PATCH 4/4] Fix typo in the comment --- packages/vkui/src/components/ModalPage/ModalPage.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css index 559a102faa..db79149401 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.module.css +++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css @@ -124,8 +124,8 @@ } /* существует для того, чтобы использовать в расчёте translateY - * чтобы поднять ModalCard не только на высоту контента, но и на высоту bottom-inset - * особенно важно для ModalCard c динамической высотой + * чтобы поднять ModalPage не только на высоту контента, но и на высоту bottom-inset + * особенно важно для ModalPage c динамической высотой */ .ModalPage__bottom-inset { height: var(--vkui_internal--safe_area_inset_bottom);