Merge pull request #13271 from Expensify/jules-revert13187

Revert PR 13187 to resolve checkbox bug
Expensify · Dec 2, 2022 · bc94761 · bc94761
2 parents df9af76 + 706c88e
commit bc94761
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 69 deletions.
diff --git a/src/components/Checkbox/BaseCheckbox.js → src/components/Checkbox.js b/src/components/Checkbox/BaseCheckbox.js → src/components/Checkbox.js
@@ -1,23 +1,19 @@
 import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import stylePropTypes from '../../styles/stylePropTypes';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-
-// eslint-disable-next-line rulesdir/prefer-early-return
-const requiredPropsCheck = (props, componentName) => {
-    if (!props.onMouseDown && !props.onPress) {
-        return new Error(`One of "onMouseDown" or "onPress" must be provided in ${componentName}`);
-    }
-};
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import stylePropTypes from '../styles/stylePropTypes';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
 
 const propTypes = {
     /** Whether checkbox is checked */
     isChecked: PropTypes.bool,
 
+    /** A function that is called when the box/label is pressed */
+    onPress: PropTypes.func.isRequired,
+
     /** Should the input be styled for errors  */
     hasError: PropTypes.bool,
 
@@ -30,17 +26,14 @@ const propTypes = {
     /** Additional styles to add to checkbox button */
     style: stylePropTypes,
 
+    /** Callback that is called when mousedown is triggered. */
+    onMouseDown: PropTypes.func,
+
     /** A ref to forward to the Pressable */
     forwardedRef: PropTypes.oneOfType([
         PropTypes.func,
         PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
     ]),
-
-    /** A function that is called when the box/label is pressed */
-    onPress: requiredPropsCheck,
-
-    /** Callback that is called when mousedown is triggered. */
-    onMouseDown: requiredPropsCheck,
 };
 
 const defaultProps = {
@@ -51,10 +44,9 @@ const defaultProps = {
     forwardedRef: undefined,
     children: null,
     onMouseDown: undefined,
-    onPress: undefined,
 };
 
-class BaseCheckbox extends React.Component {
+class Checkbox extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -80,11 +72,7 @@ class BaseCheckbox extends React.Component {
             return;
         }
 
-        if (this.props.onPress) {
-            this.props.onPress(event);
-        } else {
-            this.props.onMouseDown(event);
-        }
+        this.props.onPress();
     }
 
     firePressHandlerOnClick(event) {
@@ -94,9 +82,7 @@ class BaseCheckbox extends React.Component {
             return;
         }
 
-        if (this.props.onPress) {
-            this.props.onPress(event);
-        }
+        this.props.onPress();
     }
 
     render() {
@@ -135,7 +121,7 @@ class BaseCheckbox extends React.Component {
     }
 }
 
-BaseCheckbox.propTypes = propTypes;
-BaseCheckbox.defaultProps = defaultProps;
+Checkbox.propTypes = propTypes;
+Checkbox.defaultProps = defaultProps;
 
-export default BaseCheckbox;
+export default Checkbox;
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
@@ -186,11 +186,7 @@ class BaseTextInput extends Component {
         ]).start();
     }
 
-    togglePasswordVisibility(event) {
-        if (!event) {
-            return;
-        }
-        event.preventDefault();
+    togglePasswordVisibility() {
         this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}));
     }
 
@@ -295,7 +291,8 @@ class BaseTextInput extends Component {
                                     {this.props.secureTextEntry && (
                                         <Checkbox
                                             style={styles.secureInputShowPasswordButton}
-                                            onMouseDown={this.togglePasswordVisibility}
+                                            onPress={this.togglePasswordVisibility}
+                                            onMouseDown={e => e.preventDefault()}
                                         >
                                             <Icon
                                                 src={this.state.passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled}