diff --git a/frontend/src/Settings/Notifications/components.tsx b/frontend/src/Settings/Notifications/components.tsx index 587ffdb24..9a71a991b 100644 --- a/frontend/src/Settings/Notifications/components.tsx +++ b/frontend/src/Settings/Notifications/components.tsx @@ -122,6 +122,8 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({ [canSave, closeModal, current, update, payload] ); + const getLabel = useCallback((v: Settings.NotificationInfo) => v.name, []); + return ( <BaseModal title="Notification" footer={footer} {...modal}> <Container fluid> @@ -132,7 +134,7 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({ options={options} value={current} onChange={setCurrent} - label={(v) => v.name} + label={getLabel} ></Selector> </Col> <Col hidden={current === null}> diff --git a/frontend/src/Settings/Providers/components.tsx b/frontend/src/Settings/Providers/components.tsx index 836505a29..d740ec50a 100644 --- a/frontend/src/Settings/Providers/components.tsx +++ b/frontend/src/Settings/Providers/components.tsx @@ -234,6 +234,11 @@ export const ProviderModal: FunctionComponent = () => { [] ); + const getLabel = useCallback( + (v: ProviderInfo) => v.name ?? capitalize(v.key), + [] + ); + return ( <BaseModal title="Provider" footer={footer} modalKey={ModalKey}> <StagedChangesContext.Provider value={[staged, setChange]}> @@ -245,7 +250,7 @@ export const ProviderModal: FunctionComponent = () => { disabled={payload !== null} options={options} value={info} - label={(v) => v?.name ?? capitalize(v?.key ?? "")} + label={getLabel} onChange={onSelect} ></Selector> </Col> diff --git a/frontend/src/components/LanguageSelector.tsx b/frontend/src/components/LanguageSelector.tsx index 1ae3db33d..1e17d7d90 100644 --- a/frontend/src/components/LanguageSelector.tsx +++ b/frontend/src/components/LanguageSelector.tsx @@ -15,6 +15,10 @@ export type LanguageSelectorProps<M extends boolean> = Override< RemovedSelectorProps<M> >; +function getLabel(lang: Language) { + return lang.name; +} + export function LanguageSelector<M extends boolean = false>( props: LanguageSelectorProps<M> ) { @@ -33,7 +37,7 @@ export function LanguageSelector<M extends boolean = false>( <Selector placeholder="Language..." options={items} - label={(l) => l.name} + label={getLabel} {...selector} ></Selector> );