Merge pull request #69 from ensdomains/fix/bugs-1

Misc bug fixes: 1
ensdomains · Aug 26, 2022 · 9168c05 · 9168c05
2 parents c774b21 + 2fee8b4
commit 9168c05
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 248 deletions.
diff --git a/components/src/components/atoms/Avatar/Avatar.test.tsx b/components/src/components/atoms/Avatar/Avatar.test.tsx
@@ -10,7 +10,7 @@ import { lightTheme } from '@/src/tokens'
 describe('<Avatar />', () => {
   afterEach(cleanup)
 
-  it('renders', () => {
+  it('renders', async () => {
     render(
       <ThemeProvider theme={lightTheme}>
         <Avatar
@@ -19,6 +19,6 @@ describe('<Avatar />', () => {
         />
       </ThemeProvider>,
     )
-    waitFor(() => expect(screen.getByRole(/img/i)).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByRole(/img/i)).toBeInTheDocument())
   })
 })
diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -61,9 +61,9 @@ const Container = styled.div<Container>(
   `,
 )
 
-const Placeholder = styled.div(
-  ({ theme }) => css`
-    background: ${theme.colors.gradients.blue};
+const Placeholder = styled.div<{ $url?: string }>(
+  ({ theme, $url }) => css`
+    background: ${$url || theme.colors.gradients.blue};
 
     display: flex;
     align-items: center;
@@ -96,33 +96,55 @@ export type Props = {
   src?: NativeImgAttributes['src']
   /** The shape of the avatar. */
   shape?: Shape
-  // as?: 'img' | React.ComponentType
-} & Omit<
-  NativeImgAttributes,
-  'decoding' | 'alt' | 'onError' | 'children' | 'onError'
->
+  /** A placeholder for the image to use when not loaded, in css format (e.g. url("https://example.com")) */
+  placeholder?: string
+} & Omit<NativeImgAttributes, 'alt' | 'onError' | 'children' | 'onError'>
 
 export const Avatar = ({
   label,
   noBorder = false,
   shape = 'circle',
   src,
+  placeholder,
+  decoding = 'async',
   ...props
 }: Props) => {
+  const ref = React.useRef<HTMLImageElement>(null)
   const [showImage, setShowImage] = React.useState(!!src)
 
-  React.useEffect(() => {
+  const showImg = React.useCallback(() => {
+    setShowImage(true)
+  }, [setShowImage])
+
+  const hideImg = React.useCallback(() => {
     setShowImage(false)
-  }, [src])
+  }, [setShowImage])
+
+  React.useEffect(() => {
+    const img = ref.current
+    if (img) {
+      img.addEventListener('load', showImg)
+      img.addEventListener('loadstart', hideImg)
+      img.addEventListener('error', hideImg)
+    }
+    return () => {
+      if (img) {
+        img.removeEventListener('load', showImg)
+        img.removeEventListener('loadstart', hideImg)
+        img.removeEventListener('error', hideImg)
+      }
+    }
+  }, [ref, hideImg, showImg])
 
   return (
     <Container $noBorder={!showImage || noBorder} $shape={shape}>
-      {!showImage && <Placeholder aria-label={label} />}
+      {!showImage && <Placeholder $url={placeholder} aria-label={label} />}
       <Img
         {...props}
         $shown={showImage}
         alt={label}
-        decoding="async"
+        decoding={decoding}
+        ref={ref}
         src={src}
         onError={() => setShowImage(false)}
         onLoad={() => setShowImage(true)}

diff --git a/components/src/components/molecules/Backdrop/Backdrop.test.tsx b/components/src/components/molecules/Backdrop/Backdrop.test.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react'
+
+import { ThemeProvider } from 'styled-components'
+
+import { cleanup, render, screen, waitFor } from '@/test'
+
+import { Backdrop } from './Backdrop'
+import { lightTheme } from '@/src/tokens'
+
+window.scroll = jest.fn()
+
+const Element = ({
+  open = true,
+  className,
+  testId = 1,
+}: {
+  open?: boolean
+  className?: string
+  testId?: number
+}) => (
+  <ThemeProvider theme={lightTheme}>
+    <Backdrop className={className} open={open}>
+      {() => <div data-testid={`inner-data-${testId}`}>test</div>}
+    </Backdrop>
+  </ThemeProvider>
+)
+
+describe('<Backdrop />', () => {
+  afterEach(cleanup)
+
+  it('renders', async () => {
+    render(<Element />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-1')).toBeInTheDocument(),
+    )
+  })
+  it('should allow multiple backdrops to open without losing the initial state', async () => {
+    const { rerender: rerenderOne } = render(<Element />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-1')).toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('1')
+    expect(document.body.style.position).toBe('fixed')
+    const { rerender: rerenderTwo } = render(<Element testId={2} />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-2')).toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('2')
+    expect(document.body.style.position).toBe('fixed')
+    rerenderTwo(<Element open={false} testId={2} />)
+    await waitFor(() =>
+      expect(screen.queryByTestId('inner-data-2')).not.toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('1')
+    expect(document.body.style.position).toBe('fixed')
+    rerenderOne(<Element open={false} />)
+    await waitFor(() =>
+      expect(screen.queryByTestId('inner-data-1')).not.toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('0')
+    expect(document.body.style.position).toBe('')
+  })
+})
diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -42,35 +42,41 @@ export const Backdrop = ({
     e.target === boxRef.current && onDismiss && onDismiss()
 
   React.useEffect(() => {
-    toggle(open || false)
-
-    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`
+    const { style, dataset } = document.body
+    const currBackdrops = () => parseInt(dataset.backdrops || '0')
+    const modifyBackdrops = (modifier: number) =>
+      (dataset.backdrops = String(currBackdrops() + modifier))
+    const setStyles = (w: string, p: string, t: string) => {
+      style.width = w
+      style.position = p
+      style.top = t
     }
 
-    return () => {
-      if (typeof window !== 'undefined' && open) {
-        document.body.style.width = ''
-        document.body.style.position = ''
-        document.body.style.top = ''
-        window.scroll({
-          top,
-        })
+    toggle(open || false)
+    if (typeof window !== 'undefined' && !noBackground) {
+      if (open) {
+        if (currBackdrops() === 0) {
+          setStyles(
+            `${document.body.clientWidth}px`,
+            'fixed',
+            `-${window.scrollY}px`,
+          )
+        }
+        modifyBackdrops(1)
+        return () => {
+          const top = parseFloat(style.top || '0') * -1
+          if (currBackdrops() === 1) {
+            setStyles('', '', '')
+            window.scroll({
+              top,
+            })
+          }
+          modifyBackdrops(-1)
+        }
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  React.useEffect(() => {
-    return () => {
-      document.body.style.position = ''
-      document.body.style.top = ''
-    }
-  }, [])
+  }, [open, noBackground])
 
   return state !== 'unmounted' ? (
     <Portal className={className}>

diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
@@ -13,9 +13,8 @@ type Size = 'small' | 'medium' | 'large'
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type BaseProps = {
-  /** The url of the avatar icon. */
-  avatar?: AvatarProps['src']
-  // avatarAs?: AvatarProps['as']
+  /** The url of the avatar icon, or the avatar props to passthrough */
+  avatar?: AvatarProps['src'] | Omit<AvatarProps, 'label'>
   /** An array of objects conforming to the DropdownItem interface. */
   dropdownItems?: DropdownItem[]
   /** The ethereum address of the profiled user. */
@@ -152,7 +151,10 @@ const ReducedLineText = styled(Typography)(
 const ProfileInner = ({ size, avatar, address, ensName }: Props) => (
   <>
     <AvatarContainer>
-      <Avatar label="profile-avatar" src={avatar} />
+      <Avatar
+        label="profile-avatar"
+        {...(typeof avatar === 'string' ? { src: avatar } : avatar || {})}
+      />
     </AvatarContainer>
     <ProfileInnerContainer $size={size}>
       <ReducedLineText

diff --git a/docs/package.json b/docs/package.json
@@ -3,15 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "playroom build & next build",
+    "build": "next build && playroom build",
     "export": "next export",
     "clean": "rimraf .next public/playroom",
     "dev": "NODE_OPTIONS='--inspect' next dev & playroom start",
     "lint": "next lint",
     "lint:types": "tsc --noEmit",
-    "start": "next start",
-    "playroom:start": "playroom start",
-    "playroom:build": "playroom build"
+    "start": "next start"
   },
   "dependencies": {
     "@ensdomains/thorin": "workspace:components",
@@ -23,7 +21,7 @@
     "next": "latest",
     "next-mdx-remote": "^3.0.6",
     "nookies": "^2.5.2",
-    "playroom": "0.27.7",
+    "playroom": "^0.28.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",