react-igmweb v1.2.16

react-igmweb

Global component packages for React & Bootstrap4:

• Login
• Notification
• Alert Confirm
• Pagination
• Table
• Modal
• Typeahead
• Calendar
• Loader

Global utilities for React:

• DownloadCSV

Instalation

To install, you can use npm or yarn:

npm install react-igmweb --save

or

yarn add react-igmweb

Usage

Example:

import {
    IGMLogin,
    IGMNotification,
    IGMAlertConfirm,
    IGMPagination,
    IGMTable,
    IGMModal,
    IGMTypeahead,
    IGMUtilidades,
    IGMCalendar,
    IGMOnBeforeUnload,
    IGMLoader
} from 'react-igmweb';

Login

<IGMLogin 
    className="myLogin" 
    logo={logo} 
    description={description} 
    onLogin={(data)=>{/* object data*/}}/>

Notification

onLogin = (datos) => {
    IGMNotification({
        classContainer: 'myNotification',
        text: 'Mensaje de pruebas',
        type: 'success',
        timer: 2000
    })
}

/*text HTML*/
onLogin = (datos) => {
    IGMNotification({
        classContainer: 'myNotification',
        html: '<h1>Text h1</h1>',
        type: 'success',
        timer: 2000
    })
}

Alert confirm

onClickConfirm = () => {
    IGMAlertConfirm({
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#aaa',
        position: 'center',
        title: 'title',
        text: 'text',
        type: 'success',
        confirmButtonText:'Ok',
        cancelButtonText: 'Cancel',
        allowOutsideClick: false,
        preConfirm: ()=> {
            /*Function to execute before confirm, may be async (Promise-returning) or sync*/
            return fetch(`[URL]`)
              .then(response => {
                //..
                //onConfirm
                return {value:true} 
              })
              .catch(error => {
                //...
                //onConfirm
                return {value:true} 
              })
        },
        onConfirm: ()=> {
            console.log('confirm')
        },
        onCancel: ()=> {
            console.log('cancel')
        }
    })
}

Pagination

<IGMPagination 
    total={100} 
    itemsPag={5} 
    pag={pag} 
    onPagination={(pag) => {/* pag selected */}}/>

Table

<IGMTable
    className={"myTable"}
    header={header}
    visible={visible}
    body={body}
    pagination={pagination}
    selectItemPag={selectItemPag}
    options={options}    
    loading={loading}
    order={order}
/>

Example:

let header = [
    {key: 'col1', value: 'COLUMNA 1', className: 'text-left', order: 'asc'},
    {key: 'col2', value: 'COLUMNA 2', className: 'text-left'},
    {key: 'col3', value: 'COLUMNA 3', className: 'text-left'}
]

let body = [
    { col1: 0, col2: 1, col3: 3},
    { col1: 1, col2: 3, col3: 6},
    { col1: 2, col2: 5, col3: 9},
    { col1: 3, col2: 7, col3: 12},
    { col1: 4, col2: 9, col3: 15},
    { col1: 5, col2: 11, col3: 18}
]

let options = {
    table: {
        align: 'center',
        size: 'sm',
        color: 'dark',
        striped: false,
        bordered: true,
        borderless: false,
        hover: false
    },
    thead: {
        showHeaderResultados: true,
        showHeaderCabecera:true,
        textNone: 'No se ha encontrado registros',
        textOnly: 'Se ha encontrado {X} registro',
        textMore: 'Se ha encontrado {X} registros',
        color: 'light'
    },
    actions: ['get', 'update', 'delete', 'historial', 'export', 'create'],
    textActions: {
        get: 'Ver',
        update: 'Modificar',
        delete: 'Suprimir',
        historial: 'Cambios históricos',
        create: 'Nuevo',
        export: 'Descargar CSV',
    },
    callbacks: {
        onGet: (item, index) => {/**/},
        onUpdate: (item, index) => {/**/},
        onDelete: (item, index) => {/**/},
        onHistorial: (item, index) => {/**/},
        onExport: ()=> {/**/},
        onOrder: (item) => {/**/},
        onCreate: ()=> {/**/},
    },
    leyendas: [
        {text: 'No operativo', color: '#F45B67' }
    ],
    onColorRow: (item) => {
        /* Por si necesitamos colorear una row */
        if (item.col1 === 5) return '#F45B67'
        return ''
    },
    onFormatCell: (item, key, idxRow, idxCol, currentPage) => {
        /* Por si queremos formatear el valor de una celda */
        if (key === 'col1' && item[key] === 'S') return 'Sí'
        return item[key]
    },
    onFormatCellHead: (item, idxCol) => {   
        /* Por si queremos formatear el valor de una celda del thead */   
        if (item.key === 'col1') {
            return <button>*</button>
        }
        return item.value
    },
    onFormatCellAction: (item, index, action) => {
        /* Mostrar o ocultar el botón de action (get, update, delete, ..) en la celda de la fila segun sus datos */
        return true
    },
    onClassCell: (key, item, idxRow, idxCol) => {
        /* Por si queremos incluir classes de estilos a una celda (<td>)*/
        return ''
    },
    otherComponentsThead: () => {
        /* Añadir cualquier otro componente en el Thead */
        return (
            <>
                <button type="button" className="btn btn-sm btn-dark ml-1">Otro</button>
            </>
        )
    }
}

