sbol-1.js

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Cell } from 'sbtsbol-app'
import { errorAdapter, Field, Input } from '@sbtsbol/lib.ui'

import Header from './header'
import { CheckboxUI, DateBox, FormGroupUI, LabelUI, SectionUI, TextBoxUI } from './ui'

const DepartmentCodeInput = errorAdapter(Input.Masked)
const renderDepartmentField = (field) => {
    return (
        <div>
            <DepartmentCodeInput
                {...field}
                mask={[/\d/, /\d/, /\d/, ' ', '–', ' ', /\d/, /\d/, /\d/]}
                maxLength={9}
            />
        </div>
    )
}

const PassportForm = (props) => {

    // Получение филдов
    const [
        secondName,
        firstName,
        middleName,
        isHaveMiddleName,
        number,
        issueDate,
        departmentCode,
        issuePlace
    ] = props.fields

    // Есть ли отчество
    const isSetMiddleName = props.form.shortRequestFlow.values[isHaveMiddleName.id]

    const departmentInputChange = (event, value) => {
        issuePlace.value = 'some value'
    }

    return (
        <SectionUI>
            <Header {...props} />

            <FormGroupUI>
                <LabelUI>{secondName.title}</LabelUI>
                <TextBoxUI {...secondName} />
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{firstName.title}</LabelUI>
                <TextBoxUI {...firstName} />
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{middleName.title}</LabelUI>
                <TextBoxUI {...middleName} disabled={isSetMiddleName} />
                <CheckboxUI md={6} {...isHaveMiddleName} />
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{number.title}</LabelUI>
                <TextBoxUI md={5} {...number} />
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{issueDate.title}</LabelUI>
                <DateBox md={5} {...issueDate} />
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{departmentCode.title}</LabelUI>

                <Cell md={5}>
                    <Field
                        {...departmentCode}
                        component={renderDepartmentField}
                        name={departmentCode.id}
                        validate={departmentCode.validators}
                        onChange={departmentInputChange}
                    />
                </Cell>
            </FormGroupUI>

            <FormGroupUI>
                <LabelUI>{issuePlace.title}</LabelUI>
                <TextBoxUI md={5} {...issuePlace} />
            </FormGroupUI>
        </SectionUI>
    )
}

PassportForm.propTypes = {
    fields: PropTypes.array,
    form: PropTypes.object
}

PassportForm.defaultProps = {
    fields: [],
    form: {}
}

const mapStateToProps = (state) => state

export default connect(mapStateToProps)(PassportForm)