import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as SwitchStories from './switch.stories.tsx'

<Meta of={SwitchStories} />

# GridEditorSwitch

```tsx
import { GridEditorSwitch } from '@planview/pv-grid'
```

This is a special type of editor called a hybrid editor. The switch will be used as both the Renderer and the Editor. This means even without the grid being in edit mode it will still trigger `onCellChange` when changed. If you are just displaying a true/false value but do not wish to enable editing, do not use this control.

<Canvas of={SwitchStories.Default} />

### Props provided by the Grid (via `Editor`)

Additional props are provided by the grid that are not used by this editor.

<Controls include={['value', 'onConfirm', 'onCancel', 'mode', 'tabIndex']} />

## Usage with Column definition

This component should be used as part of a custom `Editor` method on the Column configuration. You will also need to set `hybridEditor` to `true`.

```tsx
import { GridEditorSwitch, Column } from '@planview/pv-grid'

const EditableColumn: Column = {
    id: 'enabled',
    label: 'Enabled',
    cell: {
        editable: true,
        hybridEditor: true,
        Editor: GridEditorSwitch,
    },
}
```

## Conditionally rendering disabled state

To render the `GridEditorSwitch` as disabled you would need to set the `hybridEditor` attribute to `"always"` and then control the disabled state of each row using the `editing` attribute.

```tsx
import { GridEditorSwitch, Column } from '@planview/pv-grid'

const EditableColumn: Column = {
    id: 'enabled',
    label: 'Enabled',
    cell: {
        editable: ({ row }) => checkIfRowCanBeEdited(row),
        hybridEditor: 'always',
        Editor: GridEditorSwitch,
    },
}
```

<Canvas of={SwitchStories.Disabled} />