let visible = {
    show: true,
    cols: ['col1', 'col2', 'col3', 'col4'],
    onVisible: (data)=> {
        /* array visible keys columns */
        console.log('onVisible', data)
    }
}

let paginacion = {
    total: 100,
    itemsPag: 5,
    pag: 1,
    onPagination: (pag) => {/* pag selected */}
}

let selectItemPag = {
    options: ['5', '15', '30'],
    callback: (item) => {
        /* item selected */        
    }
}

let loading = {
    show: true,
    message: 'Loading, please wait',
    renderChildren: true,
    type: 'ball-beat',
    color: '#02a17c',
    export: true // loading exportar
}

let order = {
    cols: ['col2', 'col3', 'col4'], // show columns with order
}

Más info:

• https://availity.github.io/react-block-ui/
• https://github.com/ConnorAtherton/loaders.css

Modal

<IGMModal
    className="myModal"
    show={show}
    options={options} 
    disableConfirm={false}
    loading={false}>        
        <form>
            <label>Username</label>
            <input type="text" className="form-control"/>
        </form>        
</IGMModal>

Example:

const options = {
    title:'Enter username',
    onOk: (action) => {/* 'OK' */},
    onCancel: (action) => {/* 'CANCEL' */},
    onBackdrop: (action) => {/* 'OUT' */},
    onOther: (action) => {/* 'OTHER' */},
    onClose: (action) => {/* 'CLOSE' */},
    textOk: 'Ok',
    textCancel: 'Cancelar',
    size: '', // sm, lg (size modal)
    btSize: 'sm', // sm, lg (size button OK, Cancel)
    iconButton: true,
    iconOK: faCheck, // 'add', 'update', 'ok' or Object Font Awesome (ex: faUsers) --> import {faCheck} from "@fortawesome/free-solid-svg-icons";
    iconCancel: faTimes,
    colorOk: 'primary', // ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link')
    colorCancel: 'secondary',
    textOther:'back',
    colorOther:'info',
    iconOther: faAngleLeft,
    footer: {
        textHtml: '* Required fields'
    }
}

Typeahead

<IGMTypeahead
    isValid="{isValid}"
    mounted={flag}
    defaultInputValue={defaultInput}   
    isLoading={loading}
    config={config}
    options={options}
    onSearch={onSearch}
    onChange={onChange}
    onKeyDown={onKeyDown}
    clear={clear} 
    onBlur={onBlur}
    onInputChange={onInputChange}
    />
    

While the component relies primarily on Bootstrap for styles, some additional CSS is necessary for everything to behave correctly. You must include the provided CSS file in your project:

// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';

let config = {
    id: 'idsearch',
    promptText: 'No hay registro',
    searchText: 'Buscando...',
    labelKey: 'text',
    filterBy: ['text'], // List searching
    placeholder: 'Buscar...',
    minLength: 3,
    size: 'sm' // "large", "lg", "small", "sm"
}
    
const onSearch = (text) => {
    /* execute request */
    // ...
    setOptions([
        {id: '1', text: 'opcion 1'},
        {id: '2', text: 'opcion 2'},
        {id: '3', text: 'opcion 3'}
    ])
}

const onChange = (search) => {
    /* Object selected */
}
const onKeyDown = (e) => {
    console.log(e.key)
}
const onInputChange = (text) => {
    console.log(text)
}

Calendar

<IGMCalendar
    startDate={startDate}
    callback={(date, isEmpty) => { setStartDate(date) }}
/>

Loader

<IGMLoader
    isLoading={isLoading}
/>

Utilidades

DownloadCSV

DownloadCSV is a function that allows you to download a csv file from some data information.

import { IGMUtilidades } from 'react-igmweb'

IGMUtilidades.downloadCSV(fileName, dataCSV, DataType)

This function accepts three kind of data types:

• A string concatenated variable separating each value with symbols or characters like ';'.

let dataCSV = "name;city;age\nkoldo;barcelona;38\npedro;sabadell;25"

IGMUtilidades.downloadCSV('example', dataCSV, 'String')

• An array of arrays with the header in the first position: dataCSV0.

let dataCSV = [
    ["Name", "City", "Age"],
    ["Koldo", "Barcelona", 38],
    ["Jaime", "Málaga", 32],
    ["Javi", "Masnou", 35],
]

IGMUtilidades.downloadCSV('example', dataCSV, 'Arrays')

• An array of objects.

let dataCSV = [
    {name: 'Silvia', city:'Hospitalet', age: 32},
    {name: 'Silvia', city:'La Escala', age: 30},
    {name: 'Pedro Fernando', city:'Sabadell', age: 32}
]

IGMUtilidades.downloadCSV('example', dataCSV, 'Objects')