Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

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.

The package can be installed via npm:

npm install empower-container --save

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

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

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

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

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

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

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

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

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

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

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

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....",
        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>
    </>
  )

 

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....",
        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>
    </>
  )

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....",
        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-container.git

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

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

  • No labels