feat(CustomScrollView): add horizontal scroll support (#7130)

h2. Описание Необходимо добавить поддержку кастомного горизонтального скролла в CustomScrollView. h2. Изменения - Добавил отображение и логику для горизонтального скролла - Вынес логику обработкуи вертикального и горизонтального скролла в хуки - Добавил хук для определения измерения в котором идет скролл - Добил пропс для включения отображения горизонтального скролла - Добавил страницу компонента CustomScrollView в styleguide и в storybook h2. UPD <details><summary>Debug в Firefox <= 63</summary> <p> https://github.com/user-attachments/assets/e77e56c4-81da-48eb-839f-4ad7b6b064c8 _before_ https://github.com/user-attachments/assets/906aa687-706e-41c9-9534-8f3c50362e9e _after_ </p> </details> Добавил предупреждение об использовании флага в Firefox ниже 64 версии
VKCOM · Aug 1, 2024 · 16e705c · 16e705c
1 parent 0d94b24
commit 16e705c
Show file tree

Hide file tree

Showing 14 changed files with 836 additions and 175 deletions.
diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css b/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
@@ -13,6 +13,7 @@
   overflow-x: hidden;
   padding-inline-end: 100px;
   position: relative;
+  outline: none;
 }
 
 .CustomScrollView__box--overscrollBehavior-contain {
@@ -23,41 +24,70 @@
   overscroll-behavior: none;
 }
 
+.CustomScrollView__box--horizontalEnabled {
+  padding-inline-end: 0;
+  overflow-x: scroll;
+}
+
 .CustomScrollView__box-content {
   position: relative;
   inline-size: 100%;
   block-size: 100%;
 }
 
