Ywana Core FORMS

Esta librería basada en mobx-state-tree (MBX) facilita la definición de de formularios y otros modelos de datos comunes....

Form

Colección del conjunto de campos de un formulario. Por cada campo se definen sus propiedades de modelo y de vista.

import { Form } from 'ywana-core2-forms'

const bookForm = Form.create({
    name: 'Add Book Form',
    items: [
        { id: 'ISBN', type: 'STRING', label: 'ISBN', mandatory: true },
        { id: 'title', type: 'STRING', label: 'Title', mandatory: true },
    ]
})

API

Properties

• isValid
• hasChanged
• toJSON
• sections

Methods

• item(id)

Field

• id
• icon: types.maybe(types.string),
• label: types.maybe(types.string),
• default: types.frozen(),
• value: types.frozen(),
• mandatory: types.optional(types.boolean, false),
• disabled: types.optional(types.boolean, false),
• excluded: types.optional(types.boolean, false),
• readOnly: types.optional(types.boolean, false)

Exclusions

Una exclusion define una regla por la cual un campo sera excluido del formulario cuando se cumpla la condición

exclusions: [
    { exclude: 'name', when: 'city', is: 'equals', to: 'T'}
]

Hooks

Podemos hacer uso de los hooks de MBX para definir reacciones al cambio de valor de un campo.

bookForm.onChange('title', (field) => {
    // DO SOMETHING
})

Collection

Colección de elementos del tipo provisto en su construcción

model.js

import { types } from 'mobx-state-tree'
import { Collection } from  'ywana-core2-form'

const Book = types.model({
    ISBN: types.string,
    name: types.string
})
export const Library = Collection(Book)

example.js

import { Library } from './model'

const myLibrary = Library.create()
myLibrary.load([{ ISBN: '9780395489321', name: 'The Lord of the Rings ' }])