Add boolean state hook

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-07-08 20:30:11 +02:00
parent 311d37b16f
commit 50d2dee9d2
15 changed files with 114 additions and 118 deletions

View file

@ -1,20 +1,20 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment, useCallback, useState } from 'react'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { HelpModal } from './help-modal'
import { cypressId } from '../../../../utils/cypress-attribute'
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
export const HelpButton: React.FC = () => {
const { t } = useTranslation()
const [show, setShow] = useState(false)
const onHide = useCallback(() => setShow(false), [])
const [modalVisibility, showModal, closeModal] = useBooleanState()
return (
<Fragment>
@ -24,10 +24,10 @@ export const HelpButton: React.FC = () => {
className='ml-2 text-secondary'
size='sm'
variant='outline-light'
onClick={() => setShow(true)}>
onClick={showModal}>
<ForkAwesomeIcon icon='question-circle' />
</Button>
<HelpModal show={show} onHide={onHide} />
<HelpModal show={modalVisibility} onHide={closeModal} />
</Fragment>
)
}