refactor: SelectionList multiple selection

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import HeaderWithBackButton from '../../HeaderWithBackButton';
 import CONST from '../../../CONST';
-import SelectionListRadio from '../../SelectionListRadio';
+import SelectionList from '../../SelectionList';
 import Modal from '../../Modal';
-import {radioListItemPropTypes} from '../../SelectionListRadio/selectionListRadioPropTypes';
+import {radioListItemPropTypes} from '../../SelectionList/selectionListPropTypes';
 import useLocalize from '../../../hooks/useLocalize';
 
 const propTypes = {
@@ -62,7 +62,7 @@ function YearPickerModal(props) {
                 title={translate('yearPickerPage.year')}
                 onBackButtonPress={props.onClose}
             />
-            <SelectionListRadio
+            <SelectionList
                 shouldDelayFocus
                 textInputLabel={translate('yearPickerPage.selectYear')}
                 textInputValue={searchText}

src/components/SelectionListRadio/BaseSelectionListRadio.js → src/components/SelectionList/BaseSelectionList.js

@@ -9,22 +9,52 @@ import TextInput from '../TextInput';
 import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
 import CONST from '../../CONST';
 import variables from '../../styles/variables';
-import {propTypes as selectionListRadioPropTypes, defaultProps as selectionListRadioDefaultProps} from './selectionListRadioPropTypes';
+import {propTypes as selectionListPropTypes} from './selectionListPropTypes';
 import RadioListItem from './RadioListItem';
+import CheckboxListItem from './CheckboxListItem';
 import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
 import SafeAreaConsumer from '../SafeAreaConsumer';
 import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState';
+import Checkbox from '../Checkbox';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import FixedFooter from '../FixedFooter';
+import Button from '../Button';
+import useLocalize from '../../hooks/useLocalize';
+import Log from '../../libs/Log';
 
 const propTypes = {
     ...keyboardStatePropTypes,
-    ...selectionListRadioPropTypes,
+    ...selectionListPropTypes,
 };
 
-function BaseSelectionListRadio(props) {
+function BaseSelectionList({
+    sections,
+    canSelectMultiple = false,
+    onSelectRow,
+    onSelectAll,
+    onDismissError,
+    textInputLabel = '',
+    textInputPlaceholder = '',
+    textInputValue = '',
+    textInputMaxLength,
+    keyboardType = CONST.KEYBOARD_TYPE.DEFAULT,
+    onChangeText,
+    initiallyFocusedOptionKey = '',
+    shouldDelayFocus = false,
+    onScroll,
+    onScrollBeginDrag,
+    headerMessage = '',
+    confirmButtonText = '',
+    onConfirm,
+    isKeyboardShown = false,
+}) {
+    const {translate} = useLocalize();
     const listRef = useRef(null);
     const textInputRef = useRef(null);
     const focusTimeoutRef = useRef(null);
-    const shouldShowTextInput = Boolean(props.textInputLabel);
+    const shouldShowTextInput = Boolean(textInputLabel);
+    const shouldShowSelectAll = Boolean(onSelectAll);
+    const shouldShowConfirmButton = Boolean(onConfirm);
 
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
@@ -44,23 +74,23 @@ function BaseSelectionListRadio(props) {
         let offset = 0;
         const itemLayouts = [{length: 0, offset}];
 
-        _.each(props.sections, (section, sectionIndex) => {
-            // We're not rendering any section header, but we need to push to the array
-            // because React Native accounts for it in getItemLayout
-            const sectionHeaderHeight = 0;
+        let selectedCount = 0;
+
+        _.each(sections, (section, sectionIndex) => {
+            const sectionHeaderHeight = variables.optionsListSectionHeaderHeight;
             itemLayouts.push({length: sectionHeaderHeight, offset});
             offset += sectionHeaderHeight;
 
-            _.each(section.data, (option, optionIndex) => {
+            _.each(section.data, (item, optionIndex) => {
                 // Add item to the general flattened array
                 allOptions.push({
-                    ...option,
+                    ...item,
                     sectionIndex,
                     index: optionIndex,
                 });
 
                 // If disabled, add to the disabled indexes array
-                if (section.isDisabled || option.isDisabled) {
+                if (section.isDisabled || item.isDisabled) {
                     disabledOptionsIndexes.push(disabledIndex);
                 }
                 disabledIndex += 1;
@@ -69,6 +99,10 @@ function BaseSelectionListRadio(props) {
                 const fullItemHeight = variables.optionRowHeight;
                 itemLayouts.push({length: fullItemHeight, offset});
                 offset += fullItemHeight;
+
+                if (item.isSelected) {
+                    selectedCount++;
+                }
             });
 
             // We're not rendering any section footer, but we need to push to the array
@@ -80,10 +114,17 @@ function BaseSelectionListRadio(props) {
         // because React Native accounts for it in getItemLayout
         itemLayouts.push({length: 0, offset});
 
+        if (selectedCount > 1 && !canSelectMultiple) {
+            Log.alert(
+                'Dev error: SelectionList - multiple items are selected but prop `canSelectMultiple` is false. Please enable `canSelectMultiple` or make your list have only 1 item with `isSelected: true`.',
+            );
+        }
+
         return {
             allOptions,
             disabledOptionsIndexes,
             itemLayouts,
+            allSelected: selectedCount > 0 && selectedCount === allOptions.length - disabledOptionsIndexes.length,
         };
     };
 
@@ -92,7 +133,7 @@ function BaseSelectionListRadio(props) {
     const [focusedIndex, setFocusedIndex] = useState(() => {
         const defaultIndex = 0;
 
-        const indexOfInitiallyFocusedOption = _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === props.initiallyFocusedOptionKey);
+        const indexOfInitiallyFocusedOption = _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey);
 
         if (indexOfInitiallyFocusedOption >= 0) {
             return indexOfInitiallyFocusedOption;
@@ -122,7 +163,7 @@ function BaseSelectionListRadio(props) {
         // 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(props.sections, `[${i}].data`))) {
+            if (_.isEmpty(lodashGet(sections, `[${i}].data`))) {
                 adjustedSectionIndex--;
             }
         }
@@ -156,22 +197,49 @@ function BaseSelectionListRadio(props) {
         };
     };
 
+    const renderSectionHeader = ({section}) => {
+        if (!section.title || _.isEmpty(section.data)) {
+            return null;
+        }
+
+        return (
+            // Note: The `optionsListSectionHeader` style provides an explicit height to section headers.
+            // We do this so that we can reference the height in `getItemLayout` –
+            // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
+            // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
+            <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter]}>
+                <Text style={[styles.ph5, styles.textLabelSupporting]}>{section.title}</Text>
+            </View>
+        );
+    };
+
     const renderItem = ({item, index, section}) => {
         const isFocused = focusedIndex === index + lodashGet(section, 'indexOffset', 0);
 
+        if (canSelectMultiple) {
+            return (
+                <CheckboxListItem
+                    item={item}
+                    isFocused={isFocused}
+                    onSelectRow={onSelectRow}
+                    onDismissError={onDismissError}
+                />
+            );
+        }
+
         return (
             <RadioListItem
                 item={item}
                 isFocused={isFocused}
-                onSelectRow={props.onSelectRow}
+                onSelectRow={onSelectRow}
             />
         );
     };
 
     /** Focuses the text input when the component mounts. If `props.shouldDelayFocus` is true, we wait for the animation to finish */
     useEffect(() => {
         if (shouldShowTextInput) {
-            if (props.shouldDelayFocus) {
+            if (shouldDelayFocus) {
                 focusTimeoutRef.current = setTimeout(() => textInputRef.current.focus(), CONST.ANIMATED_TRANSITION);
             } else {
                 textInputRef.current.focus();
@@ -184,8 +252,9 @@ function BaseSelectionListRadio(props) {
             }
             clearTimeout(focusTimeoutRef.current);
         };
-    }, [props.shouldDelayFocus, shouldShowTextInput]);
+    }, [shouldDelayFocus, shouldShowTextInput]);
 
+    /** Selects row when pressing enter */
     useKeyboardShortcut(
         CONST.KEYBOARD_SHORTCUTS.ENTER,
         () => {
@@ -195,7 +264,7 @@ function BaseSelectionListRadio(props) {
                 return;
             }
 
-            props.onSelectRow(focusedOption);
+            onSelectRow(focusedOption);
         },
         {
             captureOnInputs: true,
@@ -215,56 +284,86 @@ function BaseSelectionListRadio(props) {
         >
             <SafeAreaConsumer>
                 {({safeAreaPaddingBottomStyle}) => (
-                    <View style={[styles.flex1, !props.isKeyboardShown && safeAreaPaddingBottomStyle]}>
+                    <View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle]}>
                         {shouldShowTextInput && (
                             <View style={[styles.ph5, styles.pv5]}>
                                 <TextInput
                                     ref={textInputRef}
-                                    label={props.textInputLabel}
-                                    accessibilityLabel={props.textInputLabel}
+                                    label={textInputLabel}
+                                    accessibilityLabel={textInputLabel}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                                    value={props.textInputValue}
-                                    placeholder={props.textInputPlaceholder}
-                                    maxLength={props.textInputMaxLength}
-                                    onChangeText={props.onChangeText}
-                                    keyboardType={props.keyboardType}
+                                    value={textInputValue}
+                                    placeholder={textInputPlaceholder}
+                                    maxLength={textInputMaxLength}
+                                    onChangeText={onChangeText}
+                                    keyboardType={keyboardType}
                                     selectTextOnFocus
                                 />
                             </View>
                         )}
-                        {Boolean(props.headerMessage) && (
+                        {Boolean(headerMessage) && (
                             <View style={[styles.ph5, styles.pb5]}>
-                                <Text style={[styles.textLabel, styles.colorMuted]}>{props.headerMessage}</Text>
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>
                             </View>
                         )}
+                        {!headerMessage && canSelectMultiple && shouldShowSelectAll && (
+                            <PressableWithFeedback
+                                style={[styles.peopleRow, styles.userSelectNone, styles.ph5, styles.pb3]}
+                                onPress={onSelectAll}
+                                accessibilityLabel={translate('workspace.people.selectAll')}
+                                accessibilityRole="button"
+                                accessibilityState={{checked: flattenedSections.allSelected}}
+                            >
+                                <Checkbox
+                                    accessibilityLabel={translate('workspace.people.selectAll')}
+                                    isChecked={flattenedSections.allSelected}
+                                    onPress={onSelectAll}
+                                />
+                                <View style={[styles.flex1]}>
+                                    <Text style={[styles.textStrong, styles.ph5]}>{translate('workspace.people.selectAll')}</Text>
+                                </View>
+                            </PressableWithFeedback>
+                        )}
                         <SectionList
                             ref={listRef}
-                            sections={props.sections}
+                            sections={sections}
+                            renderSectionHeader={renderSectionHeader}
                             renderItem={renderItem}
                             getItemLayout={getItemLayout}
-                            onScroll={props.onScroll}
-                            onScrollBeginDrag={props.onScrollBeginDrag}
+                            onScroll={onScroll}
+                            onScrollBeginDrag={onScrollBeginDrag}
                             keyExtractor={(item) => item.keyForList}
+                            onLayout={() => scrollToIndex(focusedIndex, false)}
                             extraData={focusedIndex}
                             indicatorStyle="white"
                             keyboardShouldPersistTaps="always"
                             showsVerticalScrollIndicator={false}
-                            OP
                             initialNumToRender={12}
                             maxToRenderPerBatch={5}
                             windowSize={5}
                             viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
-                            onLayout={() => scrollToIndex(focusedIndex, false)}
+                            testID="selection-list"
                         />
+                        {shouldShowConfirmButton && (
+                            <FixedFooter>
+                                <Button
+                                    success
+                                    style={[styles.w100]}
+                                    text={confirmButtonText || translate('common.confirm')}
+                                    onPress={onConfirm}
+                                    pressOnEnter
+                                    enterKeyEventListenerPriority={1}
+                                />
+                            </FixedFooter>
+                        )}
                     </View>
                 )}
             </SafeAreaConsumer>
         </ArrowKeyFocusManager>
     );
 }
 
-BaseSelectionListRadio.displayName = 'BaseSelectionListRadio';
-BaseSelectionListRadio.propTypes = propTypes;
-BaseSelectionListRadio.defaultProps = selectionListRadioDefaultProps;
+BaseSelectionList.displayName = 'BaseSelectionList';
+BaseSelectionList.propTypes = propTypes;
 
-export default withKeyboardState(BaseSelectionListRadio);
+export default withKeyboardState(BaseSelectionList);