From 807179ae8d019145b3245156fc9b29ede03d3617 Mon Sep 17 00:00:00 2001
From: Bruno Castro <bruno.castro@codeminer42.com>
Date: Wed, 23 Mar 2022 09:28:09 -0300
Subject: [PATCH] fix(CheckboxItem): properly disable touchable (#3077)

---
 example/src/Examples/CheckboxItemExample.tsx         |  7 +++++++
 src/components/Checkbox/CheckboxItem.tsx             |  7 +++++--
 .../__tests__/Checkbox/CheckboxItem.test.js          | 12 ++++++++++++
 .../Checkbox/__snapshots__/CheckboxItem.test.js.snap |  4 ++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/example/src/Examples/CheckboxItemExample.tsx b/example/src/Examples/CheckboxItemExample.tsx
index e54da41d61..676380bc5a 100644
--- a/example/src/Examples/CheckboxItemExample.tsx
+++ b/example/src/Examples/CheckboxItemExample.tsx
@@ -9,6 +9,7 @@ const CheckboxExample = () => {
   const [checkedIOS, setCheckedIOS] = React.useState<boolean>(true);
   const [checkedLeadingControl, setCheckedLeadingControl] =
     React.useState<boolean>(true);
+  const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
   return (
     <ScreenWrapper style={styles.container}>
       <Checkbox.Item
@@ -35,6 +36,12 @@ const CheckboxExample = () => {
         mode="ios"
         position="leading"
       />
+      <Checkbox.Item
+        label="Disabled checkbox"
+        status={checkedDisabled ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedDisabled(!checkedDisabled)}
+        disabled
+      />
     </ScreenWrapper>
   );
 };
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 4ad4910d02..42b11e6c5d 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -96,9 +96,10 @@ const CheckboxItem = ({
   testID,
   mode,
   position = 'trailing',
+  disabled,
   ...props
 }: Props) => {
-  const checkboxProps = { ...props, status, theme };
+  const checkboxProps = { ...props, status, theme, disabled };
   const isLeading = position === 'leading';
   let checkbox;
 
@@ -116,9 +117,11 @@ const CheckboxItem = ({
       accessibilityRole="checkbox"
       accessibilityState={{
         checked: status === 'checked',
+        disabled,
       }}
       onPress={onPress}
       testID={testID}
+      disabled={disabled}
     >
       <View
         style={[styles.container, style]}
@@ -130,7 +133,7 @@ const CheckboxItem = ({
           style={[
             styles.label,
             {
-              color: theme.colors.text,
+              color: disabled ? theme.colors.disabled : theme.colors.text,
               textAlign: isLeading ? 'right' : 'left',
             },
             labelStyle,
diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.js b/src/components/__tests__/Checkbox/CheckboxItem.test.js
index 131c41243d..88b632853a 100644
--- a/src/components/__tests__/Checkbox/CheckboxItem.test.js
+++ b/src/components/__tests__/Checkbox/CheckboxItem.test.js
@@ -75,3 +75,15 @@ it('should have `accessibilityState={ checked: false }` when `status="indetermin
   const element = getByA11yState({ checked: false });
   expect(element).toBeTruthy();
 });
+
+it('disables the row when the prop disabled is true', () => {
+  const { getByA11yLabel } = render(
+    <Checkbox.Item accessibilityLabel="some checkbox" disabled />
+  );
+
+  const touchable = getByA11yLabel('some checkbox');
+
+  expect(touchable.props).toMatchObject({
+    accessibilityState: { disabled: true },
+  });
+});
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
index 36b706d078..e5b3832b3e 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
@@ -7,6 +7,7 @@ exports[`can render leading checkbox control 1`] = `
   accessibilityState={
     Object {
       "checked": false,
+      "disabled": undefined,
     }
   }
   accessible={true}
@@ -139,6 +140,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
   accessibilityState={
     Object {
       "checked": false,
+      "disabled": undefined,
     }
   }
   accessible={true}
@@ -305,6 +307,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
   accessibilityState={
     Object {
       "checked": false,
+      "disabled": undefined,
     }
   }
   accessible={true}
@@ -437,6 +440,7 @@ exports[`renders unchecked 1`] = `
   accessibilityState={
     Object {
       "checked": false,
+      "disabled": undefined,
     }
   }
   accessible={true}