Skip to content

Commit

Permalink
feat(TreeSelect): getItemById prop docs
Browse files Browse the repository at this point in the history
  • Loading branch information
IsaevAlexandr committed Aug 13, 2024
1 parent 067db98 commit 50aac0d
Showing 1 changed file with 43 additions and 2 deletions.
45 changes: 43 additions & 2 deletions src/components/TreeSelect/__stories__/TreeSelectDocs.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ Rewritten component [Select](https://preview.gravity-ui.com/uikit/?path=/docs/co

`Storybook` provides complex examples how to use this components from this documentation.

### Import:
## Import:

```tsx
import {unstable_TreeSelect as TreeSelect} from '@gravity-ui/uikit/unstable';
```

### Basic example:
## Example

### Basic:

```tsx
import {
Expand Down Expand Up @@ -59,3 +61,42 @@ const Component = () => {
);
};
```

## Props:

### getItemById:

Take a look at this example:

```tsx
<TreeSelect
value={['two']}
items={['one', 'two', 'free']}
mapItemDataToContentProps={(title) => ({title})}
/>
```

In this case we will see select with `empty` value.

Why this happens?

Internal list representation make own `id` for every item. By default it bases on index of base and nested arrays.
Result `id` will be computed by formula: `{root-array-item-index}-{child-array-index-if-exists}-{...}`.
In example to select second item you need to set as a value item index:

```sh
value={['1']}
```

To fix our example we need to use `getItemById` prop and explicitly tell `TreeSelect` to use items values as uniq ids:

```diff
<TreeSelect
value={['two']}
+ getItemById={(value: id) => id}
items={['one', 'two', 'free']}
mapItemDataToContentProps={(title) => ({title})}
/>
```

Now we will se selected element with value `two`

0 comments on commit 50aac0d

Please sign in to comment.