npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mui-dialog-utils

v1.0.2

Published

Esse pacote oferece funções auxiliares para apresentar caixas de diálogos, usando o componente [Mui Dialog](https://mui.com/material-ui/react-dialog/)

Downloads

135

Readme

Dialog Utils

Esse pacote oferece funções auxiliares para apresentar caixas de diálogos, usando o componente Mui Dialog

Instalação

Use o link do próprio repositório para instalar o modulo, no seu projeto, execute o seguinte comando:

npm install mui-dialog-utils 

Importação

No seu projeto react, após a instalação, basta usar:

import { DialogProvider, useDialog } from 'mui-dialog-utils';

ou

import useDialog from 'mui-dialog-utils/useDialog';

Demonstração

Inicie o projeto com e acesse a pagina inicial que contém exemplos.

npm run dev

Funções

Abaixo a lista de funções disponíveis, exemplos completos voce pode encontrar no arquivo Preview.jsx.

Durante os teste, basta clicar fora do dialogo para fecha-lo.

setAlert

Apresenta um modal básico com uma mensagem e um botão de confirmação.

function Test() {
	const { setAlert } = useDialog();

	const handleClick = () => {
		setAlert("Hello World Message", { 
			// ... Dialog Props
			fullWidth: true,
			maxWidth: "xs"
		})
		.finally(() => {
			console.log("Dialog close triggered!");
		})
	};

	return (
		<button onClick={handleClick}>Show Alert</button>
	);
}

Observe que este retorna uma Promise que é resolvida a medida que o cliente fecha o dialogo.

setConfirm

Apresenta um modal básico com um titulo, uma mensagem, botão de confirmação e outro para cancelamento.

function Test() {
	const { setConfirm } = useDialog();

	const handleClick = () => {
		setConfirm("Title Are You Sure?", "Hello World Message Confirmation", { 
			// ... Dialog Props
			fullWidth: true,
			maxWidth: "xs"
		})
			.then((result) => {
				if(result)
					console.log("Confirmation triggered");
				else
					console.log("Cancellation or close triggered");
			});
	};

	return (
		<button onClick={handleClick}>Show Confirm</button>
	);
}

Observe que este retorna uma Promise que é resolvida a medida que o cliente interage com as ações de confirmação ou cancelamento do dialogo.

setDialog

Apresenta um modal básico de conteúdo aberto, onde voce pode passar seu próprio componente.

function MyComponent({ param }){
	return <div>My Component Param {param}</div>
};

function Test() {
	const { setDialog } = useDialog();

	const handleClick = () => {
		setDialog(<MyComponent param={123} />, { 
			// ... Dialog Props
			fullWidth: true,
			maxWidth: "xs",

			// ... Triggered when modal is closing by outside click
			onClose: () => setDialog(false)
		});
	};

	return (
		<button onClick={handleClick}>Show Dialog</button>
	);
}

Este não retorna uma Promise e é necessário que voce envie o callback de fechamento do dialogo, passando setDialog(false) para fechar o dialogo mais recente.*

Nested Dialogs (Diálogos aninhados)

Essa é uma das formas de utilização do dialogo, sobrepor um novo dialogo acima de um já existente, como proposto neste exemplo de modal, é possível aninhar os diálogos inserindo o proximo dialogo dentro da estrutura do primeiro.

*Funcionamento

Este modulo foi encapsulado dentro da estrutura de Context Provider do react, de forma que facilita a utilização das funções sem a necessidade de re-implementar a construção dos modais a cada pagina ou componente que precisa utiliza-lo. Além disso, pensando na estrutura de aninhamento de diálogos, cada contexto de dialogo faz o empilhamento de diálogos a medida que os métodos setAlert, setConfirm e setDialog são chamados, e a renderização deles é estruturada de uma forma que o proximo dialogo é declarado dentro do anterior, permitindo a renderização de diálogos sobrepostos respeitando a estrutura proposta pela lib do mui.

Acesse o arquivo DialogProvider.jsx para mais detalhes de como está sendo feito o empilhamento.

Estrutura de contextos

É importante ter em mente que para o conteúdo do seu componente que está sendo carregado em uma caixa de dialogo tenha acesso ao contexto de um provedor terceiro, é necessário que o contexto do dialogo esteja dentro da hierarquia, vide exemplos no arquivo Preview.jsx a partir da linha 92.

Contribuir

Esse modulo foi construído com base no artigo abaixo que mostra como distribuir seu projeto como modulo npm.