DataList 数据列表

'use client'

import { useState } from 'react'
import { Bookmark } from 'lucide-react'
import { DataList, Image, Link, Stack, Text, Toggle, Tooltip } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN')

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

  return (
    <DataList
      items={items.slice(3, 6)}
      itemKey="id"
      itemDescription="subtitle"
      defaultLayout="grid"
      layoutToggle
      gridMin="10rem"
      label="自定义条目"
      className="max-w-2xl"
      renderHeader={() => (
        <Text size="sm" tone="muted">
          3 条作品
        </Text>
      )}
      renderTitle={({ item }) => (
        <Link href={item.url} target="_blank" rel="noopener noreferrer" tone="neutral">
          {item.title}
        </Link>
      )}
      renderMedia={({ item }) => (
        <Image src={item.cover.src} alt="" fit="cover" className="size-full" />
      )}
      renderMeta={({ item }) => (
        <Stack gap="xs" className="min-w-0 w-full">
          <Tooltip content={item.developer}>
            <Text size="xs" tone="muted" truncate className="w-fit max-w-full">
              {item.developer}
            </Text>
          </Tooltip>
          <Text as="time" dateTime={item.released} size="xs" tone="muted">
            {item.released}
          </Text>
        </Stack>
      )}
      renderActions={({ item }) => (
        <Toggle
          value={saved[item.id] ?? false}
          onValueChange={value => setSaved(current => ({ ...current, [item.id]: value }))}
          size="sm"
          label={`标记 ${item.title}`}
          tooltip={false}
          renderIcon={({ pressed }) => (
            <Bookmark className={pressed ? 'fill-current' : undefined} />
          )}
        >
          {saved[item.id] ? '已标记' : '标记'}
        </Toggle>
      )}
    />
  )
}

'use client'

import { useState } from 'react'
import { DataList, Select, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN')
const sizes = [10, 20, 50].map(value => ({ value, label: `${value} 条 / 页` }))

export default function Demo() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <DataList
      page={page}
      onPageChange={setPage}
      pageSize={pageSize}
      onPageSizeChange={setPageSize}
      items={items}
      itemKey="id"
      itemTitle="title"
      itemDescription="subtitle"
      pagination
      className="max-w-2xl"
      renderHeader={({ pageSize: size, setPageSize: resize }) => (
        <>
          <Text size="sm" tone="muted">
            共 {items.length} 条
          </Text>
          <Select
            value={size}
            options={sizes}
            size="sm"
            className="w-36 max-w-full"
            aria-label="每页条数"
            onValueChange={value => resize(Number(value))}
          />
        </>
      )}
      renderMeta={({ item }) => (
        <Text size="xs" tone="muted">
          {item.released}
        </Text>
      )}
    />
  )
}

'use client'

