fix(CheckboxItem): properly disable touchable (#3077)

callstack · Mar 23, 2022 · 807179a · 807179a
1 parent 2876bce
commit 807179a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}