Skip to content

Commit

Permalink
[Bug #336] Display question label as input placeholder.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ledsoft
ledsoft committed Feb 10, 2017
1 parent ffc0eed commit d6a0558
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 21 deletions.
16 changes: 8 additions & 8 deletions src/components/MaskedInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class MaskedInput extends React.Component {
}

componentWillMount() {
var options = {
const options = {
pattern: this.props.mask,
value: this.props.value,
formatCharacters: this.props.formatCharacters
Expand Down Expand Up @@ -94,16 +94,16 @@ export default class MaskedInput extends React.Component {
}

_onChange = (e) => {
var maskValue = this.mask.getValue();
const maskValue = this.mask.getValue();
if (e.target.value !== maskValue) {
// Cut or delete operations will have shortened the value
if (e.target.value.length < maskValue.length) {
var sizeDiff = maskValue.length - e.target.value.length;
const sizeDiff = maskValue.length - e.target.value.length;
this._updateMaskSelection();
this.mask.selection.end = this.mask.selection.start + sizeDiff;
this.mask.backspace();
}
var value = this._getDisplayValue();
const value = this._getDisplayValue();
e.target.value = value;
if (value) {
this._updateInputSelection();
Expand Down Expand Up @@ -137,7 +137,7 @@ export default class MaskedInput extends React.Component {
e.preventDefault();
this._updateMaskSelection();
if (this.mask.backspace()) {
var value = this._getDisplayValue();
const value = this._getDisplayValue();
e.target.value = value;
if (value) {
this._updateInputSelection();
Expand Down Expand Up @@ -182,7 +182,7 @@ export default class MaskedInput extends React.Component {
}

_getDisplayValue() {
var value = this.mask.getValue();
const value = this.mask.getValue();
return value === this.mask.emptyValue ? '' : value;
}

Expand All @@ -195,8 +195,8 @@ export default class MaskedInput extends React.Component {
}

render() {
var {size, placeholder, ...props} = this.props;
var patternLength = this.mask.pattern.length;
const {size, placeholder, ...props} = this.props,
patternLength = this.mask.pattern.length;
return React.createElement(Configuration.inputComponent, assign({}, props, {
ref: (r) => {
if (r) {
Expand Down
1 change: 1 addition & 0 deletions src/components/answer/InputAnswer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ const InputAnswer = (props) => {
return React.createElement(Configuration.inputComponent, assign({}, InputPropertiesResolver.resolveInputProperties(question, value), {
label: props.label,
title: props.title,
placeholder: props.label,
value: value,
onChange: (e) => props.onChange(e.target.value)
}));
Expand Down
33 changes: 20 additions & 13 deletions test/__tests__/InputAnswerTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const LABEL = 'Input answer test';

describe('InputAnswer', () => {

var question,
let question,
answer,
onChange;

Expand Down Expand Up @@ -41,71 +41,71 @@ describe('InputAnswer', () => {
});

it('sets min on numeric input when xsd:minInclusive is used in question', () => {
var min = 100,
const min = 100,
value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
question[Constants.XSD.MIN_INCLUSIVE] = min;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
expect(input.min).toEqual(min.toString());
});

it('sets min on numeric input when xsd:minExclusive is used in question', () => {
var min = 100,
const min = 100,
value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
question[Constants.XSD.MIN_EXCLUSIVE] = min;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
expect(input.min).toEqual((min + 1).toString());
});

it('sets max on numeric input when xsd:maxExclusive is used in question', () => {
var max = 1000,
const max = 1000,
value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
question[Constants.XSD.MAX_EXCLUSIVE] = max;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
expect(input.max).toEqual((max - 1).toString());
});

it('sets max on numeric input when xsd:maxInclusive is used in question', () => {
var max = 1000,
const max = 1000,
value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
question[Constants.XSD.MAX_INCLUSIVE] = max;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
expect(input.max).toEqual(max.toString());
});

it('sets both min and max on numeric input when both are used in question', () => {
var max = 1000,
const max = 1000,
min = 100,
value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
question[Constants.XSD.MAX_INCLUSIVE] = max;
question[Constants.XSD.MIN_INCLUSIVE] = min;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
Expand All @@ -114,14 +114,21 @@ describe('InputAnswer', () => {
});

it('sets min when xsd:positiveInteger is used as question datatype', () => {
var value = 117;
const value = 117;
question[Constants.HAS_DATATYPE] = Constants.XSD.POSITIVE_INTEGER;
answer[Constants.HAS_DATA_VALUE] = value;

var component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.type).toEqual('number');
expect(input.min).toEqual('1');
});

it('displays question label as input placeholder', () => {
const component = Environment.render(<Answer question={question} answer={answer} onChange={onChange}/>),

input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
expect(input.placeholder).toEqual(LABEL);
});
});

0 comments on commit d6a0558

Please sign in to comment.