validation

dist/excalibur.min.js

@@ -623,7 +623,7 @@ var _createClass=function(){function a(b,c){for(var e,d=0;d<c.length;d++)e=c[d],
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-var _createClass=function(){function a(b,c){for(var e,d=0;d<c.length;d++)e=c[d],e.enumerable=e.enumerable||!1,e.configurable=!0,'value'in e&&(e.writable=!0),Object.defineProperty(b,e.key,e)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_reactstrap=__webpack_require__(6),_propTypes=__webpack_require__(5),_propTypes2=_interopRequireDefault(_propTypes),_utils=__webpack_require__(2);Object.defineProperty(exports,'__esModule',{value:!0});function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var TextInput=function(a){function b(c){_classCallCheck(this,b);var d=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,c));return d.handleChange=d.handleChange.bind(d),d.state={uuid:(0,_utils.newId)('textInput'),value:d.props.value},d}return _inherits(b,a),_createClass(b,[{key:'getDescriptionElements',value:function getDescriptionElements(){var c={};if(this.props.description){var d='description-'+this.state.uuid+'"';c={descriptionId:d,description:_react2.default.createElement('span',{className:'input-description',id:d},this.props.description)}}return c}},{key:'handleChange',value:function handleChange(c){this.setState({value:c.target.value}),this.props.onChange(c.target.value,this.props.name)}},{key:'render',value:function render(){var c=this.getDescriptionElements(),d=c.descriptionId,e=c.description;return _react2.default.createElement('div',{className:this.props.className},_react2.default.createElement(_reactstrap.Label,{'for':this.state.uuid},this.props.label),_react2.default.createElement(_reactstrap.Input,{id:this.state.uuid,type:'text',name:this.props.name,value:this.state.value,placeholder:this.props.placeholder,'aria-describedby':d,onChange:this.handleChange}),e)}}]),b}(_react2.default.Component);TextInput.propTypes={label:_propTypes2.default.string.isRequired,name:_propTypes2.default.string.isRequired,value:_propTypes2.default.string,description:_propTypes2.default.oneOfType([_propTypes2.default.string,_propTypes2.default.element]),disabled:_propTypes2.default.bool,onChange:_propTypes2.default.func},TextInput.defaultProps={onChange:function onChange(){}},exports.default=TextInput;
+var _createClass=function(){function a(b,c){for(var e,d=0;d<c.length;d++)e=c[d],e.enumerable=e.enumerable||!1,e.configurable=!0,'value'in e&&(e.writable=!0),Object.defineProperty(b,e.key,e)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_reactstrap=__webpack_require__(6),_propTypes=__webpack_require__(5),_propTypes2=_interopRequireDefault(_propTypes),_utils=__webpack_require__(2);Object.defineProperty(exports,'__esModule',{value:!0});function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var TextInput=function(a){function b(c){_classCallCheck(this,b);var d=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,c));return d.handleChange=d.handleChange.bind(d),d.handleBlur=d.handleBlur.bind(d),d.state={uuid:(0,_utils.newId)('textInput'),value:d.props.value,isValid:!0,validationMessage:''},d}return _inherits(b,a),_createClass(b,[{key:'getDescriptionElements',value:function getDescriptionElements(){var d,c={},e=[];if(this.props.description&&(d='description-'+this.state.uuid,e.push(_react2.default.createElement(_reactstrap.FormText,{id:d,key:'0'},this.props.description))),!this.state.isValid){var f='error-'+this.state.uuid;d=f+' '+d,e=[_react2.default.createElement(_reactstrap.FormFeedback,{id:f,key:'1'},this.state.validationMessage)].concat(_toConsumableArray(e))}return c={descriptionId:d,description:e},c}},{key:'handleChange',value:function handleChange(c){this.setState({value:c.target.value}),this.props.onChange(c.target.value,this.props.name)}},{key:'handleBlur',value:function handleBlur(){this.props.validator&&this.setState(this.props.validator)}},{key:'render',value:function render(){var c=this.getDescriptionElements(),d=c.descriptionId,e=c.description,f=this.state.isValid?'':'warning';return _react2.default.createElement('div',{className:this.props.className},_react2.default.createElement(_reactstrap.FormGroup,{color:f},_react2.default.createElement(_reactstrap.Label,{'for':this.state.uuid},this.props.label),_react2.default.createElement(_reactstrap.Input,{id:this.state.uuid,type:'text',name:this.props.name,value:this.state.value,placeholder:this.props.placeholder,'aria-describedby':d,onChange:this.handleChange,onBlur:this.handleBlur,'aria-invalid':!this.state.isValid,state:f}),e))}}]),b}(_react2.default.Component);TextInput.propTypes={label:_propTypes2.default.string.isRequired,name:_propTypes2.default.string.isRequired,value:_propTypes2.default.string,description:_propTypes2.default.oneOfType([_propTypes2.default.string,_propTypes2.default.element]),disabled:_propTypes2.default.bool,onChange:_propTypes2.default.func},TextInput.defaultProps={onChange:function onChange(){}},exports.default=TextInput;
 
 /***/ }),
 /* 12 */

