From 2c433c15e1438dffd7eb2f1383f71626ace328fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 5 May 2024 12:19:55 +0200 Subject: [PATCH] Fix links in actions modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/ui/hstack/hstack.tsx | 2 +- src/components/ui/stack/stack.tsx | 2 +- src/features/ui/components/modals/actions-modal.tsx | 9 +++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/ui/hstack/hstack.tsx b/src/components/ui/hstack/hstack.tsx index 082f210b83..9d39fa8cba 100644 --- a/src/components/ui/hstack/hstack.tsx +++ b/src/components/ui/hstack/hstack.tsx @@ -41,7 +41,7 @@ interface IHStack extends Pick, 'children' /** Whether to let the flexbox grow. */ grow?: boolean; /** HTML element to use for container. */ - element?: keyof JSX.IntrinsicElements; + element?: React.ComponentType | keyof JSX.IntrinsicElements; /** Whether to let the flexbox wrap onto multiple lines. */ wrap?: boolean; } diff --git a/src/components/ui/stack/stack.tsx b/src/components/ui/stack/stack.tsx index feceff4373..e501d59432 100644 --- a/src/components/ui/stack/stack.tsx +++ b/src/components/ui/stack/stack.tsx @@ -39,7 +39,7 @@ interface IStack extends React.HTMLAttributes { /** Whether to let the flexbox grow. */ grow?: boolean; /** HTML element to use for container. */ - element?: keyof JSX.IntrinsicElements; + element?: React.ComponentType | keyof JSX.IntrinsicElements; } /** Vertical stack of child elements. */ diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx index c08cdd584c..89aa9bc085 100644 --- a/src/features/ui/components/modals/actions-modal.tsx +++ b/src/features/ui/components/modals/actions-modal.tsx @@ -2,6 +2,7 @@ import clsx from 'clsx'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { spring } from 'react-motion'; +import { Link } from 'react-router-dom'; import Icon from 'soapbox/components/icon'; import { HStack } from 'soapbox/components/ui'; @@ -25,15 +26,15 @@ const ActionsModal: React.FC = ({ status, actions, onClick, onClo return
  • ; } - const { icon = null, text, meta = null, href = '#', destructive } = action; + const { icon = null, text, meta = null, href = '#', to, destructive } = action; - const Comp = href === '#' ? 'button' : 'a'; - const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' }; + const Comp = href === '#' ? to ? Link : 'button' : 'a'; + const compProps = href === '#' ? to ? { to, onClick } : { onClick } : { href: href, rel: 'noopener' }; return (