github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Dropdown.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React, { useState } from 'react';
     3  import { ComponentStory, ComponentMeta } from '@storybook/react';
     4  import Dropdown, { MenuItem, SubMenu } from '@ui/Dropdown';
     5  import '../webapp/sass/profile.scss';
     6  
     7  const DropdownSelect = (args) => {
     8    const [country, setCountry] = useState(null);
     9    return (
    10      <Dropdown
    11        {...args}
    12        label="Select a country"
    13        value={country}
    14        onItemClick={(e) => setCountry(e.value)}
    15      >
    16        <SubMenu label="Europe">
    17          <MenuItem value="Italy">Italy</MenuItem>
    18          <MenuItem value="Spain">Spain</MenuItem>
    19          <MenuItem value="France">France</MenuItem>
    20        </SubMenu>
    21        <SubMenu label="Asia">
    22          <MenuItem value="Japan">Japan</MenuItem>
    23          <MenuItem value="China">China</MenuItem>
    24        </SubMenu>
    25      </Dropdown>
    26    );
    27  };
    28  
    29  export const DropdownWithLotsOfOptions = (args) => {
    30    const times = 100;
    31  
    32    // indirection just to shut up eslint
    33    const getKey = (i: number) => i;
    34  
    35    return (
    36      <Dropdown {...args} label="Foobar">
    37        <SubMenu label="foobar" overflow="auto" position="anchor">
    38          {new Array(times).fill(0).map((a, i) => (
    39            <MenuItem key={getKey(i)} value="foo">
    40              foo
    41            </MenuItem>
    42          ))}
    43        </SubMenu>
    44      </Dropdown>
    45    );
    46  };
    47  
    48  const Template: ComponentStory<typeof Dropdown> = (args) => (
    49    <DropdownSelect {...args} />
    50  );
    51  
    52  export default {
    53    title: 'Components/Dropdown',
    54    component: Dropdown,
    55  } as ComponentMeta<typeof Dropdown>;
    56  
    57  export const Default = Template.bind({});
    58  Default.args = {
    59    disabled: false,
    60  };