React Js components library based on Material UI Next

• Installation
• Components
• Support
• License

Installation

Run on your project the command

npm install --save cobrains-react
npm install @material-ui/core

Components

Below the list of all components present in the cobrains-react

• API Message Control
• BreadCrumbs
• Table Generator

ApiMessageControl

A ready component that using redux show a snackbar message using the error response status

<ApiMessageControl />

on the Api Call error set redux with

this.props.onUpdateApiControl(err, 'auth', this.props.intl, 'Username e/o Password errati') 

BreadCrumbs

A breadcrumbs component that use the router redux structure

<BreadCrumbs background={'#000'}
             color={'#fff'}
             fontSize={12} />

CrudDialog

A dialog component with generated form using a array objecj structure

<CrudDialog title={'Create user'}
            message={'Compile the below fields to add a user'}
            submitText={'Create'}
            fields={userFields}
            data={userSelected[0]}
            loader={false}
            open={true}
            onClose={() => this.setState({openAddDialog: false})}
            onCreate={(newUser) => console.log(newUser)}
            dialogProps={theme.CrudDialog.dialogProps} />

Props

title

(string)

The title of the dialog

message

(string)

The subtitle of the dialog

submitText

(string)

The text on the confirm button

fields

(objects array)

The data structure that define the crud

const user: [
        {key: 'username', label: 'Username', required: true, type: 'text', visible: true},
        {key: 'first_name', label: 'First Name', required: true, type: 'text', visible: true},
        {key: 'type', label: 'Type', required: true, type: 'select', visible: true
                 values: [
                    {key: 'SA', value: 'SA', label: 'Super Admin'},
                    {key: 'CA', value: 'CA', label: 'Customer Admin'}
                  ],
        },
        {type: 'divider', label: 'Insert on this section '},
        {type: 'br'},
]

data

(objects array)

The data values of the crud

loader

(boolean)

Show a loader on button confirm during the api call

open

(boolean)

Define if the dialog is open

onClose

(function)

Called when the dialog closed

onCreate

(function)

Called on create/edit of the crud, return a the data serialized

dialogProps

(object)

Additional props/options for the dialog, it is possible to set a red dialog full page using

dialogProps: {
    fullWidth: true,
    fullScreen: false
    style: {background: 'red'}
}

TableGenerator

Generate a table using a array of objects

<TableGenerator fields={fields}
                data={users}
                {...otherProps}/>

Props

searchColumnsFilter

(boolean)

Define if it is present a button to enable the filter search on column

checkboxColumn

(boolean)

Define if the first column has the checkboxs for the row selection

data

(objects array)

The data values of the table

const users = [
   {username: `username 1`, first_name: `name 1`, last_name: `surname 1`},
   {username: `username 2`, first_name: `name 2`, last_name: `surname 2`},
   {username: `username 3`, first_name: `name 3`, last_name: `surname 3`}
]

fields

(objects array)

The data structure that define the table

const fields = [
   {key: 'username', columnName: 'Username', type: 'input', editable: true},
   {key: 'first_name', columnName: 'First name'},
   {key: 'last_name', columnName: 'Last name'},
   {key: 'company.name', columnName: 'Company name'},
]

Note: using the "." (dot) separator in the name of the key get the value in the different nodes of the object.

Available types

text

simple text

input

Textfield for input

date

date with format (DD/MM/YYYY hh:mm:ss)

select

select (have to add values:[] in the fields structure)

textOverflow

For long text, truncate the text and show a popup on hover

loader

(boolean)

Show a loader on table

filterIcon

(<Icon>)

Custom icon for filter

rowPerPage

(number)

Default row per page option

maxSelectableElements

(number)

Max number of elements selectable by checkbox - only for checkbox enable

renderItemCell

(function)

Can use this props to override the cell component in the table

<TableGeneratorCell>
        {({component}) =>
          <TableGenerator
            fields={fields}
            data={users}
            renderItemCell={component}
            {...otherProps}
          />
        }
</TableGeneratorCell>

TableGeneratorCell is component with a function as children, on the below the sample structure

import React, {Component} from 'react'

export default class TableGeneratorSettings extends Component {
    state = {
      component: (value, keyName, DefaultComponent) => {
        switch (keyName.type) {
        case 'customType': return (<div>This is a custom cell {value}</div>)
        default: return DefaultComponent
        }
      }
    };
    render() {return (<div>{this.props.children({...this.props, ...this.state})}</div>)}
}

selectedElements

(object array)

The list of elements selected for sync between table generator and own component

onChangePage

(function)

Called when table page change, return the active page

onChangeSelected

(function)

if checkboxColumn prop is true, return an object with the list of row selected

onFiltersChange

(function)

Called when a filter on column change, return a ready structure {key: value}

Components without documentation

DevelopmentDrawer
FormDialog
FileInput
FullScreenLogoLoader
FunctionsToolbar
HorizontalScrollContainer
PrivateAccess
ReactUtils
Routing
Search
SelectAutocomplete
StayConnected
Utils

CLI

Support

Reach out to us at one of the following places!

• Website at co-brains.com

License

• MIT license