Virtualizer

import * as React from 'react'
import { Listbox } from '@hamur/react/listbox'
import { Virtualizer } from '@hamur/react/virtualizer'

const words = ['Amber', 'Cedar', 'Fern', 'Jade', 'Moss', 'Pearl', 'Sage', 'Zinc']
const options = Array.from(
  { length: 5000 },
  (_, index) =>
    `${words[Math.floor((index * words.length) / 5000)]} ${String(index + 1).padStart(4, '0')}`,
)

export default function VirtualizerListboxExample() {
  const [value, setValue] = React.useState<string | null>(null)
  return (
    <div className="field">
      <div id="virtualizer-listbox-label" className="listbox-label">
        5,000 colors
      </div>
      <Listbox.Root
        className="listbox virtualizer-listbox"
        aria-labelledby="virtualizer-listbox-label"
        items={options}
        value={value}
        onValueChange={(next) => setValue(next as string | null)}
      >
        <Virtualizer
          className="virtualizer-listbox-scroller"
          style={{ height: 260 }}
          itemHeight={32}
        >
          {(option: string) => (
            <Listbox.Item value={option} className="listbox-item">
              <Listbox.ItemIndicator className="listbox-item-indicator">✓</Listbox.ItemIndicator>
              <Listbox.ItemText className="listbox-item-text">{option}</Listbox.ItemText>
            </Listbox.Item>
          )}
        </Virtualizer>
      </Listbox.Root>
      <p className="muted">Selected: {value ?? 'none'}</p>
    </div>
  )
}

import * as React from 'react'
import { DataTable } from '@hamur/react/data-table'
import { Virtualizer } from '@hamur/react/virtualizer'

const COLUMNS = 40
const columns = Array.from({ length: COLUMNS }, (_, index) => index)
const rows = Array.from({ length: 1000 }, (_, index) => index + 1)
const reading = (row: number, column: number) => ((row * 31 + column * 17) % 900) + 100

export default function VirtualizerDataTableExample() {
  const [range, setRange] = React.useState({ start: 0, end: 15 })
  return (
    <div className="stack">
      <div className="virtualizer-table-scroller" style={{ height: 288 }}>
        <DataTable.Root
          className="data-table virtualizer-table"
          aria-label="Sensor readings"
          grid
          rows={rows}
          style={{ width: COLUMNS * 96 }}
        >
          <DataTable.Header>
            <DataTable.Row>
              {columns.map((column) => (
                <DataTable.ColumnHeader
                  key={column}
                  columnIndex={column}
                  className="data-table-head virtualizer-table-head"
                >
                  {column === 0 ? 'Sensor' : `Hour ${column}`}
                </DataTable.ColumnHeader>
              ))}
            </DataTable.Row>
          </DataTable.Header>
          <Virtualizer
            layout="table"
            scrollElement={null}
            itemHeight={36}
            columnCount={COLUMNS}
            columnWidth={96}
            onRangeChange={setRange}
          >
            {(row: number) => (
              <DataTable.Row value={row} className="data-table-row">
                {columns.map((column) =>
                  column === 0 ? (
                    <DataTable.RowHeader
                      key={column}
                      columnIndex={column}
                      className="data-table-cell virtualizer-table-cell"
                    >
                      Sensor {row}
                    </DataTable.RowHeader>
                  ) : (
                    <DataTable.Cell
                      key={column}
                      columnIndex={column}
                      className="data-table-cell data-table-number virtualizer-table-cell"
                    >
                      {reading(row, column)}
                    </DataTable.Cell>
                  ),
                )}
              </DataTable.Row>
            )}
          </Virtualizer>
        </DataTable.Root>
      </div>
      <p className="muted">
        Rendered rows {range.start + 1} to {range.end} of 1,000
      </p>
    </div>
  )
}

import * as React from 'react'
import { Virtualizer } from '@hamur/react/virtualizer'

const TOTAL = 1000
const PAGE = 30
const people = ['Ada', 'Grace']
const lines = [
  'Did the nightly build pass?',
  'Yes, all green.',
  'The flaky upload test failed once, then passed on the retry. I opened an issue so we stop ignoring it.',
  'Thanks!',
  'Can you look at the preview before the review this afternoon?',
]
const range = (first: number, last: number) =>
  Array.from({ length: last - first + 1 }, (_, index) => first + index)

export default function VirtualizerChatExample() {
  const [messages, setMessages] = React.useState(() => range(TOTAL - PAGE + 1, TOTAL))
  const loadOlder = () =>
    setMessages((current) =>
      current[0] > 1
        ? [...range(Math.max(1, current[0] - PAGE), current[0] - 1), ...current]
        : current,
    )
  return (
    <div className="stack">
      <div role="log" aria-label="Messages" className="virtualizer-chat-log">
        <Virtualizer
          className="virtualizer-chat"
          style={{ height: 300 }}
          anchor="end"
          items={messages}
          itemHeight={68}
          onStartReached={loadOlder}
        >
          {(id: number, _index: number, props) => (
            <div {...props} className="virtualizer-message" data-author={people[id % 2]}>
              <span className="virtualizer-row-meta">
                {people[id % 2]} · #{id}
              </span>
              <span>{lines[id % lines.length]}</span>
            </div>
          )}
        </Virtualizer>
      </div>
      <p className="muted">
        Loaded {messages.length} of {TOTAL.toLocaleString('en-US')} messages
      </p>
    </div>
  )
}

import * as React from 'react'
import { Virtualizer, type VirtualizerActions } from '@hamur/react/virtualizer'

type Align = 'auto' | 'start' | 'center' | 'end'

const COUNT = 10000
const rows = Array.from({ length: COUNT }, (_, index) => index)
const notes = ['', 'A second line of detail for this row.', '']

export default function VirtualizerScrollToIndexExample() {
  const actionsRef = React.useRef<VirtualizerActions | null>(null)
  const [index, setIndex] = React.useState(5000)
  const [align, setAlign] = React.useState<Align>('start')
  const [range, setRange] = React.useState({ start: 0, end: 15 })
  return (
    <div className="stack">
      <div className="virtualizer-controls">
        <label className="field">
          Row
          <input
            className="input"
            type="number"
            min={0}
            max={COUNT - 1}
            value={index}
            onChange={(event) =>
              setIndex(Math.min(COUNT - 1, Math.max(0, Number(event.target.value) || 0)))
            }
          />
        </label>
        <label className="field">
          Align
          <select
            className="input"
            value={align}
            onChange={(event) => setAlign(event.target.value as Align)}
          >
            <option value="auto">auto</option>
            <option value="start">start</option>
            <option value="center">center</option>
            <option value="end">end</option>
          </select>
        </label>
        <button
          className="button"
          type="button"
          onClick={() => actionsRef.current?.scrollToIndex(index, { align })}
        >
          Scroll
        </button>
      </div>
      <Virtualizer
        className="virtualizer-list"
        style={{ height: 280 }}
        role="list"
        aria-label="Rows"
        tabIndex={0}
        items={rows}
        estimatedItemHeight={40}
        actionsRef={actionsRef}
        onRangeChange={setRange}
      >
        {(row: number, _index: number, props) => (
          <div {...props} role="listitem" className="virtualizer-row" data-row={row}>
            <span>Row {row}</span>
            {notes[row % notes.length] ? (
              <span className="virtualizer-row-meta">{notes[row % notes.length]}</span>
            ) : null}
          </div>
        )}
      </Virtualizer>
      <p className="muted">
        Rendered rows {range.start} to {range.end - 1}
      </p>
    </div>
  )
}