Merge pull request #60 from ensdomains/misc-tweaks

Misc tweaks
ensdomains · Aug 3, 2022 · d9f7a2a · d9f7a2a
2 parents 663c6f2 + a6f1d07
commit d9f7a2a
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 10 deletions.
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
@@ -48,12 +48,18 @@ const mockIntersectionObserver = (
       disconnect: mockDisconnect,
     }
   })
+  const els: HTMLElement[] = []
   window.IntersectionObserver = mockIntersectionObserverCls
   mockObserve.mockImplementation((el: HTMLElement) => {
-    if (el.dataset.testid === 'scrollbox-top-intersect') {
-      cb([{ isIntersecting: intersectTop, target: el }])
+    if (intersectTop && intersectBottom) {
+      els.push(el)
+      if (els.length === 2) {
+        cb(els.map((el) => ({ isIntersecting: true, target: el, time: 1 })))
+      }
+    } else if (el.dataset.testid === 'scrollbox-top-intersect') {
+      cb([{ isIntersecting: intersectTop, target: el, time: 1 }])
     } else if (el.dataset.testid === 'scrollbox-bottom-intersect') {
-      cb([{ isIntersecting: intersectBottom, target: el }])
+      cb([{ isIntersecting: intersectBottom, target: el, time: 1 }])
     }
   })
 }
@@ -91,6 +97,46 @@ describe('<ScrollBox />', () => {
     expectLine('top', true)
     expectLine('bottom', true)
   })
+  it('should show nothing when both lines intersecting', () => {
+    mockIntersectionObserver(true, true)
+    render(<Component />)
+    expectLine('top', false)
+    expectLine('bottom', false)
+  })
+  it('should show most recent intersection if multiple updates', () => {
+    let cb: (entries: any) => void
+    mockIntersectionObserverCls.mockImplementation((callback: any) => {
+      cb = callback
+      return {
+        observe: mockObserve,
+        disconnect: mockDisconnect,
+      }
+    })
+    const els: HTMLElement[] = []
+    window.IntersectionObserver = mockIntersectionObserverCls
+    mockObserve.mockImplementation((el: HTMLElement) => {
+      els.push(el)
+      if (els.length === 2) {
+        cb([
+          ...els.map((el) => ({
+            isIntersecting: false,
+            target: el,
+            time: 100,
+          })),
+          ...els.map((el) => ({
+            isIntersecting: true,
+            target: el,
+            time: 1000,
+          })),
+        ])
+      }
+    })
+
+    mockIntersectionObserver(true, true)
+    render(<Component />)
+    expectLine('top', false)
+    expectLine('bottom', false)
+  })
   it('should fire callback on intersection', () => {
     mockIntersectionObserver(true, false)
     const onReachedTop = jest.fn()

diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -99,14 +99,21 @@ export const ScrollBox = ({
   const [showBottom, setShowBottom] = React.useState(false)
 
   const handleIntersect: IntersectionObserverCallback = (entries) => {
-    const [entry] = entries
-    if (entry.target === topRef.current) {
-      setShowTop(!entry.isIntersecting)
-      entry.isIntersecting && funcRef.current.onReachedTop?.()
-    } else if (entry.target === bottomRef.current) {
-      setShowBottom(!entry.isIntersecting)
-      entry.isIntersecting && funcRef.current.onReachedBottom?.()
+    const intersectingTop = [false, -1]
+    const intersectingBottom = [false, -1]
+    for (let i = 0; i < entries.length; i += 1) {
+      const entry = entries[i]
+      const iref =
+        entry.target === topRef.current ? intersectingTop : intersectingBottom
+      if (entry.time > iref[1]) {
+        iref[0] = entry.isIntersecting
+        iref[1] = entry.time
+      }
     }
+    intersectingTop[1] !== -1 && setShowTop(!intersectingTop[0])
+    intersectingBottom[1] !== -1 && setShowBottom(!intersectingBottom[0])
+    intersectingTop[0] && funcRef.current.onReachedTop?.()
+    intersectingBottom[0] && funcRef.current.onReachedBottom?.()
   }
 
   React.useEffect(() => {

diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -47,12 +47,14 @@ export const Backdrop = ({
     let top = 0
     if (typeof window !== 'undefined' && open) {
       top = window.scrollY
+      document.body.style.width = `${document.body.clientWidth}px`
       document.body.style.position = 'fixed'
       document.body.style.top = `-${top}px`
     }
 
     return () => {
       if (typeof window !== 'undefined' && open) {
+        document.body.style.width = ''
         document.body.style.position = ''
         document.body.style.top = ''
         window.scroll({

diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -51,6 +51,9 @@ const SubTitle = styled(Typography)(
     font-weight: ${theme.fontWeights['medium']};
     color: ${theme.colors.textSecondary};
     text-align: center;
+
+    padding: 0 ${theme.space['4']};
+    max-width: ${theme.space['72']};
   `,
 )