eternus-react-component v1.0.10

Eternus-React-Components

www.eternussolutions.com

React components inspired by react-bootstrap.

Available components

• Dropdown
• Login Component
• File Upload
• Export to Excel
• Modal Component

• Menu Component

Install

$npm install eternus-react-component

Dropdown

Usage

import {Dropdown} from "eternus-react-component";

export default class Sample extends Component {

    optionClicked = () => {
        ...
    }

    render() {
        const options = [
               {
                    optionName :"Action 1",
                    onClick:this.optionClicked,
                    Link :"#/action1",
                    icon :"fa fa-arrow-right"
                },
                {
                    ...
                }
           ];
        return (
            <div>;
                <Dropdown
                    title = "Dropdown"
                    variant = "success"
                    dropDirection = "down"
                    options = {options}
                    error = {true}
                    errorMessage = "error message"
                />
            </div>
        )
    }
}

Props

Common props you need to specify include:

Options array object keys

Login

Usage

import {Login} from "eternus-react-component";

export default class Sample extends Component {

    onChangeComponent=(e) => {
        ...
    }

    onSubmit =()=>{
        ...
    }

    render() { 
        return (
                <Login
                    title="Login"
                    usernameType="email"
                    usernamePlaceholder="Username" 
                    passwordPlaceholder="Password"
                    buttonTitle="Sign In"
                    onChange={this.onChangeComponent.bind(this)}
                    position="Left"  
                    username ="usernameValue"     
                    passwordName="userPasswordValue"   
                    usernameValue={this.state.usernameValue}
                    userPasswordValue={this.state.userPasswordValue}
                    error={false}
                    errorMessage="Invalid username or password"  
                    onSubmit= {this.onSubmit}  
                />
        )
    }
}

Props

Common props you need to specify include:

File Upload

Usage

import {FileUpload} from "eternus-react-component";

export default class Sample extends Component {

   getFiles = (files) => {
        //console.log("files",files)
    }
  render() {
 
        return (  
				<FileUpload  
					browseButtonTitle = "Browse"
					uploadButtonTitle = "Upload"
					accept = ".xls,.xlsx,.txt"
					size = {1} // size in kb
					multiple = {true}
                    variant = "success"
                    fileResponse = {this.getFiles}
				/> 
        )
    }
}

Props

Common props you need to specify include:

File response array structure after upload

[
	{
        name: "fileName.txt",
        lastModified: 1560493560484,
        lastModifiedDate: Fri Jun 14 2019 11:56:00 GMT+0530 (India Standard Time),
        webkitRelativePath: "",
        size: 967
    }
]

Export to excel

Usage

import {ExportToExcel} from "eternus-react-component";

export default class Sample extends Component {

   render() {
        const data= [
            {id : 1, name: 'name1', gender: 'female'},
            {id : 2, name: 'name2', gender: 'female'},
            {id : 3, name: 'name3', gender: 'male'},
            {id : 4, name: 'name4', gender: 'female'},
            {id : 5, name: 'name5', gender: 'male'},
        ]
        return (
            <div>
                <ExportToExcel 
                    variant="success" 
                    title="Export to excel" 
                    data={data} 
                    fileName="dataFile" 
                    sheetName="sheet1"/>
            </div>
        )
    }
}
}

Props

Common props you need to specify include:

Modal Component

Usage

import {Modal} from "eternus-react-component";

export default class Sample extends Component {
     
    this.state = {
            show: false
        }

    handleClose = () => {
        this.setState({
            show: !this.state.show
        });
    }

    handleShow = () => {
        this.setState({
            show: true
        });
    }

   render() {
        return (
            <div>
                <Modal
                        size="md"
                        variant="#FFCC00"
                        modalType="confirm"
                        show={this.state.show} 
                        handleClose={this.handleClose}
                        handleConfirm={this.handleShow}
                        modalHeading="Modal Heading"
                        modalMessage ="Modal Message"
                        confirmButtonText = "Save data"
                        cancelButtonText = "Ok"
                    />
            </div>
        )
    }
}

Props

Common props you need to specify include:

Menu Component

Usage

import {Menu} from "eternus-react-component";
import eternusLogo from "./eternus.png";
import profile from "./profile.png";
export default class Sample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            searchKey: ''
        };
    }
    onSearchKeyChange = (e) => {
        //...
    }

    onSearch = () => {
        //....
    }

    render() {
            const menuOptions = [{
                    name: "Dashboard",
                    url: "/",
                    icon: "fa fa-tasks"

                },
                {
                    name: "Home",
                    url: "/",
                    icon: "fa fa-home",
                    rootParent: true,
                    children: [{
                        name: "Link1",
                        url: "/",
                        icon: "fa fa-user",
                        children: [
                            //Upto any level
                        ]
                    }],
                }
            ]

            const profileOptions = [{
                name: "Logout",
                url: "#",
                icon: "fa fa-sign-out"
            }]

        return (
            <div>
                {/* --------- For horizontal menu ----------*/}
                <Menu 
                    alignment = "horizontal"
                    menuOptions={menuOptions}
                    logoUrl={eternusLogo}
                    brandName="Eternus"  //optional
                    profileUrl= {profile}
                    searchOption={true}
                    profileOptions={profileOptions}
                    onSearchKeyChange ={this.onSearchKeyChange}
                    searchKey = {this.state.searchKey}
                    onSearch = {this.onSearch} />

                {/* -------- For vertical menu ------------*/}
                <Menu 
                    alignment="vertical" 
                    menuOptions={menuOptions}
                    brandName="Eternus" //optional
                    logoUrl={eternusLogo}
                    />
            </div>
        )
    }
}

Props

Common props you need to specify include:

License

This project is licensed under the MIT License.