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'
export const Button: ParentComponent<
JSX.ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean }
JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
loading?: boolean
disabled?: boolean
}
> = (props) => {
const [local, others] = splitProps(props, ['class', 'loading'])
const [local, others] = splitProps(props, ['class', 'loading', 'disabled'])
return (
<button
class={twMerge('btn', local.loading ? 'btn-disabled' : local.class)}
class={twMerge(
'btn',
local.disabled && 'btn-disabled',
local.loading ? 'btn-disabled' : local.class,
)}
{...others}
>
<Show when={local.loading}>

View File

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

View File

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

View File

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