render one symfony field with semantic ui

Field.js

import React, {Component} from 'react'
import { Field as RField } from 'redux-form';
import {
    Input,
    Checkbox,
    Radio,
    Select,
    TextArea,
    Button,
    Form
} from 'semantic-ui-react'

const getSemanticCmp = (component, type, data, children) => {
    return function(initProps) {
        // console.log(initProps);

        let {
            attr,
            disabled,
            full_name,
            id,
            label,
            required,
            size,
            value,
            choices,
            multiple,
        } = data;

        let {input} = initProps;

        let props = {};
        size ? props.length = size : '';
        props.defaultValue = (null === value ? '' : value);

        if (component === 'input'
            && ['text', 'email', 'number', 'password', 'hidden', 'file'].indexOf(type) !== -1) {

            return <Form.Field required={required}>
                <label>{label}</label>
                <Input
                    placeholder={label}
                    type={type}
                    onChange={input.onChange}
                    required={required}
                    {...props}
                    {...attr}
                />
            </Form.Field>
        }

        if (component === 'input' && type === 'checkbox') {
            delete props.value;
            return <Form.Field required={required}>
                <label>{label}</label>
                {choices.map((chbx, i) =>
                    <Checkbox
                        key={i}
                        id={children[i].vars.id}
                        label={chbx.label}
                        value={chbx.value}
                        name={children[i].vars.full_name}
                        checked={children[i].vars.checked}
                        readOnly={children[i].vars.readonly}
                        onChange={input.onChange}
                        disabled={disabled}
                        required={required}
                        {...chbx.attr}
                        {...props}
                    />
                )}
            </Form.Field>
        }

        if (component === 'input' && type === 'radio') {
            delete props.value;
            return <Form.Field required={required}>
                <label>{label}</label>
                {choices.map((chbx, i) =>
                    <Radio
                        key={i}
                        id={children[i].vars.id}
                        label={chbx.label}
                        value={chbx.value}
                        name={children[i].vars.full_name}
                        onChange={input.onChange}
                        disabled={disabled}
                        required={required}
                        {...chbx.attr}
                        {...props}
                    />
                )}
            </Form.Field>
        }
        if (component === 'input' && type === 'datetime') {

            let {
                date: {day, month, year},
                time: {hour, minute}
            } = value;

            let fullDate = null;
            if(day && month && year)
            {
                fullDate =   year + '-' + month + '-' + day;
            }
            if(hour && minute)
            {
                fullDate += ' ' + hour + ':' + minute;
            }

            if(null === fullDate)
            {
                let date = new Date();
                day = date.getDay();
                day = (day < 10 ? '0' + day : day);
                month = date.getMonth();
                month = (month < 10 ? '0' + month : month);
                year = date.getFullYear();

                fullDate =   year + '-' + month + '-' + day;
            }

            props.defaultValue = fullDate;

            return <Form.Field required={required}>
                <label>{label}</label>
                <Input
                     type="date"
                     placeholder={label}
                     onChange={input.onChange}
                     disabled={disabled}
                     required={required}
                     {...props}
                     {...attr}
                />
            </Form.Field>
        }

        if (component === 'textarea') {
            return <Form.Field required={required}>
                <label>{label}</label>
                <TextArea
                    label={label}
                    placeholder={label}
                    onChange={input.onChange}
                    disabled={disabled}
                    required={required}
                    {...props}
                    {...attr}
                />
            </Form.Field>
        }

        if (component === 'select') {
            let options = choices.map((el) => {
                return {
                    key: el.value,
                    text: el.label,
                    value: el.value
                }
            });

            if(false === required)
            {
                options.unshift({
                    key: 'empty',
                    text: '',
                    value: ''
                });
            }

            return <Form.Field required={required}>
                <label>{label}</label>
                <Select
                    name={full_name}
                    label={label}
                    placeholder={label}
                    options={options}
                    onChange={input.onChange}
                    onBlur={input.onBlur}
                    multiple={multiple}
                    disabled={disabled}
                    required={required}
                    {...props}
                    {...attr}
                />
            </Form.Field>
        }

        if(component === 'button')
        {
            return <Button
                disabled={disabled}
                placeholder={label}
                required={required}
                {...props}
                {...attr}
            >{label}</Button>
        }
    }
};

export default class Field extends Component {
    getFieldType() {
        let {
            block_prefixes,
            multiple,
            expanded,
        } = this.props.data.vars;

        let component = null;
        let type = null;
        switch (block_prefixes[0]) {
            case 'form':
                switch (block_prefixes[1]) {
                    case 'text':
                        component = 'input';
                        type = 'text';
                        if (block_prefixes.length === 4) {
                            if (block_prefixes[2] === 'textarea') {
                                component = 'textarea';
                            }
                            else {
                                type = block_prefixes[2];
                            }
                        }
                        break;
                    case 'choice':
                        component = 'input';
                        type = 'text';
                        if (false === expanded) {
                            component = 'select'
                        }
                        else if (true === multiple) {
                            type = 'checkbox';
                        }
                        else if (false === multiple) {
                            type = 'radio';
                        }
                        break;
                    case 'hidden':
                        component = 'input';
                        type = 'hidden';
                        break;
                    case 'datetime':
                        component = 'input';
                        type = 'datetime';
                        break;
                    case 'number':
                        component = 'input';
                        type = 'number';
                        break;
                    case 'file':
                        component = 'input';
                        type = 'file';
                        break;
                    default:
                        component = 'input';
                        type = 'text';
                }
                break;
            case 'button':
                component = 'button';
                type = block_prefixes[1];
                break;
        }

        let {vars: data, children} = this.props.data;
        return getSemanticCmp(component, type, data, children);
    }

    render() {
        let component = this.getFieldType();
        let { full_name } = this.props.data.vars;

        return <RField name={full_name} component={component} />

    }
}