feat(FOROME-97): create scroll shadow component

ForomePlatform · May 27, 2022 · fe3d530 · fe3d530
1 parent bd2aabf
commit fe3d530
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 247 deletions.
diff --git a/src/components/variant/ui/drawer-window.tsx b/src/components/variant/ui/drawer-window.tsx
@@ -3,7 +3,6 @@ import {
   Dispatch,
   MouseEvent,
   SetStateAction,
-  useEffect,
   useRef,
   useState,
 } from 'react'
@@ -19,12 +18,6 @@ import datasetStore from '@store/dataset/dataset'
 import variantStore from '@store/ws/variant'
 import { Checkbox } from '@ui/checkbox/checkbox'
 import { Icon } from '@ui/icon'
-import {
-  createShadow,
-  createTrigger,
-  DisplayValue,
-  Placement,
-} from '@ui/scroll-shadower/scroll-shadowier.utils'
 import {
   ICommonAspectDescriptor,
   IPreAspectDescriptor,
@@ -53,61 +46,6 @@ export const DrawerWindow = observer(
       DrawerClass.normClass,
     )
 
-    useEffect(() => {
-      const element = ref.current
-
-      if (!element) return
-
-      const rightShadow = createShadow(element, Placement.right)
-      const leftShadow = createShadow(element, Placement.left)
-
-      leftShadow.style.position = 'fixed'
-      rightShadow.style.position = 'fixed'
-
-      leftShadow.style.top = '40px'
-      leftShadow.style.bottom = '25px'
-      rightShadow.style.top = '40px'
-      rightShadow.style.bottom = '25px'
-
-      if (refColumn.current) {
-        leftShadow.style.left = refColumn.current.clientWidth + 'px'
-      }
-      const rightTrigger = createTrigger(element, Placement.right)
-      const leftTrigger = createTrigger(element, Placement.left)
-
-      const intersectionObserver = new IntersectionObserver(
-        entries => {
-          for (const entry of entries) {
-            switch (entry.target) {
-              case rightTrigger:
-                rightShadow.style.display = entry.isIntersecting
-                  ? DisplayValue.none
-                  : DisplayValue.block
-                break
-              case leftTrigger:
-                leftShadow.style.display = entry.isIntersecting
-                  ? DisplayValue.none
-                  : DisplayValue.block
-                break
-            }
-          }
-        },
-        {
-          threshold: [0],
-        },
-      )
-
-      intersectionObserver.observe(rightTrigger)
-      intersectionObserver.observe(leftTrigger)
-
-      return () => {
-        ;[rightTrigger, rightShadow, leftShadow, leftTrigger].forEach(target =>
-          target.remove(),
-        )
-        intersectionObserver.disconnect()
-      }
-    }, [])
-
     const { shouldAddShadow, handleScroll, handleStartScroll } =
       useScrollShadow(ref.current)
 

diff --git a/src/router/router.tsx b/src/router/router.tsx
@@ -5,7 +5,7 @@ import { QueryParamProvider } from 'use-query-params'
 
 import { GlobalStyle } from '@theme'
 import { Routes } from '@router/routes.enum'
-import { TestPage } from '@ui/scroller/page'
+import { TestPage } from '@ui/shadow-scroller/page'
 import { DtreePage } from '@pages/filter/dtree'
 import { RefinerPage } from '@pages/filter/refiner'
 import { IgvPage } from '@pages/igv'

diff --git a/src/ui/scroll-shadower/scroll-shadowier.tsx b/src/ui/scroll-shadower/scroll-shadowier.tsx
diff --git a/src/ui/scroller/index.ts b/src/ui/scroller/index.ts
diff --git a/src/ui/scroller/scroller.interfaces.ts b/src/ui/scroller/scroller.interfaces.ts
diff --git a/src/ui/scroller/scroller.module.css b/src/ui/scroller/scroller.module.css
diff --git a/src/ui/scroller/scroller.tsx b/src/ui/scroller/scroller.tsx
diff --git a/src/ui/shadow-scroller/index.ts b/src/ui/shadow-scroller/index.ts
@@ -0,0 +1 @@
+export * from './shadow-scroller'
diff --git a/src/ui/scroller/page.tsx → src/ui/shadow-scroller/page.tsx b/src/ui/scroller/page.tsx → src/ui/shadow-scroller/page.tsx
@@ -1,14 +1,14 @@
 import { FC } from 'react'
 
-import { Scroller } from '@ui/scroller/scroller'
+import { ShadowScroller } from '@ui/shadow-scroller/shadow-scroller'
 
 export const TestPage: FC = () => {
   return (
     <div className="w-full h-full items-center flex justify-around">
       <div className="w-[1000px] h-[1000px]">
-        <Scroller
+        <ShadowScroller
           showShadows={true}
-          className="w-[800px] h-[800px] overflow-auto border-[2px]"
+          className="w-[800px] h-[800px] overflow-auto border-[2px] border-red-light"
         >
           <div className="bg-orange-light text-blue-dark w-[1200px] h-fit">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
@@ -129,7 +129,7 @@ export const TestPage: FC = () => {
             laboriosam molestiae nemo omnis possimus quam, quas quis quisquam
             ratione repudiandae sequi tempora tenetur, velit.
           </div>
-        </Scroller>
+        </ShadowScroller>
       </div>
     </div>
   )

diff --git a/src/ui/shadow-scroller/shadow-scroller.module.css b/src/ui/shadow-scroller/shadow-scroller.module.css
@@ -0,0 +1,44 @@
+.container {
+  position: relative;
+  cursor: grab;
+
+  &__shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &__value {
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+
+    &_vertical {
+      width: 100%;
+    }
+
+    &_horizontal {
+      height: 100%;
+    }
+  }
+
+  &__scroller {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+
+    &_vertical {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    &_horizontal {
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+  }
+}