UNPKG

2.36 kBJavaScriptView Raw
1import * as React from 'react';
2import { StyleSheet, View } from 'react-native';
3import ToggleButtonGroup from './ToggleButtonGroup';
4import ToggleButton from './ToggleButton';
5
6/**
7 * Toggle button row renders a group of toggle buttons in a row.
8 *
9 * <div class="screenshots">
10 * <figure>
11 * <img class="medium" src="screenshots/toggle-button-row.gif" />
12 * </figure>
13 * </div>
14 *
15 * ## Usage
16 * ```js
17 * import * as React from 'react';
18 * import { ToggleButton } from 'react-native-paper';
19 *
20 * const MyComponent = () => {
21 * const [value, setValue] = React.useState('left');
22 *
23 * return (
24 * <ToggleButton.Row onValueChange={value => setValue(value)} value={value}>
25 * <ToggleButton icon="format-align-left" value="left" />
26 * <ToggleButton icon="format-align-right" value="right" />
27 * </ToggleButton.Row>
28 * );
29 * };
30 *
31 * export default MyComponent;
32 *
33 *```
34 */
35const ToggleButtonRow = _ref => {
36 let {
37 value,
38 onValueChange,
39 children,
40 style
41 } = _ref;
42 const count = React.Children.count(children);
43 return /*#__PURE__*/React.createElement(ToggleButtonGroup, {
44 value: value,
45 onValueChange: onValueChange
46 }, /*#__PURE__*/React.createElement(View, {
47 style: [styles.row, style]
48 }, React.Children.map(children, (child, i) => {
49 // @ts-expect-error: TypeScript complains about child.type but it doesn't matter
50 if (child && child.type === ToggleButton) {
51 // @ts-expect-error: We're sure that child is a React Element
52 return /*#__PURE__*/React.cloneElement(child, {
53 style: [styles.button, i === 0 ? styles.first : i === count - 1 ? styles.last : styles.middle, // @ts-expect-error: We're sure that child is a React Element
54 child.props.style]
55 });
56 }
57
58 return child;
59 })));
60};
61
62ToggleButtonRow.displayName = 'ToggleButton.Row';
63const styles = StyleSheet.create({
64 row: {
65 flexDirection: 'row'
66 },
67 button: {
68 borderWidth: StyleSheet.hairlineWidth
69 },
70 first: {
71 borderTopRightRadius: 0,
72 borderBottomRightRadius: 0
73 },
74 middle: {
75 borderRadius: 0,
76 borderLeftWidth: 0
77 },
78 last: {
79 borderLeftWidth: 0,
80 borderTopLeftRadius: 0,
81 borderBottomLeftRadius: 0
82 }
83});
84export default ToggleButtonRow; // @component-docs ignore-next-line
85
86export { ToggleButtonRow };
87//# sourceMappingURL=ToggleButtonRow.js.map
\No newline at end of file