🔹 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 --save
🔹 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
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
config: {
show: true,
icon: SVG_USER,
iconType: ['back', '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 (Checkbox)
Configuration
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
config: {
show: true,
iconType: ['check', 'close'],
showInfo: false,
title: 'Displays',
},
check: {
disabled: false,
selected: 0,
total: 5
}
})
/**
*
* 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 (Checkbox With Selected)
Configuration
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
config: {
show: true,
iconType: ['check', 'close'],
showInfo: true,
title: 'Displays',
},
check: {
disabled: false,
selected: 2,
total: 5
}
})
/**
*
* 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 (Checkbox With All Selected)
Configuration
import { Modal } from 'empower-container';
..............
let [contentModal, setContentModal] = useState({
show: true,
config: {
show: true,
iconType: ['check', 'close'],
showInfo: true,
title: 'Displays',
},
check: {
disabled: false,
selected: 5,
total: 5
}
})
/**
*
* 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 with Info
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 with Button
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....",
button: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "readytosubmit", // string optional
icon: SVG_SUBMIT
}]
}
})
/**
*
* 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 with Footer Button
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....",
buttonFooter: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "footer-submit", // string optional
icon: SVG_SUBMIT,
show: true
}]
}
})
/**
*
* 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 with Dropdown (Monthly Calendar)
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....",
dropdown: {
show: true,
title: 'File Test',
type: 'date-picker-monthly',
selection: {
startDate: "Feb 2021",
endDate: "Feb 2021",
},
}
})
/**
*
* 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 with Pagination
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....",
pagination: {
show: true,
hideSummary: false,
counter: 10,
perPage: 10,
page: 1,
total: 35,
}
})
/**
*
* 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>
</>
)
🔹  Properties
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
activities | Array | Required | Display the data from the object inside the array |
🔹 References
Repository Link: https://gitlab.com/empowerteams/empower-display.git
NPM Package: https://www.npmjs.com/package/empower-display
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git