1 | import * as React from 'react';
|
2 |
|
3 | type Props = {
|
4 | /**
|
5 | * Function to execute on selection change.
|
6 | */
|
7 | onValueChange: (value: string) => void | null;
|
8 | /**
|
9 | * Value of the currently selected toggle button.
|
10 | */
|
11 | value: string | null;
|
12 | /**
|
13 | * React elements containing toggle buttons.
|
14 | */
|
15 | children: React.ReactNode;
|
16 | };
|
17 |
|
18 | type ToggleButtonContextType = {
|
19 | value: string | null;
|
20 | onValueChange: (item: string) => void | null;
|
21 | };
|
22 |
|
23 | export const ToggleButtonGroupContext = React.createContext<
|
24 | ToggleButtonContextType
|
25 | >(null as any);
|
26 |
|
27 | /**
|
28 | * Toggle group allows to control a group of toggle buttons.</br>
|
29 | * It doesn't change the appearance of the toggle buttons. If you want to group them in a row, check out <a href="toggle-button-row.html">`ToggleButton.Row`</a>.
|
30 | *
|
31 | * <div class="screenshots">
|
32 | * <figure>
|
33 | * <img class="medium" src="screenshots/toggle-button-group.gif" />
|
34 | * </figure>
|
35 | * </div>
|
36 | *
|
37 | * ## Usage
|
38 | * ```js
|
39 | * import * as React from 'react';
|
40 | * import { ToggleButton } from 'react-native-paper';
|
41 | *
|
42 | * const MyComponent = () => {
|
43 | * const [value, setValue] = React.useState('left');
|
44 | *
|
45 | * return (
|
46 | * <ToggleButton.Group
|
47 | * onValueChange={value => setValue(value)}
|
48 | * value={value}>
|
49 | * <ToggleButton icon="format-align-left" value="left" />
|
50 | * <ToggleButton icon="format-align-right" value="right" />
|
51 | * </ToggleButton.Group>
|
52 | * );
|
53 | * };
|
54 | *
|
55 | * export default MyComponent;
|
56 | *```
|
57 | */
|
58 | const ToggleButtonGroup = ({ value, onValueChange, children }: Props) => (
|
59 | <ToggleButtonGroupContext.Provider
|
60 | value={{
|
61 | value,
|
62 | onValueChange,
|
63 | }}
|
64 | >
|
65 | {children}
|
66 | </ToggleButtonGroupContext.Provider>
|
67 | );
|
68 |
|
69 | ToggleButtonGroup.displayName = 'ToggleButton.Group';
|
70 |
|
71 | export default ToggleButtonGroup;
|
72 |
|
73 | // @component-docs ignore-next-line
|
74 | export { ToggleButtonGroup };
|