Skip to content

Commit 4f7c9e2

Browse files
committed
chore(dropdown): add split button action example
1 parent f4c999c commit 4f7c9e2

File tree

2 files changed

+87
-0
lines changed

2 files changed

+87
-0
lines changed

packages/react-core/src/components/Dropdown/examples/Dropdown.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,11 @@ To provide users with more context about a `<DropdownItem>`, pass a short messag
6363
```ts file="./DropdownWithDescriptions.tsx"
6464

6565
```
66+
67+
### Split button
68+
69+
Description of split button
70+
71+
```ts file="./DropdownWithSplit.tsx"
72+
73+
```
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {
2+
Dropdown,
3+
MenuToggle,
4+
MenuToggleCheckbox,
5+
DropdownItem,
6+
DropdownList,
7+
Divider,
8+
MenuToggleElement
9+
} from '@patternfly/react-core';
10+
11+
export const DropdownSplitButtonText: React.FunctionComponent = () => {
12+
const [isOpen, setIsOpen] = React.useState(false);
13+
14+
const onToggleClick = () => {
15+
setIsOpen(!isOpen);
16+
};
17+
18+
const onFocus = () => {
19+
const element = document.getElementById('toggle-split-button-text');
20+
element?.focus();
21+
};
22+
23+
const onSelect = () => {
24+
setIsOpen(false);
25+
onFocus();
26+
};
27+
28+
return (
29+
<Dropdown
30+
onSelect={onSelect}
31+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
32+
<MenuToggle
33+
splitButtonItems={[<MenuToggleCheckbox id="split-button-checkbox" key="checkbox"></MenuToggleCheckbox>]}
34+
ref={toggleRef}
35+
onClick={onToggleClick}
36+
isExpanded={isOpen}
37+
/>
38+
)}
39+
isOpen={isOpen}
40+
>
41+
<DropdownList>
42+
<DropdownItem value={0} key="action">
43+
Action
44+
</DropdownItem>
45+
<DropdownItem
46+
value={1}
47+
key="link"
48+
to="#default-link2"
49+
// Prevent the default onClick functionality for example purposes
50+
onClick={(ev: any) => ev.preventDefault()}
51+
>
52+
Link
53+
</DropdownItem>
54+
<DropdownItem value={2} isDisabled key="disabled action">
55+
Disabled Action
56+
</DropdownItem>
57+
<DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
58+
Disabled Link
59+
</DropdownItem>
60+
<DropdownItem
61+
value={4}
62+
isAriaDisabled
63+
key="aria-disabled link"
64+
to="#default-link5"
65+
tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
66+
>
67+
Aria-disabled Link
68+
</DropdownItem>
69+
<Divider component="li" key="separator" />
70+
<DropdownItem value={5} key="separated action">
71+
Separated Action
72+
</DropdownItem>
73+
<DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
74+
Separated Link
75+
</DropdownItem>
76+
</DropdownList>
77+
</Dropdown>
78+
);
79+
};

0 commit comments

Comments
 (0)