Merge pull request #2758 from Fluffy-Frontier/upstream-mirror-1834

[MIRROR] Search string in catalogs in char prefs
Fluffy-Frontier · Apr 7, 2024 · 933505f · 933505f
2 parents 9f6e117 + 554a1e4
commit 933505f
Showing 1 changed file with 49 additions and 29 deletions.
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
@@ -2,13 +2,17 @@ import { filterMap, sortBy } from 'common/collections';
 import { classes } from 'common/react';
 import { useState } from 'react';
 
+import { filter } from '../../../common/collections';
+import { flow } from '../../../common/fp';
+import { createSearch } from '../../../common/string';
 import { sendAct, useBackend } from '../../backend';
 import {
   Autofocus,
   Box,
   Button,
   Dropdown, // NOVA EDIT ADDITION
   Flex,
+  Input,
   LabeledList,
   Popper,
   Stack,
@@ -115,6 +119,7 @@ const ChoicedSelection = (props: {
   const { act } = useBackend<PreferencesMenuData>();
 
   const { catalog, supplementalFeature, supplementalValue } = props;
+  const [getSearchText, searchTextSet] = useState('');
 
   if (!catalog.icons) {
     return <Box color="red">Provided catalog had no icons!</Box>;
@@ -170,39 +175,49 @@ const ChoicedSelection = (props: {
 
         <Stack.Item overflowX="hidden" overflowY="scroll">
           <Autofocus>
+            <Input
+              placeholder="Search..."
+              style={{
+                margin: '0px 5px',
+                width: '95%',
+              }}
+              onInput={(_, value) => searchTextSet(value)}
+            />
             <Flex wrap>
-              {Object.entries(catalog.icons).map(([name, image], index) => {
-                return (
-                  <Flex.Item
-                    key={index}
-                    basis={`${CLOTHING_SELECTION_CELL_SIZE}px`}
-                    style={{
-                      padding: '5px',
-                    }}
-                  >
-                    <Button
-                      onClick={() => {
-                        props.onSelect(name);
-                      }}
-                      selected={name === props.selected}
-                      tooltip={name}
-                      tooltipPosition="right"
+              {searchInCatalog(getSearchText, catalog.icons).map(
+                ([name, image], index) => {
+                  return (
+                    <Flex.Item
+                      key={index}
+                      basis={`${CLOTHING_SELECTION_CELL_SIZE}px`}
                       style={{
-                        height: `${CLOTHING_SELECTION_CELL_SIZE}px`,
-                        width: `${CLOTHING_SELECTION_CELL_SIZE}px`,
+                        padding: '5px',
                       }}
                     >
-                      <Box
-                        className={classes([
-                          'preferences32x32',
-                          image,
-                          'centered-image',
-                        ])}
-                      />
-                    </Button>
-                  </Flex.Item>
-                );
-              })}
+                      <Button
+                        onClick={() => {
+                          props.onSelect(name);
+                        }}
+                        selected={name === props.selected}
+                        tooltip={name}
+                        tooltipPosition="right"
+                        style={{
+                          height: `${CLOTHING_SELECTION_CELL_SIZE}px`,
+                          width: `${CLOTHING_SELECTION_CELL_SIZE}px`,
+                        }}
+                      >
+                        <Box
+                          className={classes([
+                            'preferences32x32',
+                            image,
+                            'centered-image',
+                          ])}
+                        />
+                      </Button>
+                    </Flex.Item>
+                  );
+                },
+              )}
             </Flex>
           </Autofocus>
         </Stack.Item>
@@ -211,6 +226,11 @@ const ChoicedSelection = (props: {
   );
 };
 
+const searchInCatalog = (searchText = '', catalog: Record<string, string>) => {
+  const maybeSearch = createSearch(searchText, ([name, _icon]) => name);
+  return flow([searchText && filter(maybeSearch)])(Object.entries(catalog));
+};
+
 const GenderButton = (props: {
   handleSetGender: (gender: Gender) => void;
   gender: Gender;