Mokkon's reactjs components

sainw 70f00565dd Merge branch 'master' of phyothandar/mokkon-reactjs into master 3 years ago
dist b7288e3634 update components 3 years ago
example b7288e3634 update components 3 years ago
src b7288e3634 update components 3 years ago
.editorconfig bf1a1856a7 add List 4 years ago
.eslintignore bf1a1856a7 add List 4 years ago
.eslintrc ad7d91306b add eslint config 3 years ago
.gitignore c14b2cb03d add dist 3 years ago
.prettierrc bf1a1856a7 add List 4 years ago
.travis.yml bf1a1856a7 add List 4 years ago
README.md fffef06910 add style for button 3 years ago
package-lock.json 10d2d2b739 v1.1.0 3 years ago
package.json 078302689a add style prop 3 years ago

README.md

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'
        },
  ]