Grid List

import * as React from 'react'
import { GridList } from '@hamur/react/grid-list'

const people = [
  { value: 'ada', name: 'Ada Lovelace', email: 'ada@example.com' },
  { value: 'grace', name: 'Grace Hopper', email: 'grace@example.com' },
  { value: 'alan', name: 'Alan Turing', email: 'alan@example.com', away: true },
  { value: 'katherine', name: 'Katherine Johnson', email: 'katherine@example.com' },
  { value: 'edsger', name: 'Edsger Dijkstra', email: 'edsger@example.com' },
]

export default function GridListMultipleExample() {
  const [value, setValue] = React.useState<string[]>(['ada'])
  return (
    <div className="stack">
      <GridList.Root
        className="grid-list"
        aria-label="Recipients"
        selectable
        multiple
        value={value}
        onValueChange={setValue}
      >
        {people.map((person) => (
          <GridList.Item
            key={person.value}
            value={person.value}
            disabled={person.away}
            className="grid-list-item"
          >
            <GridList.ItemContent className="grid-list-cell">
              <GridList.ItemIndicator
                keepMounted
                className="grid-list-check"
              >
                <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
                  <path d="M3 8.5l3.5 3.5 6.5-8" />
                </svg>
              </GridList.ItemIndicator>
              <span className="grid-list-body">
                <GridList.ItemText className="grid-list-text">
                  {person.name}
                </GridList.ItemText>
                <GridList.ItemDescription
                  className="grid-list-description"
                >
                  {person.away ? 'Away until Monday' : person.email}
                </GridList.ItemDescription>
              </span>
            </GridList.ItemContent>
          </GridList.Item>
        ))}
      </GridList.Root>
      <p className="muted">Selected: {value.join(', ') || 'none'}</p>
    </div>
  )
}

import { GridList } from '@hamur/react/grid-list'

const albums = [
  { value: 'dawn', name: 'Dawn', count: '24 photos' },
  { value: 'harbor', name: 'Harbor', count: '18 photos' },
  { value: 'forest', name: 'Forest', count: '41 photos' },
  { value: 'desert', name: 'Desert', count: '12 photos' },
  { value: 'city', name: 'City', count: '57 photos' },
  { value: 'snow', name: 'Snow', count: '9 photos' },
  { value: 'garden', name: 'Garden', count: '33 photos' },
  { value: 'coast', name: 'Coast', count: '27 photos' },
]

export default function GridListLayoutExample() {
  return (
    <GridList.Root
      className="grid-list grid-list-cards"
      aria-label="Albums"
      layout="grid"
      selectable
      defaultValue="forest"
    >
      {albums.map((album) => (
        <GridList.Item
          key={album.value}
          value={album.value}
          className="grid-list-item"
        >
          <GridList.ItemContent className="grid-list-cell grid-list-card">
            <span className="grid-list-cover" aria-hidden="true" />
            <GridList.ItemText className="grid-list-text">
              {album.name}
            </GridList.ItemText>
            <GridList.ItemDescription
              className="grid-list-description"
            >
              {album.count}
            </GridList.ItemDescription>
          </GridList.ItemContent>
        </GridList.Item>
      ))}
    </GridList.Root>
  )
}

import * as React from 'react'
import { GridList } from '@hamur/react/grid-list'

const labels: Record<string, string> = {
  intro: 'Intro',
  river: 'River Song',
  night: 'Night Drive',
  morning: 'Morning Light',
  outro: 'Outro',
}

interface Move {
  items: string[]
  target: string
  position: 'before' | 'after'
}

/** The app applies a move to its own data: the moved rows out, then in before or after the target. */
function applyMove(order: string[], { items, target, position }: Move) {
  const rest = order.filter((value) => !items.includes(value))
  const index = rest.indexOf(target) + (position === 'after' ? 1 : 0)
  return [...rest.slice(0, index), ...items, ...rest.slice(index)]
}

export default function GridListMoveExample() {
  const [order, setOrder] = React.useState(Object.keys(labels))
  return (
    <div className="stack">
      <GridList.Root
        className="grid-list"
        aria-label="Playlist"
        allowMove
        onItemMove={(move: Move) => setOrder((previous) => applyMove(previous, move))}
      >
        {order.map((value, index) => (
          <GridList.Item key={value} value={value} className="grid-list-item">
            <GridList.ItemContent className="grid-list-cell">
              <GridList.ItemHandle className="grid-list-handle">
                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                  <path d="M6 3.5h.01M10 3.5h.01M6 8h.01M10 8h.01M6 12.5h.01M10 12.5h.01" />
                </svg>
              </GridList.ItemHandle>
              <span className="grid-list-number">{index + 1}</span>
              <GridList.ItemText className="grid-list-text">
                {labels[value]}
              </GridList.ItemText>
            </GridList.ItemContent>
          </GridList.Item>
        ))}
      </GridList.Root>
      <p className="muted">
        Drag a row by its handle, or press Ctrl+X on it, move and press Ctrl+V.
      </p>
    </div>
  )
}

import * as React from 'react'
import { GridList } from '@hamur/react/grid-list'

// Rows of a fixed height, windowed by hand: only the rows near the scroll position render.
const ROW = 40
const VIEWPORT = 280
const OVERSCAN = 10
const COUNT = 1000

// Every item, mounted or not: Home, End, the page keys and typeahead work on it.
const items = Array.from({ length: COUNT }, (_, index) => index + 1)
const getLabel = (item: number) => `Message ${String(item).padStart(4, '0')}`

export default function GridListVirtualizedExample() {
  const scrollerRef = React.useRef<HTMLDivElement | null>(null)
  const [scrollTop, setScrollTop] = React.useState(0)
  const first = Math.max(0, Math.floor(scrollTop / ROW) - OVERSCAN)
  const last = Math.min(COUNT, Math.ceil((scrollTop + VIEWPORT) / ROW) + OVERSCAN)
  // The list asks for the row at `index` to be scrolled into view, then focuses it once it mounts.
  function scrollToIndex(index: number) {
    const scroller = scrollerRef.current
    if (!scroller) {
      return
    }
    const top = index * ROW
    if (top < scroller.scrollTop) {
      scroller.scrollTop = top
    } else if (top + ROW > scroller.scrollTop + scroller.clientHeight) {
      scroller.scrollTop = top + ROW - scroller.clientHeight
    }
    setScrollTop(scroller.scrollTop)
  }

  return (
    <div className="field">
      <div id="grid-list-virtual-label" className="grid-list-label">
        1,000 messages
      </div>
      <div
        ref={scrollerRef}
        className="grid-list-scroller"
        onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}
      >
        <GridList.Root
          className="grid-list grid-list-virtual"
          aria-labelledby="grid-list-virtual-label"
          items={items}
          virtualized
          itemToStringLabel={getLabel}
          onItemHighlighted={(_item: number, { index }: { index: number }) => scrollToIndex(index)}
          style={{ height: COUNT * ROW }}
        >
          {items.slice(first, last).map((item, offset) => (
            <GridList.Item
              key={item}
              value={item}
              index={first + offset}
              className="grid-list-item"
              style={{ transform: `translateY(${(first + offset) * ROW}px)` }}
            >
              <GridList.ItemContent className="grid-list-cell">
                <GridList.ItemText className="grid-list-text">
                  {getLabel(item)}
                </GridList.ItemText>
              </GridList.ItemContent>
            </GridList.Item>
          ))}
        </GridList.Root>
      </div>
    </div>
  )
}