Skip to content

P
paragon
Commit 40487a5f by Ari Rizzitano
Options

validation

parent 1abaaa02
Showing with 53 additions and 26 deletions
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 */
......
dist/excalibur.min.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
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>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment