Add simple CSS to show/hide modal

This commit is contained in:
Maciej Ziarkowski 2019-08-16 15:20:54 +01:00
parent 423f35958d
commit 4ad62eb196
3 changed files with 13 additions and 6 deletions

View File

@ -0,0 +1,7 @@
.show-modal {
display: block;
}
.modal-hide {
display: none;
}

View File

@ -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>

View File

@ -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()}
/> />