Skip to content

Commit c8e74ac

Browse files
committed
update the example to have description in the drop down
1 parent e54dce5 commit c8e74ac

File tree

3 files changed

+24
-16
lines changed

3 files changed

+24
-16
lines changed

src/lib/Autocomplete_B/Autocomplete.stories.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,28 @@ type Story = StoryObj<typeof meta>;
3434
const todos = [
3535
{
3636
id: "1",
37-
name: "Foo"
37+
name: "Foo",
38+
description: "This is foo"
3839
},
3940
{
4041
id: "2",
41-
name: "Food"
42+
name: "Food",
43+
description: "This is food"
4244
},
4345
{
4446
id: "3",
45-
name: "Bar"
47+
name: "Bar",
48+
description: "This is bar"
4649
},
4750
{
4851
id: "4",
49-
name: "Nice Long text"
52+
name: "Nice Long text",
53+
description: "This is nice long text"
5054
},
5155
{
5256
id: "5",
53-
name: "Nice long text two three four"
57+
name: "Nice long text two three four",
58+
description: "This is nice long text two three four"
5459
},
5560

5661
]
@@ -59,6 +64,7 @@ const todos = [
5964
type Todo = {
6065
id: string;
6166
name: string;
67+
description: string;
6268
}
6369

6470
async function searchFn(searchTerm: string, pageNumber: number) {
@@ -92,7 +98,7 @@ export const Main: Story = {
9298
return <div>{v.name}</div>
9399
},
94100
itemKey: "id",
95-
valuePrettyNameFn: (item: Todo) => item.name,
101+
selectedValueDisplayStringFn: (item: Todo) => item.name,
96102

97103
},
98104
parameters: {
@@ -106,10 +112,9 @@ export function Interactive() {
106112
<div>
107113
<Autocomplete
108114
searchFn={searchFn}
109-
renderItem={(item) => <div>{item.name}</div>}
115+
renderItem={(item) => <div>{item.name} - {item.description}</div>}
110116
itemKey="id"
111-
valuePrettyNameFn={(item) => item.name}
112-
117+
selectedValueDisplayStringFn={(item) => item.name}
113118
/>
114119
</div>
115120
);
@@ -123,7 +128,7 @@ export const TestUserSearchesWithNoResults: Story = {
123128
return <div>{v.name}</div>
124129
},
125130
itemKey: "id",
126-
valuePrettyNameFn: (item: Todo) => item.name,
131+
selectedValueDisplayStringFn: (item: Todo) => item.name,
127132
},
128133
play: async ({ canvasElement }) => {
129134
const canvas = within(canvasElement);
@@ -158,7 +163,7 @@ export const TestUserSearchesWithResultsThenNoResults: Story = {
158163
return <div>{v.name}</div>
159164
},
160165
itemKey: "id",
161-
valuePrettyNameFn: (item: Todo) => item.name,
166+
selectedValueDisplayStringFn: (item: Todo) => item.name,
162167
},
163168
play: async ({ canvasElement }) => {
164169
const canvas = within(canvasElement);

src/lib/Autocomplete_B/Autocomplete.test.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ describe('Autocomplete', () => {
6464
renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
6565
itemKey="id"
6666
onSelectValue={vi.fn()}
67+
selectedValueDisplayStringFn={(item: TestItem) => item.name}
6768
/>
6869
);
6970

@@ -118,6 +119,7 @@ describe('Autocomplete', () => {
118119
renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
119120
itemKey="id"
120121
onSelectValue={vi.fn()}
122+
selectedValueDisplayStringFn={(item: TestItem) => item.name}
121123
/>
122124
);
123125

@@ -166,6 +168,7 @@ describe('Autocomplete', () => {
166168
renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
167169
itemKey="id"
168170
onSelectValue={vi.fn()}
171+
selectedValueDisplayStringFn={(item: TestItem) => item.name}
169172
/>
170173
);
171174

@@ -206,7 +209,7 @@ describe('Autocomplete', () => {
206209
renderItem={(item: TestItem) => <div>{item.name} - {item.description}</div>}
207210
itemKey="id"
208211
onSelectValue={onSelectValue}
209-
valuePrettyNameFn={(item: TestItem) => item.name}
212+
selectedValueDisplayStringFn={(item: TestItem) => item.name}
210213
/>
211214
);
212215

src/lib/Autocomplete_B/Autocomplete.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@ export type AutocompleteProps<T extends Record<string, unknown>, TKey extends ke
2020
onSelectValue?: (itemKey: TKey, itemValue: T) => void;
2121

2222
/**
23-
* When an item is selected, we need a pretty name to show in the input box
23+
* When an item is selected, this function is used to determine what string appears in the input box.
2424
* @param item
2525
* @returns
2626
*/
27-
valuePrettyNameFn: (item: T) => string;
27+
selectedValueDisplayStringFn: (item: T) => string;
2828
};
2929

3030
export function Autocomplete<T extends Record<string, unknown>, TKey extends keyof T>({
3131
searchFn,
3232
renderItem,
3333
itemKey,
3434
onSelectValue,
35-
valuePrettyNameFn
35+
selectedValueDisplayStringFn
3636
}: AutocompleteProps<T, TKey>) {
3737

3838

@@ -61,7 +61,7 @@ export function Autocomplete<T extends Record<string, unknown>, TKey extends key
6161
const handleItemSelect = (item: T, index: number) => {
6262
setHighlightedIndex(index);
6363

64-
const prettyName = valuePrettyNameFn(item);
64+
const prettyName = selectedValueDisplayStringFn(item);
6565
inputRef.current!.value = prettyName;
6666
setSearchTerm("");
6767
setItems([])

0 commit comments

Comments
 (0)