Modal
- Regino Victorino (Unlicensed)
- Dio Danganan (Unlicensed)
Description
Modal similar to menubar is a component wherein it dictates the title, information, functionality or actions that can be used in a specific widget or page the only difference is that it is a pop up window.
System Dependencies
Installation
The package can be installed via npm:
npm install empower-container --saveModal Basic Config (Hide MenuBar)
Configuration
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
customClass: "test",
hideMenuBar: true,
config: {
modalSize: 'md'
},
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<Modal { ...contentModal } getActions={(action, data) => getActions(action, data)}>
<div>
<label>Children here...</label>
</div>
</Modal>
</>
)Modal Basic Config (Icon)
Configuration
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
config: {
show: true,
icon: SVG_USER,
iconType: ['standard', 'close'],
showInfo: true,
title: 'Displays',
},
info: "Sample information here....",
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<Modal { ...contentModal } getActions={(action, data) => getActions(action, data)}>
<div>
<label>Children here...</label>
</div>
</Modal>
</>
)Modal Basic Config (Back Icon)
Configuration
Modal Basic Config (Checkbox)
Configuration
Modal Basic Config (Checkbox With Selected)
Configuration
Modal Basic Config (Checkbox With All Selected)
Configuration
Modal Basic Config with Info
Configuration
Modal with Button
Configuration
Modal with Footer Button
Configuration
Modal with Dropdown (Monthly Calendar)
Configuration
Modal with Pagination
Configuration
Modal with Search
Configuration
Modal with Pivot
Configuration
Modal with Main Button
Configuration
Properties
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
show | Boolean | Required | Determine if the modal will show or not. |
hideMenuBar | Boolean | Optional | Determine if the modal will have an menubar function. |
customClass | String | Optional | Determine if the modal will have an additional custom class. |
config | Object | Required | Display the basic config including icon, title and info. |
info | String | Optional | Display value of the popup information. |
pagination | Object | Optional | Display the pagination feature in the right side of the modal. |
buttonFooter | Object | Optional | Display set of buttons to the bottom of the modal. |
button | Object | Optional | Display set of buttons in the upper left part of the modal. |
search | Object | Optional | Display search bar field. |
pivot | Object | Optional | Display a dropdown at the upper right of the modal. |
check | Object | Optional | It handles the selected and the total value that will response on the display for the main checkbox at the menubar. *Note: check property will not use if the there’s no check value iconType inside the config property. |
mainButton | Object | Optional | Display the main button and display a dropdown if its multiple. |
References
Repository Link: https://gitlab.com/empowerteams/empower-container.git
NPM Package: npm: empower-container
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git