fix: btn disable && var name

This commit is contained in:
Zephyruso 2023-09-06 22:20:45 +08:00
parent aecbfbf36b
commit 6c880628ec
4 changed files with 25 additions and 12 deletions

View File

@ -2,13 +2,20 @@ import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
export const Button: ParentComponent< export const Button: ParentComponent<
JSX.ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean } JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
loading?: boolean
disabled?: boolean
}
> = (props) => { > = (props) => {
const [local, others] = splitProps(props, ['class', 'loading']) const [local, others] = splitProps(props, ['class', 'loading', 'disabled'])
return ( return (
<button <button
class={twMerge('btn', local.loading ? 'btn-disabled' : local.class)} class={twMerge(
'btn',
local.disabled && 'btn-disabled',
local.loading ? 'btn-disabled' : local.class,
)}
{...others} {...others}
> >
<Show when={local.loading}> <Show when={local.loading}>

View File

@ -73,12 +73,12 @@ export default () => {
const [paused, setPaused] = createSignal(false) const [paused, setPaused] = createSignal(false)
const updateConnections = const updateConnectionsWithSpeed =
(data: Connection[]) => (prevConnections: ConnectionWithSpeed[]) => { (connections: Connection[]) => (prevConnections: ConnectionWithSpeed[]) => {
const prevMap = new Map<string, Connection>() const prevMap = new Map<string, Connection>()
prevConnections.forEach((prev) => prevMap.set(prev.id, prev)) prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
const connections = data.map((connection) => { const connectionWithSpeed = connections.map((connection) => {
const prevConn = prevMap.get(connection.id) const prevConn = prevMap.get(connection.id)
if (!prevConn) { if (!prevConn) {
@ -96,7 +96,7 @@ export default () => {
const closedConnections = differenceWith( const closedConnections = differenceWith(
prevConnections, prevConnections,
connections, connectionWithSpeed,
(a, b) => a.id === b.id, (a, b) => a.id === b.id,
) )
@ -104,17 +104,17 @@ export default () => {
[...prev, ...closedConnections].slice(-1000), [...prev, ...closedConnections].slice(-1000),
) )
return connections.slice(-200) return connectionWithSpeed.slice(-200)
} }
createEffect(() => { createEffect(() => {
const data = connections()?.connections const connection = connections()?.connections
if (!data) { if (!connection) {
return return
} }
const updater = updateConnections(data) const updater = updateConnectionsWithSpeed(connection)
setActiveConnectionsWithSpeed(updater) setActiveConnectionsWithSpeed(updater)
}) })

View File

@ -98,7 +98,7 @@ export default () => {
return ( return (
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs tabs-boxed gap-2">
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
@ -117,6 +117,7 @@ export default () => {
<Button <Button
class="btn btn-circle" class="btn btn-circle"
disabled={isAllProviderUpdating()}
onClick={(e) => onUpdateAllProviderClick(e)} onClick={(e) => onUpdateAllProviderClick(e)}
> >
<IconReload <IconReload
@ -148,6 +149,7 @@ export default () => {
<div> <div>
<Button <Button
class="btn btn-circle btn-sm mr-2" class="btn btn-circle btn-sm mr-2"
disabled={updatingMap()[proxyProvider.name]}
onClick={(e) => onClick={(e) =>
onUpdateProviderClick(e, proxyProvider.name) onUpdateProviderClick(e, proxyProvider.name)
} }
@ -162,6 +164,7 @@ export default () => {
<Button <Button
class="btn btn-circle btn-sm" class="btn btn-circle btn-sm"
disabled={healthCheckingMap()[proxyProvider.name]}
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)} onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
> >
<IconBrandSpeedtest <IconBrandSpeedtest
@ -223,6 +226,7 @@ export default () => {
<span>{proxy.name}</span> <span>{proxy.name}</span>
<Button <Button
class="btn-circle btn-sm" class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxy.name]}
onClick={(e) => onLatencyTestClick(e, proxy.name)} onClick={(e) => onLatencyTestClick(e, proxy.name)}
> >
<IconBrandSpeedtest <IconBrandSpeedtest

View File

@ -76,6 +76,7 @@ export default () => {
{t('ruleProviders')} {t('ruleProviders')}
<Button <Button
class="btn-circle btn-ghost btn-sm ml-2" class="btn-circle btn-ghost btn-sm ml-2"
disabled={allProviderIsUpdating()}
onClick={(e) => onUpdateAllProviderClick(e)} onClick={(e) => onUpdateAllProviderClick(e)}
> >
<IconReload <IconReload
@ -98,6 +99,7 @@ export default () => {
</div> </div>
<Button <Button
class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4" class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
disabled={updatingMap()[rulesProvider.name]}
onClick={(e) => onUpdateProviderClick(e, rulesProvider.name)} onClick={(e) => onUpdateProviderClick(e, rulesProvider.name)}
> >
<IconReload <IconReload