20354 money request participants selector list refactoring

src/components/SelectionList/BaseListItem.js

@@ -24,6 +24,7 @@ function BaseListItem({
  canSelectMultiple = false,
  onSelectRow,
  onDismissError = () => {},
+ rightHandSideComponent,
  keyForList,
 }) {
  const theme = useTheme();
@@ -62,7 +63,10 @@ function BaseListItem({
  ]}
  >
  {canSelectMultiple && (
- <View style={StyleUtils.getCheckboxPressableStyle()}>
+ <View
+ role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+ style={StyleUtils.getCheckboxPressableStyle()}
+ >
  <View
  style={[
  StyleUtils.getCheckboxContainerStyle(20),
@@ -97,7 +101,7 @@ function BaseListItem({
  onSelectRow={onSelectRow}
  showTooltip={showTooltip}
  />
- {!canSelectMultiple && item.isSelected && (
+ {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
  <View
  style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
  accessible={false}
@@ -110,6 +114,7 @@ function BaseListItem({
  </View>
  </View>
  )}
+ {!canSelectMultiple && !!rightHandSideComponent && typeof rightHandSideComponent === 'function' ? rightHandSideComponent(item) : rightHandSideComponent}
  </View>
  {Boolean(item.invitedSecondaryLogin) && (
  <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>

src/components/SelectionList/BaseSelectionList.js

@@ -39,6 +39,7 @@ function BaseSelectionList({
  textInputLabel = '',
  textInputPlaceholder = '',
  textInputValue = '',
+ textInputHint = '',
  textInputMaxLength,
  inputMode = CONST.INPUT_MODE.TEXT,
  onChangeText,
@@ -60,6 +61,8 @@ function BaseSelectionList({
  children,
  shouldStopPropagation = false,
  shouldUseDynamicMaxToRenderPerBatch = false,
+ rightHandSideComponent,
+ onRightHandSideComponentPress,
 }) {
  const theme = useTheme();
  const styles = useThemeStyles();
@@ -311,6 +314,8 @@ function BaseSelectionList({
  onSelectRow={() => selectRow(item, true)}
  onDismissError={onDismissError}
  shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+ rightHandSideComponent={rightHandSideComponent}
+ onRightHandSideComponentPress={onRightHandSideComponentPress}
  keyForList={item.keyForList}
  />
  );
@@ -407,6 +412,7 @@ function BaseSelectionList({
  }}
  label={textInputLabel}
  accessibilityLabel={textInputLabel}
+ hint={textInputHint}
  role={CONST.ACCESSIBILITY_ROLE.TEXT}
  value={textInputValue}
  placeholder={textInputPlaceholder}

src/components/SelectionList/selectionListPropTypes.js

@@ -21,7 +21,7 @@ const commonListItemPropTypes = {
  /** Whether to use the Checkbox (multiple selection) instead of the Checkmark (single selection) */
  canSelectMultiple: PropTypes.bool,
 
- /** Callback to fire when the item is pressed */
+ /** Callback to fire when the item is selected */
  onSelectRow: PropTypes.func.isRequired,
 
  /** Callback to fire when an error is dismissed */
@@ -191,6 +191,9 @@ const propTypes = {
 
  /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
  shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
+
+ /** Right hand side component to display in the list item. Function has list item passed as the param */
+ rightHandSideComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };
 
 export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes};

src/libs/OptionsListUtils.js

@@ -219,6 +219,7 @@ function getParticipantsOption(participant, personalDetails) {
  ],
  phoneNumber: lodashGet(detail, 'phoneNumber', ''),
  selected: participant.selected,
+ isSelected: participant.selected,
  searchText: participant.searchText,
  };
 }
@@ -578,6 +579,7 @@ function getPolicyExpenseReportOption(report) {
  option.text = ReportUtils.getPolicyName(expenseReport);
  option.alternateText = Localize.translateLocal('workspace.common.workspace');
  option.selected = report.selected;
+ option.isSelected = report.selected;
  return option;
 }
 

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import lodashGet from 'lodash/get';
 import lodashSize from 'lodash/size';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -56,36 +56,35 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) {
  const styles = useThemeStyles();
  const {translate} = useLocalize();
  const prevMoneyRequestId = useRef(iou.id);
- const optionsSelectorRef = useRef();
  const iouType = useInitialValue(() => lodashGet(route, 'params.iouType', ''));
  const reportID = useInitialValue(() => lodashGet(route, 'params.reportID', ''));
  const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType, selectedTab);
  const isSendRequest = iouType === CONST.IOU.TYPE.SEND;
  const isScanRequest = MoneyRequestUtils.isScanRequest(selectedTab);
  const isSplitRequest = iou.id === CONST.IOU.TYPE.SPLIT;
- const [headerTitle, setHeaderTitle] = useState();
  const waypoints = lodashGet(transaction, 'comment.waypoints', {});
  const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
  const isInvalidWaypoint = lodashSize(validatedWaypoints) < 2;
+ const headerTitle = useMemo(() => {
 
- useEffect(() => {
  if (isDistanceRequest) {
- setHeaderTitle(translate('common.distance'));
- return;
+ return translate('common.distance');
  }
 
  if (isSendRequest) {
- setHeaderTitle(translate('common.send'));
- return;
+ return translate('common.send');
  }
 
  if (isScanRequest) {
- setHeaderTitle(translate('tabSelector.scan'));
- return;
+ return translate('tabSelector.scan');
+ }
+
+ if (iou.isSplitRequest) {
+ return translate('iou.split');
  }
 
- setHeaderTitle(iou.isSplitRequest ? translate('iou.split') : translate('tabSelector.manual'));
- }, [iou.isSplitRequest, isDistanceRequest, translate, isScanRequest, isSendRequest]);
+ return translate('tabSelector.manual');
+ }, [iou, isDistanceRequest, translate, isScanRequest, isSendRequest]);
 
  const navigateToConfirmationStep = (moneyRequestType) => {
  IOU.setMoneyRequestId(moneyRequestType);
@@ -130,7 +129,6 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) {
  <ScreenWrapper
  includeSafeAreaPaddingBottom={false}
  shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
- onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
  testID={MoneyRequestParticipantsPage.displayName}
  >
  {({safeAreaPaddingBottomStyle}) => (
@@ -140,7 +138,6 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) {
  onBackButtonPress={navigateBack}
  />
  <MoneyRequestParticipantsSelector
- ref={(el) => (optionsSelectorRef.current = el)}
  participants={iou.isSplitRequest ? iou.participants : []}
  onAddParticipants={IOU.setMoneyRequestParticipants}
  navigateToRequest={() => navigateToConfirmationStep(iouType)}