From ea2551d0ba1181317ccd4b008a4370933ef1acfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Tue, 21 Nov 2023 00:10:53 +0100 Subject: [PATCH 001/284] BaseOptionsSelector refactoring --- .../OptionsSelector/BaseOptionsSelector.js | 549 +++++++++--------- 1 file changed, 290 insertions(+), 259 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index fb312125efc0..277ddb1071b8 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -1,6 +1,6 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {Component} from 'react'; +import React, {useEffect, useMemo, useRef, useState} from 'react'; import {ScrollView, View} from 'react-native'; import _ from 'underscore'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; @@ -9,15 +9,14 @@ import FixedFooter from '@components/FixedFooter'; import FormHelpMessage from '@components/FormHelpMessage'; import OptionsList from '@components/OptionsList'; import TextInput from '@components/TextInput'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withNavigationFocus from '@components/withNavigationFocus'; -import compose from '@libs/compose'; import getPlatform from '@libs/getPlatform'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import setSelection from '@libs/setSelection'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes'; +import {useIsFocused} from "@react-navigation/native"; +import useLocalize from "@hooks/useLocalize"; const propTypes = { /** padding bottom style of safe area */ @@ -32,11 +31,7 @@ const propTypes = { /** List styles for OptionsList */ listStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), - /** Whether navigation is focused */ - isFocused: PropTypes.bool.isRequired, - ...optionsSelectorPropTypes, - ...withLocalizePropTypes, }; const defaultProps = { @@ -48,164 +43,232 @@ const defaultProps = { ...optionsSelectorDefaultProps, }; -class BaseOptionsSelector extends Component { - constructor(props) { - super(props); - - this.updateFocusedIndex = this.updateFocusedIndex.bind(this); - this.scrollToIndex = this.scrollToIndex.bind(this); - this.selectRow = this.selectRow.bind(this); - this.selectFocusedOption = this.selectFocusedOption.bind(this); - this.addToSelection = this.addToSelection.bind(this); - this.updateSearchValue = this.updateSearchValue.bind(this); - this.relatedTarget = null; - - const allOptions = this.flattenSections(); - const focusedIndex = this.getInitiallyFocusedIndex(allOptions); - - this.state = { - allOptions, - focusedIndex, - shouldDisableRowSelection: false, - errorMessage: '', - }; +const BaseOptionsSelector = ({ + onSelectRow, + sections, + value, + onChangeText, + maxLength, + textInputLabel, + keyboardType, + placeholderText, + selectedOptions, + headerMessage, + canSelectMultipleOptions, + shouldShowMultipleOptionSelectorAsButton, + multipleOptionSelectorButtonText, + onAddToSelection, + highlightSelectedOptions, + hideSectionHeaders, + disableArrowKeysActions, + isDisabled, + boldStyle, + showTitleTooltip, + shouldPreventDefaultFocusOnSelectRow, + autoFocus, + shouldShowConfirmButton, + confirmButtonText, + onConfirmSelection, + shouldTextInputAppearBelowOptions, + shouldShowTextInput, + footerContent, + optionHoveredStyle, + sectionHeaderStyle, + shouldShowOptions, + shouldHaveOptionSeparator, + initiallyFocusedOptionKey, + shouldUseStyleForChildren, + isRowMultilineSupported, + initialFocusedIndex, + shouldTextInputInterceptSwipe, + shouldAllowScrollingChildren, + nestedScrollEnabled, +}) => { + + const isFocused = useIsFocused(); + const {translate} = useLocalize(); + + /** + * Flattens the sections into a single array of options. + * Each object in this array is enhanced to have: + * + * 1. A `sectionIndex`, which represents the index of the section it came from + * 2. An `index`, which represents the index of the option within the section it came from. + * + * @returns {Array} + */ + const flattenSections = () => { + const allOptions = []; + const calcDisabledOptionsIndexes = []; + let index = 0; + _.each(sections, (section, sectionIndex) => { + _.each(section.data, (option, optionIndex) => { + allOptions.push({ + ...option, + sectionIndex, + index: optionIndex, + }); + if (section.isDisabled || option.isDisabled) { + calcDisabledOptionsIndexes.push(index); + } + index += 1; + }); + }); + + setDisabledOptionsIndexes(calcDisabledOptionsIndexes) + return allOptions; } - componentDidMount() { - this.subscribeToKeyboardShortcut(); + /** + * @param {Array} allOptions + * @returns {Number} + */ + const getInitiallyFocusedIndex = (allOptions) => { + if (_.isNumber(initialFocusedIndex)) { + return initialFocusedIndex; + } - if (this.props.isFocused && this.props.autoFocus && this.textInput) { - this.focusTimeout = setTimeout(() => { - this.textInput.focus(); - }, CONST.ANIMATED_TRANSITION); + if (selectedOptions.length > 0) { + return selectedOptions.length; + } + const defaultIndex = shouldTextInputAppearBelowOptions ? allOptions.length : 0; + if (_.isUndefined(initiallyFocusedOptionKey)) { + return defaultIndex; + } + + const indexOfInitiallyFocusedOption = _.findIndex(allOptions, (option) => option.keyForList === initiallyFocusedOptionKey); + + if (indexOfInitiallyFocusedOption >= 0) { + return indexOfInitiallyFocusedOption; } - this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false); + return defaultIndex; } - componentDidUpdate(prevProps) { - if (prevProps.isFocused !== this.props.isFocused) { - if (this.props.isFocused) { - this.subscribeToKeyboardShortcut(); - } else { - this.unSubscribeFromKeyboardShortcut(); + const relatedTarget = useRef(null); + const listRef = useRef(); + const textInputRef = useRef(); + const enterSubscription = useRef(); + const CTRLEnterSubscription = useRef(); + + const prevLocale = useRef(preferredLocale); + const prevSelectedOptions = useRef(selectedOptions); + + const [disabledOptionsIndexes, setDisabledOptionsIndexes] = useState([]); + + const initialAllOptions = useMemo(() => { + return flattenSections(); + },[]) + + const [allOptions, setAllOptions] = useState(initialAllOptions); + const [focusedIndex, setFocusedIndex] = useState(getInitiallyFocusedIndex(initialAllOptions)); + const [shouldDisableRowSelection, setShouldDisableRowSelection] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); + + const focusTimeout = useRef(); + + useEffect(() => { + subscribeToKeyboardShortcut(); + + if (isFocused && autoFocus && textInputRef.current) { + focusTimeout.current = setTimeout(() => { + textInputRef.current.focus(); + }, CONST.ANIMATED_TRANSITION); + } + + scrollToIndex(selectedOptions.length ? 0 : focusedIndex, false); + + return () => { + if (focusTimeout.current) { + clearTimeout(focusTimeout.current); } + + unSubscribeFromKeyboardShortcut(); + } + }, []); + + + useEffect(() => { + if (isFocused) { + subscribeToKeyboardShortcut(); + } else { + unSubscribeFromKeyboardShortcut(); } // Screen coming back into focus, for example // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K. // Only applies to platforms that support keyboard shortcuts - if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus && this.textInput) { + if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && isFocused && autoFocus && textInputRef.current) { setTimeout(() => { - this.textInput.focus(); + textInputRef.current.focus(); }, CONST.ANIMATED_TRANSITION); } + }, [isFocused]) - if (_.isEqual(this.props.sections, prevProps.sections)) { - return; - } + useEffect(() => { + const newOptions = flattenSections(); - const newOptions = this.flattenSections(); + if (prevLocale.current !== preferredLocale) { + prevLocale.current = preferredLocale; + setAllOptions(newOptions); - if (prevProps.preferredLocale !== this.props.preferredLocale) { - this.setState({ - allOptions: newOptions, - }); return; } - const newFocusedIndex = this.props.selectedOptions.length; - const isNewFocusedIndex = newFocusedIndex !== this.state.focusedIndex; - - // eslint-disable-next-line react/no-did-update-set-state - this.setState( - { - allOptions: newOptions, - focusedIndex: _.isNumber(this.props.initialFocusedIndex) ? this.props.initialFocusedIndex : newFocusedIndex, - }, - () => { - // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top - if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || (!!prevProps.value && !this.props.value)) { - this.scrollToIndex(0); - return; - } - - // Otherwise, scroll to the focused index (as long as it's in range) - if (this.state.allOptions.length <= this.state.focusedIndex || !isNewFocusedIndex) { - return; - } - this.scrollToIndex(this.state.focusedIndex); - }, - ); - } - componentWillUnmount() { - if (this.focusTimeout) { - clearTimeout(this.focusTimeout); - } + const newFocusedIndex = selectedOptions.length; - this.unSubscribeFromKeyboardShortcut(); - } + setAllOptions(newOptions); + setFocusedIndex(_.isNumber(initialFocusedIndex) ? initialFocusedIndex : newFocusedIndex) + }, [sections]); - /** - * @param {Array} allOptions - * @returns {Number} - */ - getInitiallyFocusedIndex(allOptions) { - if (_.isNumber(this.props.initialFocusedIndex)) { - return this.props.initialFocusedIndex; - } + useEffect(() => { + const isNewFocusedIndex = selectedOptions.length !== focusedIndex; - if (this.props.selectedOptions.length > 0) { - return this.props.selectedOptions.length; - } - const defaultIndex = this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0; - if (_.isUndefined(this.props.initiallyFocusedOptionKey)) { - return defaultIndex; + // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top + if (selectedOptions.length !== prevSelectedOptions.current.length || !value) { + prevSelectedOptions.current = selectedOptions; + scrollToIndex(0); + return; } - const indexOfInitiallyFocusedOption = _.findIndex(allOptions, (option) => option.keyForList === this.props.initiallyFocusedOptionKey); - - if (indexOfInitiallyFocusedOption >= 0) { - return indexOfInitiallyFocusedOption; + // Otherwise, scroll to the focused index (as long as it's in range) + if (allOptions.length <= focusedIndex || !isNewFocusedIndex) { + return; } + scrollToIndex(focusedIndex); + }, [focusedIndex]); - return defaultIndex; - } - - updateSearchValue(value) { - this.setState({ - errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '', - }); - - this.props.onChangeText(value); + const updateSearchValue = (value) => { + setErrorMessage(value.length > maxLength ? translate('common.error.characterLimitExceedCounter', {length: value.length, limit: maxLength}) : ''); + onChangeText(value); } - subscribeToKeyboardShortcut() { + const subscribeToKeyboardShortcut = () => { const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; - this.unsubscribeEnter = KeyboardShortcut.subscribe( + enterSubscription.current = KeyboardShortcut.subscribe( enterConfig.shortcutKey, - this.selectFocusedOption, + selectFocusedOption, enterConfig.descriptionKey, enterConfig.modifiers, true, - () => !this.state.allOptions[this.state.focusedIndex], + () => !allOptions[focusedIndex], ); const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER; - this.unsubscribeCTRLEnter = KeyboardShortcut.subscribe( + CTRLEnterSubscription.current = KeyboardShortcut.subscribe( CTRLEnterConfig.shortcutKey, () => { - if (this.props.canSelectMultipleOptions) { - this.props.onConfirmSelection(); + if (canSelectMultipleOptions) { + onConfirmSelection(); return; } - const focusedOption = this.state.allOptions[this.state.focusedIndex]; + const focusedOption = allOptions[focusedIndex]; if (!focusedOption) { return; } - this.selectRow(focusedOption); + selectRow(focusedOption); }, CTRLEnterConfig.descriptionKey, CTRLEnterConfig.modifiers, @@ -213,83 +276,55 @@ class BaseOptionsSelector extends Component { ); } - unSubscribeFromKeyboardShortcut() { - if (this.unsubscribeEnter) { - this.unsubscribeEnter(); + const unSubscribeFromKeyboardShortcut = () => { + if (enterSubscription.current) { + enterSubscription.current(); } - if (this.unsubscribeCTRLEnter) { - this.unsubscribeCTRLEnter(); + if (CTRLEnterSubscription.current) { + CTRLEnterSubscription.current(); } } - selectFocusedOption() { - const focusedOption = this.state.allOptions[this.state.focusedIndex]; + const selectFocusedOption = () => { + const focusedOption = allOptions[focusedIndex]; - if (!focusedOption || !this.props.isFocused) { + if (!focusedOption || !isFocused) { return; } - if (this.props.canSelectMultipleOptions) { - this.selectRow(focusedOption); - } else if (!this.state.shouldDisableRowSelection) { - this.setState({shouldDisableRowSelection: true}); + if (canSelectMultipleOptions) { + selectRow(focusedOption); + } else if (!shouldDisableRowSelection) { + setShouldDisableRowSelection(true); - let result = this.selectRow(focusedOption); + let result = selectRow(focusedOption); if (!(result instanceof Promise)) { result = Promise.resolve(); } setTimeout(() => { result.finally(() => { - this.setState({shouldDisableRowSelection: false}); + setShouldDisableRowSelection(false); }); }, 500); } } - focus() { - if (!this.textInput) { + const focus = () => { + if (!textInputRef.current) { return; } - this.textInput.focus(); + textInputRef.current.focus(); } - /** - * Flattens the sections into a single array of options. - * Each object in this array is enhanced to have: - * - * 1. A `sectionIndex`, which represents the index of the section it came from - * 2. An `index`, which represents the index of the option within the section it came from. - * - * @returns {Array} - */ - flattenSections() { - const allOptions = []; - this.disabledOptionsIndexes = []; - let index = 0; - _.each(this.props.sections, (section, sectionIndex) => { - _.each(section.data, (option, optionIndex) => { - allOptions.push({ - ...option, - sectionIndex, - index: optionIndex, - }); - if (section.isDisabled || option.isDisabled) { - this.disabledOptionsIndexes.push(index); - } - index += 1; - }); - }); - return allOptions; - } /** * @param {Number} index */ - updateFocusedIndex(index) { - this.setState({focusedIndex: index}, () => this.scrollToIndex(index)); + const updateFocusedIndex = (index) => { + setFocusedIndex(index); } /** @@ -298,9 +333,9 @@ class BaseOptionsSelector extends Component { * @param {Number} index * @param {Boolean} animated */ - scrollToIndex(index, animated = true) { - const option = this.state.allOptions[index]; - if (!this.list || !option) { + const scrollToIndex = (index, animated = true) => { + const option = allOptions[index]; + if (!listRef.current || !option) { return; } @@ -312,12 +347,12 @@ class BaseOptionsSelector extends Component { // Otherwise, it will cause an index-out-of-bounds error and crash the app. let adjustedSectionIndex = sectionIndex; for (let i = 0; i < sectionIndex; i++) { - if (_.isEmpty(lodashGet(this.props.sections, `[${i}].data`))) { + if (_.isEmpty(lodashGet(sections, `[${i}].data`))) { adjustedSectionIndex--; } } - this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated}); + listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated}); } /** @@ -327,28 +362,26 @@ class BaseOptionsSelector extends Component { * @param {Object} ref * @returns {Promise} */ - selectRow(option, ref) { + const selectRow = (option, ref) => { return new Promise((resolve) => { - if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) { - if (this.relatedTarget && ref === this.relatedTarget) { - this.textInput.focus(); - this.relatedTarget = null; + if (shouldShowTextInput && shouldPreventDefaultFocusOnSelectRow) { + if (relatedTarget.current && ref === relatedTarget.current) { + textInputRef.current.focus(); + relatedTarget.current = null; } - if (this.textInput.isFocused()) { - setSelection(this.textInput, 0, this.props.value.length); + if (textInputRef.current.isFocused()) { + setSelection(textInputRef.current, 0, value.length); } } - const selectedOption = this.props.onSelectRow(option); + const selectedOption = onSelectRow(option); resolve(selectedOption); - if (!this.props.canSelectMultipleOptions) { + if (!canSelectMultipleOptions) { return; } // Focus the first unselected item from the list (i.e: the best result according to the current search term) - this.setState({ - focusedIndex: this.props.selectedOptions.length, - }); + setFocusedIndex(selectedOptions.length); }); } @@ -356,106 +389,105 @@ class BaseOptionsSelector extends Component { * Completes the follow-up action after clicking on multiple select button * @param {Object} option */ - addToSelection(option) { - if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) { - this.textInput.focus(); - if (this.textInput.isFocused()) { - setSelection(this.textInput, 0, this.props.value.length); + const addToSelection = (option) => { + if (shouldShowTextInput && shouldPreventDefaultFocusOnSelectRow) { + textInputRef.current.focus(); + if (textInputRef.current.isFocused()) { + setSelection(textInputRef.current, 0, value.length); } } - this.props.onAddToSelection(option); + onAddToSelection(option); } - render() { const shouldShowFooter = - !this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions)); - const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText; - const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText; - const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle; + !isReadOnly && (shouldShowConfirmButton || footerContent) && !(canSelectMultipleOptions && _.isEmpty(selectedOptions)); + const defaultConfirmButtonText = _.isUndefined(confirmButtonText) ? translate('common.confirm') : confirmButtonText; + const shouldShowDefaultConfirmButton = !footerContent && defaultConfirmButtonText; + const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : safeAreaPaddingBottomStyle; const textInput = ( (this.textInput = el)} - value={this.props.value} - label={this.props.textInputLabel} - accessibilityLabel={this.props.textInputLabel} + ref={textInputRef} + value={value} + label={textInputLabel} + accessibilityLabel={textInputLabel} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - onChangeText={this.updateSearchValue} - errorText={this.state.errorMessage} - onSubmitEditing={this.selectFocusedOption} - placeholder={this.props.placeholderText} - maxLength={this.props.maxLength + CONST.ADDITIONAL_ALLOWED_CHARACTERS} - keyboardType={this.props.keyboardType} + onChangeText={updateSearchValue} + errorText={errorMessage} + onSubmitEditing={selectFocusedOption} + placeholder={placeholderText} + maxLength={maxLength + CONST.ADDITIONAL_ALLOWED_CHARACTERS} + keyboardType={keyboardType} onBlur={(e) => { - if (!this.props.shouldPreventDefaultFocusOnSelectRow) { + if (!shouldPreventDefaultFocusOnSelectRow) { return; } - this.relatedTarget = e.relatedTarget; + relatedTarget.current = e.relatedTarget; }} selectTextOnFocus - blurOnSubmit={Boolean(this.state.allOptions.length)} + blurOnSubmit={Boolean(allOptions.length)} spellCheck={false} - shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe} - isLoading={this.props.isLoadingNewOptions} + shouldInterceptSwipe={shouldTextInputInterceptSwipe} + isLoading={isLoadingNewOptions} /> ); const optionsList = ( (this.list = el)} - optionHoveredStyle={this.props.optionHoveredStyle} - onSelectRow={this.props.onSelectRow ? this.selectRow : undefined} - sections={this.props.sections} - focusedIndex={this.state.focusedIndex} - selectedOptions={this.props.selectedOptions} - canSelectMultipleOptions={this.props.canSelectMultipleOptions} - shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton} - multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText} - onAddToSelection={this.addToSelection} - hideSectionHeaders={this.props.hideSectionHeaders} - headerMessage={this.state.errorMessage ? '' : this.props.headerMessage} - boldStyle={this.props.boldStyle} - showTitleTooltip={this.props.showTitleTooltip} - isDisabled={this.props.isDisabled} - shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator} - highlightSelectedOptions={this.props.highlightSelectedOptions} + ref={listRef} + optionHoveredStyle={optionHoveredStyle} + onSelectRow={onSelectRow ? selectRow : undefined} + sections={sections} + focusedIndex={focusedIndex} + selectedOptions={selectedOptions} + canSelectMultipleOptions={canSelectMultipleOptions} + shouldShowMultipleOptionSelectorAsButton={shouldShowMultipleOptionSelectorAsButton} + multipleOptionSelectorButtonText={multipleOptionSelectorButtonText} + onAddToSelection={addToSelection} + hideSectionHeaders={hideSectionHeaders} + headerMessage={errorMessage ? '' : headerMessage} + boldStyle={boldStyle} + showTitleTooltip={showTitleTooltip} + isDisabled={isDisabled} + shouldHaveOptionSeparator={shouldHaveOptionSeparator} + highlightSelectedOptions={highlightSelectedOptions} onLayout={() => { - if (this.props.selectedOptions.length === 0) { - this.scrollToIndex(this.state.focusedIndex, false); + if (selectedOptions.length === 0) { + scrollToIndex(focusedIndex, false); } - if (this.props.onLayout) { - this.props.onLayout(); + if (onLayout) { + onLayout(); } }} - contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]} - sectionHeaderStyle={this.props.sectionHeaderStyle} - listContainerStyles={this.props.listContainerStyles} - listStyles={this.props.listStyles} - isLoading={!this.props.shouldShowOptions} - showScrollIndicator={this.props.showScrollIndicator} - isRowMultilineSupported={this.props.isRowMultilineSupported} - isLoadingNewOptions={this.props.isLoadingNewOptions} - shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow} - nestedScrollEnabled={this.props.nestedScrollEnabled} - bounces={!this.props.shouldTextInputAppearBelowOptions || !this.props.shouldAllowScrollingChildren} + contentContainerStyles={[safeAreaPaddingBottomStyle, ...contentContainerStyles]} + sectionHeaderStyle={sectionHeaderStyle} + listContainerStyles={listContainerStyles} + listStyles={listStyles} + isLoading={!shouldShowOptions} + showScrollIndicator={showScrollIndicator} + isRowMultilineSupported={isRowMultilineSupported} + isLoadingNewOptions={isLoadingNewOptions} + shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + nestedScrollEnabled={nestedScrollEnabled} + bounces={!shouldTextInputAppearBelowOptions || !shouldAllowScrollingChildren} /> ); const optionsAndInputsBelowThem = ( <> {optionsList} - - {this.props.children} - {this.props.shouldShowTextInput && textInput} + + {children} + {shouldShowTextInput && textInput} ); return ( {} : this.updateFocusedIndex} + disabledIndexes={disabledOptionsIndexes} + focusedIndex={focusedIndex} + maxIndex={allOptions.length - 1} + onFocusedIndexChanged={disableArrowKeysActions ? () => {} : updateFocusedIndex} shouldResetIndexOnEndReached={false} > @@ -464,7 +496,7 @@ class BaseOptionsSelector extends Component { * VirtualizedList cannot be directly nested within ScrollViews of the same orientation. * To work around this, we wrap the OptionsList component with a horizontal ScrollView. */} - {this.props.shouldTextInputAppearBelowOptions && this.props.shouldAllowScrollingChildren && ( + {shouldTextInputAppearBelowOptions && shouldAllowScrollingChildren && ( )} - {this.props.shouldTextInputAppearBelowOptions && !this.props.shouldAllowScrollingChildren && optionsAndInputsBelowThem} + {shouldTextInputAppearBelowOptions && !shouldAllowScrollingChildren && optionsAndInputsBelowThem} - {!this.props.shouldTextInputAppearBelowOptions && ( + {!shouldTextInputAppearBelowOptions && ( <> - - {this.props.children} - {this.props.shouldShowTextInput && textInput} - {Boolean(this.props.textInputAlert) && ( + + {children} + {shouldShowTextInput && textInput} + {Boolean(textInputAlert) && ( @@ -502,20 +534,19 @@ class BaseOptionsSelector extends Component { success style={[styles.w100]} text={defaultConfirmButtonText} - onPress={this.props.onConfirmSelection} + onPress={onConfirmSelection} pressOnEnter enterKeyEventListenerPriority={1} /> )} - {this.props.footerContent} + {footerContent} )} ); - } } BaseOptionsSelector.defaultProps = defaultProps; BaseOptionsSelector.propTypes = propTypes; -export default compose(withLocalize, withNavigationFocus)(BaseOptionsSelector); +export default BaseOptionsSelector; From bf38ece710ceade0b33675be3ee598c9c1bc7005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Tue, 21 Nov 2023 00:11:53 +0100 Subject: [PATCH 002/284] BaseOptionsSelector prettier --- .../OptionsSelector/BaseOptionsSelector.js | 328 +++++++++--------- 1 file changed, 162 insertions(+), 166 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 277ddb1071b8..78803e5c546a 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -1,3 +1,4 @@ +import {useIsFocused} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useEffect, useMemo, useRef, useState} from 'react'; @@ -9,14 +10,13 @@ import FixedFooter from '@components/FixedFooter'; import FormHelpMessage from '@components/FormHelpMessage'; import OptionsList from '@components/OptionsList'; import TextInput from '@components/TextInput'; +import useLocalize from '@hooks/useLocalize'; import getPlatform from '@libs/getPlatform'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import setSelection from '@libs/setSelection'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes'; -import {useIsFocused} from "@react-navigation/native"; -import useLocalize from "@hooks/useLocalize"; const propTypes = { /** padding bottom style of safe area */ @@ -44,8 +44,8 @@ const defaultProps = { }; const BaseOptionsSelector = ({ - onSelectRow, - sections, + onSelectRow, + sections, value, onChangeText, maxLength, @@ -84,7 +84,6 @@ const BaseOptionsSelector = ({ shouldAllowScrollingChildren, nestedScrollEnabled, }) => { - const isFocused = useIsFocused(); const {translate} = useLocalize(); @@ -115,9 +114,9 @@ const BaseOptionsSelector = ({ }); }); - setDisabledOptionsIndexes(calcDisabledOptionsIndexes) + setDisabledOptionsIndexes(calcDisabledOptionsIndexes); return allOptions; - } + }; /** * @param {Array} allOptions @@ -143,7 +142,7 @@ const BaseOptionsSelector = ({ } return defaultIndex; - } + }; const relatedTarget = useRef(null); const listRef = useRef(); @@ -158,7 +157,7 @@ const BaseOptionsSelector = ({ const initialAllOptions = useMemo(() => { return flattenSections(); - },[]) + }, []); const [allOptions, setAllOptions] = useState(initialAllOptions); const [focusedIndex, setFocusedIndex] = useState(getInitiallyFocusedIndex(initialAllOptions)); @@ -184,10 +183,9 @@ const BaseOptionsSelector = ({ } unSubscribeFromKeyboardShortcut(); - } + }; }, []); - useEffect(() => { if (isFocused) { subscribeToKeyboardShortcut(); @@ -203,7 +201,7 @@ const BaseOptionsSelector = ({ textInputRef.current.focus(); }, CONST.ANIMATED_TRANSITION); } - }, [isFocused]) + }, [isFocused]); useEffect(() => { const newOptions = flattenSections(); @@ -218,7 +216,7 @@ const BaseOptionsSelector = ({ const newFocusedIndex = selectedOptions.length; setAllOptions(newOptions); - setFocusedIndex(_.isNumber(initialFocusedIndex) ? initialFocusedIndex : newFocusedIndex) + setFocusedIndex(_.isNumber(initialFocusedIndex) ? initialFocusedIndex : newFocusedIndex); }, [sections]); useEffect(() => { @@ -241,7 +239,7 @@ const BaseOptionsSelector = ({ const updateSearchValue = (value) => { setErrorMessage(value.length > maxLength ? translate('common.error.characterLimitExceedCounter', {length: value.length, limit: maxLength}) : ''); onChangeText(value); - } + }; const subscribeToKeyboardShortcut = () => { const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; @@ -274,7 +272,7 @@ const BaseOptionsSelector = ({ CTRLEnterConfig.modifiers, true, ); - } + }; const unSubscribeFromKeyboardShortcut = () => { if (enterSubscription.current) { @@ -284,7 +282,7 @@ const BaseOptionsSelector = ({ if (CTRLEnterSubscription.current) { CTRLEnterSubscription.current(); } - } + }; const selectFocusedOption = () => { const focusedOption = allOptions[focusedIndex]; @@ -309,7 +307,7 @@ const BaseOptionsSelector = ({ }); }, 500); } - } + }; const focus = () => { if (!textInputRef.current) { @@ -317,15 +315,14 @@ const BaseOptionsSelector = ({ } textInputRef.current.focus(); - } - + }; /** * @param {Number} index */ const updateFocusedIndex = (index) => { setFocusedIndex(index); - } + }; /** * Scrolls to the focused index within the SectionList @@ -353,7 +350,7 @@ const BaseOptionsSelector = ({ } listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated}); - } + }; /** * Completes the follow-up actions after a row is selected @@ -383,7 +380,7 @@ const BaseOptionsSelector = ({ // Focus the first unselected item from the list (i.e: the best result according to the current search term) setFocusedIndex(selectedOptions.length); }); - } + }; /** * Completes the follow-up action after clicking on multiple select button @@ -397,154 +394,153 @@ const BaseOptionsSelector = ({ } } onAddToSelection(option); - } - - const shouldShowFooter = - !isReadOnly && (shouldShowConfirmButton || footerContent) && !(canSelectMultipleOptions && _.isEmpty(selectedOptions)); - const defaultConfirmButtonText = _.isUndefined(confirmButtonText) ? translate('common.confirm') : confirmButtonText; - const shouldShowDefaultConfirmButton = !footerContent && defaultConfirmButtonText; - const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : safeAreaPaddingBottomStyle; - const textInput = ( - { - if (!shouldPreventDefaultFocusOnSelectRow) { - return; - } - relatedTarget.current = e.relatedTarget; - }} - selectTextOnFocus - blurOnSubmit={Boolean(allOptions.length)} - spellCheck={false} - shouldInterceptSwipe={shouldTextInputInterceptSwipe} - isLoading={isLoadingNewOptions} - /> - ); - const optionsList = ( - { - if (selectedOptions.length === 0) { - scrollToIndex(focusedIndex, false); - } - - if (onLayout) { - onLayout(); - } - }} - contentContainerStyles={[safeAreaPaddingBottomStyle, ...contentContainerStyles]} - sectionHeaderStyle={sectionHeaderStyle} - listContainerStyles={listContainerStyles} - listStyles={listStyles} - isLoading={!shouldShowOptions} - showScrollIndicator={showScrollIndicator} - isRowMultilineSupported={isRowMultilineSupported} - isLoadingNewOptions={isLoadingNewOptions} - shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} - nestedScrollEnabled={nestedScrollEnabled} - bounces={!shouldTextInputAppearBelowOptions || !shouldAllowScrollingChildren} - /> - ); - - const optionsAndInputsBelowThem = ( - <> - {optionsList} - - {children} - {shouldShowTextInput && textInput} - - - ); + }; + + const shouldShowFooter = !isReadOnly && (shouldShowConfirmButton || footerContent) && !(canSelectMultipleOptions && _.isEmpty(selectedOptions)); + const defaultConfirmButtonText = _.isUndefined(confirmButtonText) ? translate('common.confirm') : confirmButtonText; + const shouldShowDefaultConfirmButton = !footerContent && defaultConfirmButtonText; + const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : safeAreaPaddingBottomStyle; + const textInput = ( + { + if (!shouldPreventDefaultFocusOnSelectRow) { + return; + } + relatedTarget.current = e.relatedTarget; + }} + selectTextOnFocus + blurOnSubmit={Boolean(allOptions.length)} + spellCheck={false} + shouldInterceptSwipe={shouldTextInputInterceptSwipe} + isLoading={isLoadingNewOptions} + /> + ); + const optionsList = ( + { + if (selectedOptions.length === 0) { + scrollToIndex(focusedIndex, false); + } - return ( - {} : updateFocusedIndex} - shouldResetIndexOnEndReached={false} - > - - {/* - * The OptionsList component uses a SectionList which uses a VirtualizedList internally. - * VirtualizedList cannot be directly nested within ScrollViews of the same orientation. - * To work around this, we wrap the OptionsList component with a horizontal ScrollView. - */} - {shouldTextInputAppearBelowOptions && shouldAllowScrollingChildren && ( - - - {optionsAndInputsBelowThem} - + if (onLayout) { + onLayout(); + } + }} + contentContainerStyles={[safeAreaPaddingBottomStyle, ...contentContainerStyles]} + sectionHeaderStyle={sectionHeaderStyle} + listContainerStyles={listContainerStyles} + listStyles={listStyles} + isLoading={!shouldShowOptions} + showScrollIndicator={showScrollIndicator} + isRowMultilineSupported={isRowMultilineSupported} + isLoadingNewOptions={isLoadingNewOptions} + shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + nestedScrollEnabled={nestedScrollEnabled} + bounces={!shouldTextInputAppearBelowOptions || !shouldAllowScrollingChildren} + /> + ); + + const optionsAndInputsBelowThem = ( + <> + {optionsList} + + {children} + {shouldShowTextInput && textInput} + + + ); + + return ( + {} : updateFocusedIndex} + shouldResetIndexOnEndReached={false} + > + + {/* + * The OptionsList component uses a SectionList which uses a VirtualizedList internally. + * VirtualizedList cannot be directly nested within ScrollViews of the same orientation. + * To work around this, we wrap the OptionsList component with a horizontal ScrollView. + */} + {shouldTextInputAppearBelowOptions && shouldAllowScrollingChildren && ( + + + {optionsAndInputsBelowThem} - )} + + )} - {shouldTextInputAppearBelowOptions && !shouldAllowScrollingChildren && optionsAndInputsBelowThem} - - {!shouldTextInputAppearBelowOptions && ( - <> - - {children} - {shouldShowTextInput && textInput} - {Boolean(textInputAlert) && ( - - )} - - {optionsList} - - )} - - {shouldShowFooter && ( - - {shouldShowDefaultConfirmButton && ( -