mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: infinite scroll for proxy card
This commit is contained in:
parent
540c398598
commit
258422353f
20
src/components/ProxyCardGroups.tsx
Normal file
20
src/components/ProxyCardGroups.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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 (
|
||||
|
Loading…
Reference in New Issue
Block a user