From dce0b2cd0b1a3ceaaeac74faab5671c1aa34129b Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 19:27:27 +0530 Subject: [PATCH 001/413] fix: checkbox accessibility (toggle with space) --- src/components/Checkbox/CheckboxButton.js | 65 +++++++++++++++++++ .../Checkbox/CheckboxButton.native.js | 34 ++++++++++ .../{Checkbox.js => Checkbox/index.js} | 13 ++-- 3 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 src/components/Checkbox/CheckboxButton.js create mode 100644 src/components/Checkbox/CheckboxButton.native.js rename src/components/{Checkbox.js => Checkbox/index.js} (85%) diff --git a/src/components/Checkbox/CheckboxButton.js b/src/components/Checkbox/CheckboxButton.js new file mode 100644 index 000000000000..a2242acd833f --- /dev/null +++ b/src/components/Checkbox/CheckboxButton.js @@ -0,0 +1,65 @@ +import React, {Component} from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** Should the input be disabled */ + disabled: PropTypes.bool, + + /** A function that is called when the box/label is pressed */ + onPress: PropTypes.func.isRequired, +}; + +class CheckboxButton extends Component { + constructor(props) { + super(props); + + this.onClick = this.onClick.bind(this); + this.onKeyDown = this.onKeyDown.bind(this); + this.onToggle = this.onToggle.bind(this); + } + + onClick() { + this.onToggle(); + } + + onKeyDown(event) { + const SPACE_KEY_CODE = 32; + if (event.keyCode !== SPACE_KEY_CODE) { + return; + } + + this.onToggle(); + event.stopPropagation(); + event.preventDefault(); + } + + onToggle() { + if(this.props.disabled) { + return; + } + + this.props.onPress(); + } + + render() { + return ( + + {this.props.children} + + ); + } +} + +CheckboxButton.propTypes = propTypes; +CheckboxButton.displayName = 'CheckboxButton'; + +export default React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +)); diff --git a/src/components/Checkbox/CheckboxButton.native.js b/src/components/Checkbox/CheckboxButton.native.js new file mode 100644 index 000000000000..41fe96889a56 --- /dev/null +++ b/src/components/Checkbox/CheckboxButton.native.js @@ -0,0 +1,34 @@ +import React from 'react'; +import {Pressable} from 'react-native'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** Should the input be disabled */ + disabled: PropTypes.bool, + + /** A function that is called when the box/label is pressed */ + onPress: PropTypes.func.isRequired, +}; + +const defaultProps = { + onPress: () => {}, +}; + +const CheckboxButton = props => ( + + {props.children} + +); + +CheckboxButton.propTypes = propTypes; +CheckboxButton.defaultProps = defaultProps; +CheckboxButton.displayName = 'CheckboxButton'; + +export default React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +)); \ No newline at end of file diff --git a/src/components/Checkbox.js b/src/components/Checkbox/index.js similarity index 85% rename from src/components/Checkbox.js rename to src/components/Checkbox/index.js index 0a9f758cf90f..4602cd36512c 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox/index.js @@ -1,9 +1,10 @@ import React from 'react'; import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../styles/styles'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; +import styles from '../../styles/styles'; +import Icon from '../Icon'; +import * as Expensicons from '../Icon/Expensicons'; +import CheckboxButton from './CheckboxButton'; const propTypes = { /** Whether checkbox is checked */ @@ -32,7 +33,7 @@ const defaultProps = { }; const Checkbox = props => ( - props.onPress(!props.isChecked)} ref={props.forwardedRef} @@ -47,11 +48,11 @@ const Checkbox = props => ( > - + ); Checkbox.propTypes = propTypes; Checkbox.defaultProps = defaultProps; Checkbox.displayName = 'Checkbox'; -export default Checkbox; +export default Checkbox; \ No newline at end of file From 13bf388cfd9689ea105eaf5cad894c6bb4649558 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 19:36:25 +0530 Subject: [PATCH 002/413] feat: add style prop to CheckboxButton --- src/components/Checkbox/CheckboxButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Checkbox/CheckboxButton.js b/src/components/Checkbox/CheckboxButton.js index a2242acd833f..12a6e14b99b9 100644 --- a/src/components/Checkbox/CheckboxButton.js +++ b/src/components/Checkbox/CheckboxButton.js @@ -49,6 +49,7 @@ class CheckboxButton extends Component { onClick={this.onClick} onKeyDown={this.onKeyDown} ref={this.props.forwardedRef} + style={this.props.style} > {this.props.children} From d58924962e16d29f86bfb96bae80843c09d39008 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 19:37:21 +0530 Subject: [PATCH 003/413] fix: secure textinput eye icon accesibility --- src/components/TextInput/BaseTextInput.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index a4125b73c818..b55f9f166d69 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -14,6 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; +import CheckboxButton from '../Checkbox/CheckboxButton' class BaseTextInput extends Component { constructor(props) { @@ -274,8 +275,7 @@ class BaseTextInput extends Component { showSoftInputOnFocus={!this.props.disableKeyboard} /> {this.props.secureTextEntry && ( - @@ -283,7 +283,7 @@ class BaseTextInput extends Component { src={this.state.passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled} fill={themeColors.icon} /> - + )} From acf7c34287a1eabbbc25f6fbe4a40d64234906e3 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 19:51:05 +0530 Subject: [PATCH 004/413] fix: add missing propTypes and defaultProps --- src/components/Checkbox/CheckboxButton.js | 22 +++++++++++++++++++ .../Checkbox/CheckboxButton.native.js | 19 +++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/src/components/Checkbox/CheckboxButton.js b/src/components/Checkbox/CheckboxButton.js index 12a6e14b99b9..599e733c0e68 100644 --- a/src/components/Checkbox/CheckboxButton.js +++ b/src/components/Checkbox/CheckboxButton.js @@ -8,6 +8,27 @@ const propTypes = { /** A function that is called when the box/label is pressed */ onPress: PropTypes.func.isRequired, + + /** Additional styles to add to checkbox button */ + style: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.object), + PropTypes.object, + ]), + + /** A ref to forward to the Pressable */ + forwardedRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), + ]), + + /** Children to wrap in CheckboxButton. */ + children: PropTypes.node.isRequired, +}; + +const defaultProps = { + disabled: false, + style: [], + forwardedRef: undefined, }; class CheckboxButton extends Component { @@ -58,6 +79,7 @@ class CheckboxButton extends Component { } CheckboxButton.propTypes = propTypes; +CheckboxButton.defaultProps = defaultProps; CheckboxButton.displayName = 'CheckboxButton'; export default React.forwardRef((props, ref) => ( diff --git a/src/components/Checkbox/CheckboxButton.native.js b/src/components/Checkbox/CheckboxButton.native.js index 41fe96889a56..fed66609af65 100644 --- a/src/components/Checkbox/CheckboxButton.native.js +++ b/src/components/Checkbox/CheckboxButton.native.js @@ -8,10 +8,27 @@ const propTypes = { /** A function that is called when the box/label is pressed */ onPress: PropTypes.func.isRequired, + + /** Additional styles to add to checkbox button */ + style: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.object), + PropTypes.object, + ]), + + /** A ref to forward to the Pressable */ + forwardedRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), + ]), + + /** Children to wrap in CheckboxButton. */ + children: PropTypes.node.isRequired, }; const defaultProps = { - onPress: () => {}, + disabled: false, + style: [], + forwardedRef: undefined, }; const CheckboxButton = props => ( From 9e908cd8ef666a4d7b66e8f499eea5490157d288 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 19:51:52 +0530 Subject: [PATCH 005/413] fix: linting errors --- src/components/Checkbox/CheckboxButton.js | 2 +- src/components/Checkbox/index.js | 4 ++-- src/components/TextInput/BaseTextInput.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Checkbox/CheckboxButton.js b/src/components/Checkbox/CheckboxButton.js index 599e733c0e68..051fe295b3f4 100644 --- a/src/components/Checkbox/CheckboxButton.js +++ b/src/components/Checkbox/CheckboxButton.js @@ -56,7 +56,7 @@ class CheckboxButton extends Component { } onToggle() { - if(this.props.disabled) { + if (this.props.disabled) { return; } diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index 4602cd36512c..170f7465af12 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Pressable} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; import Icon from '../Icon'; @@ -55,4 +55,4 @@ Checkbox.propTypes = propTypes; Checkbox.defaultProps = defaultProps; Checkbox.displayName = 'Checkbox'; -export default Checkbox; \ No newline at end of file +export default Checkbox; diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index b55f9f166d69..d19503dd9171 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import { - Animated, View, TouchableWithoutFeedback, Pressable, AppState, Keyboard, + Animated, View, TouchableWithoutFeedback, AppState, Keyboard, } from 'react-native'; import Str from 'expensify-common/lib/str'; import RNTextInput from '../RNTextInput'; @@ -14,7 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; -import CheckboxButton from '../Checkbox/CheckboxButton' +import CheckboxButton from '../Checkbox/CheckboxButton'; class BaseTextInput extends Component { constructor(props) { From a02facdda8143eeb4ebb25c8859a922c49ee9227 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 4 May 2022 20:40:30 +0530 Subject: [PATCH 006/413] fix: lint errors --- src/components/Checkbox/CheckboxButton.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Checkbox/CheckboxButton.native.js b/src/components/Checkbox/CheckboxButton.native.js index fed66609af65..4524e2ad1a56 100644 --- a/src/components/Checkbox/CheckboxButton.native.js +++ b/src/components/Checkbox/CheckboxButton.native.js @@ -36,6 +36,7 @@ const CheckboxButton = props => ( disabled={props.disabled} onPress={props.onPress} ref={props.forwardedRef} + style={this.props.style} > {props.children} @@ -48,4 +49,4 @@ CheckboxButton.displayName = 'CheckboxButton'; export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ -)); \ No newline at end of file +)); From e64cbc9fd058e2cb26713add2fab99e0051d8fe4 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Fri, 6 May 2022 12:42:13 +0530 Subject: [PATCH 007/413] fix: error on native checkbox --- src/components/Checkbox/CheckboxButton.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/CheckboxButton.native.js b/src/components/Checkbox/CheckboxButton.native.js index 4524e2ad1a56..e3870b728f04 100644 --- a/src/components/Checkbox/CheckboxButton.native.js +++ b/src/components/Checkbox/CheckboxButton.native.js @@ -36,7 +36,7 @@ const CheckboxButton = props => ( disabled={props.disabled} onPress={props.onPress} ref={props.forwardedRef} - style={this.props.style} + style={props.style} > {props.children} From 763eed823dfd2e3741eb8d292d1803789a75ec89 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 9 May 2022 12:10:58 +0530 Subject: [PATCH 008/413] refactor: move checkboxes files --- src/components/{Checkbox/index.js => Checkbox.js} | 6 +++--- .../{Checkbox/CheckboxButton.js => CheckboxButton/index.js} | 0 .../index.native.js} | 0 src/components/TextInput/BaseTextInput.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename src/components/{Checkbox/index.js => Checkbox.js} (92%) rename src/components/{Checkbox/CheckboxButton.js => CheckboxButton/index.js} (100%) rename src/components/{Checkbox/CheckboxButton.native.js => CheckboxButton/index.native.js} (100%) diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox.js similarity index 92% rename from src/components/Checkbox/index.js rename to src/components/Checkbox.js index 170f7465af12..88c7286f6f0b 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox.js @@ -1,9 +1,9 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; -import Icon from '../Icon'; -import * as Expensicons from '../Icon/Expensicons'; +import styles from '../styles/styles'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; import CheckboxButton from './CheckboxButton'; const propTypes = { diff --git a/src/components/Checkbox/CheckboxButton.js b/src/components/CheckboxButton/index.js similarity index 100% rename from src/components/Checkbox/CheckboxButton.js rename to src/components/CheckboxButton/index.js diff --git a/src/components/Checkbox/CheckboxButton.native.js b/src/components/CheckboxButton/index.native.js similarity index 100% rename from src/components/Checkbox/CheckboxButton.native.js rename to src/components/CheckboxButton/index.native.js diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index d19503dd9171..6d73016137a6 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -14,7 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; -import CheckboxButton from '../Checkbox/CheckboxButton'; +import CheckboxButton from '../CheckboxButton'; class BaseTextInput extends Component { constructor(props) { From d708f4334487ab92cf29dffffb6ed3fab5d08c90 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 11 May 2022 23:01:05 +0530 Subject: [PATCH 009/413] refactor: add space keycode in CONST file --- src/CONST.js | 3 +++ src/components/CheckboxButton/index.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 894cf295b27c..fdf60fa4da9f 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -693,6 +693,9 @@ const CONST = { // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28 MAX_COMMENT_LENGTH: 60000, + KEYCODE: { + SPACE: 32, + }, }; export default CONST; diff --git a/src/components/CheckboxButton/index.js b/src/components/CheckboxButton/index.js index 051fe295b3f4..6a1dfda85ea5 100644 --- a/src/components/CheckboxButton/index.js +++ b/src/components/CheckboxButton/index.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import CONST from '../../CONST'; const propTypes = { /** Should the input be disabled */ @@ -45,8 +46,7 @@ class CheckboxButton extends Component { } onKeyDown(event) { - const SPACE_KEY_CODE = 32; - if (event.keyCode !== SPACE_KEY_CODE) { + if (event.keyCode !== CONST.KEYCODE.SPACE) { return; } From 833cc6d4c72bf34085d21ebf7b95daf2ea44a2ea Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 11 May 2022 23:02:13 +0530 Subject: [PATCH 010/413] refactor: remove displayName from class component --- src/components/CheckboxButton/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CheckboxButton/index.js b/src/components/CheckboxButton/index.js index 6a1dfda85ea5..5507784c42e4 100644 --- a/src/components/CheckboxButton/index.js +++ b/src/components/CheckboxButton/index.js @@ -80,7 +80,6 @@ class CheckboxButton extends Component { CheckboxButton.propTypes = propTypes; CheckboxButton.defaultProps = defaultProps; -CheckboxButton.displayName = 'CheckboxButton'; export default React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ From b91a2155dbf961bc42adc46b0fe4288baad44adb Mon Sep 17 00:00:00 2001 From: David Frenkiel Date: Thu, 19 May 2022 08:19:07 -1000 Subject: [PATCH 011/413] feat: added pdf password form for web --- src/components/PDFView/PDFPasswordForm.js | 68 ++++++++++++++++ src/components/PDFView/index.js | 95 +++++++++++++++++------ src/languages/en.js | 1 + src/languages/es.js | 1 + src/styles/styles.js | 6 ++ 5 files changed, 147 insertions(+), 24 deletions(-) create mode 100644 src/components/PDFView/PDFPasswordForm.js diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js new file mode 100644 index 000000000000..d1185ec18370 --- /dev/null +++ b/src/components/PDFView/PDFPasswordForm.js @@ -0,0 +1,68 @@ +import React, {PureComponent, memo} from 'react'; +import {View} from 'react-native'; +import Button from '../Button'; +import Text from '../Text'; +import TextInput from '../TextInput'; +import styles from '../../styles/styles'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import compose from '../../libs/compose'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +class PDFPasswordForm extends PureComponent { + constructor(props) { + super(props); + this.state = { + password: null, + }; + } + + onSubmit = () => { + // console.debug("on submit - password is", this.state.password) + this.props.onSubmit(this.state.password); + } + + render() { + return ( + + + + {this.props.translate('attachmentView.pdfPasswordRequired')} + + + this.setState({password})} + returnKeyType="done" + onSubmitEditing={this.onSubmit} + secureTextEntry + autoFocus + /> + +