Menu Bar

🔹 Description

Menubar is a component wherein it dictates the title, information, functionality or actions that can be used in a specific widget or page.

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm install empower-container --save

🔹 Menubar Basic Config (Icon)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: false,
            title: 'Displays',
        },
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar Basic Config (Back Icon)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['back'],
            showInfo: false,
            title: 'Displays',
        },
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar Basic Config (Checkbox)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar Basic Config (Checkbox With Selected)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar Basic Config (Checkbox With All Selected)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar Basic Config with Info

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Button

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Footer Button

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Dropdown (Monthly Calendar)

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Pagination

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Main Button

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Pivot

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Search

Configuration

import { MenuBar } from 'empower-container';

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

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            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 (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Properties

Parameter	Data Type	Constraint	Description
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
info	String	Optional	Display value of the popup information.
pagination	Object	Optional	Display the pagination feature in the right side of the menubar. show = Boolean hideSummary = Boolean counter = Number perPage = Number page = Number total = Number
buttonFooter	Object	Optional	Display set of buttons to the bottom of the menubar. 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 menubar. 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 menubar. 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)

🔹 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