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

<Meta title="Components|Switch" />

# Switch

This is a controlled component that requires an `onValueChange` callback that
updates the value prop in order for the component to reflect user actions. If
the value prop is not updated, the component will continue to render the
supplied value prop instead of the expected result of any user actions.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| ...ViewProps              | | |
| activeThumbColor          | ?Color    | '#009688' |
| activeTrackColor          | ?Color    | '#A3D3CF' |
| disabled                  | ?boolean  | false |
| onValueChange             | ?Function | |
| thumbColor                | ?Color    | '#FAFAFA' |
| trackColor                | ?Color    | '#939393' |
| value                     | ?boolean  | false |

### activeThumbColor

The color of the thumb grip when the switch is turned on. (Web-only)

<Preview withSource='none'>
  <Story name="activeThumbColor">
    <Stories.activeThumbColor />
  </Story>
</Preview>

### activeTrackColor

The color of the track when the switch is turned on. (Web-only)

<Preview withSource='none'>
  <Story name="activeTrackColor">
    <Stories.activeTrackColor />
  </Story>
</Preview>

### disabled

If `true`, the user won't be able to interact with the switch.

<Preview withSource='none'>
  <Story name="disabled">
    <Stories.disabled />
  </Story>
</Preview>

### onValueChange

Invoked with the new value when the value changes.

<Preview withSource='none'>
  <Story name="onValueChange">
    <Stories.onValueChange />
  </Story>
</Preview>

### thumbColor

The color of the thumb grip when the switch is turned off.

<Preview withSource='none'>
  <Story name="thumbColor">
    <Stories.thumbColor />
  </Story>
</Preview>

### trackColor

The color of the track when the switch is turned off.

<Preview withSource='none'>
  <Story name="trackColor">
    <Stories.trackColor />
  </Story>
</Preview>

### value

The value of the switch. If `true` the switch will be turned on.

<Preview withSource='none'>
  <Story name="value">
    <Stories.value />
  </Story>
</Preview>

## Notes

Custom sizes can be created using styles.

```js
<Switch style={{ height: 30 }} />
```

<Preview withSource='none'>
  <Story name="customSize">
    <Stories.customSize />
  </Story>
</Preview>
