Skip to content

Embedded Components

Jump to bottom
Andrei Mourzenkov edited this page Jul 12, 2018 · 3 revisions

Table of Content

FieldInputComponent

Custom FieldInputComponent

A React Component for rendering Formatted Instance's field in Search Form or Create/Edit/Show Form.

Props:

Name Type Necessity Default Description
readOnly boolean optional false Whether field value can be changed
value serializable mandatory - Persistent field value formated to appropriate UI Type
onChange function mandatory - Handler called when component's value changes.
function(<serializable, new field value>) {
  ...
  return;  // return value is ignored
}
onBlur function optional - Handler called when component loses focus.
function() {
  ...
  return;  // return value is ignored
}

Embedded FieldInputComponent

In CRUD Editor here are two embedded FieldInputComponents:

FieldInputComponent id
BUILTIN_INPUT "input"
BUILTIN_RANGE_INPUT "rangeInput"

For being treated as embedded, string id must be used. Additionally, the embedded FieldInputComponents can be imported from CRUD Editor package:

import { BUILTIN_INPUT, BUILTIN_RANGE_INPUT } from '@opuscapita/react-crudeditor';

Embedded FieldInputComponents also accept all props defined for FieldInputComponent.

BUILTIN_INPUT

Singular input field.

props.type Description UI Type Auto-convertable field types
string Regular input field which works with strings UI_TYPE_STRING FIELD_TYPE_STRING, FIELD_TYPE_BOOLEAN, FIELD_TYPE_DECIMAL, FIELD_TYPE_INTEGER, FIELD_TYPE_STRING_DATE, FIELD_TYPE_STRING_DECIMAL, FIELD_TYPE_STRING_INTEGER
checkbox Checkbox UI_TYPE_BOOLEAN FIELD_TYPE_BOOLEAN
date DateInput UI_TYPE_DATE FIELD_TYPE_STRING_DATE
integer Input which accepts only numbers and - sign and formats using i18n.formatNumber UI_TYPE_INTEGER FIELD_TYPE_STRING_INTEGER, FIELD_TYPE_INTEGER, FIELD_TYPE_BOOLEAN, FIELD_TYPE_STRING
decimal Input which accepts only numbers and - sign and formats using i18n.formatDecimalNumber UI_TYPE_DECIMAL FIELD_TYPE_STRING_DECIMAL, FIELD_TYPE_DECIMAL, FIELD_TYPE_BOOLEAN, FIELD_TYPE_STRING

BUILTIN_RANGE_INPUT

Range input field.

props.type Description UI Type Auto-convertable field types
string Range input which works with strings UI_TYPE_STRING_RANGE_OBJECT FIELD_TYPE_DECIMAL_RANGE, FIELD_TYPE_INTEGER_RANGE, FIELD_TYPE_STRING_DATE_RANGE, FIELD_TYPE_STRING_DECIMAL_RANGE, FIELD_TYPE_STRING_INTEGER_RANGE
date DateRangeInput UI_TYPE_DATE_RANGE_OBJECT FIELD_TYPE_STRING_DATE_RANGE
integer Range input which accepts only numbers and - sign and formats using i18n.formatNumber UI_TYPE_INTEGER_RANGE_OBJECT FIELD_TYPE_STRING_INTEGER_RANGE, FIELD_TYPE_INTEGER_RANGE
decimal Range input which accepts only numbers and - sign and formats using i18n.formatDecimalNumber UI_TYPE_DECIMAL_RANGE_OBJECT FIELD_TYPE_STRING_DECIMAL_RANGE, FIELD_TYPE_DECIMAL_RANGE

Default Embedded FieldInputComponents

If you define just a Field Type in Model Definition's model.fields.<field name>.type (and omit any custom render in searchableFields and formLayout), the following components will be default for the fields:

Common mappings for all Views

Field Type Component props.type
FIELD_TYPE_BOOLEAN BUILTIN_INPUT 'checkbox'
FIELD_TYPE_STRING BUILTIN_INPUT 'string'
FIELD_TYPE_DECIMAL_RANGE BUILTIN_RANGE_INPUT 'decimal'
FIELD_TYPE_INTEGER_RANGE BUILTIN_RANGE_INPUT 'integer'
FIELD_TYPE_STRING_DATE_RANGE BUILTIN_RANGE_INPUT 'date'
FIELD_TYPE_STRING_DECIMAL_RANGE BUILTIN_RANGE_INPUT 'string'
FIELD_TYPE_STRING_INTEGER_RANGE BUILTIN_RANGE_INPUT 'string'

Mappings specific to Create/Edit/Show View

Field Type Component props.type
FIELD_TYPE_DECIMAL BUILTIN_INPUT 'decimal'
FIELD_TYPE_INTEGER BUILTIN_INPUT 'integer'
FIELD_TYPE_STRING_DATE BUILTIN_INPUT 'date'
FIELD_TYPE_STRING_DECIMAL BUILTIN_INPUT 'string'
FIELD_TYPE_STRING_INTEGER BUILTIN_INPUT 'string'

Mappings specific to Search View (searchable fields)

Field Type Component props.type
FIELD_TYPE_DECIMAL BUILTIN_RANGE_INPUT 'decimal'
FIELD_TYPE_INTEGER BUILTIN_RANGE_INPUT 'integer'
FIELD_TYPE_STRING_DATE BUILTIN_RANGE_INPUT 'date'
FIELD_TYPE_STRING_DECIMAL BUILTIN_RANGE_INPUT 'string'
FIELD_TYPE_STRING_INTEGER BUILTIN_RANGE_INPUT 'string'

FieldRenderComponent

Custom React component for rendering Formated Instance's persistent/composite field value in Search Result listing.

Props:

Name Type Necessity Default Description
name string mandatory - Field name from Model Definition's ui.search().resultFields
instance object mandatory - Entity instance

TabFormComponent

React component for a custom rendering of Tab form in create/edit/show Views.

Props:

Name Type Necessity Default Description
viewName string mandatory - View Name
instance object mandatory - persistent instance
doTransition function optional - Editor State change handler

ViewComponent

React component for a custom View.

Props:

Name Type Necessity Default Description
viewState object mandatory - Custom View State
doTransition function optional - Editor State change handler

doTransition

This handler is called when

  • active View changes its State, name argument is optional in such case;
  • another View must be displayed, state argument is optional in such case.
function ({
  ?name: <string, View Name>,
  ?state: <object, View State>
}) {
  ...
  return;  // return value is ignored.
}

Arguments:

Name Default Description
name active View Name To-be-displayed View Name
state {} Full/sliced to-be-displayed View State

If View State is sliced, not given or {}, all not-mentioned properties retain their current values (or default values in case of initial View rendering).

Clone this wiki locally