Creating a skin¶

The inputs and auxiliary elements are created using a set of components. The mapping can be set all together by overriding the skin.

You can take a look at skin.js and components/index.js from any skin to have a glimpse.

There’s an entry in the skin object for every field type. The value of the entry is an object with two attributes like in this example:

string: {
  component: Input,
  props: {
    inputComponent: 'input'
  }
},

string: {
  component: Input
}

props: {
  inputComponent: 'input',
  type: 'number'
}

props: props => {
  return {
    ...props,
    inputComponent: Radio,
    children: mapRadioOptions(props)
  }
}

Overriding¶

You can override (or add) specific types or the whole set.

setSkin(skin)¶

Sets the whole skin at once.

Arguments:	skin (object) – Whole skin description

addSkinType(typeName, rendering)¶

Sets the rendering for a specific schema type.

Arguments:	typeName (string) – Type name as it appears in the schema specification. rendering (skinTypeMap) – Object with the rendering specification.

Skin component¶

Every input component expects at least these props:

There are also other props passed depending on current implementation of renderInput, the function in charge of choosing the component and render it.

typeValidator is needed to avoid an error when validating field’s type. If unsure provide value => false.

Form component¶

The form component is different in the sense that it’s not rendered after a type. Instead, every form renders a form component in case the UI library requires special form wrapping.

InputWrap¶

It’s a common component used to create all the input structure, including wrappers. You can use it to avoid boilerplate. The final input component used (taken from inputComponent prop) will be a decorated Field.

The props passed to the wrapper component (inputWrapper)

The props for the input component are different depending if the inputComponent is a string, like 'input' or a React component.

Rendering¶

To feed InputWrap with the needed props, two functions can be used:

renderInputs(params)¶

Renders the inputs to make the schema work.

Arguments:	params (object) – params.schema (Schema) – Schema instance params.config (object) – Rendering configuration params.config.arrayMode (string) – ‘panels’ or ‘table’ params.config.horizontal (boolean) – Labels above inputs params.rest (object) – Props passed to each input
Returns:	array – React elements with the form and inputs.

renderInput(params)¶

Renders a single field.

Arguments:	params (object) – params.field (string) – Name of the field params.fieldSchema (object) – Schema specification for the field params.parent (string) – Prefix of the field name params.schemaTypeName (string) – Name of the schema (first argument while instantiating a schema) params.config (object) – Form configuration params.rest (object) – props passed to the component

Write your own validators¶

Suppose you have a field schema and you want to add a custom validator:

const vehicles = new Schema('vehicles', {
  numberOfWheels: {
    type: 'number',
    isEven: true
  }
})

To add the validation, use

addValidator(validationName, validation)¶

Adds a test creator to the testFactory table, that way you can use your own custom validations.

Arguments:	validationName (string) – The validation name for the test being created. validation (validatorConstructor) – Function that takes the entry and creates a validator to be used later.

That is, validation is a function that returns a function. Outer one creates the validator and the inner one is the validator itself.

The validator returns true when validation doesn’t pass. It can also return a translatable object or a direct message.

To implement the isEven test using ES6 arrow functions:

import { addValidator } from 'redux-form-auto'

addValidator('isEven', entry =>
  value => {
    const expected = entry.isEven ? 0 : 1

    return isNaN(value) || value % 2 != expected
  }
)

Because the validator takes advantage of the closure from the constructor, it’s useful to write both in that cascade manner.

You can construct translatable objects using translatable(). See Translatable objects

Override or add type validation¶

To avoid type errors as false positives you can change its behaviour in two ways:

• Adding typeValidator in the component definition when you create it.
• Calling addSpecialTypeValidator specifying the field and the validation.

The validator has the same signature as others validators: Will receive the field’s value and returns false for “valid”.

addSpecialTypeValidator(type, validator)¶

Adds a special type validation

Arguments:	type (string) – Type validated validator (function) – value => true_to_fail validator