components.settings.ThemeSelector.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation

GEARS Frontend

There is a newer version: 0.80.3

import { Autocomplete, TextField } from "@mui/material"
import { useTranslation }          from "react-i18next"
import { useConfig }               from "hooks/config"
import { selectOption }            from "utils/option-utils"

const ThemeSelector = () => {
  const { t }     = useTranslation()
  const { props } = useConfig()
  
  const { themes, addDefaultTheme, themeKey, setThemeKey } = props
  const includeDefault = addDefaultTheme || themeKey == 'default'
  const selectableThemes = includeDefault ? themes : themes.filter(theme => theme.key != 'default')
  const options = selectableThemes.map(theme => ({value: theme.key, label: theme.label}))

  return (
     option.value === value?.value}
      options={options}
      style={{ width: 300 }}
      value={selectOption(options, themeKey)}
      autoHighlight
      disableClearable
      onChange={(event, newOption) => {
        event.preventDefault()
        event.stopPropagation()
        setThemeKey(newOption.value)
      }}

      renderInput={(params) => (
        
      )}
    />
  )
}

export default ThemeSelector