diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js index 32c7ee6531c6..24f1210d5761 100755 --- a/src/components/IOUConfirmationList.js +++ b/src/components/IOUConfirmationList.js @@ -349,7 +349,6 @@ class IOUConfirmationList extends Component { hideAdditionalOptionStates forceTextUnreadStyle autoFocus - shouldDelayFocus shouldTextInputAppearBelowOptions shouldShowOfflineMessage optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js similarity index 70% rename from src/components/OptionsSelector.js rename to src/components/OptionsSelector/BaseOptionsSelector.js index c41677a0d775..ec2588185de6 100755 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -4,145 +4,34 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View, findNodeHandle} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import Button from './Button'; -import FixedFooter from './FixedFooter'; -import OptionsList from './OptionsList'; -import Text from './Text'; -import compose from '../libs/compose'; -import CONST from '../CONST'; -import styles from '../styles/styles'; -import optionPropTypes from './optionPropTypes'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import TextInput from './TextInput'; -import ArrowKeyFocusManager from './ArrowKeyFocusManager'; -import KeyboardShortcut from '../libs/KeyboardShortcut'; -import ONYXKEYS from '../ONYXKEYS'; -import FullScreenLoadingIndicator from './FullscreenLoadingIndicator'; +import Button from '../Button'; +import FixedFooter from '../FixedFooter'; +import OptionsList from '../OptionsList'; +import Text from '../Text'; +import compose from '../../libs/compose'; +import CONST from '../../CONST'; +import styles from '../../styles/styles'; +import withLocalize from '../withLocalize'; +import TextInput from '../TextInput'; +import ArrowKeyFocusManager from '../ArrowKeyFocusManager'; +import KeyboardShortcut from '../../libs/KeyboardShortcut'; +import ONYXKEYS from '../../ONYXKEYS'; +import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; +import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDefaultProps} from './optionsSelectorPropTypes'; const propTypes = { - /** Whether we should wait before focusing the TextInput, useful when using transitions */ + /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */ shouldDelayFocus: PropTypes.bool, - /** Callback to fire when a row is tapped */ - onSelectRow: PropTypes.func, - - /** 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, - - /** Whether this section items disabled for selection */ - isDisabled: PropTypes.bool, - })).isRequired, - - /** Value in the search input field */ - value: PropTypes.string.isRequired, - - /** Callback fired when text changes */ - onChangeText: PropTypes.func.isRequired, - - /** Label to display for the text input */ - textInputLabel: PropTypes.string, - - /** Optional placeholder text for the selector */ - placeholderText: PropTypes.string, - - /** Options that have already been selected */ - selectedOptions: PropTypes.arrayOf(optionPropTypes), - - /** Optional header message */ - headerMessage: PropTypes.string, - - /** Whether we can select multiple options */ - canSelectMultipleOptions: PropTypes.bool, - - /** Whether any section headers should be visible */ - hideSectionHeaders: PropTypes.bool, - - /** Whether to allow arrow key actions on the list */ - disableArrowKeysActions: PropTypes.bool, - - /** Whether to disable interactivity of option rows */ - isDisabled: 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, - - /** Whether to show the title tooltip */ - showTitleTooltip: PropTypes.bool, - - /** Whether to focus the textinput after an option is selected */ - shouldFocusOnSelectRow: PropTypes.bool, - - /** Whether to autofocus the search input on mount */ - autoFocus: PropTypes.bool, - - /** Should a button be shown if a selection is made (only relevant if canSelectMultipleOptions is true) */ - shouldShowConfirmButton: PropTypes.bool, - - /** Text to show in the confirm button (only visible if multiple options are selected) */ - confirmButtonText: PropTypes.string, - - /** Function to execute if the confirm button is pressed */ - onConfirmSelection: PropTypes.func, - - /** If true, the text input will be below the options in the selector, not above. */ - shouldTextInputAppearBelowOptions: PropTypes.bool, - - /** If true, a message will display in the footer if the app is offline. */ - shouldShowOfflineMessage: PropTypes.bool, - - /** Custom content to display in the footer instead of the default button. */ - footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), - - /** Hover style for options in the OptionsList */ - optionHoveredStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), - - /** Whether to show options list */ - shouldShowOptions: PropTypes.bool, - - ...withLocalizePropTypes, + ...optionsSelectorPropTypes, }; const defaultProps = { shouldDelayFocus: false, - onSelectRow: () => {}, - textInputLabel: '', - placeholderText: '', - selectedOptions: [], - headerMessage: '', - canSelectMultipleOptions: false, - hideSectionHeaders: false, - hideAdditionalOptionStates: false, - forceTextUnreadStyle: false, - showTitleTooltip: false, - shouldFocusOnSelectRow: false, - autoFocus: true, - shouldShowConfirmButton: false, - confirmButtonText: undefined, - onConfirmSelection: () => {}, - shouldTextInputAppearBelowOptions: false, - shouldShowOfflineMessage: false, - footerContent: undefined, - optionHoveredStyle: styles.hoveredComponentBG, - shouldShowOptions: true, - disableArrowKeysActions: false, - isDisabled: false, + ...optionsSelectorDefaultProps, }; -class OptionsSelector extends Component { +class BaseOptionsSelector extends Component { constructor(props) { super(props); @@ -427,8 +316,9 @@ class OptionsSelector extends Component { } } -OptionsSelector.defaultProps = defaultProps; -OptionsSelector.propTypes = propTypes; +BaseOptionsSelector.defaultProps = defaultProps; +BaseOptionsSelector.propTypes = propTypes; + export default compose( withLocalize, withOnyx({ @@ -436,4 +326,4 @@ export default compose( key: ONYXKEYS.NETWORK, }, }), -)(OptionsSelector); +)(BaseOptionsSelector); diff --git a/src/components/OptionsSelector/index.android.js b/src/components/OptionsSelector/index.android.js new file mode 100644 index 000000000000..4daf25deee2b --- /dev/null +++ b/src/components/OptionsSelector/index.android.js @@ -0,0 +1,18 @@ +import React, {forwardRef} from 'react'; +import BaseOptionsSelector from './BaseOptionsSelector'; +import {propTypes, defaultProps} from './optionsSelectorPropTypes'; + +const OptionsSelector = forwardRef((props, ref) => ( + +)); + +OptionsSelector.propTypes = propTypes; +OptionsSelector.defaultProps = defaultProps; +OptionsSelector.displayName = 'OptionsSelector'; + +export default OptionsSelector; diff --git a/src/components/OptionsSelector/index.js b/src/components/OptionsSelector/index.js new file mode 100644 index 000000000000..14495ecae24d --- /dev/null +++ b/src/components/OptionsSelector/index.js @@ -0,0 +1,17 @@ +import React, {forwardRef} from 'react'; +import BaseOptionsSelector from './BaseOptionsSelector'; +import {propTypes, defaultProps} from './optionsSelectorPropTypes'; + +const OptionsSelector = forwardRef((props, ref) => ( + +)); + +OptionsSelector.propTypes = propTypes; +OptionsSelector.defaultProps = defaultProps; +OptionsSelector.displayName = 'OptionsSelector'; + +export default OptionsSelector; diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js new file mode 100644 index 000000000000..ece04dad7530 --- /dev/null +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -0,0 +1,125 @@ +import PropTypes from 'prop-types'; +import optionPropTypes from '../optionPropTypes'; +import {withLocalizePropTypes} from '../withLocalize'; +import styles from '../../styles/styles'; + +const propTypes = { + /** Callback to fire when a row is tapped */ + onSelectRow: PropTypes.func, + + /** 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, + + /** Whether this section items disabled for selection */ + isDisabled: PropTypes.bool, + })).isRequired, + + /** Value in the search input field */ + value: PropTypes.string.isRequired, + + /** Callback fired when text changes */ + onChangeText: PropTypes.func.isRequired, + + /** Label to display for the text input */ + textInputLabel: PropTypes.string, + + /** Optional placeholder text for the selector */ + placeholderText: PropTypes.string, + + /** Options that have already been selected */ + selectedOptions: PropTypes.arrayOf(optionPropTypes), + + /** Optional header message */ + headerMessage: PropTypes.string, + + /** Whether we can select multiple options */ + canSelectMultipleOptions: PropTypes.bool, + + /** Whether any section headers should be visible */ + hideSectionHeaders: PropTypes.bool, + + /** Whether to allow arrow key actions on the list */ + disableArrowKeysActions: PropTypes.bool, + + /** Whether to disable interactivity of option rows */ + isDisabled: 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, + + /** Whether to show the title tooltip */ + showTitleTooltip: PropTypes.bool, + + /** Whether to focus the textinput after an option is selected */ + shouldFocusOnSelectRow: PropTypes.bool, + + /** Whether to autofocus the search input on mount */ + autoFocus: PropTypes.bool, + + /** Should a button be shown if a selection is made (only relevant if canSelectMultipleOptions is true) */ + shouldShowConfirmButton: PropTypes.bool, + + /** Text to show in the confirm button (only visible if multiple options are selected) */ + confirmButtonText: PropTypes.string, + + /** Function to execute if the confirm button is pressed */ + onConfirmSelection: PropTypes.func, + + /** If true, the text input will be below the options in the selector, not above. */ + shouldTextInputAppearBelowOptions: PropTypes.bool, + + /** If true, a message will display in the footer if the app is offline. */ + shouldShowOfflineMessage: PropTypes.bool, + + /** Custom content to display in the footer instead of the default button. */ + footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), + + /** Hover style for options in the OptionsList */ + optionHoveredStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + + /** Whether to show options list */ + shouldShowOptions: PropTypes.bool, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + onSelectRow: () => {}, + textInputLabel: '', + placeholderText: '', + selectedOptions: [], + headerMessage: '', + canSelectMultipleOptions: false, + hideSectionHeaders: false, + hideAdditionalOptionStates: false, + forceTextUnreadStyle: false, + showTitleTooltip: false, + shouldFocusOnSelectRow: false, + autoFocus: true, + shouldShowConfirmButton: false, + confirmButtonText: undefined, + onConfirmSelection: () => {}, + shouldTextInputAppearBelowOptions: false, + shouldShowOfflineMessage: false, + footerContent: undefined, + optionHoveredStyle: styles.hoveredComponentBG, + shouldShowOptions: true, + disableArrowKeysActions: false, + isDisabled: false, +}; + +export {propTypes, defaultProps}; diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 2c8a0231c8cb..7317416b5660 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -223,7 +223,6 @@ class NewChatPage extends Component { {!didScreenTransitionEnd && } {didScreenTransitionEnd && ( diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js index 23453ecf9690..a1e8b0d3bee6 100755 --- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js +++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js @@ -138,7 +138,6 @@ class IOUParticipantsRequest extends Component { headerMessage={headerMessage} hideAdditionalOptionStates forceTextUnreadStyle - shouldDelayFocus /> ); } diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js index ca503ce24f6b..273061aa4e3c 100755 --- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js +++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js @@ -226,7 +226,6 @@ class IOUParticipantsSplit extends Component { headerMessage={headerMessage} hideAdditionalOptionStates forceTextUnreadStyle - shouldDelayFocus shouldShowConfirmButton confirmButtonText={this.props.translate('common.next')} onConfirmSelection={this.finalizeParticipants}