From c9da69fd581b10f6d17730ebf203f8d2f01bb553 Mon Sep 17 00:00:00 2001 From: v1rtl Date: Sat, 16 Mar 2024 21:24:08 +0200 Subject: [PATCH 1/5] allow passing ref to RecordItem --- .../atoms/RecordItem/RecordItem.tsx | 178 ++++++++++-------- package.json | 3 +- 2 files changed, 99 insertions(+), 82 deletions(-) diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx index 34c7a123..6984aaaf 100644 --- a/components/src/components/atoms/RecordItem/RecordItem.tsx +++ b/components/src/components/atoms/RecordItem/RecordItem.tsx @@ -161,90 +161,106 @@ 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' ? ( - - {keyLabel} - - ) : ( - keyLabel - ) +export const RecordItem = React.forwardRef< + HTMLAnchorElement | HTMLButtonElement, + Props +>( + ( + { + as: asProp = 'button', + link, + size = 'small', + inline = false, + 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' ? ( - + {keyLabel} + + ) : ( + keyLabel + ) + + const KeySublabel = + typeof keySublabel === 'string' ? ( + + {keySublabel} + + ) : ( + keySublabel + ) + const PostfixProps = link + ? { $rotate: true, as: UpArrowSVG } + : copied + ? { as: CheckSVG } + : { as: CopySVG } + + return ( + } > - {keySublabel} - - ) : ( - keySublabel + {hasPrefix && ( + + {icon && {icon}} + {hasLabels && ( + + {KeyLabel} + {KeySublabel} + + )} + + )} + + + ) - const PostfixProps = link - ? { $rotate: true, as: UpArrowSVG } - : copied - ? { as: CheckSVG } - : { as: CopySVG } - - return ( - - {hasPrefix && ( - - {icon && {icon}} - {hasLabels && ( - - {KeyLabel} - {KeySublabel} - - )} - - )} - - - - ) -} + }, +) RecordItem.displayName = 'RecordItem' diff --git a/package.json b/package.json index 9b4ee1f8..503d1e0c 100644 --- a/package.json +++ b/package.json @@ -94,5 +94,6 @@ "overrides": { "ts-morph": "17.0.1" } - } + }, + "packageManager": "pnpm@7.8.0" } From 0fa494d11a9c1c031a6ee529368ab7ec3d40e230 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 27 Mar 2024 13:50:22 +0000 Subject: [PATCH 2/5] v0.6.46-beta --- components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/package.json b/components/package.json index f500ae2d..4ef933f5 100644 --- a/components/package.json +++ b/components/package.json @@ -1,6 +1,6 @@ { "name": "@ensdomains/thorin", - "version": "0.6.46", + "version": "0.6.46-beta", "description": "A web3 native design system", "main": "./dist/index.cjs.js", "module": "./dist/index.es.js", From 59522e40da59a04396d4e9492d33bbe3df27074b Mon Sep 17 00:00:00 2001 From: v1rtl Date: Wed, 27 Mar 2024 19:25:07 +0200 Subject: [PATCH 3/5] allow passing custom postfix icon to record item --- components/src/components/atoms/RecordItem/RecordItem.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx index 6984aaaf..a71d07c7 100644 --- 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 & { title?: string } + > } type NativeElementProps = Omit< @@ -171,6 +174,7 @@ export const RecordItem = React.forwardRef< link, size = 'small', inline = false, + postfixIcon, icon, keyLabel, keySublabel, @@ -227,7 +231,9 @@ export const RecordItem = React.forwardRef< ) : ( keySublabel ) - const PostfixProps = link + const PostfixProps = postfixIcon + ? { as: postfixIcon } + : link ? { $rotate: true, as: UpArrowSVG } : copied ? { as: CheckSVG } From 1adfcaeb0cfd04492e9ae751ad0ffeb5891ffccb Mon Sep 17 00:00:00 2001 From: v1rtl Date: Wed, 27 Mar 2024 19:25:38 +0200 Subject: [PATCH 4/5] merge --- components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/package.json b/components/package.json index f500ae2d..4ef933f5 100644 --- a/components/package.json +++ b/components/package.json @@ -1,6 +1,6 @@ { "name": "@ensdomains/thorin", - "version": "0.6.46", + "version": "0.6.46-beta", "description": "A web3 native design system", "main": "./dist/index.cjs.js", "module": "./dist/index.es.js", From 4aa78321193a64845470f11bea003e27d9eb6cde Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:50:58 +0000 Subject: [PATCH 5/5] v0.6.46-beta.1 --- components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/package.json b/components/package.json index 4ef933f5..09a8485b 100644 --- a/components/package.json +++ b/components/package.json @@ -1,6 +1,6 @@ { "name": "@ensdomains/thorin", - "version": "0.6.46-beta", + "version": "0.6.46-beta.1", "description": "A web3 native design system", "main": "./dist/index.cjs.js", "module": "./dist/index.es.js",