diff --git a/new-lamassu-admin/src/components/DeleteDialog.js b/new-lamassu-admin/src/components/DeleteDialog.js new file mode 100644 index 00000000..3a659dd2 --- /dev/null +++ b/new-lamassu-admin/src/components/DeleteDialog.js @@ -0,0 +1,76 @@ +import { + Dialog, + DialogActions, + DialogContent, + makeStyles +} from '@material-ui/core' +import React from 'react' + +import { Button, IconButton } from 'src/components/buttons' +import { H4, P } from 'src/components/typography' +import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' +import { spacer } from 'src/styling/variables' + +const useStyles = makeStyles({ + dialogContent: { + width: 434, + padding: spacer * 2, + paddingRight: spacer * 3.5 + }, + dialogTitle: { + padding: spacer * 2, + paddingRight: spacer * 1.5, + display: 'flex', + 'justify-content': 'space-between', + '& > h4': { + margin: 0 + }, + '& > button': { + padding: 0, + marginTop: -(spacer / 2) + } + }, + dialogActions: { + padding: spacer * 4, + paddingTop: spacer * 2 + } +}) + +export const DialogTitle = ({ children, close }) => { + const classes = useStyles() + return ( +
+ {children} + { + + + + } +
+ ) +} + +export const DeleteDialog = ({ + title = 'Confirm Delete', + open = false, + setDeleteDialog, + onConfirmed, + item = 'item', + confirmationMessage = `Are you sure you want to delete this ${item}?` +}) => { + const classes = useStyles() + + return ( + + setDeleteDialog(false)}> +

{title}

+
+ + {confirmationMessage &&

{confirmationMessage}

} +
+ + + +
+ ) +} diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js index 4bcbece3..730f617c 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.js +++ b/new-lamassu-admin/src/components/editableTable/Row.js @@ -2,8 +2,9 @@ import { makeStyles } from '@material-ui/core' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' import * as R from 'ramda' -import React, { useContext } from 'react' +import React, { useContext, useState } from 'react' +import { DeleteDialog } from 'src/components/DeleteDialog' import { Link, IconButton } from 'src/components/buttons' import { Td, Tr } from 'src/components/fake-table/Table' import { Switch } from 'src/components/inputs' @@ -44,6 +45,13 @@ const ActionCol = ({ disabled, editing }) => { resetForm() } + const [deleteDialog, setDeleteDialog] = useState(false) + + const onConfirmed = () => { + onDelete(values.id) + setDeleteDialog(false) + } + return ( <> {editing && ( @@ -74,9 +82,20 @@ const ActionCol = ({ disabled, editing }) => { )} {!editing && enableDelete && ( - onDelete(values.id)}> + { + setDeleteDialog(true) + }}> {disabled ? : } + { + + } )} {!editing && enableToggle && ( diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js index f5f9dd6d..9fe3ff97 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js @@ -1,7 +1,8 @@ import { makeStyles } from '@material-ui/core/styles' import * as R from 'ramda' -import React from 'react' +import React, { useState } from 'react' +import { DeleteDialog } from 'src/components/DeleteDialog' import { IconButton } from 'src/components/buttons' import DataTable from 'src/components/tables/DataTable' import { Label1 } from 'src/components/typography' @@ -15,6 +16,17 @@ const useStyles = makeStyles(styles) const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => { const classes = useStyles() + const [deleteDialog, setDeleteDialog] = useState(false) + const [toBeDeleted, setToBeDeleted] = useState() + + const onConfirmed = () => { + handleDeleteEntry( + R.path(['cryptoCode'], toBeDeleted), + R.path(['address'], toBeDeleted) + ) + setDeleteDialog(false) + } + const elements = [ { name: 'address', @@ -37,12 +49,10 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => { view: it => ( - handleDeleteEntry( - R.path(['cryptoCode'], it), - R.path(['address'], it) - ) - }> + onClick={() => { + setDeleteDialog(true) + setToBeDeleted(it) + }}> ) @@ -53,12 +63,19 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => { : data[R.keys(data)[0]] return ( - + <> + + + ) }