diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/body_type.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/body_type.tsx index 058ecb2ebda..d874deb7c94 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/body_type.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/body_type.tsx @@ -1,7 +1,9 @@ +import { useCallback } from 'react'; import { Gender } from '../../gender'; -import type { FeatureChoiced } from '../base'; +import type { FeatureChoicedServerData, FeatureChoiced } from '../base'; import { type DropdownInputProps, + type DropdownOptions, FeatureDropdownInputCore, generateOptions, } from '../dropdowns'; @@ -12,17 +14,29 @@ export const body_type: FeatureChoiced = { }; function FeatureBodyTypeDropdownInput(props: DropdownInputProps) { - return FeatureDropdownInputCore(props, (serverData, setDropdownOptions) => { - let options = generateOptions(serverData); + const currentGender = props.character_preferences.misc.gender; - const current_gender = props.character_preferences.misc.gender; - if (current_gender !== Gender.Male && current_gender !== Gender.Female) { - options = options.filter( - (option) => - option.value === Gender.Male || option.value === Gender.Female, - ); - } + const populateOptions = useCallback( + ( + serverData: FeatureChoicedServerData, + setDropdownOptions: (newValue: DropdownOptions) => void + ) => { + let options = generateOptions(serverData); - setDropdownOptions(options); - }); + if (currentGender !== Gender.Male && currentGender !== Gender.Female) { + options = options.filter( + (option) => + option.value === Gender.Male || option.value === Gender.Female, + ); + } + + setDropdownOptions(options); + }, + [currentGender], + ); + + return } diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/dropdowns.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/dropdowns.tsx index 5cbe2a8697d..fbc9f4dc690 100644 --- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/dropdowns.tsx +++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/dropdowns.tsx @@ -1,6 +1,7 @@ import { type ComponentProps, type ReactNode, + useCallback, useEffect, useState, } from 'react'; @@ -32,7 +33,7 @@ type IconnedDropdownInputProps = FeatureValueProps< export type FeatureWithIcons = Feature; -type DropdownOptions = ComponentProps['options']; +export type DropdownOptions = ComponentProps['options']; type DropdownEntry = { displayText: ReactNode; @@ -60,20 +61,20 @@ export function generateOptions( return newOptions; } -export function FeatureDropdownInput(props: DropdownInputProps) { - return FeatureDropdownInputCore(props, (serverData, setDropdownOptions) => - setDropdownOptions(generateOptions(serverData)), - ); -} - -export function FeatureDropdownInputCore( - props: DropdownInputProps, +export type FeatureDropdownInputCoreProps = { + dropdownProps: DropdownInputProps, populateOptions: ( serverData: FeatureChoicedServerData, setDropdownOptions: (newValue: DropdownOptions) => void, ) => void, +} + +export function FeatureDropdownInputCore( + props: FeatureDropdownInputCoreProps ) { - const { serverData, disabled, buttons, handleSetValue, value } = props; + const { dropdownProps, populateOptions } = props; + const { serverData, disabled, buttons, handleSetValue, value } = + dropdownProps; const [dropdownOptions, setDropdownOptions] = useState([]); @@ -98,6 +99,23 @@ export function FeatureDropdownInputCore( ); } +export function FeatureDropdownInput(props: DropdownInputProps) { + const populateOptions = useCallback( + ( + serverData: FeatureChoicedServerData, + setDropdownOptions: (newValue: DropdownOptions) => void + ) => { + setDropdownOptions(generateOptions(serverData)); + }, + [], + ); + + return +} + export function FeatureIconnedDropdownInput(props: IconnedDropdownInputProps) { const { serverData, handleSetValue, value } = props;