feat: create Checkbox.Item component

Author: StheffanyHadlich

src/components/Checkbox.tsx renamed to src/components/Checkbox/Checkbox.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import CheckboxIOS, { CheckboxIOS as _CheckboxIOS } from './CheckboxIOS';
 import CheckboxAndroid, {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   CheckboxAndroid as _CheckboxAndroid,
 } from './CheckboxAndroid';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import CheckboxIOS, { CheckboxIOS as _CheckboxIOS } from './CheckboxIOS';
-import { withTheme } from '../core/theming';
-import { Theme } from '../types';
+import CheckboxItem from './CheckboxItem';
+import { withTheme } from '../../core/theming';
+import { Theme } from '../../types';
 
 type Props = {
   /**
@@ -81,6 +82,9 @@ type Props = {
  * ```
  */
 class Checkbox extends React.Component<Props> {
+  // @component ./CheckboxItem.tsx
+  static Item = CheckboxItem;
+
   // @component ./CheckboxAndroid.tsx
   static Android = CheckboxAndroid;
 

src/components/CheckboxAndroid.tsx renamed to src/components/Checkbox/CheckboxAndroid.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Animated, View, StyleSheet, I18nManager } from 'react-native';
 import color from 'color';
-import MaterialCommunityIcon from './MaterialCommunityIcon';
-import TouchableRipple from './TouchableRipple';
-import { withTheme } from '../core/theming';
-import { Theme, $RemoveChildren } from '../types';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import TouchableRipple from '../TouchableRipple';
+import { withTheme } from '../../core/theming';
+import { Theme, $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/CheckboxIOS.tsx renamed to src/components/Checkbox/CheckboxIOS.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StyleSheet, View, I18nManager } from 'react-native';
 import color from 'color';
-import MaterialCommunityIcon from './MaterialCommunityIcon';
-import TouchableRipple from './TouchableRipple';
-import { withTheme } from '../core/theming';
-import { Theme, $RemoveChildren } from '../types';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import TouchableRipple from '../TouchableRipple';
+import { withTheme } from '../../core/theming';
+import { Theme, $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/Checkbox/CheckboxItem.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+
+import {
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import CheckBox from './Checkbox';
+import Text from '../Typography/Text';
+import { Theme } from '../../types';
+import TouchableRipple from '../TouchableRipple';
+import { withTheme } from '../../core/theming';
+
+type Props = {
+  /**
+   * Status of checkbox.
+   */
+  status: 'checked' | 'unchecked' | 'indeterminate';
+  /**
+   * Whether checkbox is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Label to be displayed on the item.
+   */
+  label: string;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: () => void;
+  /**
+   * Custom color for unchecked checkbox.
+   */
+  uncheckedColor?: string;
+  /**
+   * Custom color for checkbox.
+   */
+  color?: string;
+  /**
+   * Additional styles for container View.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style that is passed to Label element.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+/**
+ * Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Checkbox, Text } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
+ *
+ *   render() {
+ *     return(
+ *       <View>
+ *           <Checkbox.Item label="Item" status="checked" />
+ *       </View>
+ *     )
+ *   }
+ * }
+ *```
+ */
+
+class CheckboxItem extends React.Component<Props> {
+  static displayName = 'RadioButton.Item';
+
+  render() {
+    const {
+      style,
+      status,
+      label,
+      onPress,
+      labelStyle,
+      theme: { colors },
+      ...props
+    } = this.props;
+
+    return (
+      <TouchableRipple onPress={onPress}>
+        <View style={[styles.container, style]} pointerEvents="none">
+          <Text style={[styles.label, labelStyle, { color: colors.primary }]}>
+            {label}
+          </Text>
+          <CheckBox status={status} {...props}></CheckBox>
+        </View>
+      </TouchableRipple>
+    );
+  }
+}
+
+export default withTheme(CheckboxItem);
+
+// @component-docs ignore-next-line
+export { CheckboxItem };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  label: {
+    fontSize: 16,
+  },
+});

src/components/__tests__/Checkbox.test.js renamed to src/components/__tests__/Checkbox/Checkbox.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import Checkbox from '../Checkbox.tsx';
+import Checkbox from '../../Checkbox/Checkbox';
 
 it('renders checked Checkbox with onPress', () => {
   const tree = renderer

src/components/__tests__/__snapshots__/Checkbox.test.js.snap renamed to src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -26,7 +26,7 @@ export { default as Banner } from './components/Banner';
 export { default as BottomNavigation } from './components/BottomNavigation';
 export { default as Button } from './components/Button';
 export { default as Card } from './components/Card/Card';
-export { default as Checkbox } from './components/Checkbox';
+export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as Chip } from './components/Chip';
 export { default as DataTable } from './components/DataTable/DataTable';
 export { default as Dialog } from './components/Dialog/Dialog';