Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Story } from '@storybook/react';
import Dropdown, { Props as DropdownV1Props, DropdownV1, DropdownProps } from '../components/Dropdown';
export default {
title: 'Dropdown',
component: Dropdown,
};
const DropdownV1Template: Story<DropdownV1Props> = (args) => {
const [selected, setSelected] = React.useState('');
const handleChange = (value: string) => {
action('onChange')(value);
setSelected(value);
};
return <DropdownV1 {...args} selected={selected} onChange={handleChange} />;
};
export const LegacyDropdown = DropdownV1Template.bind({});
LegacyDropdown.args = {
id: '1',
label: 'Legacy Dropdown',
values: [
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
],
};
const DropdownTemplate: Story<DropdownProps> = (args) => {
const [selectedValue, setSelectedValue] = useState(args.selectedValue);
const handleChange = (value: string) => {
action('onChange')(value);
setSelectedValue(value);
};
return <Dropdown {...args} onChange={handleChange} selectedValue={selectedValue} />;
};
export const Default = DropdownTemplate.bind({});
Default.args = {
id: '1',
label: 'Dropdown',
placeholder: 'Select',
options: [
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3', fontStyle: 'oblique' },
{ label: 'Four', value: '4', fontWeight: 'bold' },
{ label: 'Five', value: '5', fontStyle: 'italic', fontWeight: 'bold' },
],
selectedValue: '2',
tooltipTitle: 'A handy tooltip',
};
const DropdownAutocompleteTemplate: Story<DropdownProps> = (args) => {
const [selectedValue, setSelectedValue] = useState(args.selectedValue);
const handleChange = (value: string) => {
action('onChange')(value);
setSelectedValue(value);
};
return <Dropdown {...args} onChange={handleChange} selectedValue={selectedValue} autocomplete={true} />;
};
export const Autocomplete = DropdownAutocompleteTemplate.bind({});
Autocomplete.args = {
hideClearIcon: true,
id: '2',
label: 'DropdownAutocomplete',
placeholder: 'Select',
options: [
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
],
selectedValue: '2',
tooltipTitle: 'A handy tooltip',
};
|