From ed60faedeb7a1a7e5732b29a77e4233deb619d43 Mon Sep 17 00:00:00 2001 From: Natalia Volkova Date: Wed, 25 Nov 2020 11:44:23 +0300 Subject: [PATCH] feat: add mode prop to radio button item (#2379) --- example/src/ExampleList.tsx | 2 + .../src/Examples/RadioButtonItemExample.tsx | 56 +++ .../RadioButton/RadioButtonItem.tsx | 85 ++-- .../RadioButton/RadioButtonItem.test.js | 50 +++ .../RadioButtonItem.test.js.snap | 371 ++++++++++++++++++ 5 files changed, 529 insertions(+), 35 deletions(-) create mode 100644 example/src/Examples/RadioButtonItemExample.tsx create mode 100644 src/components/__tests__/RadioButton/RadioButtonItem.test.js create mode 100644 src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx index 3e3be4f2fd..31e6681fb4 100644 --- a/example/src/ExampleList.tsx +++ b/example/src/ExampleList.tsx @@ -36,6 +36,7 @@ import TextInputExample from './Examples/TextInputExample'; import ToggleButtonExample from './Examples/ToggleButtonExample'; import TouchableRippleExample from './Examples/TouchableRippleExample'; import ThemeExample from './Examples/ThemeExample'; +import RadioButtonItemExample from './Examples/RadioButtonItemExample'; export const examples: Record< string, @@ -64,6 +65,7 @@ export const examples: Record< progressbar: ProgressBarExample, radio: RadioButtonExample, radioGroup: RadioButtonGroupExample, + radioItem: RadioButtonItemExample, searchbar: SearchbarExample, snackbar: SnackbarExample, surface: SurfaceExample, diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx new file mode 100644 index 0000000000..b9b4d6c7e5 --- /dev/null +++ b/example/src/Examples/RadioButtonItemExample.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { View, StyleSheet } from 'react-native'; +import { RadioButton, Colors, useTheme } from 'react-native-paper'; + +const RadioButtonItemExample = () => { + const [checkedDefault, setCheckedDefault] = React.useState(true); + const [checkedAndroid, setCheckedAndroid] = React.useState(true); + const [checkedIOS, setCheckedIOS] = React.useState(true); + const { + colors: { background }, + } = useTheme(); + + return ( + + setCheckedDefault(!checkedDefault)} + value="default" + /> + setCheckedAndroid(!checkedAndroid)} + value="android" + /> + setCheckedIOS(!checkedIOS)} + value="iOS" + /> + + ); +}; + +RadioButtonItemExample.title = 'Radio Button Item'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.white, + paddingVertical: 8, + }, +}); + +export default RadioButtonItemExample; diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx index 447416a81b..65bb55bb2b 100644 --- a/src/components/RadioButton/RadioButtonItem.tsx +++ b/src/components/RadioButton/RadioButtonItem.tsx @@ -12,6 +12,8 @@ import { handlePress } from './utils'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; import RadioButton from './RadioButton'; import Text from '../Typography/Text'; +import RadioButtonAndroid from './RadioButtonAndroid'; +import RadioButtonIOS from './RadioButtonIOS'; export type Props = { /** @@ -62,6 +64,11 @@ export type Props = { * testID to be used on tests. */ testID?: string; + /** + * Whether `` or `` should be used. + * Left undefined `` will be used. + */ + mode?: 'android' | 'ios'; }; /** @@ -106,41 +113,49 @@ const RadioButtonItem = ({ theme: { colors }, accessibilityLabel, testID, -}: Props) => ( - - {(context?: RadioButtonContextType) => { - return ( - - handlePress({ - onPress: onPress, - onValueChange: context?.onValueChange, - value, - }) - } - accessibilityLabel={accessibilityLabel} - testID={testID} - > - - - {label} - - - - - ); - }} - -); + mode, +}: Props) => { + const radioButtonProps = { value, disabled, status, color, uncheckedColor }; + let radioButton: any; + + if (mode === 'android') { + radioButton = ; + } else if (mode === 'ios') { + radioButton = ; + } else { + radioButton = ; + } + + return ( + + {(context?: RadioButtonContextType) => { + return ( + + handlePress({ + onPress: onPress, + onValueChange: context?.onValueChange, + value, + }) + } + accessibilityLabel={accessibilityLabel} + testID={testID} + > + + + {label} + + {radioButton} + + + ); + }} + + ); +}; RadioButtonItem.displayName = 'RadioButton.Item'; diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.js b/src/components/__tests__/RadioButton/RadioButtonItem.test.js new file mode 100644 index 0000000000..fa647633b6 --- /dev/null +++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.js @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { Platform } from 'react-native'; +import renderer from 'react-test-renderer'; +import RadioButtonItem from '../../RadioButton/RadioButtonItem'; + +it('renders unchecked', () => { + const tree = renderer + .create( + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + +it('can render the iOS radio button on different platforms', () => { + Platform.OS = 'android'; + const tree = renderer + .create( + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + +it('can render the Android radio button on different platforms', () => { + Platform.OS = 'ios'; + const tree = renderer + .create( + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap new file mode 100644 index 0000000000..83476ae4f6 --- /dev/null +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap @@ -0,0 +1,371 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`can render the Android radio button on different platforms 1`] = ` + + + + iOS Checkbox + + + + + + +`; + +exports[`can render the iOS radio button on different platforms 1`] = ` + + + + iOS Radio button + + + + +  + + + + + +`; + +exports[`renders unchecked 1`] = ` + + + + Unchecked Button + + + + +  + + + + + +`;