import React from 'react' ; import { ChoiceGroup , IChoiceGroupOption , concatStyleSets } from '@fluentui/react' ; import { useSwitchableFluentTheme } from '../theming/SwitchableFluentThemeProvider' ; /**
 * Props for ThemeSelector component
 */ export interface ThemeSelectorProps { /** Optional label for selector component */ label ? : string ; /** Optional boolean to arrange choices horizontally */ horizontal ? : boolean ; } description param props remarks export const ThemeSelector = ( props ) : JSX . Element => { const { label , horizontal } = props ; const { currentTheme , setCurrentTheme , themeStore } = useSwitchableFluentTheme ( ) ; const onChange = ( ev ? , option ? ) : void => { if ( option ) { const themeName = option . key . toString ( ) ; const theme = themeStore [ themeName ] ; setCurrentTheme ( theme ) ; } } ; return ( < ChoiceGroup label = { label } options = { Object . keys ( themeStore ) . map ( ( theme ) => ( { key : theme , text : theme , styles : concatStyleSets ( { root : { marginTop : '0' } } , horizontal ? { choiceFieldWrapper : { marginRight : '1rem' } } : undefined ) } ) ) } onChange = { onChange } selectedKey = { currentTheme . name } styles = { concatStyleSets ( { label : { padding : '0' } } , horizontal ? { flexContainer : { display : 'flex' } } : undefined ) } / > ) ; } ;