import { useMemo, useState } from 'react'
import { Button, DataList, Empty, SearchInput, Select, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN')
const options = [
  { value: 'release', label: '发行时间降序' },
  { value: 'title', label: '名称排序' },
]

export default function Demo() {
  const [query, setQuery] = useState('')
  const [order, setOrder] = useState<string | number | null | undefined>('release')
  const [page, setPage] = useState(1)
  const filtered = useMemo(
    () =>
      items
        .filter(item =>
          `${item.title} ${item.originalTitle} ${item.developer}`
            .toLocaleLowerCase()
            .includes(query.trim().toLocaleLowerCase()),
        )
        .toSorted((a, b) =>
          order === 'release'
            ? b.released.localeCompare(a.released)
            : a.title.localeCompare(b.title),
        ),
    [query, order],
  )

  return (
    <DataList
      page={page}
      onPageChange={setPage}
      items={filtered}
      itemKey="id"
      itemTitle="title"
      itemDescription="subtitle"
      pagination
      pageSize={10}
      label="筛选结果"
      className="max-w-2xl"
      renderHeader={() => (
        <>
          <SearchInput
            value={query}
            onValueChange={value => {
              setQuery(value)
              setPage(1)
            }}
            placeholder="搜索名称或开发商"
            aria-label="搜索"
            className="w-full @lg/hn-data-list:min-w-0 @lg/hn-data-list:flex-1"
          />
          <Select
            value={order}
            onValueChange={value => {
              setOrder(value)
              setPage(1)
            }}
            options={options}
            aria-label="排序方式"
            className="w-full @lg/hn-data-list:w-44"
          />
        </>
      )}
      renderMeta={({ item }) => (
        <Text size="xs" tone="muted">
          {item.released}
        </Text>
      )}
      renderEmpty={() => (
        <Empty
          title="没有匹配的作品"
          size="sm"
          icon={false}
          actions={
            <Button
              variant="outline"
              tone="neutral"
              size="sm"
              onClick={() => {
                setQuery('')
                setPage(1)
              }}
            >
              清空搜索
            </Button>
          }
        />
      )}
      renderFooter={({ total }) => (
        <Text size="xs" tone="muted">
          共 {total} 条结果
        </Text>
      )}
    />
  )
}

'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import { Button, DataList, Empty, Switch, Text } from '@hina-ui/react'
import type { DataListDemoItem } from '../../data-list'

export default function Demo() {
  const [page, setPage] = useState(1)
  const [rows, setRows] = useState<DataListDemoItem[]>([])
  const [total, setTotal] = useState<number>()
  const [loading, setLoading] = useState(true)
  const [knownTotal, setKnownTotal] = useState(true)
  const [hasNextPage, setHasNextPage] = useState(false)
  const [failed, setFailed] = useState(false)
  const controller = useRef<AbortController>(undefined)

  const load = useCallback(async (target: number) => {
    controller.current?.abort()
    const request = new AbortController()
    controller.current = request
    setLoading(true)
    setFailed(false)
    try {
      const response = await fetch(`/demo/data-list/page-${target}.json`, {
        signal: request.signal,
      })
      if (!response.ok) throw new Error(String(response.status))
      const data = (await response.json()) as {
        items: Omit<DataListDemoItem, 'subtitle'>[]
        total: number
        hasNextPage: boolean
      }
      if (request.signal.aborted) return
      setRows(
        data.items.map(item => ({
          ...item,
          title: item.title,
          subtitle: item.title === item.originalTitle ? '' : item.originalTitle,
        })),
      )
      setTotal(data.total)
      setHasNextPage(data.hasNextPage)
    } catch {
      if (!request.signal.aborted) {
        setRows([])
        setFailed(true)
      }
    } finally {
      if (!request.signal.aborted) setLoading(false)
    }
  }, [])

  useEffect(() => {
    void load(page)
  }, [load, page])

  useEffect(() => () => controller.current?.abort(), [])

  return (
    <DataList
      page={page}
      onPageChange={setPage}
      items={rows}
      itemKey="id"
      itemTitle="title"
      itemDescription="subtitle"
      pagination
      manual
      pageSize={10}
      total={knownTotal ? total : undefined}
      hasNextPage={hasNextPage}
      loading={loading}
      minHeight={400}
      className="max-w-2xl"
      label="远程条目"
      renderHeader={() => (
        <>
          <Switch checked={knownTotal} onCheckedChange={setKnownTotal} disabled={loading}>
            已知总条数
          </Switch>
          <Button
            variant="ghost"
            tone="neutral"
            size="sm"
            disabled={loading}
            onClick={() => void load(page)}
          >
            刷新
          </Button>
        </>
      )}
      renderMeta={({ item }) => (
        <Text size="xs" tone="muted">
          {item.released}
        </Text>
      )}
      renderEmpty={() => (
        <Empty
          title={failed ? '加载失败' : '暂无数据'}
          size="sm"
          actions={
            failed ? (
              <Button size="sm" onClick={() => void load(page)}>
                重试
              </Button>
            ) : undefined
          }
        />
      )}
    />
  )
}

'use client'

import { useState } from 'react'
import { DataList, Image, SegmentedControl, Stack, Text } from '@hina-ui/react'
import { dataListDemo } from '../../data-list'

const items = dataListDemo('zh-CN')
const options = [
  { value: 'initial', label: '首次加载' },
  { value: 'ready', label: '内容' },
  { value: 'refresh', label: '刷新' },
  { value: 'empty', label: '空态' },
]

export default function Demo() {
  const [state, setState] = useState<string | number>('initial')
  const rows = state === 'initial' || state === 'empty' ? [] : items.slice(0, 2)

  return (
    <Stack className="w-full max-w-2xl">
      <SegmentedControl
        value={state}
        onValueChange={setState}
        options={options}
        size="sm"
        aria-label="列表状态"
      />
      <DataList
        items={rows}
        itemKey="id"
        itemTitle="title"
        itemDescription="subtitle"
        loading={state === 'initial' || state === 'refresh'}
        placeholderCount={2}
        mediaRatio={3 / 4}
        height={280}
        label="条目"
        renderMedia={({ item }) => (
          <Image src={item.cover.src} alt="" fit="cover" className="size-full" />
        )}
        renderMeta={({ item }) => (
          <Text size="xs" tone="muted">
            {item.released}
          </Text>
        )}
      />
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { DataList, Image, Text, type DataListLayout } from '@hina-ui/react'
import { dataListVirtualDemo } from '../../data-list-virtual'

const items = dataListVirtualDemo('zh-CN')

export default function Demo() {
  const [layout, setLayout] = useState<DataListLayout>('list')
  const [range, setRange] = useState({ startIndex: -1, endIndex: -1 })

  return (
    <DataList
      layout={layout}
      onLayoutChange={setLayout}
      items={items}
      itemKey="id"
      itemTitle="title"
      itemDescription="subtitle"
      layoutToggle
      mediaRatio={layout === 'grid' ? 16 / 10 : 3 / 4}
      gridMin="12rem"
      height={400}
      virtualize={{ estimateSize: layout === 'grid' ? 280 : 128, overscan: 1 }}
      bodyClass="border-line rounded-lg border"
      contentClass="p-4"
      label="虚拟条目"
      className="max-w-2xl"
      onRangeChange={setRange}
      renderMedia={({ item }) => (
        <Image src={item.cover.src} alt="" fit="cover" className="size-full" />
      )}
      renderMeta={({ item }) => (
        <Text size="xs" tone="muted">
          {item.released}
        </Text>
      )}
      renderFooter={() => (
        <Text size="xs" tone="muted">
          可见范围：{range.startIndex + 1}–{range.endIndex + 1} / {items.length}
        </Text>
      )}
    />
  )
}