dynamic-material-ui
Version:
Material UI based dynamic form component for React using JSON-Schema
1 lines • 9.39 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{1175:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=[{id:1,type:"textfield",props:{id:"name",label:"Hello, Whats your name?",fullWidth:!0,margin:"normal"},rules:{validation:[{rule:"mandatory",message:"Name is required!!"}]},layout:{row:1,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:2,type:"textfield",props:{id:"mobile",fullWidth:!0,defaultValue:"",label:"Whats your mobile number?",margin:"normal"},rules:{validation:[{rule:"mandatory",message:"Please fill the field"},{rule:"mobile",message:"Should be Australian number",value:"en-AU"}]},layout:{row:2,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:3,type:"radio",props:{name:"gender",value:"male",style:{marginTop:"30px"}},options:[{value:"male",label:"Male"},{value:"female",label:"Female"},{value:"other",label:"Other"}],layout:{row:3,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:4,type:"textfield",props:{id:"email",label:"What is yor personal email?",type:"email",fullWidth:!0,margin:"normal"},rules:{isDisplayText:!0,validation:[{rule:"email",message:"Please enter valid email!!"}]},layout:{row:4,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:5,type:"selectfield",props:{id:"locations",label:"Which of these places is capital of Australia?",selected:"Sydney",margin:"normal",style:{width:"400px"}},options:[{value:"Sydney",primaryText:"Sydney"},{value:"Melbourne",primaryText:"Melbourne"},{value:"Adelaide",primaryText:"Adelaide"},{value:"Canberra",primaryText:"Canberra"}],rules:{validation:[{rule:"equals",value:"Sydney",message:"Your answer is incorrect. Try again!!!"}]},layout:{row:5,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:6,type:"checkbox",props:{id:"hobbies",label:"Are you living your life?",style:{marginTop:"30px"},defaultChecked:!0},layout:{row:6,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:7,type:"toggle",props:{id:"dynamic",label:"Are you loving dynamic-material-ui?",defaultToggled:!0},layout:{row:7,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:8,type:"datepicker",props:{id:"dob",label:"Hey Lucky, What is your date of birth?",style:{marginTop:"30px",width:"100%"}},layout:{row:8,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}},{id:9,type:"timepicker",props:{id:"wakeup",label:"When do you wake up in the morning?",style:{marginTop:"30px",marginBottom:"30px",width:"100%"}},layout:{row:9,xs:{col:6},sm:{col:6},md:{col:6},lg:{col:6}}}];t.default=a},187:function(e,t,r){"use strict";function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=S(r(0)),o=(S(r(1)),r(107)),n=S(r(232)),i=S(r(234));r(223);var u=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==a(e)&&"function"!=typeof e)return{default:e};var t=v();if(t&&t.has(e))return t.get(e);var r={},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var n=l?Object.getOwnPropertyDescriptor(e,o):null;n&&(n.get||n.set)?Object.defineProperty(r,o,n):r[o]=e[o]}r.default=e,t&&t.set(e,r);return r}(r(230)),s=S(r(224)),c=S(r(217)),d=S(r(218)),f=S(r(219)),m=S(r(220)),p=S(r(216)),y=S(r(273)),h=S(r(211)),b=r(227),g=S(r(1175));function v(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return v=function(){return e},e}function S(e){return e&&e.__esModule?e:{default:e}}function w(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function x(e,t){return(x=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,a=D(e);if(t){var l=D(this).constructor;r=Reflect.construct(a,arguments,l)}else r=a.apply(this,arguments);return O(this,r)}}function O(e,t){return!t||"object"!==a(t)&&"function"!=typeof t?k(e):t}function k(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function D(e){return(D=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&x(e,t)}(S,e);var t,r,a,v=E(S);function S(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,S),(t=v.call(this,e)).state={formData:g.default,response:"",errors:"",displayFormErrors:!1},t.onUpdate=t.onUpdate.bind(k(t)),t.onSubmit=t.onSubmit.bind(k(t)),t.triggerSubmit=t.triggerSubmit.bind(k(t)),t}return t=S,(r=[{key:"onUpdate",value:function(){}},{key:"onSubmit",value:function(e,t,r){this.setState({response:JSON.stringify(e,null,2),errors:JSON.stringify(t,null,2),formData:r,displayFormErrors:!0})}},{key:"triggerSubmit",value:function(e){this.formRef.click()}},{key:"render",value:function(){var e=this,t=this.props.classes,r=this.state,a=r.formData,v=r.displayFormErrors,S=r.response,w=r.errors;return l.default.createElement(o.Page,null,l.default.createElement("p",null,"Hey stranger, I wanna get to know you better!"),l.default.createElement("hr",null),l.default.createElement("div",{className:"full-width codedemo row"},l.default.createElement(y.default,{item:!0,xs:12,sm:12,md:12,xl:12,lg:12},l.default.createElement(b.FormGenerator,{data:a,guid:"simple-form",library:u,onChange:this.onUpdate,patch:{1:"Patched Name",4:"xxxxx@gmail.com"},displayErrors:v,formRef:function(t){e.formRef=t},onSubmit:this.onSubmit}),l.default.createElement(s.default,{color:"primary",variant:"contained",onClick:this.triggerSubmit},"Complete Survey")),l.default.createElement("div",{className:"col-md-12"},l.default.createElement("h4",null,"Refer the response on submit"),l.default.createElement("h4",{style:{color:"green"}},"Response Form Data"),l.default.createElement("div",{style:{fontSize:"14px",color:"#7f7d7d"}},l.default.createElement("pre",null,S||"<>")),l.default.createElement("h4",{style:{color:"red"}},"Errors"),l.default.createElement("div",{style:{fontSize:"14px",color:"#7f7d7d"}},l.default.createElement("pre",null,w||"<>")))),l.default.createElement(h.default,{className:t.root},l.default.createElement(c.default,{className:t.table},l.default.createElement(f.default,null,l.default.createElement(m.default,null,l.default.createElement(p.default,null,"Source Code"),l.default.createElement(p.default,null,"JSON Schema"))),l.default.createElement(d.default,null,l.default.createElement(m.default,null,l.default.createElement(p.default,null,l.default.createElement("div",{className:"syntax"},l.default.createElement(i.default,{className:"javascript"},"\nimport { FormGenerator } from 'dynamic-material-ui';\nimport * as MUI from '@material-ui/core';\n// Refer JSON data on the right side column\nimport JSONData from 'src/path';\n\nclass SimpleForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n formData: JSONData,\n displayFormErrors: false\n }\n this.onSubmit = this.onSubmit.bind(this);\n this.triggerSubmit = this.triggerSubmit.bind(this);\n }\n onSubmit(response, errors, formData) {\n this.setState({\n formData, //!important to reset the formData to retain the updated form values on UI\n displayFormErrors: true //To display field errors\n });\n }\n triggerSubmit(data) {\n this.formRef.click();\n }\n render() {\n return (\n <div>\n <FormGenerator\n guid=\"simple-form\" //mandatory unique id\n data={this.state.formData}\n displayErrors={this.state.displayFormErrors} //Displays only mandatory field errors\n library={MUI}\n forceUpdate={false} //Default(false) -> Force update the form data\n patch={{ 1 : 'Patched Name' }} //pass patch to update the data partially {\"1\": \"Name\"}\n onChange={this.onUpdate}\n formRef={\n (form) => {\n this.formRef = form;\n }\n }\n onSubmit={this.onSubmit}\n />\n <button onClick={this.triggerSubmit}>Submit</button>\n </div>\n )\n }\n}\n "))),l.default.createElement(p.default,null,l.default.createElement(n.default,{data:g.default})))))))}}])&&w(t.prototype,r),a&&w(t,a),S}(l.default.Component);P.propTypes={};var R=u.withStyles((function(e){return{root:{width:"100%",marginTop:e.spacing(3),overflowX:"auto"},table:{minWidth:700},container:{display:"flex",flexWrap:"wrap",width:"100%"},textField:{marginLeft:e.spacing(1),marginRight:e.spacing(1),width:200},dense:{marginTop:19},menu:{width:200}}}))(P);t.default=R},224:function(e,t,r){"use strict";r.r(t);var a=r(316);r.d(t,"default",(function(){return a.a}))},273:function(e,t,r){"use strict";r.r(t);var a=r(482);r.d(t,"default",(function(){return a.a}))}}]);