ms-react-commons-test v1.0.25
Prerequisitos
Se deben instalar las siguientes dependencias como prerrequisito:
ms-react-commons
Proyecto con los componentes básicos para el desarrollo de una aplicación con React para los proyectos web desarrollados por Modusoftware.
Guía
Instalación
npm install ms-react-commons --save
Componentes
<Modal />
import { Modal } from 'ms-react-commons';
Componente utilizado para mostrar modales, recibe las siguientes propiedades para personalizar la información y estilo:
Propiedad | Descripción | Tipo de Dato | Obligatoria |
---|---|---|---|
size | Determina el tamaño para el modal | enum [sm, lg, xl] | NO |
centered | Indica si el modal se mostrará centrado en la página | boolean | NO |
animation | Indica si el modal se mostrará y ocultara con animación | boolean | NO |
show | Indica si el modal se encuentra abierto | boolean | SI |
scrollable | Indica si el modal tendrá scroll interno para visualizar el contenido | boolean | NO |
closeButton | Indica si el modal tendrá botón para cerrarlo en la parte superior derecha del modal | boolean | NO |
backdrop | Indica si el modal se podrá cerrar dando click por fuera del modal | boolean | SI |
keyboard | Indica si el modal se podrá cerrar presionando la tecla ESC | boolean | SI |
onHide | Función que se ejecutará al momento de dar click en botón de cerrar modal ubicado en la parte superior derecha | function | NO |
title | Contenido que será mostrado en la cabecera del modal | string | NO |
body | Contenido que será mostrado en el cuerpo del modal | HTML, string, array, function | SI |
buttons | Contenido que será mostrado en la parte inferior del modal | array of button | SI |
La propiedad buttons
debe tener la siguiente estructura:
buttons: [
{
label: string - required,
className: string - optional,
onClick: function - required
}
]
<ConfirmModal />
import { ConfirmModal } from 'ms-react-commons';
Componente utilizado para mostrar modales para confirmación de procesos, se utiliza el componente Modal para crear su visualización, recibe las siguientes propiedades para personalizar la información y estilo:
Propiedad | Descripción | Tipo de Dato | Obligatoria |
---|---|---|---|
animation | Indica si el modal se mostrará y ocultara con animación | boolean | NO |
onCancel | Función que se ejecutará al momento de dar click en botón de cerrar modal ubicado en la parte superior derecha y en el botón de cancelación ubicado en la parte inferior del modal | function | SI |
onAccept | Función que se ejecutará al momento de dar click en botón de aceptación ubicado en la parte inferior del modal | function | SI |
title | Contenido que será mostrado en la cabecera del modal | string | SI |
body | Contenido que será mostrado en el cuerpo del modal | HTML, string, array, function | SI |
acceptButton | Propiedades para el botón de aceptación | button | NO |
cancelButton | Propiedades para el botón de cancelación | button | NO |
Las propiedades acceptButton
y cancelButton
deben tener la siguiente estructura:
buttons: [
{
label: string - optional,
className: string - optional
}
]
Se encuentrá disponible la función confirmModal
para ejecutar el componente <ConfirmModal />
por medio de una función:
import { confirmModal } from 'ms-react-commons';
...
handleOpenModal = () => {
confirmModal({
onCancel: () => console.log("Cancel click"),
onAccept: () => console.log("Accept click"),
title: "Example",
body: () => <p>Example body</p>,
acceptButton: {
label: 'Accept',
className: 'btn btn-primary'
}
});
}
...
Internacionalización
import { i18n } from 'ms-react-commons';
var properties = {
...
};
i18n(properties);
Función encargada de configurar la internacionalización a partir de archivos ubicados en la carpeta public/locales/[ns]/translation.json
en la raíz del proyecto:
my-app
└── public
└── locales
├── en
│ └── translation.json
├── es
│ └── translation.json
└── fr
└── translation.json
La función recibe los propiedades de configuración las cuales pueden ser consultadas aquí
License
Create React App is open source software licensed as MIT.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago