Getting Started with Empower Container

1. Menubar
2. Modal

1) Menubar

Implementation

import { MenuBar } from 'empower-container';

Options

config: {
    title: 'Test Title',
    icon: SVG_REQUEST,
    showInfo: true,
    iconType: ['check', "back", 'standard']
}

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
        }
    ]
}

button {
    show: true
    actions: [{
        class: 'button',
        label: "Submit",
        action: "readytosubmit",       // string optional
        icon: SVG_SUBMIT
    }]
}

buttonFooter: { 
    show: true,
    actions: [{
            class: 'button',
            label: "Submit",
            action: "footer-submit",       // string optional
            icon: SVG_SUBMIT,
            show: true
    }]
}

pagination: {
    show: true,
    hideSummary: false,
    counter: 10,
    perPage: 10,
    page: 1,
    total: 35,
}

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
        },
    ]
}

dropdown: {
    show: true,
    title: 'File Test',
    type: 'date-picker-monthly',
    selection: {
        startDate: "Feb 2021",
        endDate: "Feb 2021",
    },
}

search: {
    show: true,
    value: ''
}

undoButton: {
    show: false,
    isFooter: true,
    actions: [
        {
            class: 'button disabled',
            show: true,
            label: "Submit",
            action: "submit",        
            icon: SVG_SUBMIT,
            timer: 3,
            disabled: true
        },
        {
            show: true,
            label: "Undo Request",
            action: "undo-request",        
            icon: SVG_UNDO
        },
    ]
}

check: {
    disabled: false,
    selected: 0,
    total: 1
}

info: 'Sample Information'

Usage

 <MenuBar
    config={menubar.config}
    mainButton={menubar.mainButton}
    button={menubar.button}
    pagination={menubar.pagination}
    pivot={menubar.pivot}
    dropdown={menubar.dropdown}
    search={menubar.search}
    undoButton={menubar.undoButton}
    buttonFooter={menubar.buttonFooter}
    check={menubar.check}
    info={menubar.info}

    getActions={(action, data) => getActions(action, data)}
 >
    <h2>CHILDREN DATA</h2>
</MenuBar>

2) Modal

Implementation

import { Modal } from 'empower-container';

Options

show: false,
hideMenuBar: false, //optional

config: {
    title: 'Test Title',
    icon: SVG_REQUEST,
    showInfo: true,
    iconType: ['standard', 'close'],
    modalSize: 'lg'
}

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
        }
    ]
}

button {
    show: true
    actions: [{
        class: 'button',
        label: "Submit",
        action: "readytosubmit",       // string optional
        icon: SVG_SUBMIT
    }]
}

buttonFooter: { 
    show: true,
    actions: [{
            class: 'button',
            label: "Submit",
            action: "footer-submit",       // string optional
            icon: SVG_SUBMIT,
            show: true
    }]
},

pagination: {
    show: true,
    hideSummary: false,
    counter: 10,
    perPage: 10,
    page: 1,
    total: 35,
}

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
        },
    ]
}

dropdown: {
    show: true,
    title: 'File Test',
    type: 'date-picker-monthly',
    selection: {
        startDate: "Feb 2021",
        endDate: "Feb 2021",
    },
}

search: {
    show: true,
    value: ''
}

undoButton: {
    show: false,
    isFooter: true,
    actions: [
        {
            class: 'button disabled',
            show: true,
            label: "Submit",
            action: "submit",       // string optional
            icon: SVG_SUBMIT,
            timer: 3,
            disabled: true
        },
        {
            show: true,
            label: "Undo Request",
            action: "undo-request",       // string optional
            icon: SVG_UNDO
        },
    ]
}

check: {
    disabled: false,
    selected: 0,
    total: 1
}

info: 'Sample Information'

Usage

<Modal
    config={menubar.config}
    mainButton={menubar.mainButton}
    button={menubar.button}
    pagination={menubar.pagination}
    pivot={menubar.pivot}
    dropdown={menubar.dropdown}
    search={menubar.search}
    undoButton={menubar.undoButton}
    buttonFooter={menubar.buttonFooter}
    check={menubar.check}
    info={menubar.info}

    getActions={(action, data) => getActions(action, data)}
>
        <h2>CHILDREN DATA</h2>
</Modal>

Changelog

• 0.1.24 - Fix close icon not appearing in info menubar
• 0.1.22 - Added close icon on info menubar
• 0.1.21 - Added mainbutton on modal
• 0.1.18 - Fixed dynamic root issues
• 0.1.17 - Fixed main button with single item issues