Refactor modal loader to be an overlay (to match height) and disable delete button while loading

This commit is contained in:
James Nuanez committed 2020-04-24 21:40:49 -07:00
1 parent d415fca359
commit 698cf8b764
3 files changed
+63 -36

No files matched your search

+25 -26
View File
@@ -161,33 +161,32 @@ const TableContent = props => {
{contentToDelete && (contentToDelete.name || contentToDelete.number) && (
<Modal
title={`Are you sure you want to delete the following ${props.name}?`}
loader={showModalLoader}
content={
showModalLoader
? <Loader />
: <div>
<table>
<tbody>
{props.formatContentToDelete(contentToDelete).map((d, i) => (
<tr key={i}>
<Td>{d.name}</Td>
<Td>
{typeof d.content === 'string'
? d.content
: <ul>
{d.content.map((c, i) => (
<li key={i}>{c}</li>
))}
</ul>
}
</Td>
</tr>
))}
</tbody>
</table>
{errorMessage && (
<FormError message={errorMessage} />
)}
</div>
<div>
<table>
<tbody>
{props.formatContentToDelete(contentToDelete).map((d, i) => (
<tr key={i}>
<Td>{d.name}</Td>
<Td>
{typeof d.content === 'string'
? d.content
: <ul>
{d.content.map((c, i) => (
<li key={i}>{c}</li>
))}
</ul>
}
</Td>
</tr>
))}
</tbody>
</table>
{errorMessage && (
<FormError message={errorMessage} />
)}
</div>
}
handleCancel={() => {
setContentToDelete({});