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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react';
import _ from 'lodash';
import { Meta, Story } from '@storybook/react';
import ButtonGroup, { IButtonGroupProps } from './ButtonGroup';
export default {
title: 'Controls/ButtonGroup',
component: ButtonGroup,
subcomponents: { 'ButtonGroup.Button': ButtonGroup.Button },
args: ButtonGroup.defaultProps,
parameters: {
docs: {
inlineStories: false,
description: {
component: ButtonGroup.peek.description,
},
},
},
} as Meta;
export const Basic: Story<IButtonGroupProps> = (args) => {
const buttonStyle = { width: '100px' };
return (
<ButtonGroup {...args}>
<ButtonGroup.Button style={buttonStyle}>Smol</ButtonGroup.Button>
<ButtonGroup.Button style={buttonStyle}>Lonnnnnnnng</ButtonGroup.Button>
<ButtonGroup.Button style={buttonStyle}>Medium</ButtonGroup.Button>
</ButtonGroup>
);
};
export const Stateful: Story<IButtonGroupProps> = (args) => {
const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
const handleSelect = (selectedIndex: number, { event, props }) => {
const currentIndices = selectedIndices;
// If the item does not exist in the original array add it, if it exists remove it.
setSelectedIndices(_.xor(currentIndices, [selectedIndex]));
};
return (
<ButtonGroup
{...args}
selectedIndices={selectedIndices}
onSelect={handleSelect}
>
<ButtonGroup.Button>Zero</ButtonGroup.Button>
<ButtonGroup.Button>One</ButtonGroup.Button>
<ButtonGroup.Button>Two</ButtonGroup.Button>
<ButtonGroup.Button>Three</ButtonGroup.Button>
</ButtonGroup>
);
};
export const Stateless: Story<IButtonGroupProps> = (args) => {
return (
<ButtonGroup {...args} selectedIndices={[7, 8]}>
<ButtonGroup.Button>Zero</ButtonGroup.Button>
<ButtonGroup.Button>One</ButtonGroup.Button>
<ButtonGroup.Button>Two</ButtonGroup.Button>
<ButtonGroup.Button>Three</ButtonGroup.Button>
<ButtonGroup.Button>Four</ButtonGroup.Button>
<ButtonGroup.Button isDisabled={true}>Five</ButtonGroup.Button>
<ButtonGroup.Button>Six</ButtonGroup.Button>
<ButtonGroup.Button>Seven</ButtonGroup.Button>
<ButtonGroup.Button>Eight</ButtonGroup.Button>
<ButtonGroup.Button>Nine</ButtonGroup.Button>
</ButtonGroup>
);
};
export const Disabled: Story<IButtonGroupProps> = (args) => {
const buttonStyle = { width: '100px' };
return (
<ButtonGroup {...args}>
<ButtonGroup.Button style={buttonStyle}>Zero</ButtonGroup.Button>
<ButtonGroup.Button isDisabled={true} style={buttonStyle}>
One
</ButtonGroup.Button>
<ButtonGroup.Button style={buttonStyle}>Two</ButtonGroup.Button>
<ButtonGroup.Button style={buttonStyle}>Three</ButtonGroup.Button>
</ButtonGroup>
);
};
export const OnClick: Story<IButtonGroupProps> = (args) => {
const handleClick = (label) => {
alert(label);
};
return (
<ButtonGroup {...args}>
<ButtonGroup.Button onClick={() => handleClick('Zero')}>
Zero
</ButtonGroup.Button>
<ButtonGroup.Button onClick={() => handleClick('One')}>
One
</ButtonGroup.Button>
</ButtonGroup>
);
};
|