src/TextInput.js

 import React, { Component } from 'react';
-import { Input, Label } from 'reactstrap';
+import { Input, Label, FormGroup, FormFeedback, FormText } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 import { newId } from './utils';
@@ -9,25 +9,40 @@ class TextInput extends React.Component {
     super(props);
 
     this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
     this.state = {
       uuid: newId('textInput'),
-      value: this.props.value
+      value: this.props.value,
+      isValid: true,
+      validationMessage: ''
     };
   }
 
   getDescriptionElements() {
-    let descriptionElements = {};
-    if (this.props.description) {
-      const descriptionId = `description-${this.state.uuid}"`;
-
-      descriptionElements = {
+    let descriptionElements = {},
         descriptionId,
-        description: (
-          <span className="input-description" id={descriptionId}>
-            {this.props.description}
-          </span>
-        )
-      }
+        descriptionMessages = [];
+    if (this.props.description) {
+      descriptionId = `description-${this.state.uuid}`;
+      descriptionMessages.push(
+        <FormText id={descriptionId} key="0">
+          {this.props.description}
+        </FormText>
+      );
+    }
+    if (!this.state.isValid) {
+      const errorId = `error-${this.state.uuid}`;
+      descriptionId = `${errorId} ${descriptionId}`
+      descriptionMessages = [(
+        <FormFeedback id={errorId} key="1">
+          {this.state.validationMessage}
+        </FormFeedback>),
+        ...descriptionMessages
+      ];
+    }
+    descriptionElements = {
+      descriptionId,
+      description: descriptionMessages
     }
     return descriptionElements;
   }
@@ -37,22 +52,34 @@ class TextInput extends React.Component {
     this.props.onChange(event.target.value, this.props.name);
   }
 
+  handleBlur(event) {
+    if (this.props.validator) {
+      this.setState(this.props.validator);
+    }
+  }
+
   render() {
-    const { descriptionId, description } = this.getDescriptionElements();
+    const { descriptionId, description } = this.getDescriptionElements(),
+          inputState = (!this.state.isValid) ? 'warning' : '';
 
     return (
       <div className={this.props.className}>
-        <Label for={this.state.uuid}>{this.props.label}</Label>
-        <Input
-          id={this.state.uuid}
-          type="text"
-          name={this.props.name}
-          value={this.state.value}
-          placeholder={this.props.placeholder}
-          aria-describedby={descriptionId}
-          onChange={this.handleChange}
-        />
-        {description}
+        <FormGroup color={inputState}>
+          <Label for={this.state.uuid}>{this.props.label}</Label>
+          <Input
+            id={this.state.uuid}
+            type="text"
+            name={this.props.name}
+            value={this.state.value}
+            placeholder={this.props.placeholder}
+            aria-describedby={descriptionId}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
+            aria-invalid={!this.state.isValid}
+            state={inputState}
+          />
+          {description}
+        </FormGroup>
       </div>
     );
   }