mokkon-reactjs

mokkon-reactjs

Mokkon's reactjs components

MkForm

Props

Name	Type	Default	Description
fields	Array of field object		Form fields
data	object		Form data
actions	Array of action object

Field object

Name	Type	Default	Description
field_name	string		Field name
label	string		Field label
type	string		Field type dropdown text_string Propstext_number text_multiline list photo_list date time
options	Array of selection object		Data objects for dropdown or autocomplete
can_create	boolean		To handle adding new object from dropdown or autocomplete
readonly	boolean		To handle for not editable form
option_label_field	string		Field name to get label of option in dropdown
style	object	{ buttonTextcolor: 'white' , primaryColor:'#0d47a11c' }	style object Button Text's color: buttonTextcolor Button's background color: primaryColor Example: { buttonTextcolor: 'white' , primaryColor:'lightBlue' }

Example of field object

    [ 
        {
        "type":"string",
        "label":"string",
        "field_name":"string",
        "options":[],
        "can_create":boolean,
        "readonly":boolean,
        "option_label_field":"string",
        } 
    ]

Action object

Name	Type	Default	Description
label	string		Action label
icon	icon		Action icon
callback	function		Action ( edit, delete, etc..)
status	string		Form data status

Example of action object

    { 
    "label": "string",
    "icon": icon,
    "callback": () => {}
     }

Data

Example of data object

    { 
   "field_name":"value",
   "field_name":"value",
     }

MkTable

Props

Name	Type	Default	Description
headers	Array of header object		Table headers
data	object		Form data
onActions	Array of action callback		Return function with data or event
actions	Array of action object
title	string		Item title (item, category,etc..)
order	string	asc	Order (asc, desc)
orderBy	string	name	Order by
rowsPerPage	number		Number of rows in page
noMoreToLoad	boolean		To handle end of data
isLoading	boolean		To Handle progressing
onChangePaginatePage	function		To Change page number
onGetData	function		To Get data list
onChangeRowPerPage	function		To change number of rows in page
dense	boolean	true	To handle table size
style	object	{ headerBackgroundColor: '#0d47a1a8', headerTextcolor: 'white' , primaryColor:'#0d47a11c' }	style object Table Header's background color: headerBackgroundColor Table Text's color: headerTextcolor Table even row's background color: primaryColor Example: { headerBackgroundColor: 'green', headerTextcolor: 'white' , primaryColor:'lightBlue' }

**Example of action object **

    { 
    "label": "string",
    "icon": icon element,
    "callback": () => {}
     }

Header object

Name	Type	Default	Description
id	string		Field name of data object
numeric	boolean		To handle numeric or not
disablePadding	boolean		Table cell padding
label	string		Label of Header
width	Array of action object		Tablecell width

**Example of header object **

    [
        {
        'id': 'sr', 
        'numeric': true,
        'disablePadding': false,
        'label': 'No.'
        },
        { 
            'id': 'name',
            'numeric': false,
            'disablePadding': false,
            'label': 'Name',
            'width': '200px'
        },
  ]