fix: more

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
VKCOM · Dec 20, 2023 · 69f6101 · 69f6101
1 parent 16c02a6
commit 69f6101
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 38 deletions.
diff --git a/packages/vkui/src/components/ModalSheet/ModalSheet.module.css b/packages/vkui/src/components/ModalSheet/ModalSheet.module.css
@@ -31,16 +31,10 @@
   scroll-snap-type: none;
 }
 
-.ModalSheet--closes {
+.ModalSheet--closing {
   pointer-events: none;
 }
 
-/* stylelint-disable-next-line selector-max-universal, @project-tools/stylelint-atomic */
-.ModalSheet__container > * {
-  scroll-snap-align: start;
-  overflow-anchor: none;
-}
-
 /**
  * Якорь для прилипания скролла к концу модалки.
  */
@@ -66,6 +60,8 @@
   transition: border-radius 0.1s var(--vkui--animation_easing_platform);
   inline-size: 100%;
   scroll-snap-stop: always;
+  scroll-snap-align: start;
+  overflow-anchor: none;
 }
 
 .ModalSheet--size-s {

diff --git a/packages/vkui/src/components/ModalSheet/ModalSheet.stories.tsx b/packages/vkui/src/components/ModalSheet/ModalSheet.stories.tsx
@@ -20,6 +20,7 @@ import { ModalPageHeader } from '../ModalPageHeader/ModalPageHeader';
 import { Panel } from '../Panel/Panel';
 import { PanelHeader } from '../PanelHeader/PanelHeader';
 import { Radio } from '../Radio/Radio';
+import { Select } from '../Select/Select';
 import { SelectMimicry } from '../SelectMimicry/SelectMimicry';
 import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Title } from '../Typography/Title/Title';
@@ -43,11 +44,14 @@ const ModalFirst = (props: ModalSheetProps) => (
     </ModalSheet.Header>
 
     <ModalSheet.Content>
-      <FormItem top="Страна">
-        <SelectMimicry placeholder="Выбрать страну" />
-      </FormItem>
       <FormItem top="Город">
-        <SelectMimicry placeholder="Выбрать город" disabled />
+        <Select
+          options={['Архангельск', 'Новосибирск', 'Санкт-Петербург'].map((value) => ({
+            label: value,
+            value,
+          }))}
+          placeholder="Выбрать город"
+        />
       </FormItem>
 
       <FormItem top="Пол">

diff --git a/packages/vkui/src/components/ModalSheet/ModalSheet.tsx b/packages/vkui/src/components/ModalSheet/ModalSheet.tsx
@@ -7,9 +7,8 @@ import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useVirtualKeyboard } from '../../hooks/useKeyboard';
 import { useTimeout } from '../../hooks/useTimeout';
 import { callMultiple } from '../../lib/callMultiple';
