fix: preventDefault from onWheel event (#10)

* fix: preventDefault from onWheel event * prevent default condition
hosseinmd · Jul 30, 2022 · 9d2672f · 9d2672f
1 parent ed84125
commit 9d2672f
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/src/component/src/molecules/scrollView/index.tsx b/src/component/src/molecules/scrollView/index.tsx
@@ -34,8 +34,14 @@ const ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(
       const node = scrollContainerRef.current;
 
       const onWheel = (e: WheelEvent) => {
-        e.preventDefault();
         node.scrollLeft += e.deltaY;
+        if (
+          (e.deltaY > 0 &&
+            node.scrollWidth - node.offsetWidth > node.scrollLeft) ||
+          (e.deltaY < 0 && node.scrollLeft > 0)
+        ) {
+          e.preventDefault();
+        }
       };
 
       node.addEventListener("wheel", onWheel);

diff --git a/src/stories/src/base/scrollView/scrollView.stories.tsx b/src/stories/src/base/scrollView/scrollView.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: ScrollView,
 } as Meta<ScrollViewProps>;
 
-const children = (
-  <View style={{ width: 500 }}>
+const LoremEpsum = ({ width = 500 }: { width?: number }) => (
+  <View style={{ width }}>
     <Text
       theme="regular"
       lang="fa"
@@ -79,13 +79,33 @@ const children = (
 
 const Template: Story<ScrollViewProps> = (args) => (
   <StoryContainer>
-    <ScrollView {...args} style={{ flex: 1, height: 400 }} />
+    <ScrollView {...args} style={{ flex: 1, minHeight: 400 }} />
+    <Text style={{ marginBlock: 24 }}>
+      امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به
+      پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
+      پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که
+      تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و
+      زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل
+      دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که تمام و دشواری
+      موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز
+      شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود
+      طراحی اساسا مورد استفاده قرار گیرد. امید داشت که تمام و دشواری موجود در
+      ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
+      حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی
+      اساسا مورد استفاده قرار گیرد. امید داشت که تمام و دشواری موجود در ارائه
+      راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
+      دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد
+      استفاده قرار گیرد. امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
+      شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
+      اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
+      قرار گیرد.
+    </Text>
   </StoryContainer>
 );
 
 export const Regular = Template.bind({});
 Regular.args = {
-  children,
+  children: <LoremEpsum />,
 };
 
 const FlexTemplate: Story<ScrollViewProps> = (args) => (
@@ -101,5 +121,34 @@ const FlexTemplate: Story<ScrollViewProps> = (args) => (
 
 export const Flex = FlexTemplate.bind({});
 Flex.args = {
-  children,
+  children: <LoremEpsum />,
+};
+
+const HorizontalTemplate: Story<ScrollViewProps> = (args) => (
+  <StoryContainer>
+    <Text style={{ marginBlock: 24, width: 50 }}>
+      امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به
+      پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
+      پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که
+      تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و
+      زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل
+      دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که تمام و دشواری
+      موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز
+    </Text>
+    <ScrollView isHorizontal {...args} style={{ flex: 1, minHeight: 150 }} />
+    <Text style={{ marginBlock: 24, width: 50 }}>
+      امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به
+      پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
+      پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که
+      تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و
+      زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل
+      دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. امید داشت که تمام و دشواری
+      موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز
+    </Text>
+  </StoryContainer>
+);
+
+export const Horizontal = HorizontalTemplate.bind({});
+Horizontal.args = {
+  children: <LoremEpsum width={1500} />,
 };
diff --git a/src/stories/src/container/style.ts b/src/stories/src/container/style.ts
@@ -6,5 +6,6 @@ export default createUseStyles({
     flex: 1,
     width: "100%",
     height: "100%",
+    overflowY: "auto",
   },
 });