Merge pull request #1119 from easyops-cn/williamcai/basic_mini-action…

…s_add_url_support_for_non-dropdown_action feat(eo-mini-actions): Add url support for non-dropdown action
easyops-cn · Jun 21, 2024 · 6905d13 · 6905d13
2 parents 898bc11 + caab00c
commit 6905d13
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/bricks/basic/src/mini-actions/index.tsx b/bricks/basic/src/mini-actions/index.tsx
@@ -5,6 +5,7 @@ import type {
   GeneralIcon,
   GeneralIconProps,
 } from "@next-bricks/icons/general-icon";
+import type { Link, LinkProps } from "../link";
 import type {
   Popover,
   PopoverProps,
@@ -29,6 +30,7 @@ const WrappedTooltip = wrapBrick<EoTooltip, ToolTipProps>("eo-tooltip");
 const { defineElement, property, event } = createDecorators();
 
 const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
+const WrappedLink = wrapBrick<Link, LinkProps>("eo-link");
 const WrappedPopover = wrapBrick<
   Popover,
   PopoverProps,
@@ -113,6 +115,10 @@ interface EoMiniActionsComponentProps extends EoMiniActionsProps {
   onActionClick: (action: SimpleActionType) => void;
 }
 
+const stopPropagationListener = (e: Event) => {
+  e.stopPropagation();
+};
+
 export function EoMiniActionsComponent(props: EoMiniActionsComponentProps) {
   const { actions, onActionClick } = props;
 
@@ -148,6 +154,31 @@ export function EoMiniActionsComponent(props: EoMiniActionsComponentProps) {
   return (
     <div className="group-wrapper">
       {outSideActions.map((action, i) => {
+        let contentNode = (
+          <WrappedIcon className="button-item-icon" {...action.icon!} />
+        );
+
+        if (action.url || action.href) {
+          contentNode = (
+            <WrappedLink
+              type="plain"
+              href={action.href}
+              target={action.target}
+              url={action.url}
+              disabled={action.disabled}
+              ref={(el) => {
+                el?.addEventListener("click", stopPropagationListener);
+
+                return () => {
+                  el?.removeEventListener("click", stopPropagationListener);
+                };
+              }}
+            >
+              {contentNode}
+            </WrappedLink>
+          );
+        }
+
         return (
           <div
             key={i}
@@ -162,10 +193,10 @@ export function EoMiniActionsComponent(props: EoMiniActionsComponentProps) {
                 key={i}
                 content={action.tooltip}
               >
-                <WrappedIcon className="button-item-icon" {...action.icon!} />
+                {contentNode}
               </WrappedTooltip>
             ) : (
-              <WrappedIcon className="button-item-icon" {...action.icon!} />
+              contentNode
             )}
           </div>
         );

diff --git a/bricks/presentational/src/card-item/index.tsx b/bricks/presentational/src/card-item/index.tsx
@@ -304,6 +304,10 @@ interface EoCardItemComponentProps extends EoCardItemProps {
   onTagClick?: () => void;
 }
 
+const preventDefaultListener = (e: Event) => {
+  e.preventDefault();
+};
+
 export function EoCardItemComponent(props: EoCardItemComponentProps) {
   const {
     hasHeader,
@@ -341,11 +345,15 @@ export function EoCardItemComponent(props: EoCardItemComponentProps) {
     return (
       <WrappedMiniActions
         onActionClick={handleActionClick}
-        onClickCapture={(e) => {
-          e.preventDefault();
-        }}
         className="operator"
         actions={actions}
+        ref={(el) => {
+          el?.addEventListener("click", preventDefaultListener);
+
+          return () => {
+            el?.removeEventListener("click", preventDefaultListener);
+          };
+        }}
       />
     );
   }, [actions, handleActionClick]);