-
Notifications
You must be signed in to change notification settings - Fork 6
/
Checkbox.tsx
49 lines (44 loc) · 1.68 KB
/
Checkbox.tsx
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
import React from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
import { Checkbox } from '@carbon/react-native';
const styles = StyleSheet.create({
view: {
padding: 16,
flex: 1,
},
container: {
flexGrow: 1,
paddingBottom: 64,
},
itemStyle: {},
});
export default class TestCheckbox extends React.Component {
state = {
value1: false,
value2: true,
value3: false,
value4: false,
};
private changeText = (field: string, value: boolean): void => {
this.setState({ [field]: value });
};
render(): React.ReactNode {
const { value1, value2, value3, value4 } = this.state;
return (
<ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
<View style={styles.itemStyle}>
<Checkbox id="check-box-1" label="Checkbox" checked={value1} onPress={(value) => this.changeText('value1', value)} />
</View>
<View style={styles.itemStyle}>
<Checkbox id="check-box-1" label="Checkbox no label" hideLabel={true} checked={value2} onPress={(value) => this.changeText('value2', value)} />
</View>
<View style={styles.itemStyle}>
<Checkbox id="check-box-2" label="Checkbox disabled" disabled={true} checked={value3} onPress={(value) => this.changeText('value3', value)} />
</View>
<View style={styles.itemStyle}>
<Checkbox id="check-box-3" label="Checkbox with long string that will wrap on smaller screens due to max size and stuff." checked={value4} onPress={(value) => this.changeText('value4', value)} />
</View>
</ScrollView>
);
}
}