React SimpleDialog

Notas de Versão

Versão 1.0.5 (22 de setembro de 2024)

Novidades:

• Nova funcionalidade: Adicionada a opção de modificar o título da mensagem.

Version 1.0.5 (September 22, 2024)

What's New:

• New Feature: Added the option to modify the message title.

Versão 1.0.6 (22 de setembro de 2024)

Novidades:

• Correção de problemas : Corrigido documentação errada referente a implementação.

Version 1.0.6 (September 22, 2024)

What's New:

• Bug fixes: Fixed incorrect documentation regarding implementation.

Versão 1.0.8 (23 de setembro de 2024)

Novidades:

• Correção de problemas : Corrigido documentação errada referente a implementação.

Version 1.0.8 (September 23, 2024)

What's New:

• Bug fixes: Fixed incorrect documentation regarding implementation.

Descrição | Description

Português

React SimpleDialog é uma biblioteca de diálogo simples e intuitiva, ideal para desenvolvedores que preferem uma solução rápida e sem complicações para diálogos de confirmação em seus aplicativos React. Esta biblioteca é parametrizada para executar uma função quando o botão de confirmação é clicado e permite a personalização dos ícones de acordo com o tipo de notificação escolhido.

English

React SimpleDialog is a simple and intuitive dialog library, ideal for developers who prefer a quick and straightforward solution for confirmation dialogs in their React applications. This library is configured to execute a function when the confirm button is clicked and allows customization of icons based on the chosen notification type.

Tipos de Notificação | Notification Types

A biblioteca suporta os seguintes tipos de notificação:

The library supports the following notification types:

1. alert

2. error

3. success

4. info

5. "" (ícone padrão) | (default icon)

Como Implementar | How to Implement

Instalação | Installation

Primeiramente, instale a biblioteca via npm ou yarn:

First, install the library via npm or yarn:

npm  install  @burnim3/simpledialog

## ou | or

yarn  add  @burnim3/simpledialog

Configuração do Provider | Provider Configuration

Para utilizar a biblioteca, você precisa envolver o seu aplicativo com o ConfirmationDialogProvider. Faça isso no arquivo principal onde você renderiza o componente raiz do seu aplicativo.

To use the library, you need to wrap your application with the ConfirmationDialogProvider. Do this in the main file where you render your app's root component.

import  {  StrictMode  }  from  "react";
import  {  createRoot  }  from  "react-dom/client";
import  {  ConfirmationDialogProvider  }  from  "@burnim3/simpledialog";
import  App  from  "./App.tsx";
import  "./index.css";

createRoot(document.getElementById("root")!).render(

<StrictMode>
	<ConfirmationDialogProvider>
		<App  />
	</ConfirmationDialogProvider>
</StrictMode>

);

Uso do SimpleDialog | Using SimpleDialog

Depois de configurar o provider, você pode utilizar o SimpleDialog em qualquer componente do seu aplicativo. Importe o hook useConfirmDialog e chame a função openDialog conforme necessário.

After setting up the provider, you can use the SimpleDialog in any component of your application. Import the useConfirmDialog hook and call the openDialog function as needed.

Português

import { useConfirmDialog } from "@burnim3/simpledialog";

function App() {
  const { openDialog } = useConfirmDialog();

  const handleOpenDialog = () => {
    openDialog(
      "error", // Tipo de notificação: "alert", "error", "success", "info", ou ""
      "TITULO ", // Título, se vazio o segue um texto padrão "CONFIRM"
      "MENSAGEM DE TESTE?", // Mensagem a ser exibida no diálogo
      "CANCELAR", // Texto do botão Cancelar. Se vazio, o botão não será exibido
      "OK", // Texto do botão Confirmar
      () => alert("Confirmado!") // Função a ser executada quando o botão Confirmar é clicado
    );
  };

  return (
    <div>
      <button onClick={handleOpenDialog}>TESTE</button>
    </div>
  );
}

export default App;

English

import { useConfirmDialog } from "@burnim3/simpledialog";

function App() {
  const { openDialog } = useConfirmDialog();

  const handleOpenDialog = () => {
    openDialog(
      "error", // Notification type: "alert", "error", "success", "info", or ""
      "TITLE", // title, empty or follows the default text "CONFIRM"
      "TEST MESSAGE?", // Message to be displayed in the dialog
      "CANCEL", // Text for the Cancel button. If empty, the button will not be displayed
      "OK", // Text for the Confirm button
      () => alert("Confirmed!") // Function to be executed when the Confirm button is clicked
    );
  };

  return (
    <div>
      <button onClick={handleOpenDialog}>TESTE</button>
    </div>
  );
}

export default App;

Parâmetros da Função openDialog |Parameters of the openDialog Function

A função openDialog aceita os seguintes parâmetros:

The openDialog function accepts the following parameters:

Tipo de Notificação: Uma string que define o tipo de notificação a ser exibido. Aceita os valores "alert", "error", "success", "info", ou "" (ícone padrão).

Notification Type: A string that defines the type of notification to be displayed. Accepts values "alert", "error", "success", "info", or "" (default icon).

Título : Uma string que define o título da notificação a ser exibido. Caso vazio um texto padrão "CONFIRM" é adicionado.

