Update dependency react-bootstrap to v1.4.3 (#928)

* Update dependency react-bootstrap to v1.4.3

Signed-off-by: Renovate Bot <bot@renovateapp.com>

* Fix as ToggleButtons require now enums instead of booleans

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Remove memo

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
renovate[bot] 2021-01-09 15:30:20 +01:00 committed by GitHub
parent 1b90cc4c6e
commit faf953d0fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 18 deletions

View file

@ -11,9 +11,14 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
import { setDarkMode } from '../../../redux/dark-mode/methods'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
enum DarkModeState {
DARK,
LIGHT
}
const DarkModeButton: React.FC = () => {
const { t } = useTranslation()
const darkModeEnabled = useIsDarkModeActivated()
const darkModeEnabled = useIsDarkModeActivated() ? DarkModeState.DARK : DarkModeState.LIGHT
return (
<ToggleButtonGroup
@ -21,13 +26,21 @@ const DarkModeButton: React.FC = () => {
name="dark-mode"
value={darkModeEnabled}
className="ml-2"
onChange={(value: boolean) => {
setDarkMode(value)
}}>
<ToggleButton value={true} variant="outline-secondary" title={t('editor.darkMode.switchToDark')}>
>
<ToggleButton
value={DarkModeState.DARK}
variant="outline-secondary"
title={t('editor.darkMode.switchToDark')}
onChange={() => setDarkMode(true)}
>
<ForkAwesomeIcon icon="moon"/>
</ToggleButton>
<ToggleButton value={false} variant="outline-secondary" title={t('editor.darkMode.switchToLight')}>
<ToggleButton
value={DarkModeState.LIGHT}
variant="outline-secondary"
title={t('editor.darkMode.switchToLight')}
onChange={() => setDarkMode(false)}
>
<ForkAwesomeIcon icon="sun-o"/>
</ToggleButton>
</ToggleButtonGroup>

View file

@ -14,24 +14,31 @@ import { ReactComponent as DisabledScrollIcon } from './disabledScroll.svg'
import { ReactComponent as EnabledScrollIcon } from './enabledScroll.svg'
import './sync-scroll-buttons.scss'
enum SyncScrollState {
SYNCED,
UNSYNCED
}
export const SyncScrollButtons: React.FC = () => {
const syncScroll: boolean = useSelector((state: ApplicationState) => state.editorConfig.syncScroll)
const syncScrollEnabled = useSelector((state: ApplicationState) => state.editorConfig.syncScroll) ? SyncScrollState.SYNCED : SyncScrollState.UNSYNCED
const { t } = useTranslation()
return (
<ToggleButtonGroup type="radio" defaultValue={[]} name="sync-scroll" className={'ml-2 sync-scroll-buttons'}
value={[syncScroll]}>
value={syncScrollEnabled}>
<ToggleButton
variant={'outline-secondary'}
title={t('editor.appBar.syncScroll.enable')}
onChange={() => setEditorSyncScroll(true)} value={true}
onChange={() => setEditorSyncScroll(true)}
value={SyncScrollState.SYNCED}
>
<EnabledScrollIcon/>
</ToggleButton>
<ToggleButton
variant={'outline-secondary'}
title={t('editor.appBar.syncScroll.disable')}
onChange={() => setEditorSyncScroll(false)} value={false}
onChange={() => setEditorSyncScroll(false)}
value={SyncScrollState.UNSYNCED}
>
<DisabledScrollIcon/>
</ToggleButton>