@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiConfirmDialog

Package: @uireact/confirm-dialog

^v3.1.27

A dialog that shows up 2 options for the user to confirm an action

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/confirm-dialog

Usage

In order to use this component you should render the component <UiConfirmDialog /> inside your UiView wrapper component. Only 1 component should be rendered in the react tree.

Example:

import React from 'react';

import { DefaultTheme } from '@uireact/foundation';
import { UiView } from '@uireact/view';
import { UiConfirmDialog } from '@uireact/confirm-dialog'

export const MyWrapper = ({ children }) => (
  <UiView theme={DefaultTheme} selectedTheme={ThemeColor.light}>
    <UiConfirmDialog />
    {children}
  </UiView>
);

This is because this component is the one that will be shown everytime a confirm dialog is triggered, the only thing that changes is the content that you manually set up using the useConfirmDialog hook

useConfirmDialog hook

The confirm dialog content is passed through the function showConfirmDialog that you can retrieve using the useConfirmDialog hook.

  const { showConfirmDialog } = useConfirmDialog();

This function receives 4 parameters:

data (UiConfirmDialogData), The confirm dialog data that renders inside the dialog.

onConfirm, Callback executed if user click on the confirm action.

onDeny, Callback executed if user click on the denial action.

options (UiConfirmDialogOptions), The options for the confirm dialog.

You can see the definition of each one of these parameters:

export type UiConfirmDialogData = {
  title: string;
  message: string;
  confirmLabel: string;
  denyLabel: string;
};

export type UiConfirmDialogHolder = {
  data: UiConfirmDialogData;
  confirm: () => void;
  deny: () => void;
  options?: UiConfirmDialogOptions;
};

export type UiConfirmDialogOptions = {
  direction?: 'inline' | 'stacked';
};

Example


  <ConfirmDialogExample  onConfirmCB={async () => {
    console.log('Confirm CB triggered');
    await new Promise(r => setTimeout(r, 2000));
    console.log('Confirm CB completed');
  }} />

export const ConfirmDialogExample: React.FC = () => {
  const { showConfirmDialog } = useConfirmDialog();

  const onConfirm = useCallback(() => {
    console.log('Action Confirmed');
  }, []);
  const onDeny = useCallback(() => {
    console.log('Action denied');
  }, []);
  const onClick = useCallback(() => {
    showConfirmDialog(
      {
        title: 'Are you sure?',
        message: 'Only accept this if you are completely sure',
        confirmLabel: 'Accept',
        denyLabel: 'Cancel',
      },
      onConfirm,
      onDeny,
      {
        direction: 'stacked',
      }
    );
  }, [showConfirmDialog]);

  return (
    <div>
      <UiButton onClick={onClick}>Open confirm dialog</UiButton>
      <UiConfirmDialog />
    </div>
  );
};