-import { NavIdProps } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
@@ -45,7 +44,7 @@ function useId(idProp: string | undefined) {
 function useMobileFirstOpen(container: React.RefObject<HTMLDivElement>, settlingHeight: number) {
   const { sizeX: jsSizeX } = useAdaptivityWithJSMediaQueries();
 
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (jsSizeX === 'regular') {
       return;
     }
@@ -184,7 +183,7 @@ function useOpeningClosing(
   };
 }
 
-export interface ModalSheetProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
+export interface ModalSheetProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Задаёт контенту максимальную ширину для десктопной версии.
    */

diff --git a/packages/vkui/src/components/ModalSheet/Readme.md b/packages/vkui/src/components/ModalSheet/Readme.md
@@ -6,11 +6,14 @@ const ModalFirst = (props) => (
     </ModalSheet.Header>
 
     <ModalSheet.Content>
-      <FormItem top="Страна">
-        <SelectMimicry placeholder="Выбрать страну" />
-      </FormItem>
       <FormItem top="Город">
-        <SelectMimicry placeholder="Выбрать город" disabled />
+        <Select
+          options={['Архангельск', 'Новосибирск', 'Санкт-Петербург'].map((value) => ({
+            label: value,
+            value,
+          }))}
+          placeholder="Выбрать город"
+        />
       </FormItem>
 
       <FormItem top="Пол">
@@ -26,10 +29,26 @@ const ModalFirst = (props) => (
       </FormItem>
 
       <FormItem top="Школа">
-        <SelectMimicry placeholder="Выбрать школу" disabled />
+        <Select
+          options={getRandomUsers(10).map((user) => ({
+            label: user.name,
+            value: user.id,
+            avatar: user.photo_100,
+          }))}
+          placeholder="Выбрать школу"
+          disabled
+        />
       </FormItem>
       <FormItem top="Университет">
-        <SelectMimicry placeholder="Выбрать университет" disabled />
+        <Select
+          options={getRandomUsers(10).map((user) => ({
+            label: user.name,
+            value: user.id,
+            avatar: user.photo_100,
+          }))}
+          placeholder="Выбрать университет"
+          disabled
+        />
       </FormItem>
 
       <FormItem top="Дополнительно">

diff --git a/packages/vkui/src/components/ModalSheet/components/Indent/Indent.module.css b/packages/vkui/src/components/ModalSheet/components/Indent/Indent.module.css
@@ -0,0 +1,11 @@
+.ModalSheetIndent {
+  scroll-snap-align: start;
+  overflow-anchor: none;
+}
+
+/* Компонент учитывает передачу в адаптивность regular и не отрисовывает эти элементы */
+@media (--sizeX-regular) {
+  .ModalSheetIndent {
+    display: none;
+  }
+}
diff --git a/packages/vkui/src/components/ModalSheet/components/Indent/Indent.tsx b/packages/vkui/src/components/ModalSheet/components/Indent/Indent.tsx
@@ -1,37 +1,38 @@
 import * as React from 'react';
 import { useAdaptivity } from '../../../../hooks/useAdaptivity';
 import { useGlobalEventListener } from '../../../../hooks/useGlobalEventListener';
-import { SizeType } from '../../../../lib/adaptivity';
 import { useDOM } from '../../../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../../../lib/useIsomorphicLayoutEffect';
-import styles from '../../ModalSheet.module.css';
+import styles from './Indent.module.css';
 
 // Отступы для модалки
 function useIndents(settlingHeight: number) {
   const { document, window } = useDOM();
 
   const indent1Ref = React.useRef<HTMLDivElement>(null);
   const indent2Ref = React.useRef<HTMLDivElement>(null);
+  const [indents, setIndents] = React.useState<[string, string]>([
+    `${settlingHeight}%`,
+    `${100 - settlingHeight}%`,
+  ]);
 
   const indentCalculate = () => {
-    const indent1Height = (document!.documentElement.clientHeight * settlingHeight) / 100;
-    const indent2Height = document!.documentElement.clientHeight - indent1Height;
+    const clientHeight = document!.documentElement.clientHeight;
+    const indent1Height = (clientHeight * settlingHeight) / 100;
+    const indent2Height = clientHeight - indent1Height;
 
     if (!indent1Ref.current || !indent2Ref.current) {
       return;
     }
 
-    indent1Ref.current.style.height = `${indent1Height}px`;
-    indent2Ref.current.style.height = `${indent2Height}px`;
+    setIndents([`${indent1Height}px`, `${indent2Height}px`]);
   };
 
   useGlobalEventListener(window, 'resize', indentCalculate);
 
-  useIsomorphicLayoutEffect(() => {
-    indentCalculate();
-  }, [settlingHeight]);
+  useIsomorphicLayoutEffect(indentCalculate, [settlingHeight]);
 
-  return [indent1Ref, indent2Ref];
+  return [indent1Ref, indent2Ref, indents] as const;
 }
 
 interface IndentProps {
@@ -40,24 +41,24 @@ interface IndentProps {
 }
 
 export const Indent = ({ settlingHeight, onClick }: IndentProps) => {
-  const [indent1Ref, indent2Ref] = useIndents(settlingHeight);
+  const [indent1Ref, indent2Ref, indents] = useIndents(settlingHeight);
   const { sizeX } = useAdaptivity();
 
-  if (sizeX === SizeType.REGULAR) {
+  if (sizeX === 'regular') {
     return null;
   }
 
   return (
     <>
       <div
-        className={styles['ModalSheet__indent']}
-        style={{ height: `${settlingHeight}%` }}
+        className={styles['ModalSheetIndent']}
+        style={{ height: indents[0] }}
         ref={indent1Ref}
         onClick={onClick}
       />
       <div
-        className={styles['ModalSheet__indent']}
-        style={{ height: `${100 - settlingHeight}%` }}
+        className={styles['ModalSheetIndent']}
+        style={{ height: indents[1] }}
         ref={indent2Ref}
         onClick={onClick}
       />

diff --git a/packages/vkui/src/hooks/useKeyboard.ts b/packages/vkui/src/hooks/useKeyboard.ts
@@ -59,6 +59,7 @@ export function useKeyboard(): SoftwareKeyboardState {
   return { isOpened };
 }
 
+const minKeyboardHeight = 30;
 /**
  * Проверяет изменение визуального окна.
  *
@@ -75,7 +76,7 @@ export function useVirtualKeyboard() {
     }
 
     const calcIsOpen =
-      window.visualViewport.height * window.visualViewport.scale + 30 <
+      window.visualViewport.height * window.visualViewport.scale + minKeyboardHeight <
       document.scrollingElement.clientHeight;
 
     if (isOpened !== calcIsOpen) {