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

Version 1 Next »

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

Parameter

Data Type

Constraint

Description

activities

Array

Required

Display the data from the object inside the array
badge = SVG
desc = String
status = String
date = String

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

  • No labels