InputRowRadioButtons [nfc]: Add optional search bar, to be used soon

Author: chrisbobbe

src/common/InputRowRadioButtons.js

@@ -55,6 +55,13 @@ type Props<TItemKey> = $ReadOnly<{|
   items: $ReadOnlyArray<Item<TItemKey>>,
 
   onValueChange: (newValue: TItemKey) => void,
+
+  /**
+   * Whether to offer a search bar at the top for filtering.
+   *
+   * The query is checked against items' `title` and `subtitle`.
+   */
+  search?: boolean,
 |}>;
 
 /**
@@ -71,7 +78,7 @@ type Props<TItemKey> = $ReadOnly<{|
 export default function InputRowRadioButtons<TItemKey: string | number>(
   props: Props<TItemKey>,
 ): Node {
-  const { navigation, label, description, valueKey, items, onValueChange } = props;
+  const { navigation, label, description, valueKey, items, onValueChange, search } = props;
 
   const screenKey: string = useRef(`selectable-options-${randString()}`).current;
 
@@ -97,8 +104,9 @@ export default function InputRowRadioButtons<TItemKey: string | number>(
         navigation.goBack();
         onValueChange(itemKey);
       },
+      search,
     }),
-    [navigation, label, description, items, valueKey, onValueChange],
+    [navigation, label, description, items, valueKey, onValueChange, search],
   );
 
   const handleRowPressed = useCallback(() => {

src/common/SelectableOptionsScreen.js

@@ -11,6 +11,7 @@ import Screen from './Screen';
 import SelectableOptionRow from './SelectableOptionRow';
 import ZulipTextIntl from './ZulipTextIntl';
 import { createStyleSheet } from '../styles';
+import { TranslationContext } from '../boot/TranslationProvider';
 
 type Item<TKey> = $ReadOnly<{|
   key: TKey,
@@ -55,6 +56,8 @@ type Props<TItemKey> = $ReadOnly<{|
       // variable. Better to offer this explicit, side-effect-free way for
       // the data to flow where it should, when it should.
       onRequestSelectionChange: (itemKey: TItemKey, requestedValue: boolean) => void,
+
+      search?: boolean,
     |},
   >,
 |}>;
@@ -82,7 +85,30 @@ export default function SelectableOptionsScreen<TItemKey: string | number>(
   props: Props<TItemKey>,
 ): Node {
   const { route } = props;
-  const { title, description, items, onRequestSelectionChange } = route.params;
+  const { title, description, items, onRequestSelectionChange, search } = route.params;
+
+  const _ = React.useContext(TranslationContext);
+
+  const [filter, setFilter] = React.useState('');
+  const filteredItems =
+    filter.trim() === ''
+      ? items
+      : items.filter(item => {
+          // TODO: Is this the best way to filter? Where `title` and
+          //   `subtitle` are present, behavior is matched to the language
+          //   picker.
+
+          /* eslint-disable prefer-template */
+          const itemData =
+            _(item.subtitle ?? { text: '{_}', values: { _: '' } }).toUpperCase()
+            + ' '
+            + _(item.title ?? { text: '{_}', values: { _: '' } }).toUpperCase();
+          /* eslint-enable prefer-template */
+
+          const filterData = filter.toUpperCase();
+
+          return itemData.includes(filterData);
+        });
 
   const styles = useMemo(
     () =>
@@ -93,13 +119,13 @@ export default function SelectableOptionsScreen<TItemKey: string | number>(
   );
 
   return (
-    <Screen title={title} scrollEnabled>
+    <Screen title={title} scrollEnabled search={search} searchBarOnChange={setFilter}>
       {description != null && (
         <View style={styles.descriptionWrapper}>
           <ZulipTextIntl text={description} />
         </View>
       )}
-      {items.map(item => (
+      {filteredItems.map(item => (
         <SelectableOptionRow
           key={item.key}
           itemKey={item.key}