Getting Started with Tunerlabs Alert

npm i tunerlabs-alert

Usage

Importing

import {MyAlert} from 'tunerlabs-alert'

Showing Alert box ( Bootstrap )

<MyAlert  type='danger'  message={"Sorry  this  cant  be  done"}>

<MyAlert  type='warning'  message={"Sorry  this  cant  be  done"}>

Multiselect Checkbox

import {MultiSelectCheckbox} from 'tunerlabs-alert'

Using in form

<MultiSelectCheckbox
name="tags"
label="Selct as many you like"
errors={this.state.errors}  // errors from ValidatorJs
options={[{ id:  1, name:  'Shyam' }, { id:  2, name:  'Vinod' }, { id:  3, name:  'Abhishek' },]}
selectedOptions={this.state.tags}
onChange={(tags) => { this.setState({ tags:  tags }) }}
/>

Text / Number Input

import {TextInput} from 'tunerlabs-alert'


<TextInput
name="title"
label="Title"
value={this.state.title}
onInputChange={this.onChange}
errors={this.state.errors  ||  {}}
/>

Radio Input

import {RadioInput} from 'tunerlabs-alert'

<RadioInput
    label="Gender"
    name="gender"
    value={this.state.gender}
    onChange={this.onChange}
    options={[
        { id: 1, name: 'Male' },
        { id: 2, name: 'Female' },
        { id: 3, name: 'Others' },
    ]}
    errors={this.state.errors || {}}
/>

Popup

import { PopUp } from 'tunerlabs-alert'

Include the below container in your header component for global actions or if you can include anywhere in your current component

<PopUp.PopupPlaceHolder  />

For closing a popup you can simply call

PopUp.closePopup(); // you can call as apart of button events or inside lifecycle functions also 

For Opening a popup you can call the PopUp.showPopup() as below

    PopUp.showPopup({
    title: "Are you sure you want to delete?",
    content: <p>My popup component or the string text comes here</p>,
    buttons: [
        {
            class: "btn btn-primary",
            onClick: () => {
                //Do actions
                PopUp.closePopup();
            },
            text: "Delete",
        },
        {
            class: "btn btn-primary",
            onClick: () => {
                //do actions
                PopUp.closePopup();
            },
            text: "Cancel",
        },
    ],
});

If you are passing html as a string in content variable then you have to also sent contentType:'html' in showPopup function call, if you send as a component or dom element it is not necessary