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 | import React, { useState } from 'react';
import { Story } from '@storybook/react';
import { Box } from '@mui/material';
import PopoverMultiSelect, { PopoverMultiSelectProps } from '../components/PopoverMultiSelect';
import Button from '../components/Button/Button';
export default {
title: 'PopoverMultiSelect',
component: PopoverMultiSelect,
};
const PopoverMultiSelectTemplate: Story<Omit<PopoverMultiSelectProps, 'anchorElement' | 'setAnchorElement'>> = (
args
) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleClick = (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => {
setAnchorEl(event?.currentTarget ?? null);
};
return (
<>
<PopoverMultiSelect anchorElement={anchorEl} setAnchorElement={setAnchorEl} {...args} />
<Box display='flex' justifyContent='center'>
<Button onClick={handleClick} icon='iconLayers' label='Click Me for a Popover' />
</Box>
</>
);
};
export const Default = PopoverMultiSelectTemplate.bind({});
Default.args = {
initialSelection: [1, 3],
onChange: (selection: any[]) => alert(selection),
sections: [
[
{ label: 'One', value: 1 },
{ label: 'Two', value: 2 },
],
[{ label: 'Three', value: 3 }],
],
menuAlign: 'right',
};
|