1 | var __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 | };
|
12 | import React from 'react';
|
13 | import { StyleSheet, TouchableOpacity, View, Platform, } from 'react-native';
|
14 | import TextElement from '../text/Text';
|
15 | import CheckBoxIcon from './CheckBoxIcon';
|
16 | import { fonts, withTheme } from '../config';
|
17 | const 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 | };
|
57 | const 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 | });
|
75 | export { CheckBox };
|
76 | export default withTheme(CheckBox, 'CheckBox');
|