feat: add disable prop to RadioButton.Item (#1900)

callstack · May 8, 2020 · 504901d · 504901d
1 parent 9f86f06
commit 504901d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
@@ -8,7 +8,7 @@ import {
   useTheme,
 } from 'react-native-paper';
 
-type State = 'normal' | 'normal-ios' | 'custom';
+type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
 
 const RadioButtonExample = () => {
   const [checked, setChecked] = React.useState<State>('normal');
@@ -59,6 +59,12 @@ const RadioButtonExample = () => {
           </View>
         </View>
       </TouchableRipple>
+      <RadioButton.Item
+        label="Normal 3 - Item"
+        value="normal-item"
+        status={checked === 'normal-item' ? 'checked' : 'unchecked'}
+        onPress={() => setChecked('normal-item')}
+      />
       <View style={styles.row}>
         <Paragraph>Checked (Disabled)</Paragraph>
         <RadioButton value="first" status="checked" disabled />
@@ -67,6 +73,18 @@ const RadioButtonExample = () => {
         <Paragraph>Unchecked (Disabled)</Paragraph>
         <RadioButton value="second" status="unchecked" disabled />
       </View>
+      <RadioButton.Item
+        label="Checked - Item (Disabled)"
+        value="third"
+        status="checked"
+        disabled
+      />
+      <RadioButton.Item
+        label="Unchecked - Item (Disabled)"
+        value="fourth"
+        status="unchecked"
+        disabled
+      />
     </View>
   );
 };

diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
@@ -23,6 +23,10 @@ export type Props = {
    * Label to be displayed on the item.
    */
   label: string;
+  /**
+   * Whether radio is disabled.
+   */
+  disabled?: boolean;
   /**
    * Function to execute on press.
    */
@@ -98,6 +102,7 @@ class RadioButtonItem extends React.Component<Props> {
       style,
       labelStyle,
       onPress,
+      disabled,
       color,
       uncheckedColor,
       status,
@@ -109,12 +114,15 @@ class RadioButtonItem extends React.Component<Props> {
         {(context?: RadioButtonContextType) => {
           return (
             <TouchableRipple
-              onPress={() =>
-                handlePress({
-                  onPress: onPress,
-                  onValueChange: context?.onValueChange,
-                  value,
-                })
+              onPress={
+                disabled
+                  ? undefined
+                  : () =>
+                      handlePress({
+                        onPress: onPress,
+                        onValueChange: context?.onValueChange,
+                        value,
+                      })
               }
             >
               <View style={[styles.container, style]} pointerEvents="none">
@@ -125,6 +133,7 @@ class RadioButtonItem extends React.Component<Props> {
                 </Text>
                 <RadioButton
                   value={value}
+                  disabled={disabled}
                   status={status}
                   color={color}
                   uncheckedColor={uncheckedColor}