Merge pull request #1306 from Coflnet/show-icons-for-filter-options

add image to filter options
Coflnet · Sep 8, 2024 · 0771547 · 0771547
2 parents 550728b + dd0810d
commit 0771547
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/components/FilterElement/FilterElement.tsx b/components/FilterElement/FilterElement.tsx
@@ -212,6 +212,7 @@ function FilterElement(props: Props) {
                         options={options}
                         defaultValue={props.defaultValue}
                         onChange={onFilterElementChange}
+                        showIcon={hasFlag(options.type, FilterType.SHOW_ICON)}
                     />
                 )
             }

diff --git a/components/FilterElement/FilterElements/EqualFilterElement.tsx b/components/FilterElement/FilterElements/EqualFilterElement.tsx
@@ -1,13 +1,18 @@
 'use client'
 import React from 'react'
 import { convertTagToName } from '../../../utils/Formatter'
-import { Typeahead } from 'react-bootstrap-typeahead'
+import { Menu, MenuItem, Typeahead, withItem } from 'react-bootstrap-typeahead'
+import { Option } from 'react-bootstrap-typeahead/types/types'
+import api from '../../../api/ApiHelper'
+
+const Item = withItem(MenuItem)
 
 interface Props {
     onChange(n: string)
     options: FilterOptions
     defaultValue?: any
     isValid?: boolean
+    showIcon?: boolean
 }
 
 export function EqualFilterElement(props: Props) {
@@ -29,6 +34,29 @@ export function EqualFilterElement(props: Props) {
             selectHint={(shouldSelect, event) => {
                 return event.key === 'Enter' || shouldSelect
             }}
+            renderMenu={(results, menuProps) => (
+                <Menu {...menuProps}>
+                    {results.map((result, index) => {
+                        if (result['paginationOption']) {
+                            return (
+                                <MenuItem option={result} position={index}>
+                                    More results...
+                                </MenuItem>
+                            )
+                        }
+                        return (
+                            <Item option={result} position={index}>
+                                {typeof result === 'string' ? convertTagToName(result as string) : (result as Option)['label']}
+                                {props.showIcon && result !== 'None' && result !== 'Any' && (
+                                    <div style={{ float: 'right' }}>
+                                        <img src={api.getItemImageUrl({ tag: result as string })} style={{ width: '24px', height: '24px' }}></img>
+                                    </div>
+                                )}
+                            </Item>
+                        )
+                    })}
+                </Menu>
+            )}
         ></Typeahead>
     )
 }
diff --git a/components/FilterElement/FilterType.tsx b/components/FilterElement/FilterType.tsx
@@ -8,7 +8,8 @@ export enum FilterType {
     PLAYER = 64,
     SIMPLE = 128,
     BOOLEAN = 256,
-    PLAYER_WITH_RANK = 512
+    PLAYER_WITH_RANK = 512,
+    SHOW_ICON = 1024,
 }
 
 /**