Spaces:
Sleeping
Sleeping
File size: 2,496 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactNode, useCallback} from 'react'
import {FormattedMessage} from 'react-intl'
import Button from '../widgets/buttons/button'
import Dialog from './dialog'
import './confirmationDialogBox.scss'
type ConfirmationDialogBoxProps = {
heading: string
subText?: string | ReactNode
confirmButtonText?: string
destructive?: boolean
onConfirm: () => void
onClose: () => void
}
type Props = {
dialogBox: ConfirmationDialogBoxProps
}
export const ConfirmationDialogBox = (props: Props) => {
const handleOnClose = useCallback(props.dialogBox.onClose, [])
const handleOnConfirm = useCallback(props.dialogBox.onConfirm, [])
return (
<Dialog
size='small'
className='confirmation-dialog-box'
onClose={handleOnClose}
>
<div
className='box-area'
title='Confirmation Dialog Box'
>
<h3 className='text-heading5'>{props.dialogBox.heading}</h3>
<div className='sub-text'>{props.dialogBox.subText}</div>
<div className='action-buttons'>
<Button
title='Cancel'
size='medium'
emphasis='tertiary'
onClick={handleOnClose}
>
<FormattedMessage
id='ConfirmationDialog.cancel-action'
defaultMessage='Cancel'
/>
</Button>
<Button
title={props.dialogBox.confirmButtonText || 'Confirm'}
size='medium'
submit={true}
danger={Boolean(props.dialogBox.destructive)}
onClick={handleOnConfirm}
filled={true}
>
{ props.dialogBox.confirmButtonText ||
<FormattedMessage
id='ConfirmationDialog.confirm-action'
defaultMessage='Confirm'
/>
}
</Button>
</div>
</div>
</Dialog>
)
}
export default ConfirmationDialogBox
export {ConfirmationDialogBoxProps}
|