From 55cca0c070e36991b6743c8229f52ee211bb5e70 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 10 Nov 2021 05:54:18 +0300 Subject: [PATCH 1/7] create index, index.native file for OptionsSelector --- .../BaseOptionsList.js} | 38 ++++++++++--------- src/components/OptionsList/index.js | 10 +++++ src/components/OptionsList/index.native.js | 17 +++++++++ 3 files changed, 48 insertions(+), 17 deletions(-) rename src/components/{OptionsList.js => OptionsList/BaseOptionsList.js} (90%) create mode 100644 src/components/OptionsList/index.js create mode 100644 src/components/OptionsList/index.native.js diff --git a/src/components/OptionsList.js b/src/components/OptionsList/BaseOptionsList.js similarity index 90% rename from src/components/OptionsList.js rename to src/components/OptionsList/BaseOptionsList.js index 6f5e5164dcf..9fbc97329fc 100644 --- a/src/components/OptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -1,13 +1,13 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; -import {Keyboard, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; -import Log from '../libs/Log'; -import styles from '../styles/styles'; -import OptionRow from '../pages/home/sidebar/OptionRow'; -import optionPropTypes from './optionPropTypes'; -import SectionList from './SectionList'; -import Text from './Text'; +import Log from '../../libs/Log'; +import styles from '../../styles/styles'; +import OptionRow from '../../pages/home/sidebar/OptionRow'; +import SectionList from '../SectionList'; +import Text from '../Text'; +import optionPropTypes from '../optionPropTypes'; const propTypes = { /** option Background Color */ @@ -82,6 +82,12 @@ const propTypes = { /** Callback to execute when the SectionList lays out */ onLayout: PropTypes.func, + + /** Determines whether the keyboard gets dismissed in response to a drag */ + keyboardDismissMode: PropTypes.string, + + /** Called when the user begins to drag the scroll view */ + onScrollBeginDrag: PropTypes.func, }; const defaultProps = { @@ -104,9 +110,11 @@ const defaultProps = { optionMode: undefined, disableRowInteractivity: false, onLayout: undefined, + keyboardDismissMode: 'none', + onScrollBeginDrag: () => {}, }; -class OptionsList extends Component { +class BaseOptionsList extends Component { constructor(props) { super(props); @@ -235,12 +243,8 @@ class OptionsList extends Component { ref={this.props.innerRef} indicatorStyle="white" keyboardShouldPersistTaps="always" - - // Both `keyboardDismissMode` & `onScrollBeginDrag` props are needed to ensure that virtual keyboard is - // dismissed on all platforms. - // eslint-disable-next-line react/jsx-props-no-multi-spaces - keyboardDismissMode="on-drag" - onScrollBeginDrag={() => Keyboard.dismiss()} + keyboardDismissMode={this.props.keyboardDismissMode} + onScrollBeginDrag={this.props.onScrollBeginDrag} contentContainerStyle={[...this.props.contentContainerStyles]} showsVerticalScrollIndicator={false} sections={this.props.sections} @@ -261,10 +265,10 @@ class OptionsList extends Component { } } -OptionsList.propTypes = propTypes; -OptionsList.defaultProps = defaultProps; +BaseOptionsList.propTypes = propTypes; +BaseOptionsList.defaultProps = defaultProps; export default forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading - + )); diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js new file mode 100644 index 00000000000..00ef5a43f30 --- /dev/null +++ b/src/components/OptionsList/index.js @@ -0,0 +1,10 @@ +import React, {forwardRef} from 'react'; +import BaseOptionsList from './BaseOptionsList'; + +export default forwardRef((props, ref) => ( + +)); diff --git a/src/components/OptionsList/index.native.js b/src/components/OptionsList/index.native.js new file mode 100644 index 00000000000..e43604cdfec --- /dev/null +++ b/src/components/OptionsList/index.native.js @@ -0,0 +1,17 @@ +import React, {forwardRef} from 'react'; +import {Keyboard} from 'react-native'; +import BaseOptionsList from './BaseOptionsList'; + +export default forwardRef((props, ref) => ( + Keyboard.dismiss()} + /> +)); From 888fe72b27b87819465b0536f95776261a86d168 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 05:43:59 +0300 Subject: [PATCH 2/7] rm unnecessary prop keyboardDismissMode --- src/components/OptionsList/index.native.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/OptionsList/index.native.js b/src/components/OptionsList/index.native.js index e43604cdfec..eeeb3640f6b 100644 --- a/src/components/OptionsList/index.native.js +++ b/src/components/OptionsList/index.native.js @@ -7,11 +7,6 @@ export default forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} - - // Both `keyboardDismissMode` & `onScrollBeginDrag` props are needed to ensure that virtual keyboard is - // dismissed on all platforms. - // eslint-disable-next-line react/jsx-props-no-multi-spaces - keyboardDismissMode="on-drag" onScrollBeginDrag={() => Keyboard.dismiss()} /> )); From 9bcf19983c57e81cf3f17b20e45498f7b34a4f12 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 09:17:34 +0300 Subject: [PATCH 3/7] dismiss keyboard for mWeb --- src/components/OptionsList/BaseOptionsList.js | 108 +---------------- .../OptionsList/baseOptionsListPropTypes.js | 111 ++++++++++++++++++ src/components/OptionsList/index.js | 13 +- src/components/OptionsList/index.native.js | 9 +- 4 files changed, 132 insertions(+), 109 deletions(-) create mode 100644 src/components/OptionsList/baseOptionsListPropTypes.js diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 9fbc97329fc..bb1b9ad9bc9 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -1,118 +1,12 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; import {View} from 'react-native'; -import PropTypes from 'prop-types'; import Log from '../../libs/Log'; import styles from '../../styles/styles'; import OptionRow from '../../pages/home/sidebar/OptionRow'; import SectionList from '../SectionList'; import Text from '../Text'; -import optionPropTypes from '../optionPropTypes'; - -const propTypes = { - /** option Background Color */ - optionBackgroundColor: PropTypes.string, - - /** option flexStyle for the options list container */ - listContainerStyles: PropTypes.arrayOf(PropTypes.object), - - /** Style for hovered state */ - // eslint-disable-next-line react/forbid-prop-types - optionHoveredStyle: PropTypes.object, - - /** Extra styles for the section list container */ - contentContainerStyles: PropTypes.arrayOf(PropTypes.object), - - /** Sections for the section list */ - sections: PropTypes.arrayOf(PropTypes.shape({ - /** Title of the section */ - title: PropTypes.string, - - /** The initial index of this section given the total number of options in each section's data array */ - indexOffset: PropTypes.number, - - /** Array of options */ - data: PropTypes.arrayOf(optionPropTypes), - - /** Whether this section should show or not */ - shouldShow: PropTypes.bool, - })), - - /** Index for option to focus on */ - focusedIndex: PropTypes.number, - - /** Array of already selected options */ - selectedOptions: PropTypes.arrayOf(optionPropTypes), - - /** Whether we can select multiple options or not */ - canSelectMultipleOptions: PropTypes.bool, - - /** Whether to show headers above each section or not */ - hideSectionHeaders: PropTypes.bool, - - /** Whether to allow option focus or not */ - disableFocusOptions: PropTypes.bool, - - /** A flag to indicate whether to show additional optional states, such as pin and draft icons */ - hideAdditionalOptionStates: PropTypes.bool, - - /** Force the text style to be the unread style on all rows */ - forceTextUnreadStyle: PropTypes.bool, - - /** Callback to fire when a row is selected */ - onSelectRow: PropTypes.func, - - /** Optional header message */ - headerMessage: PropTypes.string, - - /** Passed via forwardRef so we can access the SectionList ref */ - innerRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({current: PropTypes.instanceOf(SectionList)}), - ]), - - /** Whether to show the title tooltip */ - showTitleTooltip: PropTypes.bool, - - /** Toggle between compact and default view of the option */ - optionMode: PropTypes.oneOf(['compact', 'default']), - - /** Whether to disable the interactivity of the list's option row(s) */ - disableRowInteractivity: PropTypes.bool, - - /** Callback to execute when the SectionList lays out */ - onLayout: PropTypes.func, - - /** Determines whether the keyboard gets dismissed in response to a drag */ - keyboardDismissMode: PropTypes.string, - - /** Called when the user begins to drag the scroll view */ - onScrollBeginDrag: PropTypes.func, -}; - -const defaultProps = { - optionBackgroundColor: undefined, - optionHoveredStyle: undefined, - contentContainerStyles: [], - listContainerStyles: [styles.flex1], - sections: [], - focusedIndex: 0, - selectedOptions: [], - canSelectMultipleOptions: false, - hideSectionHeaders: false, - disableFocusOptions: false, - hideAdditionalOptionStates: false, - forceTextUnreadStyle: false, - onSelectRow: () => {}, - headerMessage: '', - innerRef: null, - showTitleTooltip: false, - optionMode: undefined, - disableRowInteractivity: false, - onLayout: undefined, - keyboardDismissMode: 'none', - onScrollBeginDrag: () => {}, -}; +import {propTypes, defaultProps} from './baseOptionsListPropTypes'; class BaseOptionsList extends Component { constructor(props) { diff --git a/src/components/OptionsList/baseOptionsListPropTypes.js b/src/components/OptionsList/baseOptionsListPropTypes.js new file mode 100644 index 00000000000..f1364bbfb25 --- /dev/null +++ b/src/components/OptionsList/baseOptionsListPropTypes.js @@ -0,0 +1,111 @@ +import PropTypes from 'prop-types'; +import SectionList from '../SectionList'; +import styles from '../../styles/styles'; +import optionPropTypes from '../optionPropTypes'; + +const propTypes = { + /** option Background Color */ + optionBackgroundColor: PropTypes.string, + + /** option flexStyle for the options list container */ + listContainerStyles: PropTypes.arrayOf(PropTypes.object), + + /** Style for hovered state */ + // eslint-disable-next-line react/forbid-prop-types + optionHoveredStyle: PropTypes.object, + + /** Extra styles for the section list container */ + contentContainerStyles: PropTypes.arrayOf(PropTypes.object), + + /** Sections for the section list */ + sections: PropTypes.arrayOf(PropTypes.shape({ + /** Title of the section */ + title: PropTypes.string, + + /** The initial index of this section given the total number of options in each section's data array */ + indexOffset: PropTypes.number, + + /** Array of options */ + data: PropTypes.arrayOf(optionPropTypes), + + /** Whether this section should show or not */ + shouldShow: PropTypes.bool, + })), + + /** Index for option to focus on */ + focusedIndex: PropTypes.number, + + /** Array of already selected options */ + selectedOptions: PropTypes.arrayOf(optionPropTypes), + + /** Whether we can select multiple options or not */ + canSelectMultipleOptions: PropTypes.bool, + + /** Whether to show headers above each section or not */ + hideSectionHeaders: PropTypes.bool, + + /** Whether to allow option focus or not */ + disableFocusOptions: PropTypes.bool, + + /** A flag to indicate whether to show additional optional states, such as pin and draft icons */ + hideAdditionalOptionStates: PropTypes.bool, + + /** Force the text style to be the unread style on all rows */ + forceTextUnreadStyle: PropTypes.bool, + + /** Callback to fire when a row is selected */ + onSelectRow: PropTypes.func, + + /** Optional header message */ + headerMessage: PropTypes.string, + + /** Passed via forwardRef so we can access the SectionList ref */ + innerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(SectionList)}), + ]), + + /** Whether to show the title tooltip */ + showTitleTooltip: PropTypes.bool, + + /** Toggle between compact and default view of the option */ + optionMode: PropTypes.oneOf(['compact', 'default']), + + /** Whether to disable the interactivity of the list's option row(s) */ + disableRowInteractivity: PropTypes.bool, + + /** Callback to execute when the SectionList lays out */ + onLayout: PropTypes.func, + + /** Determines whether the keyboard gets dismissed in response to a drag */ + keyboardDismissMode: PropTypes.string, + + /** Called when the user begins to drag the scroll view */ + onScrollBeginDrag: PropTypes.func, +}; + +const defaultProps = { + optionBackgroundColor: undefined, + optionHoveredStyle: undefined, + contentContainerStyles: [], + listContainerStyles: [styles.flex1], + sections: [], + focusedIndex: 0, + selectedOptions: [], + canSelectMultipleOptions: false, + hideSectionHeaders: false, + disableFocusOptions: false, + hideAdditionalOptionStates: false, + forceTextUnreadStyle: false, + onSelectRow: () => {}, + headerMessage: '', + innerRef: null, + showTitleTooltip: false, + optionMode: undefined, + disableRowInteractivity: false, + onLayout: undefined, + keyboardDismissMode: 'none', + onScrollBeginDrag: () => {}, +}; + +export {propTypes, defaultProps}; diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index 00ef5a43f30..56a3c7b302a 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -1,10 +1,21 @@ import React, {forwardRef} from 'react'; import BaseOptionsList from './BaseOptionsList'; +import withWindowDimensions from '../withWindowDimensions'; +import {propTypes, defaultProps} from './baseOptionsListPropTypes'; -export default forwardRef((props, ref) => ( +const OptionsList = forwardRef((props, ref) => ( )); + +OptionsList.propTypes = propTypes; +OptionsList.defaultProps = defaultProps; +OptionsList.displayName = 'OptionsList'; + +export default withWindowDimensions(OptionsList); diff --git a/src/components/OptionsList/index.native.js b/src/components/OptionsList/index.native.js index eeeb3640f6b..b16a55eae6e 100644 --- a/src/components/OptionsList/index.native.js +++ b/src/components/OptionsList/index.native.js @@ -1,8 +1,9 @@ import React, {forwardRef} from 'react'; import {Keyboard} from 'react-native'; import BaseOptionsList from './BaseOptionsList'; +import {propTypes, defaultProps} from './baseOptionsListPropTypes'; -export default forwardRef((props, ref) => ( +const OptionsList = forwardRef((props, ref) => ( ( onScrollBeginDrag={() => Keyboard.dismiss()} /> )); + +OptionsList.propTypes = propTypes; +OptionsList.defaultProps = defaultProps; +OptionsList.displayName = 'OptionsList'; + +export default OptionsList; From 0f81545f6a233a988bc9134a2310d9e04a1407ff Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 11:20:08 +0300 Subject: [PATCH 4/7] rm unnecessary comment Co-authored-by: Rajat Parashar --- src/components/OptionsList/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index 56a3c7b302a..fd94379fced 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -8,8 +8,6 @@ const OptionsList = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} - - // eslint-disable-next-line react/jsx-props-no-multi-spaces keyboardDismissMode={props.isSmallScreenWidth ? 'on-drag' : 'none'} /> )); From ff2429a04d6773f19a9604dfd49cdad5bd4baaa2 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 11:30:06 +0300 Subject: [PATCH 5/7] fix code style Co-authored-by: Rajat Parashar --- src/components/OptionsList/BaseOptionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index bb1b9ad9bc9..93e958677a6 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -139,7 +139,7 @@ class BaseOptionsList extends Component { keyboardShouldPersistTaps="always" keyboardDismissMode={this.props.keyboardDismissMode} onScrollBeginDrag={this.props.onScrollBeginDrag} - contentContainerStyle={[...this.props.contentContainerStyles]} + contentContainerStyle={this.props.contentContainerStyles} showsVerticalScrollIndicator={false} sections={this.props.sections} keyExtractor={this.extractKey} From 670449462d97b58d169315336b5c29fdeef429e1 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 11:42:33 +0300 Subject: [PATCH 6/7] fix prop definitions --- src/components/OptionsList/BaseOptionsList.js | 18 +++++++++++++++++- src/components/OptionsList/index.js | 2 +- src/components/OptionsList/index.native.js | 2 +- ...istPropTypes.js => optionsListPropTypes.js} | 8 -------- 4 files changed, 19 insertions(+), 11 deletions(-) rename src/components/OptionsList/{baseOptionsListPropTypes.js => optionsListPropTypes.js} (91%) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 93e958677a6..ef6c1c507e9 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -6,7 +6,23 @@ import styles from '../../styles/styles'; import OptionRow from '../../pages/home/sidebar/OptionRow'; import SectionList from '../SectionList'; import Text from '../Text'; -import {propTypes, defaultProps} from './baseOptionsListPropTypes'; +import {propTypes as optionsListPropTypes, defaultProps as optionsListDefaultProps} from './optionsListPropTypes'; + +const propTypes = { + /** Determines whether the keyboard gets dismissed in response to a drag */ + keyboardDismissMode: PropTypes.string, + + /** Called when the user begins to drag the scroll view */ + onScrollBeginDrag: PropTypes.func, + + ...optionsListPropTypes, +}; + +const defaultProps = { + keyboardDismissMode: 'none', + onScrollBeginDrag: () => {}, + ...optionsListDefaultProps, +}; class BaseOptionsList extends Component { constructor(props) { diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index fd94379fced..7db02df5623 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -1,7 +1,7 @@ import React, {forwardRef} from 'react'; import BaseOptionsList from './BaseOptionsList'; import withWindowDimensions from '../withWindowDimensions'; -import {propTypes, defaultProps} from './baseOptionsListPropTypes'; +import {propTypes, defaultProps} from './optionsListPropTypes'; const OptionsList = forwardRef((props, ref) => ( ( {}, }; export {propTypes, defaultProps}; From eed26e70dfb7cfead5bf2cdf05232005f3b419b5 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Tue, 30 Nov 2021 11:44:50 +0300 Subject: [PATCH 7/7] import proptypes --- src/components/OptionsList/BaseOptionsList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index ef6c1c507e9..f11ef7c84ab 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; import {View} from 'react-native'; +import PropTypes from 'prop-types'; import Log from '../../libs/Log'; import styles from '../../styles/styles'; import OptionRow from '../../pages/home/sidebar/OptionRow';