import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as Stories from './examples';

<Meta title="Components|Picker" />

# Picker

Renders the native `<select>` component.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| ...ViewProps              |           | |
| children                  | ?any      | |
| enabled                   | ?boolean  | true |
| onValueChange             | ?Function | |
| selectedValue             | ?string   | |
| style                     | ?Style    | |

### children

The items to display in the picker must be of type `Picker.Item`.

```js
<Picker>
  <Picker.Item label="Goblet of Fire" />
  <Picker.Item label="Order of the Phoenix" />
</Picker>
```

### enabled

If set to `false`, the picker will be disabled, i.e., the user will not be able
to make a selection.

### onValueChange

Callback for when an item is selected. This is called with the value and index
prop of the item that was selected: `(itemValue, itemIndex) => void`.

### selectedValue

Select the item with the matching value.

### style

```js
{
  ...ViewProps.style,
  color: color
}
```

# Picker.Item

Individual selectable item in a `Picker`.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| color                     | ?any      | |
| label                     | ?string   | |
| testID                    | ?string   | |
| value                     | ?string  \| ?number | |

### color

Color of the item label. (Limited by browser support.)

### label

Text to display for this item.

### testID

Used to locate this view in end-to-end tests.

### value

The value to be passed to the picker's `onValueChange` callback when this item
is selected.
