Merge pull request #142 from ensdomains/forward-ref-record-item

allow passing ref to RecordItem
ensdomains · Mar 28, 2024 · f397363 · f397363
2 parents 68056fb + 4aa7832
commit f397363
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 83 deletions.
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "0.6.46",
+  "version": "0.6.46-beta.1",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx
@@ -21,6 +21,9 @@ type BaseProps = {
   children: string
   onClick?: () => void
   as?: 'button' | 'a'
+  postfixIcon?: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
 }
 
 type NativeElementProps = Omit<
@@ -161,90 +164,109 @@ const TrailingIcon = styled.svg<{ $rotate?: boolean }>(
   `,
 )
 
-export const RecordItem = ({
-  as: asProp = 'button',
-  link,
-  size = 'small',
-  inline = false,
-  icon,
-  keyLabel,
-  keySublabel,
-  value,
-  children,
-  ...props
-}: Props) => {
-  const { copy, copied } = useCopied()
-
-  const generatedProps =
-    asProp === 'a'
-      ? ({
-          href: link,
-          rel: 'nofollow noreferrer',
-          target: '_blank',
-          ...props,
-        } as NativeElementProps & NativeAnchorProps)
-      : ({
-          onClick: () => {
-            copy(value)
-          },
-          ...props,
-        } as NativeElementProps & NativeButtonProps)
-
-  const hasPrefix = !!icon || !!keyLabel
-  const hasLabels = !!keyLabel || !!keySublabel
-
-  const KeyLabel =
-    typeof keyLabel === 'string' ? (
-      <PrefixLabel
-        $inline={inline}
-        color="grey"
-        ellipsis={!inline}
-        fontVariant={size === 'large' ? 'bodyBold' : 'smallBold'}
-      >
-        {keyLabel}
-      </PrefixLabel>
-    ) : (
-      keyLabel
-    )
+export const RecordItem = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  Props
+>(
+  (
+    {
+      as: asProp = 'button',
+      link,
+      size = 'small',
+      inline = false,
+      postfixIcon,
+      icon,
+      keyLabel,
+      keySublabel,
+      value,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { copy, copied } = useCopied()
+
+    const generatedProps =
+      asProp === 'a'
+        ? ({
+            href: link,
+            rel: 'nofollow noreferrer',
+            target: '_blank',
+            ...props,
+          } as NativeElementProps & NativeAnchorProps)
+        : ({
+            onClick: () => {
+              copy(value)
+            },
+            ...props,
+          } as NativeElementProps & NativeButtonProps)
+
+    const hasPrefix = !!icon || !!keyLabel
+    const hasLabels = !!keyLabel || !!keySublabel
 
-  const KeySublabel =
-    typeof keySublabel === 'string' ? (
-      <PrefixLabel
+    const KeyLabel =
+      typeof keyLabel === 'string' ? (
+        <PrefixLabel
+          $inline={inline}
+          color="grey"
+          ellipsis={!inline}
+          fontVariant={size === 'large' ? 'bodyBold' : 'smallBold'}
+        >
+          {keyLabel}
+        </PrefixLabel>
+      ) : (
+        keyLabel
+      )
+
+    const KeySublabel =
+      typeof keySublabel === 'string' ? (
+        <PrefixLabel
+          $inline={inline}
+          color="grey"
+          ellipsis={!inline}
+          fontVariant={size === 'large' ? 'smallBold' : 'extraSmallBold'}
+        >
+          {keySublabel}
+        </PrefixLabel>
+      ) : (
+        keySublabel
+      )
+    const PostfixProps = postfixIcon
+      ? { as: postfixIcon }
+      : link
+      ? { $rotate: true, as: UpArrowSVG }
+      : copied
+      ? { as: CheckSVG }
+      : { as: CopySVG }
+
+    return (
+      <Container
         $inline={inline}
-        color="grey"
-        ellipsis={!inline}
-        fontVariant={size === 'large' ? 'smallBold' : 'extraSmallBold'}
+        as={asProp}
+        {...generatedProps}
+        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
       >
-        {keySublabel}
-      </PrefixLabel>
-    ) : (
-      keySublabel
+        {hasPrefix && (
+          <PrefixContainer $inline={inline} $size={size}>
+            {icon && <PrefixIcon>{icon}</PrefixIcon>}
+            {hasLabels && (
+              <PrefixLabelsContainer $inline={inline}>
+                {KeyLabel}
+                {KeySublabel}
+              </PrefixLabelsContainer>
+            )}
+          </PrefixContainer>
+        )}
+        <Label
+          $inline={inline}
+          fontVariant={size === 'large' ? 'body' : 'small'}
+        >
+          {children}
+        </Label>
+        <TrailingIcon {...PostfixProps} />
+      </Container>
     )
-  const PostfixProps = link
-    ? { $rotate: true, as: UpArrowSVG }
-    : copied
-    ? { as: CheckSVG }
-    : { as: CopySVG }
-
-  return (
-    <Container $inline={inline} as={asProp} {...generatedProps}>
-      {hasPrefix && (
-        <PrefixContainer $inline={inline} $size={size}>
-          {icon && <PrefixIcon>{icon}</PrefixIcon>}
-          {hasLabels && (
-            <PrefixLabelsContainer $inline={inline}>
-              {KeyLabel}
-              {KeySublabel}
-            </PrefixLabelsContainer>
-          )}
-        </PrefixContainer>
-      )}
-      <Label $inline={inline} fontVariant={size === 'large' ? 'body' : 'small'}>
-        {children}
-      </Label>
-      <TrailingIcon {...PostfixProps} />
-    </Container>
-  )
-}
+  },
+)
 
 RecordItem.displayName = 'RecordItem'
diff --git a/package.json b/package.json
@@ -94,5 +94,6 @@
     "overrides": {
       "ts-morph": "17.0.1"
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }