Wheel Picker

Usage

import { WheelPicker } from '@wdzyi/ui';

<WheelPicker label='Alarm time' loop value={time} onValueChange={setTime} />

<WheelPicker
  label='Party size'
  columns={[{ label: 'Guests', options: ['1', '2', '3', '4', '5', '6', '7', '8'] }]}
  defaultValue={['2']}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

columnsWheelPickerColumn[]

Each has a label for screen readers, its options, and whether it goes round. Hour, minute and AM or PM by default.

value, defaultValue, onValueChangestring[], string[], (value: string[]) => void

The option chosen in each column. onValueChange is called as soon as a turned column knows where it will settle, so a flick reports where it’s going rather than every row it passes. A new value from outside turns the columns there.

loopboolean = false

Lets a column with more options than rows go round, as hours and minutes do. A column’s own loop says otherwise, and one with fewer options than rows never goes round.

rowsnumber = 5

How many rows show, with the chosen one in the middle. Five stand about 140px tall, and seven about 190px.

labelstring = 'Time'

Names the picker for screen readers.

classNamestring

Added to its root. Each column is as wide as its widest option.

Notes

• Each row sits on a drum, a step round it for each row from the band, so it’s tilted away, set back and quieter the further round it is. It’s drawn twice, quiet and in ink, and only the part crossing the band shows in ink. Past the last rows shown at rest, a row fades out whole before any of it reaches the window’s edge, so the window never cuts through one.
• A drag follows the pointer, and a column that doesn’t go round gives a little past either end. A flick carries on as far as its speed would take it in 300ms and settles on a spring damped to 0.9, so it barely overshoots. A tap on a row turns to it. A new value from outside is thrown there over 850ms, and 45ms more for each row it passes.
• A mouse wheel turns it a row a notch, and a trackpad turns it smoothly and settles 140ms after it stops. A scroll of the page that runs on over the picker stays with the page, and so does a turn past the end of a column that doesn’t go round.
• Each column is a spinbutton: the up arrow goes to the next option and the down arrow back, Page Up and Page Down go five at a time, and Home and End go to either end. Every row that crosses the band sends a tick cue, flicked, dragged, scrolled, stepped or thrown, with its place in the column as the value, and a column that settles on a new value sends select.
• With reduced motion, a column goes straight to its row, though a drag still follows the pointer.