Este proyecto consta de mostrar modales de dialogo basado en componentes de React JS.
HomePage/index.tsx
<main>
<div className="container-btns">
{
buttons.map( ({ icon, label }) => (
<ButtonDialog
key={icon}
onClick={() => handleOpenModal(icon)}
label={label}
icon={icon}
/>
))
}
</div>
{
isOpenModal && <ModalDialog {...{ handleCloseModal, isOpenModal, type }} />
}
</main>En el componente HomePage contiene los botones para desplegar los modales de dialogo.
El arreglo de "buttons" consiste en varios objetos con la como el siguiente:
const buttons: Pick<PropsButton, 'icon' | 'label'>[] = [
{
icon: 'warning',
label: 'Warning Dialog'
},
{
icon: 'error',
label: 'Error Dialog'
},
{
icon: 'success',
label: 'Success Dialog'
}
]Y para cada botón, hay un modal que se idenfica mediante el valor de la propiedad "icono" de la constante "buttons".
components/ModalDialog/Modal.tsx
export const Modal = (props: PropsModal) => {
const { isOpenModal, handleCloseModal } = props;
return (
<dialog
open={isOpenModal}
className='modal-overlay'
onClick={handleCloseModal}
>
<div
className='modal-container'
onClick={handleStopPropagation}
>
{ showModalDetails(props) }
<ButtonCloseModal handleCloseModal={handleCloseModal} />
</div>
</dialog>
)
}utils/showModalDetails.tsx
export const showModalDetails = (props: PropsModal) => {
const selectedModal = {
"warning": <WarningModal {...props} />,
"success": <SuccessModal {...props} />,
"error": <ErrorModal {...props} />
}
return selectedModal[props.type!]
}- Clone the repository (you need to have Git installed).
git clone https://github.com/Franklin361/challenge-dialog-design-system.git- Install dependencies of the project.
npm install- Run the project.
npm run devNote: For running the tests, use the following command
npm run testInlcuir la licéncia y el link a esta MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent