@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
95 lines • 4.39 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React from 'react';
import { Input } from '@momentum-ui/react-collaboration';
var InputValidation = /** @class */ (function (_super) {
__extends(InputValidation, _super);
function InputValidation() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
testMe: '',
testMeError: [],
};
_this.handleChange = function (e) {
_this.setState({
testMe: e.target.value,
});
};
_this.handleSubmit = function (event) {
event && event.preventDefault();
_this.validateField('testMe', _this.state.testMe);
};
_this.addElement = function (array, element) {
return array.includes(element) ? __spreadArray([], array, true) : __spreadArray(__spreadArray([], array, true), [element], false);
};
_this.removeElement = function (array, element) {
return array.filter(function (ele) { return ele !== element; });
};
_this.createErrorArr = function (validationArr, value) {
return validationArr.reduce(function (agg, e) { return (value.match(e.test) ? _this.removeElement(agg, e) : _this.addElement(agg, e)); }, []);
};
_this.validateField = function (fieldName, value, cb) {
var _a;
var rules = {
testMe: {
validation: [
{
message: 'Preferred if TestMe Field is 8 characters',
test: '^[a-zA-Z]{8,}$',
type: 'warning',
},
{
message: 'TestMe Field is too short',
test: '^[a-zA-Z]{6,}$',
type: 'error',
},
{
message: 'TestMe Field must contain Caps',
test: '[A-Z]',
type: 'error',
},
{
message: 'Preferred if TestMe Field has 2 caps',
test: '[A-Z]{2}',
type: 'warning',
},
],
errors: _this.state.testMeError,
},
};
return _this.setState((_a = {},
_a["".concat(fieldName, "Error")] = _this.createErrorArr(rules[fieldName].validation, value),
_a), cb);
};
return _this;
}
InputValidation.prototype.render = function () {
return (React.createElement("form", { name: "testFrom", onSubmit: this.handleSubmit },
React.createElement(Input, { name: "inputValidation", label: "Advanced Validation", htmlId: "inputValidation", containerSize: "medium-6", helpText: "Field Must contain at least 6 characters and 1 capital letter", messageArr: this.state.testMeError, onChange: this.handleChange, value: this.state.testMe })));
};
return InputValidation;
}(React.PureComponent));
export default InputValidation;
//# sourceMappingURL=Validation.js.map