From fe8e2329ad5f1aaeab67d088efa7b97a2edc5bf9 Mon Sep 17 00:00:00 2001 From: someone-here Date: Tue, 29 Nov 2022 02:39:35 +0530 Subject: [PATCH 01/12] Native checkbox Signed-off-by: someone-here --- src/components/Checkbox.js | 127 ---------------------- src/components/TextInput/BaseTextInput.js | 9 +- 2 files changed, 6 insertions(+), 130 deletions(-) delete mode 100644 src/components/Checkbox.js diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js deleted file mode 100644 index d4f6adbf2c6c6..0000000000000 --- a/src/components/Checkbox.js +++ /dev/null @@ -1,127 +0,0 @@ -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'; - -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, - - /** Should the input be disabled */ - disabled: PropTypes.bool, - - /** Children (icon) for Checkbox */ - children: PropTypes.node, - - /** 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)}), - ]), -}; - -const defaultProps = { - isChecked: false, - hasError: false, - disabled: false, - style: [], - forwardedRef: undefined, - children: null, - onMouseDown: undefined, -}; - -class Checkbox extends React.Component { - constructor(props) { - super(props); - this.state = { - isFocused: false, - }; - - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - this.handleSpaceKey = this.handleSpaceKey.bind(this); - this.firePressHandlerOnClick = this.firePressHandlerOnClick.bind(this); - } - - onFocus() { - this.setState({isFocused: true}); - } - - onBlur() { - this.setState({isFocused: false}); - } - - handleSpaceKey(event) { - if (event.code !== 'Space') { - return; - } - - this.props.onPress(); - } - - firePressHandlerOnClick(event) { - // Pressable can be triggered with Enter key and by a click. As this is a checkbox, - // We do not want to toggle it, when Enter key is pressed. - if (event.type && event.type !== 'click') { - return; - } - - this.props.onPress(); - } - - render() { - return ( - - {this.props.children - ? this.props.children - : ( - - {this.props.isChecked && } - - )} - - ); - } -} - -Checkbox.propTypes = propTypes; -Checkbox.defaultProps = defaultProps; - -export default Checkbox; diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index fe29ff79bf254..46f7109aec9ea 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} > Date: Tue, 29 Nov 2022 02:39:55 +0530 Subject: [PATCH 02/12] Native checkbox Signed-off-by: someone-here --- src/components/Checkbox/BaseCheckbox.js | 135 ++++++++++++++++++++++++ src/components/Checkbox/index.js | 15 +++ src/components/Checkbox/index.native.js | 15 +++ 3 files changed, 165 insertions(+) create mode 100644 src/components/Checkbox/BaseCheckbox.js create mode 100644 src/components/Checkbox/index.js create mode 100644 src/components/Checkbox/index.native.js diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js new file mode 100644 index 0000000000000..206152500c84b --- /dev/null +++ b/src/components/Checkbox/BaseCheckbox.js @@ -0,0 +1,135 @@ +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'; + +const propTypes = { + /** Whether checkbox is checked */ + isChecked: PropTypes.bool, + + /** Should the input be styled for errors */ + hasError: PropTypes.bool, + + /** Should the input be disabled */ + disabled: PropTypes.bool, + + /** Children (icon) for Checkbox */ + children: PropTypes.node, + + /** Additional styles to add to checkbox button */ + style: stylePropTypes, + + /** 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: (props, componentName) => { + if (!props.onPress && !props.onMouseDown) { + return new Error(`One of props 'onPress' or 'onMouseDown' was not specified in '${componentName}'.`); + } + }, + + /** Callback that is called when mousedown is triggered. */ + onMouseDown: (props, componentName) => { + if (!props.onPress && !props.onMouseDown) { + return new Error(`One of props 'onMouseDown' or 'onPress' was not specified in '${componentName}'.`); + } + } +}; + +const defaultProps = { + isChecked: false, + hasError: false, + disabled: false, + style: [], + forwardedRef: undefined, + children: null, + onMouseDown: undefined, +}; + +class BaseCheckbox extends React.Component { + constructor(props) { + super(props); + this.state = { + isFocused: false, + }; + + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); + this.handleSpaceKey = this.handleSpaceKey.bind(this); + this.firePressHandlerOnClick = this.firePressHandlerOnClick.bind(this); + } + + onFocus() { + this.setState({isFocused: true}); + } + + onBlur() { + this.setState({isFocused: false}); + } + + handleSpaceKey(event) { + if (event.code !== 'Space') { + return; + } + + this.props.onPress ? this.props.onPress(event) : this.props.onMouseDown(event); + } + + firePressHandlerOnClick(event) { + // Pressable can be triggered with Enter key and by a click. As this is a checkbox, + // We do not want to toggle it, when Enter key is pressed. + if (event.type && event.type !== 'click') { + return; + } + + this.props.onPress && this.props.onPress(event); + } + + render() { + return ( + + {this.props.children + ? this.props.children + : ( + + {this.props.isChecked && } + + )} + + ); + } +} + +BaseCheckbox.propTypes = propTypes; +BaseCheckbox.defaultProps = defaultProps; + +export default BaseCheckbox; diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 0000000000000..e0be7505e0050 --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1,15 @@ +import React from "react"; +import BaseCheckbox from "./BaseCheckbox"; + +const Checkbox = props => ( + +); + +Checkbox.propTypes = BaseCheckbox.propTypes; +Checkbox.defaultProps = BaseCheckbox.defaultProps; + +export default Checkbox; \ No newline at end of file diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js new file mode 100644 index 0000000000000..2b3ae2fb63780 --- /dev/null +++ b/src/components/Checkbox/index.native.js @@ -0,0 +1,15 @@ +import React from "react"; +import BaseCheckbox from "./BaseCheckbox"; + +const Checkbox = props => ( + +); + +Checkbox.propTypes = BaseCheckbox.propTypes; +Checkbox.defaultProps = BaseCheckbox.defaultProps; + +export default Checkbox; \ No newline at end of file From 96c6f0fa66b6ab37c103ac738d5a22726bb686b0 Mon Sep 17 00:00:00 2001 From: someone-here Date: Tue, 29 Nov 2022 23:59:29 +0530 Subject: [PATCH 03/12] Fixed Styling and signed Signed-off-by: someone-here --- src/components/Checkbox/BaseCheckbox.js | 25 ++++++++++++++++--------- src/components/Checkbox/index.js | 8 +++++--- src/components/Checkbox/index.native.js | 8 +++++--- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index 206152500c84b..eed6c2827391f 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -29,19 +29,19 @@ const propTypes = { PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), ]), - /** A function that is called when the box/label is pressed */ onPress: (props, componentName) => { - if (!props.onPress && !props.onMouseDown) { - return new Error(`One of props 'onPress' or 'onMouseDown' was not specified in '${componentName}'.`); + if (props.onPress && props.onMouseDown) { + return; } + return new Error(`One of props 'onPress' or 'onMouseDown' was not specified in '${componentName}'.`); }, - /** Callback that is called when mousedown is triggered. */ onMouseDown: (props, componentName) => { - if (!props.onPress && !props.onMouseDown) { - return new Error(`One of props 'onMouseDown' or 'onPress' was not specified in '${componentName}'.`); + if (props.onPress && props.onMouseDown) { + return; } - } + return new Error(`One of props 'onMouseDown' or 'onPress' was not specified in '${componentName}'.`); + }, }; const defaultProps = { @@ -52,6 +52,7 @@ const defaultProps = { forwardedRef: undefined, children: null, onMouseDown: undefined, + onPress: undefined, }; class BaseCheckbox extends React.Component { @@ -80,7 +81,11 @@ class BaseCheckbox extends React.Component { return; } - this.props.onPress ? this.props.onPress(event) : this.props.onMouseDown(event); + if (this.props.onPress) { + this.props.onPress(event); + } else { + this.props.onMouseDown(event); + } } firePressHandlerOnClick(event) { @@ -90,7 +95,9 @@ class BaseCheckbox extends React.Component { return; } - this.props.onPress && this.props.onPress(event); + if (this.props.onPress) { + this.props.onPress(event); + } } render() { diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index e0be7505e0050..65d65f1b53b10 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -1,15 +1,17 @@ -import React from "react"; -import BaseCheckbox from "./BaseCheckbox"; +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; \ No newline at end of file +export default Checkbox; diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js index 2b3ae2fb63780..f59ee8e6ed434 100644 --- a/src/components/Checkbox/index.native.js +++ b/src/components/Checkbox/index.native.js @@ -1,15 +1,17 @@ -import React from "react"; -import BaseCheckbox from "./BaseCheckbox"; +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; \ No newline at end of file +export default Checkbox; From 3146d1d77c5d03a97466cfd705f81577c4c5cdcd Mon Sep 17 00:00:00 2001 From: someone-here Date: Wed, 30 Nov 2022 19:00:20 +0530 Subject: [PATCH 04/12] Refactored checkbox propType Signed-off-by: someone-here --- src/components/Checkbox/BaseCheckbox.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index eed6c2827391f..d1930b90221af 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -7,6 +7,13 @@ 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, @@ -29,19 +36,9 @@ const propTypes = { PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), ]), - onPress: (props, componentName) => { - if (props.onPress && props.onMouseDown) { - return; - } - return new Error(`One of props 'onPress' or 'onMouseDown' was not specified in '${componentName}'.`); - }, + onPress: requiredPropsCheck, - onMouseDown: (props, componentName) => { - if (props.onPress && props.onMouseDown) { - return; - } - return new Error(`One of props 'onMouseDown' or 'onPress' was not specified in '${componentName}'.`); - }, + onMouseDown: requiredPropsCheck, }; const defaultProps = { From d97a350766d49f26b0b7760cff5339d95fd79518 Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Wed, 30 Nov 2022 20:43:43 +0530 Subject: [PATCH 05/12] Update src/components/Checkbox/BaseCheckbox.js Added docstring Co-authored-by: Eugene --- src/components/Checkbox/BaseCheckbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index d1930b90221af..306f1e232d0c1 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -35,7 +35,7 @@ const propTypes = { PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), ]), - +/** A function that is called when the box/label is pressed */ onPress: requiredPropsCheck, onMouseDown: requiredPropsCheck, From 209a08d6a6f357b37864196fdd5cdb1fb36b6295 Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Wed, 30 Nov 2022 20:44:15 +0530 Subject: [PATCH 06/12] Update src/components/Checkbox/BaseCheckbox.js MouseDown doc string Co-authored-by: Eugene --- src/components/Checkbox/BaseCheckbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index 306f1e232d0c1..f9ed1ce22c12c 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -37,7 +37,7 @@ const propTypes = { ]), /** A function that is called when the box/label is pressed */ onPress: requiredPropsCheck, - +/** Callback that is called when mousedown is triggered. */ onMouseDown: requiredPropsCheck, }; From ce2ca758a1e08f3d1c6d8fa29e918c33c513ce01 Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Wed, 30 Nov 2022 20:52:59 +0530 Subject: [PATCH 07/12] Update src/components/Checkbox/index.js Removed unused line Co-authored-by: Eugene --- src/components/Checkbox/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index 65d65f1b53b10..8b7984cd5939e 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -4,7 +4,6 @@ import BaseCheckbox from './BaseCheckbox'; const Checkbox = props => ( From 295f5d2cdd17854db894e20bf23a4be006be2968 Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Wed, 30 Nov 2022 20:53:37 +0530 Subject: [PATCH 08/12] Update src/components/Checkbox/index.native.js Removed unused line Co-authored-by: Eugene --- src/components/Checkbox/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js index f59ee8e6ed434..c3b140c7a9c37 100644 --- a/src/components/Checkbox/index.native.js +++ b/src/components/Checkbox/index.native.js @@ -4,7 +4,6 @@ import BaseCheckbox from './BaseCheckbox'; const Checkbox = props => ( From d3c58581541e7528f62e12c6c729e861158b4c28 Mon Sep 17 00:00:00 2001 From: someone-here Date: Wed, 30 Nov 2022 21:18:31 +0530 Subject: [PATCH 09/12] Fixed formatting --- src/components/Checkbox/BaseCheckbox.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index f9ed1ce22c12c..f9eab5f04c2e4 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -35,9 +35,11 @@ const propTypes = { PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), ]), -/** A function that is called when the box/label is pressed */ + + /** A function that is called when the box/label is pressed */ onPress: requiredPropsCheck, -/** Callback that is called when mousedown is triggered. */ + + /** Callback that is called when mousedown is triggered. */ onMouseDown: requiredPropsCheck, }; From 08c2282fc5770ba7468a4f12ca5f3bd1fac07bf6 Mon Sep 17 00:00:00 2001 From: someone-here Date: Thu, 1 Dec 2022 00:49:21 +0530 Subject: [PATCH 10/12] Fixed Props --- src/components/Checkbox/BaseCheckbox.js | 5 +++-- src/components/Checkbox/index.js | 2 +- src/components/Checkbox/index.native.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index f9eab5f04c2e4..774605626af07 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -7,12 +7,13 @@ import stylePropTypes from '../../styles/stylePropTypes'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; +/* eslint-disable rulesdir/prefer-early-return */ const requiredPropsCheck = (props, componentName) => { if (!props.onMouseDown && !props.onPress) { - return; + return new Error(`One of "onMouseDown" or "onPress" must be provided in ${componentName}`); } - return new Error(`One of "onMouseDown" or "onPress" must be provided in ${componentName}`); }; +/* eslint-enable */ const propTypes = { /** Whether checkbox is checked */ diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index 8b7984cd5939e..0fb56725b1427 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -3,9 +3,9 @@ import BaseCheckbox from './BaseCheckbox'; const Checkbox = props => ( ); diff --git a/src/components/Checkbox/index.native.js b/src/components/Checkbox/index.native.js index c3b140c7a9c37..0fd4ee2716e6e 100644 --- a/src/components/Checkbox/index.native.js +++ b/src/components/Checkbox/index.native.js @@ -3,9 +3,9 @@ import BaseCheckbox from './BaseCheckbox'; const Checkbox = props => ( ); From 08a36000807503c10d5b07019a356a0ac062ec5e Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Thu, 1 Dec 2022 20:13:23 +0530 Subject: [PATCH 11/12] Update src/components/Checkbox/BaseCheckbox.js Co-authored-by: Eugene --- src/components/Checkbox/BaseCheckbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index 774605626af07..234f0b3a22fb9 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -7,7 +7,7 @@ import stylePropTypes from '../../styles/stylePropTypes'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; -/* eslint-disable rulesdir/prefer-early-return */ +// 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}`); From 726708de2e1343f3ab70dc42bb73d4d0056b4b4e Mon Sep 17 00:00:00 2001 From: Esh <77237602+Someone-here@users.noreply.github.com> Date: Thu, 1 Dec 2022 20:13:31 +0530 Subject: [PATCH 12/12] Update src/components/Checkbox/BaseCheckbox.js Co-authored-by: Eugene --- src/components/Checkbox/BaseCheckbox.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Checkbox/BaseCheckbox.js b/src/components/Checkbox/BaseCheckbox.js index 234f0b3a22fb9..c2310f4e7c36e 100644 --- a/src/components/Checkbox/BaseCheckbox.js +++ b/src/components/Checkbox/BaseCheckbox.js @@ -13,7 +13,6 @@ const requiredPropsCheck = (props, componentName) => { return new Error(`One of "onMouseDown" or "onPress" must be provided in ${componentName}`); } }; -/* eslint-enable */ const propTypes = { /** Whether checkbox is checked */