120 lines
2.8 KiB
JavaScript
120 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import FormFieldText from 'form/fields/text.jsx';
|
|
import FormFieldTextarea from 'form/fields/textarea.jsx';
|
|
import FormFieldSelect from 'form/fields/select.jsx';
|
|
import FormFieldRadio from 'form/fields/radio.jsx';
|
|
import FormFieldCheckbox from 'form/fields/checkbox.jsx';
|
|
import FormFieldSelection from 'form/fields/selection.jsx';
|
|
import FormFieldDate from 'form/fields/date.jsx';
|
|
import jQuery from 'jquery';
|
|
|
|
const FormField = React.createClass({
|
|
renderField: function renderField(data, inline = false) {
|
|
let description = false;
|
|
if (data.field.description) {
|
|
description = (
|
|
<p className="description">{ data.field.description }</p>
|
|
);
|
|
}
|
|
|
|
let field = false;
|
|
let dataField = data.field;
|
|
|
|
if (data.field.field !== undefined) {
|
|
dataField = jQuery.merge(dataField, data.field.field);
|
|
}
|
|
|
|
switch (dataField.type) {
|
|
case 'text':
|
|
field = (<FormFieldText {...data} />);
|
|
break;
|
|
|
|
case 'textarea':
|
|
field = (<FormFieldTextarea {...data} />);
|
|
break;
|
|
|
|
case 'select':
|
|
field = (<FormFieldSelect {...data} />);
|
|
break;
|
|
|
|
case 'radio':
|
|
field = (<FormFieldRadio {...data} />);
|
|
break;
|
|
|
|
case 'checkbox':
|
|
field = (<FormFieldCheckbox {...data} />);
|
|
break;
|
|
|
|
case 'selection':
|
|
field = (<FormFieldSelection {...data} />);
|
|
break;
|
|
|
|
case 'date':
|
|
field = (<FormFieldDate {...data} />);
|
|
break;
|
|
|
|
case 'reactComponent':
|
|
field = (<data.field.component {...data} />);
|
|
break;
|
|
|
|
default:
|
|
field = 'invalid';
|
|
break;
|
|
}
|
|
|
|
if (inline === true) {
|
|
return (
|
|
<span key={`field-${data.index || 0}`}>
|
|
{ field }
|
|
{ description }
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<div key={`field-${data.index || 0}`}>
|
|
{ field }
|
|
{ description }
|
|
</div>
|
|
);
|
|
},
|
|
render: function render() {
|
|
let field = false;
|
|
|
|
if (this.props.field.fields !== undefined) {
|
|
field = this.props.field.fields.map((subfield, index) => this.renderField({
|
|
index,
|
|
field: subfield,
|
|
item: this.props.item,
|
|
onValueChange: this.props.onValueChange || false,
|
|
}));
|
|
} else {
|
|
field = this.renderField(this.props);
|
|
}
|
|
|
|
let tip = false;
|
|
if (this.props.field.tip) {
|
|
tip = (
|
|
<p className="description">{ this.props.field.tip }</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<tr className={`form-field-row-${this.props.field.name}`}>
|
|
<th scope="row">
|
|
<label
|
|
htmlFor={`field_${this.props.field.name}`}
|
|
>
|
|
{ this.props.field.label }
|
|
{ tip }
|
|
</label>
|
|
</th>
|
|
<td>
|
|
{ field }
|
|
</td>
|
|
</tr>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default FormField;
|