Skip to content

Commit

Permalink
Slightly modified rendering of the answer, to make it more readable.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ledsoft
ledsoft committed Aug 23, 2016
1 parent 741a006 commit 30e7478
Showing 1 changed file with 55 additions and 46 deletions.
101 changes: 55 additions & 46 deletions src/components/Answer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React from "react";
import assign from "object-assign";
import DateTimePicker from 'kbss-react-bootstrap-datetimepicker';
import DateTimePicker from "kbss-react-bootstrap-datetimepicker";
import JsonldUtils from "jsonld-utils";
import Typeahead from "react-bootstrap-typeahead";
import Configuration from "../model/Configuration";
Expand Down Expand Up @@ -86,58 +86,21 @@ export default class Answer extends React.Component {


render() {
return this._renderInputComponent();
}

_renderInputComponent() {
var question = this.props.question,
value = FormUtils.resolveValue(this.props.answer),
label = JsonldUtils.getLocalized(question[JsonldUtils.RDFS_LABEL], Configuration.intl),
title = JsonldUtils.getLocalized(question[JsonldUtils.RDFS_COMMENT], Configuration.intl),
component;

if (FormUtils.isTypeahead(question)) {
value = Utils.idToName(this.state.options, value);
var inputProps = {
disabled: FormUtils.isDisabled(question)
};
component = <div>
<label className='control-label'>{label}</label>
<Typeahead ref='typeahead' className='form-group form-group-sm' formInputOption='id'
inputProps={inputProps}
title={title} value={value} label={label} placeholder={label} filterOption='name'
displayOption='name' onOptionSelected={this._onOptionSelected} optionsButton={true}
options={this.state.options} customListComponent={Configuration.typeaheadResultList}/>
</div>;
component = this._renderTypeahead(value, label, title);
} else if (Answer._hasOptions(question)) {
component = React.createElement(Configuration.inputComponent, {
type: 'select',
label: label,
value: value,
title: title,
onChange: this.onChange,
disabled: FormUtils.isDisabled(question)
}, this._generateSelectOptions(question[Constants.HAS_OPTION])
);
component = this._renderSelect(value, label, title);
} else if (FormUtils.isCalendar(question)) {
component = this._renderDateTimePicker();
component = this._renderDateTimePicker(value, label, title);
}
else {
var answer = this.props.answer;
// TODO This is temporary to show labels for IRI-based values
if (answer[Constants.HAS_OBJECT_VALUE] && answer[Constants.HAS_OBJECT_VALUE][JsonldUtils.RDFS_LABEL]) {
value = JsonldUtils.getJsonAttValue(answer[Constants.HAS_OBJECT_VALUE], JsonldUtils.RDFS_LABEL);
}
var inputType = FormUtils.isTextarea(question, value) ? 'textarea' : 'text';
component = React.createElement(Configuration.inputComponent, {
type: inputType,
label: label,
title: title,
value: value,
onChange: this.onChange,
disabled: FormUtils.isDisabled(question),
rows: 5
});
component = this._renderRegularInput(value, label, title);
}
return component;
}
Expand Down Expand Up @@ -166,11 +129,37 @@ export default class Answer extends React.Component {
return rendered;
}

_renderDateTimePicker() {
_renderTypeahead(value, label, title) {
value = Utils.idToName(this.state.options, value);
var question = this.props.question,
inputProps = {
disabled: FormUtils.isDisabled(question)
};
return <div>
<label className='control-label'>{label}</label>
<Typeahead ref='typeahead' className='form-group form-group-sm' formInputOption='id'
inputProps={inputProps}
title={title} value={value} label={label} placeholder={label} filterOption='name'
displayOption='name' onOptionSelected={this._onOptionSelected} optionsButton={true}
options={this.state.options} customListComponent={Configuration.typeaheadResultList}/>
</div>;
}

_renderSelect(value, label, title) {
var question = this.props.question;
component = React.createElement(Configuration.inputComponent, {
type: 'select',
label: label,
value: value,
title: title,
onChange: this.onChange,
disabled: FormUtils.isDisabled(question)
}, this._generateSelectOptions(question[Constants.HAS_OPTION])
);
}

_renderDateTimePicker(value, label, title) {
var question = this.props.question,
value = FormUtils.resolveValue(this.props.answer),
label = JsonldUtils.getLocalized(question[JsonldUtils.RDFS_LABEL], Configuration.intl),
title = JsonldUtils.getLocalized(question[JsonldUtils.RDFS_COMMENT], Configuration.intl),
mode = Utils.resolveDateTimeMode(question);
return <div style={{position: 'relative'}}>
<label className='control-label'>label</label>
Expand All @@ -179,4 +168,24 @@ export default class Answer extends React.Component {
onChange={this.onChange} dateTime={value}/>
</div>
}

_renderRegularInput(value, label, title) {
var question = this.props.question,
answer = this.props.answer;
// When the value is an object_value, but the layout does not specify neither typeahead nor select,
// show at least the value's label
if (answer[Constants.HAS_OBJECT_VALUE] && answer[Constants.HAS_OBJECT_VALUE][JsonldUtils.RDFS_LABEL]) {
value = JsonldUtils.getJsonAttValue(answer[Constants.HAS_OBJECT_VALUE], JsonldUtils.RDFS_LABEL);
}
var inputType = FormUtils.isTextarea(question, value) ? 'textarea' : 'text';
return React.createElement(Configuration.inputComponent, {
type: inputType,
label: label,
title: title,
value: value,
onChange: this.onChange,
disabled: FormUtils.isDisabled(question),
rows: 5
});
}
}

0 comments on commit 30e7478

Please sign in to comment.