diff --git a/src/components/Checkbox.js b/src/components/Checkbox/BaseCheckbox.js
similarity index 79%
rename from src/components/Checkbox.js
rename to src/components/Checkbox/BaseCheckbox.js
index f5d86757ec47..451b17d80ad8 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox/BaseCheckbox.js
@@ -1,19 +1,23 @@
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';
+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 requiredPropsCheck = (props, componentName) => {
+ if (props.onMouseDown || props.onPress) {
+ return;
+ }
+ return new Error(`One of "onMouseDown" or "onPress" must be provided in ${componentName}`);
+};
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,
@@ -26,14 +30,17 @@ 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 = {
@@ -44,9 +51,10 @@ const defaultProps = {
forwardedRef: undefined,
children: null,
onMouseDown: undefined,
+ onPress: undefined,
};
-class Checkbox extends React.Component {
+class BaseCheckbox extends React.Component {
constructor(props) {
super(props);
this.state = {
@@ -72,7 +80,11 @@ class Checkbox extends React.Component {
return;
}
- this.props.onPress();
+ if (this.props.onPress) {
+ this.props.onPress(event);
+ } else {
+ this.props.onMouseDown(event);
+ }
}
firePressHandlerOnClick(event) {
@@ -89,7 +101,9 @@ class Checkbox extends React.Component {
this.onBlur();
}
- this.props.onPress();
+ if (this.props.onPress) {
+ this.props.onPress(event);
+ }
}
render() {
@@ -129,7 +143,7 @@ class Checkbox extends React.Component {
}
}
-Checkbox.propTypes = propTypes;
-Checkbox.defaultProps = defaultProps;
+BaseCheckbox.propTypes = propTypes;
+BaseCheckbox.defaultProps = defaultProps;
-export default Checkbox;
+export default BaseCheckbox;
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
new file mode 100644
index 000000000000..e7240dd693d8
--- /dev/null
+++ b/src/components/Checkbox/index.js
@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import React from 'react';
+import BaseCheckbox from './BaseCheckbox';
+
+const Checkbox = props => (
+
+);
+
+Checkbox.propTypes = BaseCheckbox.propTypes;
+Checkbox.defaultProps = BaseCheckbox.defaultProps;
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;
diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js
new file mode 100644
index 000000000000..b2c95bcbfe56
--- /dev/null
+++ b/src/components/Checkbox/index.native.js
@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import React from 'react';
+import BaseCheckbox from './BaseCheckbox';
+
+const Checkbox = props => (
+
+);
+
+Checkbox.propTypes = BaseCheckbox.propTypes;
+Checkbox.defaultProps = BaseCheckbox.defaultProps;
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index fe29ff79bf25..46f7109aec9e 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -186,7 +186,11 @@ class BaseTextInput extends Component {
]).start();
}
- togglePasswordVisibility() {
+ togglePasswordVisibility(event) {
+ if (!event) {
+ return;
+ }
+ event.preventDefault();
this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}));
}
@@ -291,8 +295,7 @@ class BaseTextInput extends Component {
{this.props.secureTextEntry && (
e.preventDefault()}
+ onMouseDown={this.togglePasswordVisibility}
>