Page Comparison

...

Code Block
npm install empower-container --save

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: true,
        configcustomClass: {"test",
            showhideMenuBar: true,
            iconconfig: SVG_USER,{
            iconTypemodalSize: ['standardmd',
'close'],        },
    showInfo:})
true,    
    /**
   title: 'Displays', * 
     * },getActions - method that gets the value and data info:of "Samplethe information here....",component
     })
    
    /**
     * 
     * 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>
    </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: true,
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['backstandard', '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>
    </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: true,
        config: {
            show: true,
            iconTypeicon: ['check'SVG_USER,
'close'],             showInfoiconType: false,
            title: 'Displays',
 ['back', 'close'],
      },         checkshowInfo: {true,
            disabledtitle: false'Displays',
            selected: 0},
            totalinfo: 5"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>
    </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: true,
        config: {
            show: true,
            iconType: ['check', 'close'],
            showInfo: truefalse,
            title: 'Displays',
        },
        check: {
            disabled: false,
            selected: 20,
            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>
    </>
  )

...

Configuration

Code Block

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: 52,
            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>
    </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: true,
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standardcheck', 'close'],
            showInfo: true,
            title: 'Displays',
        },
        infocheck: {
"Sample information here..."     })     disabled: false,
   /**      *   selected: 5,
  * getActions - method that gets the value and data oftotal: the5
component      */  }
   const getActions})
= (value, data) =  
    /**
     * 
     * 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>
    </>
  )

...

Configuration

Code Block

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,    * getActions - method that gets the value and actions:data [{of the component
     */

    const getActions = class: 'button',
 (value, data) => {
        console.log('VALUE', value, data)
   label: "Submit", }
    
..............

  return (
    <>
action: "readytosubmit",     <Modal  // string optional
    { ...contentModal } getActions={(action, data) => getActions(action, data)}>
          <div>
icon: SVG_SUBMIT             }]
<label>Children here...</label>
       }   </div>
 })     </Modal>
    </**>
  )

...

Configuration

Code Block

import { Modal *} from      * getActions - method that gets the value and data of the component'empower-container';

..............

  let [contentModal, setContentModal] = useState({
        show: */true,
     const getActions = (value, data) => config: {
        console.log('VALUE', value, data)  show: true,
 }      ..............    return (
icon: SVG_USER,
   <>       <Modal  { ...contentModal } getActions={(action, data) => getActions(action, data)}>iconType: ['standard', 'close'],
            showInfo: true,
 <div>           title: 'Displays',
  <label>Children here...</label>     },
     </div>   info: "Sample information  </Modal>here....",
     </>   )

...

Configuration

Code Block

