cobrains-react v0.3.8
React Js components library based on Material UI Next
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
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
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago