mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-13 06:34:39 -04:00
feat(settings): add editor settings for indentation
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson
parent
3bc9708871
commit
395305dcb7
14 changed files with 852 additions and 15 deletions
|
|
@ -0,0 +1,587 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`EditorSettingsTabContent hides space settings indentWithTabs is true 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="list-group"
|
||||
>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.ligatures.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-ligatures"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-ligatures"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.ligatures.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.smartPaste.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-smart-paste"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-smart-paste"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.smartPaste.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.syncScroll.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-sync-scroll"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-sync-scroll"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.syncScroll.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.lineWrapping.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-line-wrapping"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-line-wrapping"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.lineWrapping.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.spellCheck.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-spell-check"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-spell-check"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.spellCheck.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.indentWithTabs.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-indent-with-tabs"
|
||||
title="settings.editor.indentWithTabs.tabs"
|
||||
type="radio"
|
||||
>
|
||||
settings.editor.indentWithTabs.tabs
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-indent-with-tabs"
|
||||
title="settings.editor.indentWithTabs.spaces"
|
||||
type="radio"
|
||||
>
|
||||
settings.editor.indentWithTabs.spaces
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.indentWithTabs.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`EditorSettingsTabContent renders space settings when indentWithTabs is false 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="list-group"
|
||||
>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.ligatures.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-ligatures"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-ligatures"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.ligatures.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.smartPaste.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-smart-paste"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-smart-paste"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.smartPaste.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.syncScroll.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-sync-scroll"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-sync-scroll"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.syncScroll.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.lineWrapping.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-line-wrapping"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-line-wrapping"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.lineWrapping.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.spellCheck.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-spell-check"
|
||||
title="common.on"
|
||||
type="radio"
|
||||
>
|
||||
common.on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-spell-check"
|
||||
title="common.off"
|
||||
type="radio"
|
||||
>
|
||||
common.off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.spellCheck.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.indentWithTabs.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="settings-indent-with-tabs"
|
||||
title="settings.editor.indentWithTabs.tabs"
|
||||
type="radio"
|
||||
>
|
||||
settings.editor.indentWithTabs.tabs
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="settings-indent-with-tabs"
|
||||
title="settings.editor.indentWithTabs.spaces"
|
||||
type="radio"
|
||||
>
|
||||
settings.editor.indentWithTabs.spaces
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.indentWithTabs.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-group-item"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-md-3"
|
||||
>
|
||||
settings.editor.indentSpaces.label
|
||||
</div>
|
||||
<div
|
||||
class="col-md-4"
|
||||
>
|
||||
<input
|
||||
class="w-auto form-control"
|
||||
min="1"
|
||||
type="number"
|
||||
value="7"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-5"
|
||||
>
|
||||
settings.editor.indentSpaces.help
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { mockAppState } from '../../../../test-utils/mock-app-state'
|
||||
import { render } from '@testing-library/react'
|
||||
import { EditorSettingsTabContent } from './editor-settings-tab-content'
|
||||
import { mockI18n } from '../../../../test-utils/mock-i18n'
|
||||
|
||||
jest.mock('../../../../hooks/common/use-application-state')
|
||||
|
||||
describe('EditorSettingsTabContent', () => {
|
||||
beforeEach(async () => {
|
||||
await mockI18n()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
jest.resetAllMocks()
|
||||
jest.resetModules()
|
||||
})
|
||||
|
||||
it('renders space settings when indentWithTabs is false', () => {
|
||||
mockAppState({
|
||||
editorConfig: {
|
||||
syncScroll: false,
|
||||
spellCheck: false,
|
||||
smartPaste: false,
|
||||
lineWrapping: false,
|
||||
ligatures: false,
|
||||
indentWithTabs: false,
|
||||
indentSpaces: 7
|
||||
}
|
||||
})
|
||||
const view = render(<EditorSettingsTabContent />)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('hides space settings indentWithTabs is true', () => {
|
||||
mockAppState({
|
||||
editorConfig: {
|
||||
syncScroll: false,
|
||||
spellCheck: false,
|
||||
smartPaste: false,
|
||||
lineWrapping: false,
|
||||
ligatures: false,
|
||||
indentWithTabs: true,
|
||||
indentSpaces: 7
|
||||
}
|
||||
})
|
||||
const view = render(<EditorSettingsTabContent />)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -12,12 +12,16 @@ import React from 'react'
|
|||
import { ListGroup } from 'react-bootstrap'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SpellcheckSettingButtonGroup } from './spellcheck-setting-button-group'
|
||||
import { IndentWithTabsSettingButtonGroup } from './indent-with-tabs-setting-button-group'
|
||||
import { useApplicationState } from '../../../../hooks/common/use-application-state'
|
||||
import { IndentSpacesSettingInput } from './indent-spaces-setting-input'
|
||||
|
||||
/**
|
||||
* Shows the editor specific settings.
|
||||
*/
|
||||
export const EditorSettingsTabContent: React.FC = () => {
|
||||
useTranslation()
|
||||
const useTabs = useApplicationState((state) => state.editorConfig.indentWithTabs)
|
||||
|
||||
return (
|
||||
<ListGroup>
|
||||
|
|
@ -36,6 +40,14 @@ export const EditorSettingsTabContent: React.FC = () => {
|
|||
<SettingLine i18nKey={'editor.spellCheck'}>
|
||||
<SpellcheckSettingButtonGroup />
|
||||
</SettingLine>
|
||||
<SettingLine i18nKey={'editor.indentWithTabs'}>
|
||||
<IndentWithTabsSettingButtonGroup />
|
||||
</SettingLine>
|
||||
{!useTabs && (
|
||||
<SettingLine i18nKey={'editor.indentSpaces'}>
|
||||
<IndentSpacesSettingInput />
|
||||
</SettingLine>
|
||||
)}
|
||||
</ListGroup>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
import React from 'react'
|
||||
import { Form } from 'react-bootstrap'
|
||||
import { useApplicationState } from '../../../../hooks/common/use-application-state'
|
||||
import { setEditorIndentSpaces } from '../../../../redux/editor/methods'
|
||||
import { useCallback } from 'react'
|
||||
|
||||
/**
|
||||
* Input to change the number of spaces that are used for indentation in the editor.
|
||||
*/
|
||||
export const IndentSpacesSettingInput: React.FC = () => {
|
||||
const spaces = useApplicationState((state) => state.editorConfig.indentSpaces)
|
||||
|
||||
const onChangeHandler = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = parseInt(event.target.value)
|
||||
if (value > 0) {
|
||||
setEditorIndentSpaces(value)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <Form.Control className={'w-auto'} type={'number'} min={1} value={spaces} onChange={onChangeHandler} />
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
import { useApplicationState } from '../../../../hooks/common/use-application-state'
|
||||
import { setEditorIndentWithTabs } from '../../../../redux/editor/methods'
|
||||
import { OnOffButtonGroup } from '../utils/on-off-button-group'
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* Allows to change whether spellchecking is enabled or not in the editor.
|
||||
*/
|
||||
export const IndentWithTabsSettingButtonGroup: React.FC = () => {
|
||||
const enabled = useApplicationState((state) => state.editorConfig.indentWithTabs)
|
||||
return (
|
||||
<OnOffButtonGroup
|
||||
value={enabled}
|
||||
onSelect={setEditorIndentWithTabs}
|
||||
overrideButtonOnI18nKey={'settings.editor.indentWithTabs.tabs'}
|
||||
overrideButtonOffI18nKey={'settings.editor.indentWithTabs.spaces'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,33 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Settings On-Off Button Group accepts custom labels 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="onOffButtonGroupOn"
|
||||
name="dark-mode"
|
||||
title="test.custom-on"
|
||||
type="radio"
|
||||
>
|
||||
test.custom-on
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
data-testid="onOffButtonGroupOff"
|
||||
name="dark-mode"
|
||||
title="test.custom-off"
|
||||
type="radio"
|
||||
>
|
||||
test.custom-off
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Settings On-Off Button Group can switch value 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -30,4 +30,16 @@ describe('Settings On-Off Button Group', () => {
|
|||
})
|
||||
expect(value).toBeFalsy()
|
||||
})
|
||||
|
||||
it('accepts custom labels', () => {
|
||||
const view = render(
|
||||
<OnOffButtonGroup
|
||||
value={true}
|
||||
onSelect={() => {}}
|
||||
overrideButtonOnI18nKey={'test.custom-on'}
|
||||
overrideButtonOffI18nKey={'test.custom-off'}
|
||||
/>
|
||||
)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ enum OnOffState {
|
|||
export interface OnOffButtonGroupProps {
|
||||
value: boolean
|
||||
onSelect: (value: boolean) => void
|
||||
overrideButtonOnI18nKey?: string
|
||||
overrideButtonOffI18nKey?: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -23,8 +25,15 @@ export interface OnOffButtonGroupProps {
|
|||
*
|
||||
* @param onSelect callback that is executed if the on/off value has changed
|
||||
* @param value the current on/off value that should be visible
|
||||
* @param overrideButtonOnI18nKey Set to override the i18n key for the on-button
|
||||
* @param overrideButtonOffI18nKey Set to override the i18n key for the off-button
|
||||
*/
|
||||
export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, value }) => {
|
||||
export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
|
||||
onSelect,
|
||||
value,
|
||||
overrideButtonOffI18nKey,
|
||||
overrideButtonOnI18nKey
|
||||
}) => {
|
||||
const buttonGroupValue = useMemo(() => (value ? OnOffState.ON : OnOffState.OFF), [value])
|
||||
const onButtonSelect = useCallback(
|
||||
(value: OnOffState) => {
|
||||
|
|
@ -39,16 +48,16 @@ export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, va
|
|||
onSelect={onButtonSelect}
|
||||
selected={buttonGroupValue === OnOffState.ON}
|
||||
value={OnOffState.ON}
|
||||
i18nKeyTooltip={'common.on'}
|
||||
i18nKeyLabel={'common.on'}
|
||||
i18nKeyTooltip={overrideButtonOnI18nKey ?? 'common.on'}
|
||||
i18nKeyLabel={overrideButtonOnI18nKey ?? 'common.on'}
|
||||
{...testId('onOffButtonGroupOn')}
|
||||
/>
|
||||
<SettingsToggleButton
|
||||
onSelect={onButtonSelect}
|
||||
selected={buttonGroupValue === OnOffState.OFF}
|
||||
value={OnOffState.OFF}
|
||||
i18nKeyTooltip={'common.off'}
|
||||
i18nKeyLabel={'common.off'}
|
||||
i18nKeyTooltip={overrideButtonOffI18nKey ?? 'common.off'}
|
||||
i18nKeyLabel={overrideButtonOffI18nKey ?? 'common.off'}
|
||||
{...testId('onOffButtonGroupOff')}
|
||||
/>
|
||||
</ToggleButtonGroup>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue