0.1.4 • Published 2 years ago
meta-renderer-react v0.1.4
React meta renderer
React renderer for a forms designed using meta-framework.
Examples:
Primitive form:
Allows to represent data model using primitive controls:
primitives1
andprimitives4
are bound to same data, so changing data in first automatically replicate data in secondprimitive2
strict bound to numeric type, so numeric textbox is used to represent this data modelprimitive3
is bool field, so checker is good option to represent
{
name: 'generalPurposeForm',
ui: {label: 'Primitive elements and behaviors'},
items: [
{ name: 'primitives1', binding: 'b1', renderer: 'textbox',
ui: {label: 'String field (enter here and see result in label3 as both bound to same data path)'} },
{ name: 'primitives2', binding: 'b2', renderer: 'textbox',
ui: {label: 'Number field'}, type: 'number' },
{ name: 'primitives3', binding: 'b3', renderer: 'textbox',
ui: {label: 'Boolean field'}, type: 'bool' },
{ name: 'primitives4', binding: 'b1', renderer: 'label',
ui: {label: 'String readonly field (bound to first string field)'}}
]
}
Dictionary forms
Allows representing dropdown list as a datasource for specific data models. Once selected - data is merged into datasource by path.
static-dropdowns-1
is bound to dictionarystatic
that is defined as part of form declaration, so dropdown will be rendered with list of options from this dictionarystatic-dropdowns-2
is a label that bound tob1.key
field (whenb1
is source of selected dictionary value), so will represent selectedkey
fieldstatic-dropdowns-3
is a label that bound tob1.name
field, so will represent selectedname
fielddynamic-dropdowns-1
and all surrounding labels has same nature, but only dictionary itself is bound to external datasource, specified by URLhttps://restcountries.eu/rest/v2/all
{
name: 'dictionaryForm',
ui: {label: 'Dictionary Form'},
items: [
{ name: 'static-dropdowns', renderer: 'container', ui: {'label': 'Static dictionary form'},
items: [
{ name: 'static-dropdowns-1', binding: 'b1', dictionary: 'static', renderer: 'dropdown',
ui: {label: 'Dictionary with static content'}},
{ name: 'static-dropdowns-2', binding: 'b1.key', renderer: 'label',
ui: {label: 'String readonly field (bound to dropdown selected key field)'}},
{ name: 'static-dropdowns-3', binding: 'b1.name', renderer: 'label',
ui: {label: 'String readonly field (bound to dropdown selected value field)'}}
]},
{ name: 'dynamic-dropdowns', renderer: 'container', ui: {'label': 'Dynamic dictionary form'},
items: [
{ name: 'dynamic-dropdowns-1', binding: 'b1', dictionary: 'https://restcountries.eu/rest/v2/all', renderer: 'dropdown',
ui: {displayProperty: 'demonym', label: 'Dictionary with static content'}},
{ name: 'dynamic-dropdowns-2', binding: 'b1.cioc', renderer: 'label',
ui: {label: 'String readonly field (bound to dropdown selected key field)'}},
{ name: 'dynamic-dropdowns-3', binding: 'b1.name', renderer: 'label',
ui: {label: 'String readonly field (bound to dropdown selected value field)'}}
]}
], dictionaries: {
static: [
{key: 1, name: 'first'},
{key: 2, name: 'second'},
{key: 3, name: 'third'}
]
}
}