importbutton: {
 Modal   } from 'empower-container';  ..............    letshow: [contentModaltrue,
 setContentModal] = useState({         showactions: [{
 true,         config: {     class: 'button',
      show: true,         label: "Submit",
  icon: SVG_USER,             iconTypeaction: ['standard', 'close']"readytosubmit",       // string optional
   showInfo: true,             titleicon: 'Displays',SVG_SUBMIT
        },    }]
    info: "Sample information here....", }
    })
  buttonFooter: { 
    /**
     * 
show: true,    * getActions - method that gets the value and actions:data [{of the component
     */

    const getActions = (value, data) => {
class: 'button',       console.log('VALUE', value, data)
    }
    
 label: "Submit",
  ..............

  return (
    <>
      <Modal  { ...contentModal }  action: "footer-submit"getActions={(action, data) => getActions(action, data)}>
  // string optional      <div>
              icon: SVG_SUBMIT,<label>Children here...</label>
          </div>
      </Modal>
  show: true </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

}]  let [contentModal, setContentModal] = useState({
  }     }) show: true,
       /** config: {
   *       * getActions -show: methodtrue,
that gets the value and data of the component    icon: SVG_USER,
*/      const getActions = (value, data) => {
 iconType: ['standard', 'close'],
      console.log('VALUE', value, data)    showInfo: }true,
     ..............    return (  title: 'Displays',
 <>       <Modal},
 { ...contentModal } getActions={(action, data) => getActions(action, data)}>       info: "Sample information here....",
        buttonFooter: { 
<div>            show: true,
 <label>Children here...</label>           </div>actions: [{
      </Modal>     </>   )

...

Configuration

Code Block

import { Modal } from  class: 'empower-container';

..............button',
       let [contentModal, setContentModal] = useState({         showlabel: true"Submit",
 
      config: {             showaction: true"footer-submit",       // string optional
   icon: SVG_USER,             iconType: ['standard', 'close'], icon: SVG_SUBMIT,
          showInfo: true,         show: true
  title: 'Displays',         },]
        info:}
"Sample information here....",  })
    
 dropdown: {  /**
     * 
   show: true, * getActions - method that gets the value and data of the title:component
'File Test',    */

    const getActions  type: 'date-picker-monthly'= (value, data) => {
         selection: {console.log('VALUE', value, data)
    }
    
..............

  return (
startDate: "Feb 2021",  <>
      <Modal  { ...contentModal } getActions={(action, data)  endDate: "Feb 2021",=> getActions(action, data)}>
          <div>
  },         }   <label>Children  })here...</label>
          </**div>
     * </Modal>
    </>
* getActions - method that gets the value and data of the component
     */ )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({
      const getActions =show: (valuetrue,
 data) => {     config: {
  console.log('VALUE', value, data)        }  show: true,
  ..............    return (     <>
icon: SVG_USER,
     <Modal  { ...contentModal } getActions={(action, data) => getActions(action, data)}>iconType: ['standard', 'close'],
          <div>  showInfo: true,
           <label>Children here...</label>
 title: 'Displays',
        },
</div>       </Modal> info: "Sample   </>
  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

..............

  let [contentModal, setContentModal] = useState({information here....",
        dropdown: {
            show: true,
        config: {   title: 'File Test',
        show    type: true'date-picker-monthly',
            iconselection: SVG_USER,{
            iconType: ['standard', 'close'],  startDate: "Feb 2021",
        showInfo: true,       endDate: "Feb 2021",
   title: 'Displays',         },
        info:}
"Sample information here....",  })
    
 pagination: {  /**
     * 
   show: true, * getActions - method that gets the value and data of the hideSummary:component
false,     */

    const getActions counter:= 10(value, data) => {
         perPage: 10,
console.log('VALUE', value, data)
    }
    
 page: 1,..............

  return (
    <>
   total: 35,  <Modal  {     }
    })
  ...contentModal } getActions={(action, data) => getActions(action, data)}>
      /**    <div>
 *       * getActions - method that gets the value and data of the component<label>Children here...</label>
          *</div>
      const</Modal>
getActions = (value, data) =</>
{  )

...

Configuration

Code Block

import { Modal } from 'empower-container';

console.log('VALUE', value, data)
    }
    
..............

  returnlet ([contentModal, setContentModal] = useState({
 <>       <Modal  { ...contentModal } getActions={(action, data) => getActions(action, data)}>show: true,
        config: {
    <div>        show: true,
     <label>Children here...</label>      icon: SVG_USER,
            iconType: ['standard', 'close'],
            showInfo: true,
            title: 'Displays',
     </div>   },
   </Modal>     </>
  )

...

Parameter

...

Data Type

...

Constraint

...

Description

...

activities

...

Array

...

Required

...

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>
    </>
  )

...

Configuration

Code Block

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....",
        search: {
            show: true,
            value: ''
        }
    })
    
    /**
     * 
     * 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>
    </>
  )

Image Added

Configuration

Code Block

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....",
        pivot: {
            show: true,
            selected: 'all',
            actions: [
                {
                    label: "All",
                    value: "all",       // string optional
                },
                {
                    label: "Pending",
                    value: "pending",       // string optional
                },
                {
                    label: "Approved",
                    value: "approved",       // string optional
                },
                {
                    label: "Rejected",
                    value: "rejected",       // string optional
                },
                {
                    label: "Cancelled",
                    value: "cancelled",    // string optional
                },
            ]
        }
    })
    
    /**
     * 
     * 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>
    </>
  )

Image Added

Configuration

Code Block

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....",
        mainButton: {
            show: true,
            label: 'File a Request',
            icon: SVG_ADD,
            actions: [
                {
                    
                    label: "File Leave",
                    action: "leave",       // string optional
                    icon: SVG_SUBMIT
                },
                {
                    label: "File Overtime",
                    action: "overtime",       // string optional
                    icon: SVG_SUBMIT
                },
        
                {
                    label: "File Toil",
                    action: "toil",       // string optional
                    icon: SVG_SUBMIT
                },
        
                {
                    label: "File Amendment",
                    action: "amendment",       // 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>
    </>
  )

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. show = Boolean icon = SVG iconType = Array (standard, check, back and close) showInfo = Boolean title = String modalSize = String (sm, md, lg)
info	String	Optional	Display value of the popup information.
pagination	Object	Optional	Display the pagination feature in the right side of the modal. show = Boolean hideSummary = Boolean counter = Number perPage = Number page = Number total = Number
buttonFooter	Object	Optional	Display set of buttons to the bottom of the modal. show = Boolean actions = Array (class = String, label = String, action = String, icon = SVG, show = Boolean)
button	Object	Optional	Display set of buttons in the upper left part of the modal. show = Boolean actions = Array (class = String, label = String, action = String, icon = SVG, show = Boolean)
search	Object	Optional	Display search bar field. show = Boolean value = String
pivot	Object	Optional	Display a dropdown at the upper right of the modal. show = Boolean selected = String actions = Array (label = String, value = String)
check	Object	Optional	It handles the selected and the total value that will response on the display for the main checkbox at the menubar. disabled = Boolean selected = Number total = Number 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. show = Boolean label = String icon = SVG actions = Array (label = String, Icon = SVG, action = String)

Repository Link: https://gitlab.com/empowerteams/empower-displaycontainer.git

NPM Package: https://www.npmjs.com/package/empower-displaycontainer

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

...

Versions Compared

Old Version 1

New Version 2

Key

Page Comparison

Versions Compared

Old Version 1

New Version 2

Key

🔹 Modal Basic Config (

Hide MenuBar)

🔹 Modal Basic Config (

Icon)

🔹 Modal Basic Config (

Back Icon)

🔹 Modal Basic Config (Checkbox

)

🔹 Modal Basic Config (Checkbox With

Selected)

🔹 Modal Basic Config

(Checkbox With All Selected)

🔹 Modal Basic Config with

Info

🔹 Modal with Button

🔹 Modal with Footer Button

🔹 Modal with Footer Button

🔹 Modal with Dropdown (Monthly Calendar)

🔹 Modal with Dropdown (Monthly Calendar)

🔹 Modal with Pagination

🔹 Modal with Pagination

🔹 Properties

🔹 Modal with Search

🔹 Modal with Pivot

🔹 Modal with Main Button

🔹 Properties

🔹 References