Merge pull request Expensify#29337 from saranshbalyan-1234/optionslis…

…t-to-selectionslist-writecapability-notifipref optionslist-to-selectionslist
rezkiy37 · Oct 15, 2023 · 0b06446 · 0b06446
2 parents fe282b4 + 372bffa
commit 0b06446
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 43 deletions.
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -3,8 +3,6 @@ import _ from 'underscore';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import styles from '../../../styles/styles';
-import OptionsList from '../../../components/OptionsList';
 import Navigation from '../../../libs/Navigation/Navigation';
 import compose from '../../../libs/compose';
 import withReportOrNotFound from '../../home/report/withReportOrNotFound';
@@ -14,16 +12,14 @@ import ROUTES from '../../../ROUTES';
 import CONST from '../../../CONST';
 import * as Report from '../../../libs/actions/Report';
 import * as ReportUtils from '../../../libs/ReportUtils';
-import * as Expensicons from '../../../components/Icon/Expensicons';
-import themeColors from '../../../styles/themes/default';
+import SelectionList from '../../../components/SelectionList';
 
 const propTypes = {
     ...withLocalizePropTypes,
 
     /** The report for which we are setting notification preferences */
     report: reportPropTypes.isRequired,
 };
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
 function NotificationPreferencePage(props) {
     const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(props.report);
@@ -33,12 +29,7 @@ function NotificationPreferencePage(props) {
             value: preference,
             text: props.translate(`notificationPreferencesPage.notificationPreferences.${preference}`),
             keyForList: preference,
-
-            // Include the green checkmark icon to indicate the currently selected value
-            customIcon: preference === props.report.notificationPreference ? greenCheckmark : null,
-
-            // This property will make the currently selected value have bold text
-            boldStyle: preference === props.report.notificationPreference,
+            isSelected: preference === props.report.notificationPreference,
         }),
     );
 
@@ -52,18 +43,10 @@ function NotificationPreferencePage(props) {
                     title={props.translate('notificationPreferencesPage.header')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID))}
                 />
-                <OptionsList
+                <SelectionList
                     sections={[{data: notificationPreferenceOptions}]}
                     onSelectRow={(option) => Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, option.value, true)}
-                    hideSectionHeaders
-                    optionHoveredStyle={{
-                        ...styles.hoveredComponentBG,
-                        ...styles.mhn5,
-                        ...styles.ph5,
-                    }}
-                    shouldHaveOptionSeparator
-                    shouldDisableRowInnerPadding
-                    contentContainerStyles={[styles.ph5]}
+                    initiallyFocusedOptionKey={_.find(notificationPreferenceOptions, (locale) => locale.isSelected).keyForList}
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>

diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -6,20 +6,17 @@ import CONST from '../../../CONST';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import styles from '../../../styles/styles';
-import OptionsList from '../../../components/OptionsList';
 import Navigation from '../../../libs/Navigation/Navigation';
 import compose from '../../../libs/compose';
 import withReportOrNotFound from '../../home/report/withReportOrNotFound';
 import reportPropTypes from '../../reportPropTypes';
 import ROUTES from '../../../ROUTES';
 import * as Report from '../../../libs/actions/Report';
-import * as Expensicons from '../../../components/Icon/Expensicons';
-import themeColors from '../../../styles/themes/default';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
 import * as PolicyUtils from '../../../libs/PolicyUtils';
 import {policyPropTypes, policyDefaultProps} from '../../workspace/withPolicy';
+import SelectionList from '../../../components/SelectionList';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -33,19 +30,12 @@ const defaultProps = {
     ...policyDefaultProps,
 };
 
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
-
 function WriteCapabilityPage(props) {
     const writeCapabilityOptions = _.map(CONST.REPORT.WRITE_CAPABILITIES, (value) => ({
         value,
         text: props.translate(`writeCapabilityPage.writeCapability.${value}`),
         keyForList: value,
-
-        // Include the green checkmark icon to indicate the currently selected value
-        customIcon: value === (props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL) ? greenCheckmark : null,
-
-        // This property will make the currently selected value have bold text
-        boldStyle: value === (props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL),
+        isSelected: value === (props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL),
     }));
 
     const isAbleToEdit = !ReportUtils.isAdminRoom(props.report) && PolicyUtils.isPolicyAdmin(props.policy) && !ReportUtils.isArchivedRoom(props.report);
@@ -61,18 +51,10 @@ function WriteCapabilityPage(props) {
                     shouldShowBackButton
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID))}
                 />
-                <OptionsList
+                <SelectionList
                     sections={[{data: writeCapabilityOptions}]}
                     onSelectRow={(option) => Report.updateWriteCapabilityAndNavigate(props.report, option.value)}
-                    hideSectionHeaders
-                    optionHoveredStyle={{
-                        ...styles.hoveredComponentBG,
-                        ...styles.mhn5,
-                        ...styles.ph5,
-                    }}
-                    shouldHaveOptionSeparator
-                    shouldDisableRowInnerPadding
-                    contentContainerStyles={[styles.ph5]}
+                    initiallyFocusedOptionKey={_.find(writeCapabilityOptions, (locale) => locale.isSelected).keyForList}
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>