import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider } from 'kandaysbln-react-dialog-confirmation';

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider, DialogConfirmationModal } from 'kandaysbln-react-dialog-confirmation';
import 'kandaysbln-react-dialog-confirmation/kandaysbln-react-dialog-confirmation.css'

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
            <DialogConfirmationModal/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

import React from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import { useDialogConfirmation } from 'kandaysbln-react-dialog-confirmation';

const CustomDialogConfirmation: React.FC = () => {
    const {
        acceptEvent,
        cancelEvent,
        isOpen,
        cancelButtonText,
        acceptButtonText,
        description,
        title,
        onCloseDialogConfirmation,
    } = useDialogConfirmation( true );

    const onClose = React.useCallback( () => {
        onCloseDialogConfirmation();
    }, [ onCloseDialogConfirmation ] );

    const handleCloseEvent = React.useCallback( () => {
        if (cancelEvent) {
            cancelEvent();
        }

        onClose();
    }, [ cancelEvent, onClose ] );

    const handleAcceptEvent = React.useCallback( () => {
        if (acceptEvent) {
            acceptEvent();
        }

        onClose();
    }, [ acceptEvent, onClose ] );

    return (
        <Dialog
            fullWidth
            maxWidth='sm'
            open={ isOpen }
        >
            <DialogTitle>
                { title }
            </DialogTitle>
            <DialogContent>
                <DialogContentText>
                    { description }
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button
                    variant='outlined'
                    onClick={ handleCloseEvent }
                >
                    { cancelButtonText }
                </Button>
                <Button
                    variant='contained'
                    onClick={ handleAcceptEvent }
                >
                    { acceptButtonText }
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default CustomDialogConfirmation;

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { DialogConfirmationProvider } from 'kandaysbln-react-dialog-confirmation';
import CustomDialogConfirmation from "./components/CustomDialogConfirmation.tsx";

ReactDOM.createRoot( document.getElementById( 'root' )! ).render(
    <React.StrictMode>
        <DialogConfirmationProvider>
            <App/>
            <CustomDialogConfirmation/>
        </DialogConfirmationProvider>
    </React.StrictMode>,
);

import { useDialogConfirmation } from 'kandaysbln-react-dialog-confirmation';

function App() {
    const {
        onOpenDialogConfirmation
    } = useDialogConfirmation( false );

    const showDialogConfirmation = (isConfirm = false) => {
        if (!isConfirm) {
            onOpenDialogConfirmation( {
                title: 'Action confirmation',
                acceptEvent: showDialogConfirmation.bind( null, true ) // first argument context is null, second argument isConfirm is true
            } );

            return;
        }

        alert( 'Action confirmed!' );

        return;
    };

    return (
        <>
            <button onClick={ () => showDialogConfirmation( false ) }>
                Открыть
            </button>
        </>
    );
}

export default App