redux-simpleform/dist/RestForm.js

Quickly auto generate simple React forms styled with Bootstrap 4

"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var _extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=require("babel-runtime/helpers/objectWithoutProperties"),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_regenerator=require("babel-runtime/regenerator"),_regenerator2=_interopRequireDefault(_regenerator),_asyncToGenerator2=require("babel-runtime/helpers/asyncToGenerator"),_asyncToGenerator3=_interopRequireDefault(_asyncToGenerator2),_stringify=require("babel-runtime/core-js/json/stringify"),_stringify2=_interopRequireDefault(_stringify),_getPrototypeOf=require("babel-runtime/core-js/object/get-prototype-of"),_getPrototypeOf2=_interopRequireDefault(_getPrototypeOf),_classCallCheck2=require("babel-runtime/helpers/classCallCheck"),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=require("babel-runtime/helpers/createClass"),_createClass3=_interopRequireDefault(_createClass2),_possibleConstructorReturn2=require("babel-runtime/helpers/possibleConstructorReturn"),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=require("babel-runtime/helpers/inherits"),_inherits3=_interopRequireDefault(_inherits2),_react=require("react"),_react2=_interopRequireDefault(_react),_SimpleForm=require("simpleform/dist/SimpleForm"),_SimpleForm2=_interopRequireDefault(_SimpleForm),_scroller=require("react-scroll/lib/mixins/scroller"),_scroller2=_interopRequireDefault(_scroller),propTypes={formName:_react.PropTypes.string,formMsg:_react.PropTypes.any,formStatus:_react.PropTypes.string,endpoint:_react.PropTypes.string.isRequired,setStatus:_react.PropTypes.func.isRequired,onResponse:_react.PropTypes.func,onFormWillFetch:_react.PropTypes.func,fetchFunc:_react.PropTypes.func,waitText:_react.PropTypes.string,errorText:_react.PropTypes.string,successText:_react.PropTypes.string,welcomeText:_react.PropTypes.string,scrollOrigin:_react.PropTypes.string},defaultProps={formName:"redux-form",waitText:"Uploading form. Please wait ...",errorText:"Houston, we have a problem!",successText:"Your form has been submitted successfully",welcomeText:"Welcome, please fill in the form below:"},RestForm=function(e){function t(){var e,r,s,o;(0,_classCallCheck3.default)(this,t);for(var n=arguments.length,a=Array(n),i=0;i<n;i++)a[i]=arguments[i];return r=s=(0,_possibleConstructorReturn3.default)(this,(e=t.__proto__||(0,_getPrototypeOf2.default)(t)).call.apply(e,[this].concat(a))),s.isProcessing=!1,o=r,(0,_possibleConstructorReturn3.default)(s,o)}return(0,_inherits3.default)(t,e),(0,_createClass3.default)(t,[{key:"jsonFetch",value:function(e){return fetch(this.props.endpoint,{method:"POST",headers:{Accept:"application/json","Content-Type":"text/plain"},body:(0,_stringify2.default)(e)})}},{key:"handleApiCall",value:function(){function e(e){return t.apply(this,arguments)}var t=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function e(t){var r;return _regenerator2.default.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(!this.props.onFormWillFetch){e.next=4;break}return e.next=3,this.props.onFormWillFetch(t);case 3:t=e.sent;case 4:return e.next=6,"function"==typeof this.props.fetchFunc?this.props.fetchFunc(t):this.jsonFetch(t);case 6:if(r=e.sent,!(r.status<200||r.status>=300)){e.next=9;break}throw new Error(r.status+" ("+r.statusText+")");case 9:if("function"!=typeof this.props.onResponse){e.next=15;break}return e.next=12,this.props.onResponse(r);case 12:e.t0=e.sent,e.next=16;break;case 15:e.t0=this.props.successText;case 16:return e.abrupt("return",e.t0);case 17:case"end":return e.stop()}},e,this)}));return e}()},{key:"handleSubmit",value:function(){function e(e){return t.apply(this,arguments)}var t=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function e(t){return _regenerator2.default.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(!this.isProcessing){e.next=2;break}return e.abrupt("return");case 2:return this.isProcessing=!0,this.props.setStatus("info",this.props.waitText,!0),this.props.scrollOrigin&&_scroller2.default.scrollTo(this.props.scrollOrigin,{duration:500,delay:0,smooth:!0}),e.prev=5,e.t0=this.props,e.next=9,this.handleApiCall(t);case 9:e.t1=e.sent,e.t0.setStatus.call(e.t0,"success",e.t1),e.next=16;break;case 13:e.prev=13,e.t2=e.catch(5),this.props.setStatus("danger",e.t2.message||e.t2);case 16:return e.prev=16,this.isProcessing=!1,e.finish(16);case 19:case"end":return e.stop()}},e,this,[[5,13,16,19]])}));return e}()},{key:"render",value:function(){var e=this.props,t=(e.store,e.formName,e.formMsg),r=e.formStatus,s=(e.endpoint,e.setStatus),o=(e.onResponse,e.onFormWillFetch,e.waitText,e.errorText,e.successText,e.welcomeText,e.scrollOrigin,e.formType,e.fetchFunc,(0,_objectWithoutProperties3.default)(e,["store","formName","formMsg","formStatus","endpoint","setStatus","onResponse","onFormWillFetch","waitText","errorText","successText","welcomeText","scrollOrigin","formType","fetchFunc"]));if("string"==typeof t){var n=_react2.default.createElement("button",{onClick:function(){return s()},className:"btn btn-outline-"+r},"Go back to the form");return _react2.default.createElement("div",{key:"alert"+r,style:_SimpleForm2.default.animate(),className:"simpleform-fadeIn alert alert-"+r,role:"alert"},"danger"===r?_react2.default.createElement("h4",{className:"alert-heading"},this.props.errorText):void 0,_react2.default.createElement("p",null,t),n)}return _react2.default.createElement("div",{key:"form",style:_SimpleForm2.default.animate(),className:"simpleform-fadeIn"},_react2.default.createElement("p",null,this.props.welcomeText),_react2.default.createElement(_SimpleForm2.default,(0,_extends3.default)({},o,{onSubmit:this.handleSubmit.bind(this)})))}}]),t}(_react.Component);RestForm.propTypes=propTypes,RestForm.defaultProps=defaultProps,exports.default=RestForm,module.exports=exports.default;