fix: btn animate

MetaCubeX · Sep 2, 2023 · a29e638 · a29e638
1 parent 5d43ea0
commit a29e638
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
@@ -7,6 +7,7 @@ import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodePreview from '~/components/ProxyNodePreview'
 import { useProxies } from '~/signals/proxies'
 import type { Proxy } from '~/types'
+import { getBtnElFromClickEvent } from '~/utils/proxies'
 
 export default () => {
   const [t] = useI18n()
@@ -22,7 +23,7 @@ export default () => {
   }
 
   const onSpeedTestClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-pulse')
     e.stopPropagation()

diff --git a/src/pages/ProxyProvider.tsx b/src/pages/ProxyProvider.tsx
@@ -7,7 +7,7 @@ import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodePreview from '~/components/ProxyNodePreview'
 import SubscriptionInfo from '~/components/SubscriptionInfo'
 import { useProxies } from '~/signals/proxies'
-import { formatTimeFromNow } from '~/utils/proxies'
+import { formatTimeFromNow, getBtnElFromClickEvent } from '~/utils/proxies'
 
 export default () => {
   const [t] = useI18n()
@@ -23,7 +23,7 @@ export default () => {
   )
 
   const onHealthCheckClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-pulse')
     e.stopPropagation()
@@ -32,7 +32,7 @@ export default () => {
   }
 
   const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-spin')
     e.stopPropagation()
@@ -41,7 +41,7 @@ export default () => {
   }
 
   const onUpdateAllProviderClick = async (e: MouseEvent) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-spin')
     e.stopPropagation()

diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
@@ -3,7 +3,7 @@ import { IconReload } from '@tabler/icons-solidjs'
 import InfiniteScroll from 'solid-infinite-scroll'
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 import { useRules } from '~/signals/rules'
-import { formatTimeFromNow } from '~/utils/proxies'
+import { formatTimeFromNow, getBtnElFromClickEvent } from '~/utils/proxies'
 
 export default () => {
   const [t] = useI18n()
@@ -22,7 +22,7 @@ export default () => {
   })
 
   const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-spin')
     e.stopPropagation()
@@ -31,7 +31,7 @@ export default () => {
   }
 
   const onUpdateAllProviderClick = async (e: MouseEvent) => {
-    const el = e.target as HTMLElement
+    const el = getBtnElFromClickEvent(e)
 
     el.classList.add('animate-spin')
     e.stopPropagation()

diff --git a/src/utils/proxies.ts b/src/utils/proxies.ts
@@ -6,3 +6,13 @@ dayjs.extend(relativeTime)
 export function formatTimeFromNow(time: number | string) {
   return dayjs(time).fromNow()
 }
+
+export function getBtnElFromClickEvent(event: MouseEvent) {
+  let el = event.target as HTMLElement
+
+  while (el && !el.classList.contains('btn')) {
+    el = el.parentElement!
+  }
+
+  return el
+}