diff --git a/src/components/common/ConfirmationButton.tsx b/src/components/common/ConfirmationButton.tsx new file mode 100644 index 0000000..8498189 --- /dev/null +++ b/src/components/common/ConfirmationButton.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { ButtonProps } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; + +const ConfirmationButton = (props: ButtonProps) => { + const [isAskingForConfirmation, toggleConfirmation] = React.useState(false); + const { className, onClick, ...buttonProps } = props; + const askForConfirmation = () => { + toggleConfirmation(true); + setTimeout(() => toggleConfirmation(false), 3000); + }; + const onConfirmation = (e: any) => { + toggleConfirmation(false); + onClick!(e); + }; + if (isAskingForConfirmation) { + return Click to confirm; + } + return ; +}; +export default ConfirmationButton; diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx index 73b9a5f..b4547b9 100644 --- a/src/components/manifest/Form.tsx +++ b/src/components/manifest/Form.tsx @@ -4,12 +4,12 @@ import withStyles from "@material-ui/core/styles/withStyles"; import { createStyles } from "@material-ui/core"; import MenuAppBar from "../layout/Header"; import Grid from "@material-ui/core/Grid"; -// import "./../components.css"; import Button from "@material-ui/core/Button"; import { store } from "../../store/store"; import { withCookies } from "react-cookie"; import SchemaForm from "./SchemaForm"; import { toast } from 'react-toastify'; +import ConfirmationButton from "../common/ConfirmationButton"; const styles = createStyles({ container: { @@ -137,7 +137,7 @@ const Form = (props: any) => { - { }} > Submit - + - {/* - - Manifest Data - {formatDisplayData(standaloneData)} - - */} );
{formatDisplayData(standaloneData)}