feat: infinite scroll for proxy card

This commit is contained in:
Zephyruso 2023-09-01 18:31:44 +08:00
parent 540c398598
commit 258422353f
2 changed files with 25 additions and 13 deletions

View File

@ -0,0 +1,20 @@
import InfiniteScroll from 'solid-infinite-scroll'
import { createMemo, createSignal } from 'solid-js'
import ProxyNodeCard from './ProxyNodeCard'
export default (props: { proxies: string[]; now?: string }) => {
const [maxRender, setMaxRender] = createSignal(30)
const proxies = createMemo(() => props.proxies.slice(0, maxRender()))
return (
<InfiniteScroll
each={proxies()}
hasMore={proxies().length < props.proxies.length}
next={() => setMaxRender(maxRender() + 30)}
>
{(proxy) => (
<ProxyNodeCard proxyName={proxy} isSelected={props.now === proxy} />
)}
</InfiniteScroll>
)
}

View File

@ -1,7 +1,7 @@
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
import { For, Show, createSignal, onMount } from 'solid-js'
import Collapse from '~/components/Collpase'
import ProxyNodeCard from '~/components/ProxyNodeCard'
import ProxyCardGroups from '~/components/ProxyCardGroups'
import ProxyNodeDots from '~/components/ProxyNodeDots'
import SubscriptionInfo from '~/components/SubscriptionInfo'
import { useProxies } from '~/signals/proxies'
@ -90,15 +90,7 @@ export default () => {
)
const content = (
<For each={proxy.all}>
{(proxyName) => (
<ProxyNodeCard
proxyName={proxyName}
isSelected={proxy.now === proxyName}
onClick={() => onProxyNodeClick(proxy, proxyName)}
/>
)}
</For>
<ProxyCardGroups proxies={proxy.all!} now={proxy.now} />
)
return (
@ -169,9 +161,9 @@ export default () => {
</>
)
const content = (
<For each={proxyProvider.proxies}>
{(proxy) => <ProxyNodeCard proxyName={proxy.name} />}
</For>
<ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)}
/>
)
return (