i-react-utils/lib/FormWizard.js

iReact utils

'use strict';Object.defineProperty(exports,'__esModule',{value:true});exports.Form=exports.Input=exports.BootstrapWrapper=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if('value'in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();exports.createFormValidator=createFormValidator;exports.createIsRequiredFormValidator=createIsRequiredFormValidator;exports.createMinLengthFormValidator=createMinLengthFormValidator;exports.createMaxLengthFormValidator=createMaxLengthFormValidator;exports.createEqLengthFormValidator=createEqLengthFormValidator;exports.createRegexFormValidator=createRegexFormValidator;var _react=require('react');var _react2=_interopRequireDefault(_react);var _iJsUtils=require('i-js-utils');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError('Cannot call a class as a function')}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called')}return call&&(typeof call==='object'||typeof call==='function')?call:self}function _inherits(subClass,superClass){if(typeof superClass!=='function'&&superClass!==null){throw new TypeError('Super expression must either be null or a function, not '+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}function createFormValidator(message,isValidFunction){return{message:message,validatorFunction:isValidFunction,setRequired:false}}function createIsRequiredFormValidator(message){message=message||'Field is required';var validator=createFormValidator(message,function(value){if(typeof value=='string'){return(0,_iJsUtils.isNotBlank)(value)}else{return value==undefined?false:value?true:false}});validator.setRequired=true;return validator}function createMinLengthFormValidator(minLength,message){message=message||'Min length '+minLength;var validator=createFormValidator(message,function(value){return!(value==null||value==undefined||value.trim().length<minLength)});validator.setRequired=true;return validator}function createMaxLengthFormValidator(maxLength,message){message=message||'Max length '+maxLength;var validator=createFormValidator(message,function(value){return value==null||value==undefined||value.trim().length<maxLength});return validator}function createEqLengthFormValidator(eqLength,message){message=message||'Required length '+eqLength;var validator=createFormValidator(message,function(value){return value==null||value==undefined||value.trim().length==eqLength});return validator}function createRegexFormValidator(regex,message){if(typeof regex==='string'){regex=new RegExp(regex,'i')}message=message||'Invalid pattern ('+regex+')';var validator=createFormValidator(message,function(value){if(value==undefined||value==null){return true}return regex.test(value)});return validator}var BootstrapWrapper=exports.BootstrapWrapper=function(_React$Component){_inherits(BootstrapWrapper,_React$Component);function BootstrapWrapper(props){_classCallCheck(this,BootstrapWrapper);var _this=_possibleConstructorReturn(this,(BootstrapWrapper.__proto__||Object.getPrototypeOf(BootstrapWrapper)).call(this));_this.props=props;return _this}_createClass(BootstrapWrapper,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){this.props=nextProps}},{key:'render',value:function render(){var _this2=this;var type=this.props.type;if(type=='checkbox'){return _react2.default.createElement('div',{className:' '+this.props.outerClassName+' '+(this.props.error!=null?'has-error':'')+' '},_react2.default.createElement('div',{className:'checkbox'},_react2.default.createElement('label',null,this.props.children,' ',this.props.label)))}else{return _react2.default.createElement('div',{className:' '+this.props.outerClassName+' '},_react2.default.createElement('div',{className:'form-group '+this.props.className+' '+(this.props.error!=null?'has-error':'')},function(){return _this2.props.label&&_this2.props.label.length>0?_react2.default.createElement('label',{className:'form-control-label',htmlFor:_this2.props.inputId},_this2.props.label):null}(),function(){return _this2.props.required?_react2.default.createElement('span',{className:'form-wizard-required'}):null}(),this.props.children,function(){return _this2.props.error!=null?_react2.default.createElement('span',{className:'help-block'},_this2.props.error):null}()))}}}]);return BootstrapWrapper}(_react2.default.Component);var Input=exports.Input=function(_React$Component2){_inherits(Input,_React$Component2);function Input(props){_classCallCheck(this,Input);var _this3=_possibleConstructorReturn(this,(Input.__proto__||Object.getPrototypeOf(Input)).call(this));_this3.wizardIndex=-1;_this3.props={};_this3.state=_this3._configureWithProps(props);_this3.props=props;_this3.state.error=null;_this3.inputId=props.inputId||'form-input-'+props.name;_this3._handleChange=_this3._handleChange.bind(_this3);_this3.validate=_this3.validate.bind(_this3);_this3.value=_this3.value.bind(_this3);return _this3}_createClass(Input,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(newProps){var stateUpdate=this._configureWithProps(newProps);this.props=newProps;this.setState(stateUpdate)}},{key:'_configureWithProps',value:function _configureWithProps(props){var required=props.required;var validators=[];var conditionalValidator=createFormValidator('Field is required',function(val){return props.required==false||(0,_iJsUtils.isNotBlank)(val)});validators.push(conditionalValidator);props.validators.forEach(function(validator){if(validator.setRequired){required=true}validators.push(validator)});this.validators=validators;this.orgOnChange=props.onChange;var st={};if(this.props.label!=props.label){st.label=props.label}if(this.props.required!=props.required){st.required=props.required}return st}},{key:'componentWillMount',value:function componentWillMount(){this.wizardIndex=this.context.wizard.formInputs.push(this)-1;if((0,_iJsUtils.isNotBlank)(this.props.defaultValue)){this.value(this.props.defaultValue)}this.inputProps=Object.assign({},this.props,{onChange:this._handleChange,id:this.inputId,value:this.context.wizard.formData[this.props.name]});delete this.inputProps.formData;delete this.inputProps.validators;delete this.inputProps.required;delete this.inputProps.options;delete this.inputProps.instantValidation;delete this.inputProps.defaultValue;delete this.inputProps.inputId;delete this.inputProps.outerClassName;delete this.inputProps.wrapper;if(this.props.type=='checkbox'){this.inputProps.className=(this.props.className?' '+this.props.className:'')+' form-wizard-input form-wizard-input-'+this.props.type}else{this.inputProps.className='form-control'+(this.props.className?' '+this.props.className:'')+' form-wizard-input form-wizard-input-'+this.props.type}}},{key:'componentWillUnmount',value:function componentWillUnmount(){if(this.wizardIndex>=0){delete this.context.wizard.formInputs[this.wizardIndex];this.wizardIndex=-1}}},{key:'validate',value:function validate(){var value=(0,_iJsUtils.getObjProperty)(this.context.wizard.formData,this.props.name);for(var i=0;i<this.validators.length;i++){var validator=this.validators[i];var isValid=validator.validatorFunction(value);if(!isValid){this.setState({error:validator.message});return false}}this.setState({error:null});return true}},{key:'value',value:function value(newValue){var name=this.props.name;var data=this.context.wizard.formData;var old=(0,_iJsUtils.getObjProperty)(data,name);if(newValue!=undefined){var nv=newValue==''?null:newValue;if(this.props.type=='number'&&nv!=null){nv=parseInt(nv)}if(nv!=old){(0,_iJsUtils.setObjProperty)(data,name,nv);var instantValidation=this.props.instantValidation;if(instantValidation==undefined){instantValidation=this.context.wizard.props.instantValidation}if(instantValidation){this.validate()}this.forceUpdate()}}return old}},{key:'_handleChange',value:function _handleChange(event){var val=event.target.value;if(event.target.type=='checkbox'){val=event.target.checked;if(val==undefined||val==null){val=false}}this.value(val==undefined?null:val);if(this.orgOnChange){this.orgOnChange(event)}}},{key:'render',value:function render(){var type=this.props.type==undefined?undefined:this.props.type.toLowerCase();var input=void 0;var dv=this.value();if(dv==null){dv=''}if(type=='checkbox'){var chval=this.value();input=_react2.default.createElement('input',_extends({key:this.inputId,type:'checkbox'},this.inputProps,{value:chval==null?undefined:chval,checked:chval==undefined?false:chval}))}else if(type=='textarea'){input=_react2.default.createElement('textarea',_extends({key:this.inputId},this.inputProps,{value:dv}))}else if(type=='select'){var opts=[];opts.push(_react2.default.createElement('option',{key:'',value:''}));var isa=Array.isArray(this.props.options);for(var key in this.props.options){var val=this.props.options[key];var rk=isa?val:key;opts.push(_react2.default.createElement('option',{label:val,value:rk,key:rk},val))}input=_react2.default.createElement('select',_extends({key:this.inputId},this.inputProps,{value:dv}),opts)}else{input=_react2.default.createElement('input',_extends({key:this.inputId,type:type},this.inputProps,{value:dv}))}var wrapper=this.props.wrapper;if(wrapper==undefined){wrapper=this.context.wizard.props.wrapper}if(wrapper==undefined||wrapper==null){return input}else{var wProps={type:type,outerClassName:this.props.outerClassName,label:this.state.label,required:this.state.required,error:this.state.error,inputId:this.inputId,inputProps:this.props,key:this.inputId+'-wrapper'};return _react2.default.createElement(wrapper,wProps,[input])}}}]);return Input}(_react2.default.Component);Input.contextTypes={wizard:_react2.default.PropTypes.object};Input.propTypes={type:_react2.default.PropTypes.string.isRequired,name:_react2.default.PropTypes.string.isRequired,label:_react2.default.PropTypes.string,required:_react2.default.PropTypes.bool,instantValidation:_react2.default.PropTypes.bool,inputId:_react2.default.PropTypes.string,placeholder:_react2.default.PropTypes.string,validators:_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.object),className:_react2.default.PropTypes.string,defaultValue:_react2.default.PropTypes.string,wrapper:_react2.default.PropTypes.func};Input.defaultProps={required:false,validators:[],className:'',outerClassName:''};var Form=exports.Form=function(_React$Component3){_inherits(Form,_React$Component3);function Form(props){_classCallCheck(this,Form);var _this4=_possibleConstructorReturn(this,(Form.__proto__||Object.getPrototypeOf(Form)).call(this));_this4.mounted=false;_this4.formInputs=[];_this4.htmlForm=null;_this4.state={};_this4.componentWillReceiveProps(props);_this4._handleOnSubmit=_this4._handleOnSubmit.bind(_this4);_this4.data=_this4.data.bind(_this4);return _this4}_createClass(Form,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){this.props=nextProps;this.formData=nextProps.formData;this.formProps=Object.assign({'noValidate':true},nextProps);delete this.formProps.formData;delete this.formProps.processHTMLInputs;delete this.formProps.instantValidation;delete this.formProps.onValidationError;delete this.formProps.onSubmit;delete this.formProps.wrapper;delete this.formProps.validation;if(this.mounted){this.forceUpdate()}}},{key:'data',value:function data(){return this.formData}},{key:'getChildContext',value:function getChildContext(){var self=this;return{wizard:self}}},{key:'_handleOnSubmit',value:function _handleOnSubmit(event){var _this5=this;event.preventDefault();(0,_iJsUtils.devOnly)(function(){console.debug('Submit (Form)',event,_this5.formData)});var ret=true;this.formInputs.forEach(function(fin){if(!fin.validate()){ret=false;(0,_iJsUtils.devOnly)(function(){console.debug('Invalid field',fin)})}});if(this.props.processHTMLInputs&&this.htmlForm){var out=this.item;var elements=this.htmlForm.getElementsByTagName('input');for(var i=0;i<elements.length;++i){var e=elements[i];var name=e.getAttribute('name');var value=e.getAttribute('value');if(name&&name.length>0&&value&&value.length>0){(0,_iJsUtils.setObjProperty)(out,name,value)}}elements=this.htmlForm.getElementsByTagName('select');for(var i=0;i<elements.length;++i){var e=elements[i];var name=e.getAttribute('name');var value=e.options[e.selectedIndex].value;if(name&&name.length>0&&value&&value.length>0){(0,_iJsUtils.setObjProperty)(out,name,value)}}}if(this.props.validation){var ret2=this.props.validation(event,this,ret);(0,_iJsUtils.devOnly)(function(){console.debug('Form validation returned',ret2,'for',event,_this5,ret)});ret=ret2}if(ret){if(this.props.onSubmit){this.props.onSubmit(event,this)}}else{if(this.props.onValidationError){this.props.onValidationError(event,this)}}}},{key:'componentDidMount',value:function componentDidMount(){this.componentWillReceiveProps(this.props);this.mounted=true}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.mounted=false}},{key:'render',value:function render(){return _react2.default.createElement('div',null,_react2.default.createElement('form',_extends({},this.formProps,{onSubmit:this._handleOnSubmit}),this.props.children))}}]);return Form}(_react2.default.Component);Form.childContextTypes={wizard:_react2.default.PropTypes.object};Form.propTypes={formData:_react2.default.PropTypes.object,instantValidation:_react2.default.PropTypes.bool,processHTMLInputs:_react2.default.PropTypes.bool,onValidationError:_react2.default.PropTypes.func,validation:_react2.default.PropTypes.func,onSubmit:_react2.default.PropTypes.func,wrapper:_react2.default.PropTypes.func};Form.defaultProps={instantValidation:false,formData:{},processHTMLInputs:true};