-.CustomScrollView__barY:active + .CustomScrollView__box {
+.CustomScrollView__barY:active + .CustomScrollView__box,
+.CustomScrollView__barX:active + .CustomScrollView__box {
   pointer-events: none;
 }
 
-.CustomScrollView__barY {
+.CustomScrollView__barY,
+.CustomScrollView__barX {
   position: absolute;
+}
+
+.CustomScrollView__barY {
   inset-block-start: 0;
   inset-inline-end: 0;
   block-size: 100%;
   inline-size: 10px;
 }
 
+.CustomScrollView__barX {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 10px;
+}
+
+.CustomScrollView__trackerY,
+.CustomScrollView__trackerX {
+  position: absolute;
+  user-select: none;
+  box-sizing: border-box;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
 .CustomScrollView__trackerY {
   inline-size: 10px;
-  box-sizing: border-box;
   padding-block: 4px;
   padding-inline: 0 4px;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  user-select: none;
 }
 
-.CustomScrollView__trackerY--hidden {
+.CustomScrollView__trackerX {
+  block-size: 10px;
+  padding-inline: 4px;
+  padding-block: 0 4px;
+}
+
+.CustomScrollView__trackerY--hidden,
+.CustomScrollView__trackerX--hidden {
   opacity: 0;
   transition: opacity 200ms;
 }
 
-.CustomScrollView__trackerY::before {
+.CustomScrollView__trackerY::before,
+.CustomScrollView__trackerX::before {
   content: '';
   opacity: 0.48;
   display: block;
@@ -76,6 +106,12 @@
   transform: scaleX(1.3333);
 }
 
+.CustomScrollView__trackerX:hover::before,
+.CustomScrollView__trackerX:active::before {
+  opacity: 0.8;
+  transform: scaleY(1.3333);
+}
+
 /**
  * CMP:
  * CustomSelectDropdown
@@ -119,12 +155,14 @@
 /**
  * Не отрисовываем полосу прокрутки, если у устройства отсутствует мышь
  */
-.CustomScrollView--hasPointer-false .CustomScrollView__barY {
+.CustomScrollView--hasPointer-false .CustomScrollView__barY,
+.CustomScrollView--hasPointer-false .CustomScrollView__barX {
   display: none;
 }
 
 @media (--pointer-has-not) {
-  .CustomScrollView--hasPointer-none .CustomScrollView__barY {
+  .CustomScrollView--hasPointer-none .CustomScrollView__barY,
+  .CustomScrollView--hasPointer-none .CustomScrollView__barX {
     display: none;
   }
 }
diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.stories.tsx b/packages/vkui/src/components/CustomScrollView/CustomScrollView.stories.tsx
@@ -0,0 +1,89 @@
+import { Meta, ReactRenderer, StoryObj } from '@storybook/react';
+import { PartialStoryFn } from '@storybook/types';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Div } from '../Div/Div';
+import { CustomScrollView, CustomScrollViewProps } from './CustomScrollView';
+
+const Wrapper = (Story: PartialStoryFn<ReactRenderer>) => (
+  <div
+    style={{
+      borderRadius: 10,
+      border: '1px solid #000',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const story: Meta<CustomScrollViewProps> = {
+  title: 'Layout/CustomScrollView',
+  component: CustomScrollView,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<CustomScrollViewProps>;
+
+export const Playground: Story = {
+  args: {
+    style: { height: 300, width: 600 },
+    enableHorizontalScroll: true,
+    children: (
+      <Div
+        style={{
+          width: 1440,
+        }}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
+        commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum diam
+        bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor, sit
+        amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et. Vestibulum a ex
+        non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit porta
+        egestas. Curabitur eget justo elementum, malesuada lacus ut, congue mauris. Integer orci
+        nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean ultricies lacus eros, sit
+        amet condimentum urna malesuada et. Sed quis dolor tempus orci fringilla volutpat in sed
+        velit. Aenean aliquet bibendum pretium.
+        <br />
+        <br />
+        Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus convallis
+        lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed odio a neque
+        venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue vitae, ultricies
+        scelerisque ante. Phasellus pharetra risus eget imperdiet sodales. Integer dignissim auctor
+        semper. Nulla odio odio, euismod ut interdum in, bibendum sed massa. Proin rutrum molestie
+        massa in ultrices. Donec eu euismod turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia
+        posuere turpis, sed laoreet turpis auctor nec.
+        <br />
+        <br />
+        Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis. Pellentesque pulvinar
+        mauris turpis. Integer neque dolor, semper quis neque et, gravida commodo eros. Duis
+        efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit amet,
+        fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor pulvinar diam. Aliquam
+        euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut tristique massa nisi
+        vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam rutrum dui. Maecenas
+        luctus sem vitae molestie porttitor. Cras viverra mauris risus, at sollicitudin ipsum
+        interdum eu. Sed sit amet tempor enim.
+        <br />
+        <br />
+        In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur quam vulputate
+        quis. Duis ultricies non mauris condimentum molestie. Maecenas sollicitudin ex sem, quis
+        ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit magna.
+        Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus. Cras at
+        varius justo. In ex odio, condimentum id pellentesque a, sodales ut diam.
+        <br />
+        <br />
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam
+        aliquet tempor laoreet. Maecenas eu pulvinar diam. Pellentesque habitant morbi tristique
+        senectus et netus et malesuada fames ac turpis egestas. Maecenas et elit eros. Quisque
+        ullamcorper sodales nisi, eleifend aliquet metus venenatis in. Aliquam ornare a lacus in
+        tincidunt. Cras vel tristique metus. Sed vitae nisl at nisl imperdiet sollicitudin. Sed sit
+        amet enim in lectus imperdiet interdum condimentum et diam. Proin venenatis sit amet diam ac
+        vulputate. Donec mauris orci, semper volutpat nunc ut, efficitur condimentum dolor. Vivamus
+        in quam eget quam lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget, cursus
+        tincidunt ex. In rhoncus turpis turpis, et viverra ex malesuada vel. Donec nisi tellus,
+        mollis et posuere vel, dictum eget neque.
+      </Div>
+    ),
+  },
+  decorators: [Wrapper],
+};