diff --git a/.changeset/beige-fishes-flash.md b/.changeset/beige-fishes-flash.md new file mode 100644 index 000000000..ff588add8 --- /dev/null +++ b/.changeset/beige-fishes-flash.md @@ -0,0 +1,5 @@ +--- +"@web3uikit/core": patch +--- + +Add callbacks to credentials diff --git a/packages/core/src/lib/Credentials/Credentials.stories.tsx b/packages/core/src/lib/Credentials/Credentials.stories.tsx index 7e238d420..698a1ce2e 100644 --- a/packages/core/src/lib/Credentials/Credentials.stories.tsx +++ b/packages/core/src/lib/Credentials/Credentials.stories.tsx @@ -6,6 +6,10 @@ import { Credentials } from '.'; export default { title: '2.Forms/Credentials', component: Credentials, + argTypes: { + onCopy: { action: 'clicked' }, + onReveal: { action: 'revealed' }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/packages/core/src/lib/Credentials/Credentials.tsx b/packages/core/src/lib/Credentials/Credentials.tsx index d70e8710e..12fd3496b 100644 --- a/packages/core/src/lib/Credentials/Credentials.tsx +++ b/packages/core/src/lib/Credentials/Credentials.tsx @@ -27,6 +27,8 @@ const Credentials: FC = ({ title, titleColor, width = 'auto', + onCopy, + onReveal, ...props }) => { const [isValueHidden, setIsValueHidden] = useState(isHidden); @@ -81,12 +83,17 @@ const Credentials: FC = ({ {hasHideButton && ( setIsValueHidden(!isValueHidden)} + onToggle={() => { + setIsValueHidden(!isValueHidden); + if (isValueHidden) onReveal && onReveal(); + }} isHidden={isValueHidden} /> )} {hasHideButton && hasCopyButton && } - {hasCopyButton && } + {hasCopyButton && ( + + )} diff --git a/packages/core/src/lib/Credentials/types.ts b/packages/core/src/lib/Credentials/types.ts index 6ab236008..858899359 100644 --- a/packages/core/src/lib/Credentials/types.ts +++ b/packages/core/src/lib/Credentials/types.ts @@ -1,8 +1,13 @@ import { color } from '@web3uikit/styles'; import React from 'react'; import { Typography } from '../Typography'; +import { CopyButtonProps } from '../CopyButton'; -export interface ICredentialsProps extends ICredentialsHeaderProps { +type TCopyButtonProps = Pick; + +export interface ICredentialsProps + extends ICredentialsHeaderProps, + TCopyButtonProps { /** * if true displays Copy Button */ @@ -39,6 +44,11 @@ export interface ICredentialsProps extends ICredentialsHeaderProps { * default is "auto" */ width?: string; + + /** + * This event will fire when hideButton clicked to reveal hidden text only + */ + onReveal?: () => void; } export interface ICredentialsHeaderProps { /**