From 04c8d2524b6d6b0fb1b2f36b98a0ffe2a20fbf8c Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 23 Sep 2023 14:30:16 +0800
Subject: [PATCH] fix(rules): reload button style issue

---
 src/components/Button.tsx | 47 +++++++++++++++------------------------
 src/pages/Rules.tsx       | 34 +++++++++++++++-------------
 2 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 58732c7..7053f18 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,19 +1,25 @@
 import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 
+interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean
+  disabled?: boolean
+}
+
+interface ButtonWithIconProps extends ButtonBaseProps {
+  icon: JSX.Element
+  children?: JSX.Element
+}
+
+interface ButtonWithoutIconProps extends ButtonBaseProps {
+  icon?: JSX.Element
+  children: JSX.Element
+}
+
 export const Button: ParentComponent<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
-    loading?: boolean
-    disabled?: boolean
-    icon?: JSX.Element
-  }
+  ButtonWithIconProps | ButtonWithoutIconProps
 > = (props) => {
-  const [local, others] = splitProps(props, [
-    'class',
-    'loading',
-    'disabled',
-    'icon',
-  ])
+  const [local, others] = splitProps(props, ['class', 'loading', 'icon'])
 
   return (
     <button
@@ -22,29 +28,12 @@ export const Button: ParentComponent<
         local.loading ? 'btn-disabled' : local.class,
       )}
       {...others}
-      onClick={(e) => {
-        if (props.disabled) {
-          e.preventDefault()
-          e.stopPropagation()
-
-          return
-        }
-
-        if (typeof props.onClick === 'function') {
-          props.onClick(e)
-        }
-      }}
     >
       <Show when={local.loading}>
         <div class="loading loading-spinner" />
       </Show>
 
-      <span
-        class="truncate"
-        classList={{
-          'flex-1': !local.icon,
-        }}
-      >
+      <span class="truncate" classList={{ 'flex-1': !local.icon }}>
         {props.icon || props.children}
       </span>
     </button>
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index 8be1c85..ffc64a7 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -59,7 +59,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs tabs-boxed gap-2">
+        <div class="tabs-boxed tabs gap-2">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -81,13 +81,14 @@ export default () => {
             class="btn btn-circle btn-sm"
             disabled={allProviderIsUpdating()}
             onClick={(e) => onUpdateAllProviderClick(e)}
-          >
-            <IconReload
-              class={twMerge(
-                allProviderIsUpdating() && 'animate-spin text-success',
-              )}
-            />
-          </Button>
+            icon={
+              <IconReload
+                class={twMerge(
+                  allProviderIsUpdating() && 'animate-spin text-success',
+                )}
+              />
+            }
+          />
         </Show>
       </div>
 
@@ -133,14 +134,15 @@ export default () => {
                     class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
                     disabled={updatingMap()[ruleProvider.name]}
                     onClick={(e) => onUpdateProviderClick(e, ruleProvider.name)}
-                  >
-                    <IconReload
-                      class={twMerge(
-                        updatingMap()[ruleProvider.name] &&
-                          'animate-spin text-success',
-                      )}
-                    />
-                  </Button>
+                    icon={
+                      <IconReload
+                        class={twMerge(
+                          updatingMap()[ruleProvider.name] &&
+                            'animate-spin text-success',
+                        )}
+                      />
+                    }
+                  />
                 </div>
               )}
             </For>