1 | import * as React from 'react';
|
2 | import { StyleSheet, View } from 'react-native';
|
3 | import ToggleButtonGroup from './ToggleButtonGroup';
|
4 | import ToggleButton from './ToggleButton';
|
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 | const ToggleButtonRow = _ref => {
|
36 | let {
|
37 | value,
|
38 | onValueChange,
|
39 | children,
|
40 | style
|
41 | } = _ref;
|
42 | const count = React.Children.count(children);
|
43 | return React.createElement(ToggleButtonGroup, {
|
44 | value: value,
|
45 | onValueChange: onValueChange
|
46 | }, React.createElement(View, {
|
47 | style: [styles.row, style]
|
48 | }, React.Children.map(children, (child, i) => {
|
49 |
|
50 | if (child && child.type === ToggleButton) {
|
51 |
|
52 | return React.cloneElement(child, {
|
53 | style: [styles.button, i === 0 ? styles.first : i === count - 1 ? styles.last : styles.middle,
|
54 | child.props.style]
|
55 | });
|
56 | }
|
57 |
|
58 | return child;
|
59 | })));
|
60 | };
|
61 |
|
62 | ToggleButtonRow.displayName = 'ToggleButton.Row';
|
63 | const 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 | });
|
84 | export default ToggleButtonRow;
|
85 |
|
86 | export { ToggleButtonRow };
|
87 |
|
\ | No newline at end of file |