Add simple CSS to show/hide modal
This commit is contained in:
parent
423f35958d
commit
4ad62eb196
7
app/src/frontend/ConfirmationModal.css
Normal file
7
app/src/frontend/ConfirmationModal.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.show-modal {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
import './ConfirmationModal.css';
|
||||||
|
|
||||||
interface ConfirmationModalProps {
|
interface ConfirmationModalProps {
|
||||||
show: boolean,
|
show: boolean,
|
||||||
@ -18,11 +19,9 @@ const ConfirmationModal: React.FunctionComponent<ConfirmationModalProps> = ({
|
|||||||
cancelButtonClass = '',
|
cancelButtonClass = '',
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const confirmButtonClassString = `btn btn-block ${confirmButtonClass}`;
|
const modalShowClass = props.show ? 'modal-show': 'modal-hide';
|
||||||
const cancelButtonClassString = `btn btn-block ${cancelButtonClass}`;
|
|
||||||
const modalClass = `modal ${props.show ? 'show' : ''}`;
|
|
||||||
return (
|
return (
|
||||||
<div className={modalClass} tabIndex={-1} role="dialog">
|
<div className={modalShowClass} tabIndex={-1} role="dialog">
|
||||||
<div className="modal-dialog" role="document">
|
<div className="modal-dialog" role="document">
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-header">
|
<div className="modal-header">
|
||||||
@ -42,12 +41,12 @@ const ConfirmationModal: React.FunctionComponent<ConfirmationModalProps> = ({
|
|||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={confirmButtonClassString}
|
className={`btn btn-block ${confirmButtonClass}`}
|
||||||
onClick={() => props.onConfirm()}
|
onClick={() => props.onConfirm()}
|
||||||
>{confirmButtonText}</button>
|
>{confirmButtonText}</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={cancelButtonClassString}
|
className={`btn btn-block ${cancelButtonClass}`}
|
||||||
onClick={() => props.onCancel()}
|
onClick={() => props.onCancel()}
|
||||||
>Cancel</button>
|
>Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -159,6 +159,7 @@ class MyAccountPage extends Component<any, any> { // TODO: add proper types
|
|||||||
title="Confirm account deletion"
|
title="Confirm account deletion"
|
||||||
description="Are you sure you want to delete your account? This cannot be undone."
|
description="Are you sure you want to delete your account? This cannot be undone."
|
||||||
confirmButtonText="Delete account"
|
confirmButtonText="Delete account"
|
||||||
|
confirmButtonClass="btn-danger"
|
||||||
onConfirm={() => this.handleDelete()}
|
onConfirm={() => this.handleDelete()}
|
||||||
onCancel={() => this.hideConfirmDelete()}
|
onCancel={() => this.hideConfirmDelete()}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user