empower-custom-infocomponent

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Property

A list of property that may pass and use for the component.

• Icon - can be SVG or HTML tag
• Title - can be String or HTML tag
• Content - can be String or HTML tag
• SubContent - can be String or HTML tag
• Remarks - String only
• Attachment - Array only and the object inside should have a 'filename' key
• TimeStamp - can be String or HTML tag
• History - Array only and the object can have this set of key
• GetActions - Function to get the action from the component

Installation

npm install empower-custom-infocomponent

Usage

import InfoComponent from 'empower-custom-infocomponent';

let sampleData = {
    icon: SVG_REQUEST,
    title: 'REQUEST DETAILS',
    content: '(CONTENT) Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    subContent: '(SUBCONTENT) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
    remarks: '(REMARKS) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
    attachment: [{ filename: "sample1.jpg"}, { filename: "sample2.jpg"}],
    timestamp: 'Tue, 12 Oct 2021 at 11:24 AM',
    history: [
    {
        status: 'APPROVED',
        content: 'CONTENT',
        subContent: 'SUBCONTENT',
        remarks: 'REMARKS',
        attachment: [{ filename: "sample1.jpg"}, { filename: "sample2.jpg"}],
        timestamp: 'TIMESTAMP',
    }
    ]
}

const getActions = (action, data) => {
    console.log(action, data)
}

return <div>
    <InfoComponent 
    {...sampleData} 
    getActions={(action, data) => getActions(action, data)}
    />
</div>