VirtualList 虚拟列表

'use client'

import { VirtualList, Inline, Text } from '@hina-ui/react'

const items = Array.from({ length: 1000 }, (_, id) => ({ id, label: `条目 ${id + 1}` }))

export default function Demo() {
  return (
    <VirtualList
      items={items}
      getKey={item => item.id}
      height={240}
      estimateSize={48}
      dynamic={false}
      label="固定高度列表"
      className="border-line rounded-lg border"
    >
      {({ item, index }) => (
        <Inline
          justify="between"
          gap="sm"
          wrap={false}
          className="border-line h-full border-b px-4"
        >
          <Text as="span" size="sm">
            {item.label}
          </Text>
          <Text as="span" size="sm" tone="muted" className="tabular-nums">
            {index + 1} / {items.length}
          </Text>
        </Inline>
      )}
    </VirtualList>
  )
}

'use client'

import { useState } from 'react'
import {
  VirtualList,
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Text,
} from '@hina-ui/react'

const items = Array.from({ length: 500 }, (_, id) => ({
  id,
  title: `条目 ${id + 1}`,
  description: '内容自然换行，每项高度由实际内容决定。'.repeat((id % 3) + 1),
}))

export default function Demo() {
  const [expanded, setExpanded] = useState<Record<number, boolean>>({})

  return (
    <VirtualList
      items={items}
      getKey={item => item.id}
      estimateSize={140}
      height={360}
      label="动态高度列表"
      className="border-line rounded-lg border"
    >
      {({ item }) => (
        <Collapsible
          open={!!expanded[item.id]}
          onOpenChange={open => setExpanded(current => ({ ...current, [item.id]: open }))}
          className="border-line border-b p-4"
        >
          <Text size="sm" weight="medium">
            {item.title}
          </Text>
          <Text size="sm" tone="muted" className="mt-1">
            {item.description}
          </Text>
          <CollapsibleTrigger className="mt-2">
            {expanded[item.id] ? '收起' : '展开'}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <Text size="sm" tone="muted" className="pt-2">
              {'展开后增加的内容会自动参与高度计算。'.repeat(5)}
            </Text>
          </CollapsibleContent>
        </Collapsible>
      )}
    </VirtualList>
  )
}

'use client'

import { useRef, useState } from 'react'
import {
  VirtualList,
  NumberInput,
  Button,
  Inline,
  Stack,
  Text,
  type VirtualListExpose,
  type VirtualListRange,
} from '@hina-ui/react'

const items = Array.from({ length: 10000 }, (_, id) => ({ id, label: `条目 ${id + 1}` }))

export default function Demo() {
  const list = useRef<VirtualListExpose>(null)
  const [target, setTarget] = useState<number | null>(5000)
  const [range, setRange] = useState<VirtualListRange>({ startIndex: 0, endIndex: 0 })

  return (
    <Stack className="w-full">
      <Inline gap="sm">
        <NumberInput
          value={target}
          onValueChange={value => setTarget(value ?? null)}
          min={1}
          max={items.length}
          aria-label="条目序号"
          className="w-36"
        />
        <Button onClick={() => list.current?.scrollToIndex((target ?? 1) - 1, { align: 'center' })}>
          跳转
        </Button>
        <Button variant="outline" onClick={() => list.current?.scrollToOffset(0)}>
          回到顶部
        </Button>
        <Text as="span" size="sm" tone="muted" className="tabular-nums">
          可见 {range.startIndex + 1}–{range.endIndex + 1}
        </Text>
      </Inline>
      <VirtualList
        ref={list}
        items={items}
        getKey={item => item.id}
        dynamic={false}
        estimateSize={48}
        height={288}
        label="可跳转列表"
        className="border-line rounded-lg border"
        onRangeChange={setRange}
      >
        {({ item }) => (
          <Inline gap="none" className="border-line h-full border-b px-4">
            <Text size="sm">{item.label}</Text>
          </Inline>
        )}
      </VirtualList>
    </Stack>
  )
}

'use client'

import { VirtualList, Stack, Text } from '@hina-ui/react'

const items = Array.from({ length: 200 }, (_, id) => ({ id, label: `条目 ${id + 1}` }))

export default function Demo() {
  return (
    <Stack className="w-full">
      {(['ltr', 'rtl'] as const).map(dir => (
        <Stack key={dir} gap="sm">
          <Text size="xs" tone="muted" className="uppercase">
            {dir}
          </Text>
          <VirtualList
            items={items}
            getKey={item => item.id}
            orientation="horizontal"
            dir={dir}
            height={144}
            estimateSize={160}
            dynamic={false}
            gap={12}
            label={`${dir} 横向列表`}
          >
            {({ item, index }) => (
              <Stack
                justify="between"
                gap="sm"
                className="border-line bg-surface h-full rounded-lg border p-4"
              >
                <Text size="2xl" tone="muted" className="tabular-nums">
                  {String(index + 1).padStart(2, '0')}
                </Text>
                <Text size="sm">{item.label}</Text>
              </Stack>
            )}
          </VirtualList>
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

import { useMemo, useState } from 'react'
import { VirtualList, Button, Switch, Empty, Inline, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [loading, setLoading] = useState(false)
  const [empty, setEmpty] = useState(false)
  const items = useMemo(
    () => (empty ? [] : Array.from({ length: 100 }, (_, id) => ({ id, label: `条目 ${id + 1}` }))),
    [empty],
  )

  return (
    <Stack className="w-full">
      <Inline>
        <Switch checked={loading} onCheckedChange={setLoading}>
          加载中
        </Switch>
        <Button variant="outline" onClick={() => setEmpty(!empty)}>
          {empty ? '恢复条目' : '清空条目'}
        </Button>
      </Inline>
      <VirtualList
        items={items}
        getKey={item => item.id}
        loading={loading}
        height={240}
        estimateSize={48}
        dynamic={false}
        label="列表状态"
        className="border-line rounded-lg border"
        empty={<Empty title="暂无条目" description="列表中没有可显示的内容。" size="sm" />}
      >
        {({ item }) => (
          <Inline gap="none" className="border-line h-full border-b px-4">
            <Text size="sm">{item.label}</Text>
          </Inline>
        )}
      </VirtualList>
    </Stack>
  )
}