diff --git a/app/ts/components/subcomponents/MultilineCard.tsx b/app/ts/components/subcomponents/MultilineCard.tsx index e769a3ae..0fb5d5ff 100644 --- a/app/ts/components/subcomponents/MultilineCard.tsx +++ b/app/ts/components/subcomponents/MultilineCard.tsx @@ -21,21 +21,19 @@ export const MultilineCard = ({ icon, label, note, style }: MultilineCardProps) ) } -type ActionableIconAction = { - onClick: JSX.MouseEventHandler - hintText?: string -} - export type ActionableIconProps = { + onClick: 'clipboard-copy' icon: () => JSX.Element - hintText?: string - action: 'clipboard-copy' copyValue?: string - copySuccessMessage?: string + copySuccessMessage: string + hintText?: string } | { + onClick: JSX.MouseEventHandler icon: () => JSX.Element hintText?: string - action?: ActionableIconAction +} | { + onClick: undefined + icon: () => JSX.Element } const ActionableIcon = (props: ActionableIconProps) => { @@ -44,18 +42,18 @@ const ActionableIcon = (props: ActionableIconProps) => { const copyTextToClipboard = async (event: JSX.TargetedMouseEvent) => { event.currentTarget.blur() await clipboardCopy(event.currentTarget.value) - const copySuccessMessage = props.action === 'clipboard-copy' && props.copySuccessMessage ? props.copySuccessMessage : 'Copied!' + const copySuccessMessage = props.onClick === 'clipboard-copy' && props.copySuccessMessage ? props.copySuccessMessage : 'Copied!' tooltipConfig.value = { message: copySuccessMessage, x: event.clientX, y: event.clientY } } const CardIcon = props.icon - const handleClick = props.action ? props.action === 'clipboard-copy' ? copyTextToClipboard : props.action.onClick : undefined - const copyValue = props.action === 'clipboard-copy' ? props.copyValue : undefined - const hintText = props.action !== 'clipboard-copy' ? props.action?.hintText : undefined + const handleClick = props.onClick ? props.onClick === 'clipboard-copy' ? copyTextToClipboard : props.onClick : undefined + const copyValue = props.onClick === 'clipboard-copy' ? props.copyValue : undefined + const hintText = props.onClick ? props.hintText : undefined return ( - @@ -71,19 +69,18 @@ type TextNodeProps = { const TextNode = ({ displayText, value }: TextNodeProps) => { displayText } export type ActionableTextProps = { + onClick: 'clipboard-copy' displayText: string - action: 'clipboard-copy' copyValue?: string copySuccessMessage?: string } | { + onClick: JSX.MouseEventHandler + displayText: string + buttonLabel: string + buttonIcon: () => JSX.Element +} | { + onClick?: undefined displayText: string - action?: ActionableTextAction -} - -type ActionableTextAction = { - label: string - icon: () => JSX.Element - onClick?: JSX.MouseEventHandler } const ActionableText = (props: ActionableTextProps) => { @@ -92,40 +89,50 @@ const ActionableText = (props: ActionableTextProps) => { const copyTextToClipboard = async (event: JSX.TargetedMouseEvent) => { event.currentTarget.blur() await clipboardCopy(event.currentTarget.value) - tooltipConfig.value = { message: 'Copied!', x: event.clientX, y: event.clientY } + tooltipConfig.value = { + message: props.onClick === 'clipboard-copy' && props.copySuccessMessage ? props.copySuccessMessage : 'Copied!', + x: event.clientX, + y: event.clientY + } } - const copyValue = props.action === 'clipboard-copy' && props.copyValue ? props.copyValue : props.displayText - const DisplayText = () => + const copyValue = props.onClick === 'clipboard-copy' && props.copyValue ? props.copyValue : props.displayText + const actionIcon = props.onClick ? props.onClick === 'clipboard-copy' ? () => : props.buttonIcon : () => <> + const actionHandler = props.onClick ? props.onClick === 'clipboard-copy' ? copyTextToClipboard : props.onClick : undefined + const actionButtonLabel = props.onClick ? props.onClick === 'clipboard-copy' ? 'Copy' : props.buttonLabel : '' - const actionIcon = props.action ? props.action === 'clipboard-copy' ? () => : props.action.icon : () => <> - const actionHandler = props.action ? props.action === 'clipboard-copy' ? copyTextToClipboard : props.action.onClick : undefined - const actionButtonLabel = props.action === 'clipboard-copy' ? 'Copy' : props.action?.label || '' + const DisplayText = () => return ( - + ) } -type TextActionProps = ActionableTextAction & { +type TextActionProps = { + onClick: undefined textNode: () => JSX.Element - copyValue: string +} | { + onClick: JSX.MouseEventHandler + textNode: () => JSX.Element + buttonLabel: string + buttonIcon: () => JSX.Element + copyValue?: string } const TextAction = (props: TextActionProps) => { const DisplayText = props.textNode - const ActionIcon = props.icon + const ActionIcon = props.onClick ? props.buttonIcon : () => <> return ( - ) diff --git a/app/ts/components/subcomponents/address.tsx b/app/ts/components/subcomponents/address.tsx index 6b52a3e1..2d71fb00 100644 --- a/app/ts/components/subcomponents/address.tsx +++ b/app/ts/components/subcomponents/address.tsx @@ -62,33 +62,31 @@ export function BigAddress(params: BigAddressParams) { const labelText = params.addressBookEntry?.name || addressString || 'No address found' const noteText = addressString && addressString !== labelText ? addressString : '(Not in addressbook)' - const renameAddressAction: ActionableTextProps['action'] = { - label: 'Edit', - icon: () => , - onClick: () => params.addressBookEntry && params.renameAddressCallBack(params.addressBookEntry) + const configPartialWithEditOnClick = { + onClick: () => params.addressBookEntry && params.renameAddressCallBack(params.addressBookEntry), + buttonLabel: 'Edit', + buttonIcon: () => } - const setupCopyAction = { - action: 'clipboard-copy' as const, + const configPartialWithCopyOnClick = { + onClick: 'clipboard-copy' as const, copyValue: addressString, copySuccessMessage: 'Address copied!' } - const setupEditAction = { action: !params.noEditAddress ? renameAddressAction : undefined } - const labelConfig: ActionableTextProps = { displayText: labelText, - ...(labelText === addressString && !params.noCopying) ? setupCopyAction : setupEditAction + ...(labelText === addressString && !params.noCopying) ? configPartialWithCopyOnClick : configPartialWithEditOnClick } const noteConfig: ActionableTextProps = { displayText: noteText, - ...(noteText === addressString && !params.noCopying) ? setupCopyAction : setupEditAction + ...(noteText === addressString && !params.noCopying) ? configPartialWithCopyOnClick : configPartialWithEditOnClick } const iconConfig: ActionableIconProps = { icon: () => params.addressBookEntry ? : <>, - ...(!params.noCopying && addressString) ? setupCopyAction : { action: undefined } + ...(!params.noCopying && addressString) ? configPartialWithCopyOnClick : { onClick: undefined } } return