62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { Select } from '../js/shared/components/select'
|
|
|
|
const items = [1, 2, 3, 4].map(index => ({
|
|
key: index,
|
|
value: `Demo item ${index}`,
|
|
group: index >= 3 ? 'Large numbers' : undefined,
|
|
}))
|
|
|
|
export const Base = () => {
|
|
return (
|
|
<Select
|
|
items={items}
|
|
itemToString={x => String(x?.value)}
|
|
itemToKey={x => String(x.key)}
|
|
defaultText="Choose an item"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const WithSubtitles = () => {
|
|
return (
|
|
<Select
|
|
items={items}
|
|
itemToString={x => String(x?.value)}
|
|
itemToKey={x => String(x.key)}
|
|
itemToSubtitle={x => x?.group ?? ''}
|
|
defaultText="Choose an item"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const WithSelectedIcon = () => {
|
|
return (
|
|
<Select
|
|
items={items}
|
|
itemToString={x => String(x?.value)}
|
|
itemToKey={x => String(x.key)}
|
|
itemToSubtitle={x => x?.group ?? ''}
|
|
defaultText="Choose an item"
|
|
selectedIcon
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const WithDisabledItem = () => {
|
|
return (
|
|
<Select
|
|
items={items}
|
|
itemToString={x => String(x?.value)}
|
|
itemToKey={x => String(x.key)}
|
|
itemToDisabled={x => x?.key === 1}
|
|
itemToSubtitle={x => x?.group ?? ''}
|
|
defaultText="Choose an item"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default {
|
|
title: 'Shared / Components / Select',
|
|
component: Select,
|
|
}
|