dynamic-material-ui
Version:
Material UI based dynamic form component for React using JSON-Schema
1 lines • 5.84 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{1177:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=[{id:"simple",type:"selectfield",props:{id:"simple",label:"Country",style:{width:"400px"}},options:[{value:"australia",primaryText:"Australia"},{value:"india",primaryText:"India"},{value:"usa",primaryText:"USA"},{value:"canada",primaryText:"Canada"}]},{id:"disable",type:"selectfield",props:{id:"disable",label:"Disabled",disabled:!0,style:{width:"400px"}},options:[{value:"australia",primaryText:"Australia"},{value:"india",primaryText:"India"}]},{id:"nullable",type:"selectfield",props:{id:"nullable",label:"",errorText:"Cannot be empty!",errorStyle:{color:"red"},value:null,style:{width:"400px"}},options:[{value:null,primaryText:""},{value:"yes",primaryText:"YES"},{value:"no",primaryText:"NO"}]},{id:"label",type:"selectfield",props:{id:"label",selected:1,style:{width:"400px"}},options:[{value:1,primaryText:"Morning",label:"5 am - 12 pm"},{value:2,primaryText:"Afternoon",label:"12 pm - 5 pm"},{value:3,primaryText:"Evening",label:"5 pm - 9 pm"},{value:4,primaryText:"Night",label:"9 pm - 5 am"}]}];t.default=n},189:function(e,t,r){"use strict";function n(e){return(n="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 a=h(r(0)),l=(h(r(1)),r(107)),o=h(r(232)),i=h(r(234));r(223);var u=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==n(e)&&"function"!=typeof e)return{default:e};var t=v();if(t&&t.has(e))return t.get(e);var r={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if(Object.prototype.hasOwnProperty.call(e,l)){var o=a?Object.getOwnPropertyDescriptor(e,l):null;o&&(o.get||o.set)?Object.defineProperty(r,l,o):r[l]=e[l]}r.default=e,t&&t.set(e,r);return r}(r(230)),c=h(r(217)),f=h(r(218)),d=h(r(219)),p=h(r(220)),s=h(r(216)),m=h(r(211)),y=r(227),b=h(r(1177));function v(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return v=function(){return e},e}function h(e){return e&&e.__esModule?e:{default:e}}function w(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(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,n=S(e);if(t){var a=S(this).constructor;r=Reflect.construct(n,arguments,a)}else r=n.apply(this,arguments);return O(this,r)}}function O(e,t){return!t||"object"!==n(t)&&"function"!=typeof t?E(e):t}function E(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var T=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&&g(e,t)}(h,e);var t,r,n,v=x(h);function h(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),(t=v.call(this,e)).state={formData:{}},t.onUpdate=t.onUpdate.bind(E(t)),t}return t=h,(r=[{key:"onUpdate",value:function(){var e=arguments.length<=0?void 0:arguments[0],t=this.state.formData;"textfield"===e.type&&(t[e.id]=arguments.length<=2?void 0:arguments[2]),this.setState({formData:t})}},{key:"render",value:function(){var e=this.props.classes;return a.default.createElement(l.Page,null,a.default.createElement("p",null,"SelectField is implemented as a controlled selection component."),a.default.createElement("hr",null),a.default.createElement("div",{className:"full-width codedemo row"},a.default.createElement("div",{className:"col-md-24"},a.default.createElement(y.FormGenerator,{guid:"selectfield",data:b.default,library:u,onChange:this.onUpdate}))),a.default.createElement(m.default,{className:e.root},a.default.createElement(c.default,{className:e.table},a.default.createElement(d.default,null,a.default.createElement(p.default,null,a.default.createElement(s.default,null,"Source Code"),a.default.createElement(s.default,null,"JSON Schema"))),a.default.createElement(f.default,null,a.default.createElement(p.default,null,a.default.createElement(s.default,null,a.default.createElement("div",{className:"syntax"},a.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 SelectField extends React.Component {\n render() {\n return (\n <div>\n <FormGenerator\n guid=\"selectfield\"\n data={JSONData}\n library={MUI}\n />\n </div>\n )\n }\n}\n "))),a.default.createElement(s.default,null,a.default.createElement(o.default,{data:b.default})))))))}}])&&w(t.prototype,r),n&&w(t,n),h}(a.default.Component);T.propTypes={};var j=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}}}))(T);t.default=j}}]);