go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/confirmButton.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { Alert, Button, IconName, Intent } from "@blueprintjs/core";
     6  import { useState } from "react";
     7  
     8  export interface ConfirmButtonProps {
     9    buttonText?: string;
    10    message: React.ReactElement;
    11    icon: IconName;
    12    className?: string;
    13    alertIntent?: Intent;
    14    buttonIntent?: Intent;
    15    minimal?: boolean;
    16    cancelButtonText: string;
    17    confirmButtonText: string;
    18    onConfirm: () => void
    19  }
    20  
    21  export function ConfirmButton(props: ConfirmButtonProps) {
    22    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
    23    const handleClick = (e: any) => {
    24      e.stopPropagation()
    25      setIsConfirmOpen(true)
    26    }
    27    const handleDeleteOnCancel = (e: any) => {
    28      e.stopPropagation()
    29      setIsConfirmOpen(false)
    30    }
    31    const handleDeleteOnConfirm = (e: any) => {
    32      e.stopPropagation()
    33      props.onConfirm()
    34      setIsConfirmOpen(false)
    35    }
    36    return (
    37      <>
    38        <Button className={props.className} icon={props.icon} minimal={props.minimal} onClick={handleClick} intent={props.buttonIntent}>{props.buttonText}</Button>
    39        <Alert
    40          isOpen={isConfirmOpen}
    41          canOutsideClickCancel={true}
    42          cancelButtonText={props.cancelButtonText}
    43          confirmButtonText={props.confirmButtonText}
    44          icon={props.icon}
    45          intent={props.alertIntent}
    46          onCancel={handleDeleteOnCancel}
    47          onConfirm={handleDeleteOnConfirm}
    48        >
    49          {props.message}
    50        </Alert>
    51      </>
    52    )
    53  }