empower-custom-container v0.1.9

Getting Started with Empower Container Component

Sample Usage

import { MenuBar, Modal }  from react-empower-container;

const menuBarConfig =  {
    config: {
        isWidget: true,
        withTalent: true,
        iconType: ["standard"],
        showInfo: true,
        title: "Sample title ",
        icon: "Sample icon"
    },
    button: {
        show: true,
        actions: [
            {
                show: true,
                label: "Sample label",
                action: "Sample action"
                icon: "Sample icon"
            },
        ]
    },
    search: {
        show: false,
        value: "Sample value"
    },
    pagination: {
        show: true,
        hideSummary: true,
        counter: 10,
        perPage: 10,
        page: 1,
        total: 0,
    },
    pivot: {
        show: true,
        inputElement: {
            id: 'statPivot',
            type: 'select',
            placeholder: 'Sample placeholder',
            options: ["sample options"],
            value: 30,
            disabled: true,
            required: true,
            hideClearIcon: true
        }
    },
    check: {
        disabled: true,
        selected: 0,
        total: 0
    },
    toggle: {
        buttons: [
            {
                icon: "Sample icon,
                selectedIconDisplay: "Sample icon",
                value: 'activated'
            },
            {
                icon: "Sample icon",
                selectedIconDisplay: "Sample icon",
                value: 'deactivated'
            }
        ]
    },
    mainButton: {
        show: true,
        label: 'Sample Label',
        icon: 'Sample icon",
        actions: []
    },
    buttonFooter: {
        show: true,
        className: 'buttonFooter',
        actions: [
            {
                show: true,
                label: 'Sample Label',
                action: 'sample action',
                icon: "Sample icon",
                className: 'button'
            }
        ]
    },
    undoButton: {
        show: true,
        actions: [
            {
                show: true,
                label: "Sample label",
                action: "submit",
                icon: "Sample icon,
                timer: "Number of seconds",
                disabled: true
            }
        ]
    },
    customClass: "Sample class name",
    info: "Sample text",
}

const modalConfig =  {
    config: {
        isWidget: true,
        withTalent: true,
        iconType: ['close', 'standard'],
        showInfo: true,
        modalSize: 'lg',
        contentOnly: false,
        title: 'Sample title',
        icon: 'Sample icon"
    },
    show: this.props.show,
    modalTitle: "Process Request",
    button: {
        show: true,
        actions: [
            {
                show: true,
                label: "Sample label",
                action: "sample action"
                icon: "Sample icon"
            },
        ]
    },
    hideMenuBar: true
   
}

<MenuBar 
    config={menuBarConfig}
    getActions={(action, data) => this.getActions(action, data)}
/>

<Modal 
    config={modalConfig}
    getActions={(action, data) => this.getActions(action, data)}
/>