UNPKG

3.51 kBJavaScriptView Raw
1var __rest = (this && this.__rest) || function (s, e) {
2 var t = {};
3 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4 t[p] = s[p];
5 if (s != null && typeof Object.getOwnPropertySymbols === "function")
6 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8 t[p[i]] = s[p[i]];
9 }
10 return t;
11};
12import React from 'react';
13import { StyleSheet, TouchableOpacity, View, Platform, } from 'react-native';
14import TextElement from '../text/Text';
15import CheckBoxIcon from './CheckBoxIcon';
16import { fonts, withTheme } from '../config';
17const CheckBox = (props) => {
18 var _a, _b;
19 const { theme } = props, rest = __rest(props, ["theme"]);
20 const { Component = TouchableOpacity, checked = false, iconRight = false, title, titleProps = {}, center = false, right = false, containerStyle, textStyle, wrapperStyle, onPress, onLongPress, checkedTitle, fontFamily, checkedColor = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary } = rest, attributes = __rest(rest, ["Component", "checked", "iconRight", "title", "titleProps", "center", "right", "containerStyle", "textStyle", "wrapperStyle", "onPress", "onLongPress", "checkedTitle", "fontFamily", "checkedColor"]);
21 const accessibilityState = {
22 checked: !!checked,
23 };
24 return (<Component accessibilityRole="checkbox" accessibilityState={accessibilityState} testID="checkbox" {...attributes} onLongPress={onLongPress} onPress={onPress} style={StyleSheet.flatten([
25 styles.container,
26 title && styles.containerHasTitle,
27 containerStyle && containerStyle,
28 ])}>
29 <View style={StyleSheet.flatten([
30 styles.wrapper,
31 right && { justifyContent: 'flex-end' },
32 center && { justifyContent: 'center' },
33 wrapperStyle && wrapperStyle,
34 ])}>
35 {!iconRight && <CheckBoxIcon {...props} checkedColor={checkedColor}/>}
36
37 {React.isValidElement(title)
38 ? title
39 : title !== '' &&
40 title && (<TextElement testID="checkboxTitle" style={StyleSheet.flatten([
41 Object.assign({ marginLeft: 10, marginRight: 10, color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey1 }, Platform.select({
42 android: Object.assign({}, fonts.android.bold),
43 default: {
44 fontWeight: 'bold',
45 },
46 })),
47 textStyle && textStyle,
48 fontFamily && { fontFamily },
49 ])} {...titleProps}>
50 {checked ? checkedTitle || title : title}
51 </TextElement>)}
52
53 {iconRight && <CheckBoxIcon {...props} checkedColor={checkedColor}/>}
54 </View>
55 </Component>);
56};
57const styles = StyleSheet.create({
58 wrapper: {
59 flexDirection: 'row',
60 alignItems: 'center',
61 },
62 container: {
63 margin: 5,
64 marginLeft: 10,
65 marginRight: 10,
66 padding: 10,
67 },
68 containerHasTitle: {
69 borderWidth: 1,
70 borderRadius: 3,
71 backgroundColor: '#fafafa',
72 borderColor: '#ededed',
73 },
74});
75export { CheckBox };
76export default withTheme(CheckBox, 'CheckBox');