#335: Enable scrolling inside modals

VKCOM · Dec 10, 2020 · 5c85c93 · 5c85c93
1 parent a0635ba
commit 5c85c93
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/components/ModalRoot/ModalRoot.tsx b/src/components/ModalRoot/ModalRoot.tsx
@@ -21,6 +21,8 @@ import {
 import { ModalsState, ModalsStateEntry, ModalType, TranslateRange } from './types';
 import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
 
+type NativeTouchEvent = InstanceType<typeof window['TouchEvent']> & { originalEvent?: NativeTouchEvent };
+
 function numberInRange(number: number, range: TranslateRange) {
   return number >= range[0] && number <= range[1];
 }
@@ -108,7 +110,7 @@ class ModalRootTouchComponent extends Component<ModalRootProps, ModalRootState>
     return this.context.document || document;
   }
 
-  get window(): Window {
+  get window(): typeof window {
     return this.context.window || window;
   }
 
@@ -212,7 +214,10 @@ class ModalRootTouchComponent extends Component<ModalRootProps, ModalRootState>
     }
   }
 
-  preventTouch = (event: any) => {
+  preventTouch = (event: NativeTouchEvent) => {
+    if (event.target instanceof this.window.Element && event.target.closest('.ModalRoot')) {
+      return undefined;
+    }
     if (!event) {
       return false;
     }
@@ -415,9 +420,6 @@ class ModalRootTouchComponent extends Component<ModalRootProps, ModalRootState>
     const target = originalEvent.target as HTMLElement;
 
     if (!event.isY) {
-      if (target.closest('.ModalPage')) {
-        originalEvent.preventDefault();
-      }
       return;
     }
 

diff --git a/src/components/ModalRoot/Readme.md b/src/components/ModalRoot/Readme.md
@@ -118,10 +118,18 @@ const App = withAdaptivity(class App extends React.Component {
             <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_STORY_FEEDBACK)}>Просмотры истории</CellButton>
             <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_USER_INFO)}>Информация о пользователе</CellButton>
 
-            <FormItem top="Страна">            
+            <HorizontalScroll showArrows getScrollToLeft={i => i - 120} getScrollToRight={i => i + 120}>
+              <div style={{ display: 'flex' }}>
+                {getRandomUsers(15).map((item) => (
+                  <HorizontalCell key={item.id} header={item.first_name}><Avatar size={56} src={item.photo_200} /></HorizontalCell>)
+                )}
+              </div>
+            </HorizontalScroll>
+
+            <FormItem top="Страна">
               <SelectMimicry placeholder="Выбрать страну" onClick={() => this.setActiveModal(MODAL_PAGE_COUNTRIES)} />
             </FormItem>
-            <FormItem top="Город">            
+            <FormItem top="Город">
               <SelectMimicry placeholder="Выбрать город" disabled />
             </FormItem>
 
@@ -131,10 +139,10 @@ const App = withAdaptivity(class App extends React.Component {
               <Radio name="sex" value={2}>Женский</Radio>
             </FormItem>
 
-            <FormItem top="Школа">            
+            <FormItem top="Школа">
               <SelectMimicry placeholder="Выбрать школу" disabled />
             </FormItem>
-            <FormItem top="Университет">            
+            <FormItem top="Университет">
               <SelectMimicry placeholder="Выбрать университет" disabled />
             </FormItem>
 
@@ -151,12 +159,12 @@ const App = withAdaptivity(class App extends React.Component {
             </FormItem>
 
             <FormItem top="Дата рождения">
-              <DatePicker 
-                min={{day: 1, month: 1, year: 1901}} 
+              <DatePicker
+                min={{day: 1, month: 1, year: 1901}}
                 max={{day: 1, month: 1, year: 2006}}
                 dayPlaceholder="Д"
                 monthPlaceholder="ММ"
-                yearPlaceholder="ГГ" 
+                yearPlaceholder="ГГ"
               />
             </FormItem>
           </Group>