Mokkon's reactjs components

sainw 446bb8c443 Merge branch 'master' of phyothandar/mokkon-reactjs into master 3 jaren geleden
dist d527798a88 fix eslint errors 3 jaren geleden
example d527798a88 fix eslint errors 3 jaren geleden
src d527798a88 fix eslint errors 3 jaren geleden
.editorconfig bf1a1856a7 add List 3 jaren geleden
.eslintignore bf1a1856a7 add List 3 jaren geleden
.eslintrc ad7d91306b add eslint config 3 jaren geleden
.gitignore c14b2cb03d add dist 3 jaren geleden
.prettierrc bf1a1856a7 add List 3 jaren geleden
.travis.yml bf1a1856a7 add List 3 jaren geleden
README.md d527798a88 fix eslint errors 3 jaren geleden
package-lock.json 10d2d2b739 v1.1.0 3 jaren geleden
package.json 10d2d2b739 v1.1.0 3 jaren geleden

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
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

Field Types

  • dropdown
  • text_string
  • text_number
  • text_multiline
  • list
  • photo_list
    • date
  • time

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

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