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

<Meta of={InputStories} />

# GridEditorInput

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

This component is the default editor that is used when you mark a cell as `editable`. While editing, hitting `Escape` will cancel the change. Hitting `Enter` will commit the changes (as will clicking elsewhere on the page or Grid). Hitting `Tab` or `Shift+Tab` will also commit any changes, but will move you to the next or previous editable cell.

<Canvas of={InputStories.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', 'tabIndex']} />

### Props to customize behavior

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

## Usage with Column definition

This component should be used as part of a custom `Editor` method on the Column configuration.

Note: This is the default editor, so if you do not need any customization, you do not need to pass `Editor` as shown below since it is the default.

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

const EditableColumn: Column = {
    id: 'firstName',
    label: 'First Name',
    cell: {
        editable: true,
        Editor: GridEditorInput, // Optional, this is the default
    },
}
```

If you want to customize any additional props:

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

const EditableColumn: Column = {
    id: 'firstName',
    label: 'First Name',
    cell: {
        editable: true,
        Editor(props) {
            return <GridEditorInput {...props} placeholder="Valid value" />
        },
    },
}
```