From fceeb92c0638e993ee3f43c42e551c80af0cf436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 28 Dec 2023 08:55:22 +0800
Subject: [PATCH] =?UTF-8?q?enhance(compo):=E8=B0=83=E6=95=B4=E5=8F=AF?=
 =?UTF-8?q?=E6=BF=80=E6=B4=BB=E9=93=BE=E6=8E=A5=E4=B8=AD=E7=9A=84=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=B1=9E=E6=80=A7=E5=A4=84=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActivatableLink/ActivatableLink.jsx          | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ActivatableLink/ActivatableLink.jsx b/src/components/ActivatableLink/ActivatableLink.jsx
index 858376d..d977add 100644
--- a/src/components/ActivatableLink/ActivatableLink.jsx
+++ b/src/components/ActivatableLink/ActivatableLink.jsx
@@ -1,6 +1,6 @@
 import { A } from "@solidjs/router";
 import { defaultTo, isNil, pick, pipe, prop } from "ramda";
-import { Show } from "solid-js";
+import { Show, mergeProps } from "solid-js";
 import classes from "./ActivatableLink.module.css";
 
 /**
@@ -24,17 +24,21 @@ const defaultActivatable = pipe(defaultTo(true), prop("activatable"));
  * @returns {import("solid-js").Component<ActivatableLinkProps>}
  */
 export default function ActivatableLink(props) {
+  const mergedProps = mergeProps(
+    { activatable: true, leftIcon: null, rightIcon: null },
+    props
+  );
   return (
     <A
       class={prop("activatable-link", classes)}
-      {...(defaultActivatable(props) && {
+      {...(prop("activatable", mergedProps) && {
         activeClass: "activated",
       })}
-      {...pick(["replace", "end", "href"], props)}
+      {...pick(["replace", "end", "href"], mergedProps)}
     >
-      <Show when={!isNil(props.leftIcon)}>{props.leftIcon}</Show>
-      <Show when={!isNil(props.children)}>{props.children}</Show>
-      <Show when={!isNil(props.rightIcon)}>{props.rightIcon}</Show>
+      <Show when={!isNil(mergedProps.leftIcon)}>{mergedProps.leftIcon}</Show>
+      <Show when={!isNil(mergedProps.children)}>{mergedProps.children}</Show>
+      <Show when={!isNil(mergedProps.rightIcon)}>{mergedProps.rightIcon}</Show>
     </A>
   );
 }