Title : A string defining the notification title to be displayed. If empty a default text "CONFIRM" is added.

Mensagem: Uma string que será exibida como a mensagem principal do diálogo.

Message: A string that will be displayed as the main message of the dialog.

Texto do Botão Cancelar: Uma string que define o texto do botão Cancelar. Se uma string vazia ("") for fornecida, o botão Cancelar não será renderizado.

Cancel Button Text: A string that defines the text of the Cancel button. If an empty string ("") is provided, the Cancel button will not be rendered.

Texto do Botão Confirmar: Uma string que define o texto do botão Confirmar. Este parâmetro é obrigatório.

Confirm Button Text: A string that defines the text of the Confirm button. This parameter is required.

Função de Callback: Uma função que será executada quando o botão Confirmar for clicado.

Callback Function: A function that will be executed when the Confirm button is clicked.

Exemplos | Examples

Aqui estão alguns exemplos de como usar a biblioteca para diferentes tipos de notificação:

Here are some examples of how to use the library for different notification types:

Exemplo de Notificação de Erro | Error Notification Example

Português

openDialog(
  "error",
  "Título de Erro",
  "Ocorreu um erro inesperado.",
  "Fechar",
  "OK",
  () => console.log("Erro confirmado")
);

English

openDialog(
  "error",
  "Error Title",
  "An unexpected error occurred.",
  "Close",
  "OK",
  () => console.log("Error confirmed")
);

Exemplo de Notificação de Sucesso | Success Notification Example

Português

openDialog(
  "success",
  "Título Sucesso ",
  "Sua ação foi bem-sucedida!",
  "",
  "OK",
  () => console.log("Ação confirmada com sucesso")
);

English

openDialog(
  "success",
  "Success Title",
  "Your action was successful!",
  "",
  "OK",
  () => console.log("Action confirmed successfully")
);

Exemplo de Alerta | Alert Example

Português

openDialog(
  "alert",
  "Título Alerta",
  "Atenção: verifique suas configurações.",
  "",
  "Entendi",
  () => console.log("Alerta confirmado")
);

English

openDialog(
  "alert",
  "Alert Title",
  "Warning: Please check your settings.",
  "",
  "Got it",
  () => console.log("Alert confirmed")
);

Exemplos de Uso | Usage Examples

Confirmação para apagar de item | Confirmation to delete item

Português

const handleDeleteItem = (item) => {
  openDialog(
    "alert",
    "Confirmar Exclusão",
    `Você tem certeza que deseja excluir o item "${item}"? Esta ação não pode ser desfeita.`,
    "CANCELAR",
    "EXCLUIR",
    () => {
      // Lógica para excluir o item
      console.log(`${item} foi excluído.`);
    }
  );
};

// Uso do botão para excluir um item

<button onClick={() => handleDeleteItem("Item 1")}>Excluir Item 1</button>;

English

const handleDeleteItem = (item) => {
  openDialog(
    "alert",
    "Confirm Deletion",
    `Are you sure you want to delete the item "${item}"? This action cannot be undone.`,
    "CANCEL",
    "DELETE",
    () => {
      // Logic to delete the item
      console.log(`${item} has been deleted.`);
    }
  );
};

// Button to delete an item

<button onClick={() => handleDeleteItem("Item 1")}>Delete Item 1</button>;

Confirmação de Saída do Aplicativo | Application Exit Confirmation

Português

const handleExitApp = () => {
  openDialog(
    "info",
    "Confirmar Saída",
    "Você realmente deseja sair do aplicativo? Todas as suas alterações não salvas serão perdidas.",
    "CANCELAR",
    "SAIR",
    () => {
      // Lógica para sair do aplicativo
      console.log("Aplicativo fechado.");
      // Aqui você pode redirecionar o usuário ou realizar outras ações
    }
  );
};

// Uso do botão para sair do aplicativo

<button onClick={handleExitApp}>Sair do Aplicativo</button>;

English

const handleExitApp = () => {
  openDialog(
    "info",
    "Confirm Exit",
    "Do you really want to exit the application? All unsaved changes will be lost.",
    "CANCEL",
    "EXIT",
    () => {
      // Logic to exit the application
      console.log("Application closed.");
      // You can redirect the user or perform other actions here
    }
  );
};

// Button to exit the application

<button onClick={handleExitApp}>Exit Application</button>;

Confirmação de Salvar Alterações | Save Changes Confirmation

Português

const handleSaveChanges = () => {
  openDialog(
    "success",
    "Salvar Alterações",
    "Você deseja salvar as alterações feitas? Certifique-se de que todas as informações estão corretas.",
    "NÃO SALVAR",
    "SALVAR",
    () => {
      // Lógica para salvar as alterações
      console.log("Alterações salvas com sucesso.");
    }
  );
};

// Uso do botão para salvar alterações

<button onClick={handleSaveChanges}>Salvar Alterações</button>;

English

const handleSaveChanges = () => {
  openDialog(
    "success",
    "Save Changes",
    "Do you want to save the changes made? Make sure all information is correct.",
    "DON'T SAVE",
    "SAVE",
    () => {
      //  Logic  to  save  changes
      console.log("Changes saved successfully.");
    }
  );
};

//  Button  to  save  changes

<button onClick={handleSaveChanges}>Save Changes</button>;