nfttrace-form-builder
Version:
A complete form builder for react.
1 lines • 30.6 kB
JavaScript
(window.webpackJsonpReactFormBuilder=window.webpackJsonpReactFormBuilder||[]).push([[1],{391:function(e,t,a){e.exports=function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)e[n]=a[n]}return e}return function t(a,n){function l(t,l,r){if("undefined"!=typeof document){"number"==typeof(r=e({},n,r)).expires&&(r.expires=new Date(Date.now()+864e5*r.expires)),r.expires&&(r.expires=r.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var o="";for(var s in r)r[s]&&(o+="; "+s,!0!==r[s]&&(o+="="+r[s].split(";")[0]));return document.cookie=t+"="+a.write(l,t)+o}}return Object.create({set:l,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],n={},l=0;l<t.length;l++){var r=t[l].split("="),o=r.slice(1).join("=");try{var s=decodeURIComponent(r[0]);if(n[s]=a.read(o,s),e===s)break}catch(e){}}return e?n[e]:n}},remove:function(t,a){l(t,"",e({},a,{expires:-1}))},withAttributes:function(a){return t(this.converter,e({},this.attributes,a))},withConverter:function(a){return t(e({},this.converter,a),this.attributes)}},{attributes:{value:Object.freeze(n)},converter:{value:Object.freeze(a)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})}()},392:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return D}));var n=a(95),l=a.n(n),r=a(9),o=a.n(r),s=a(10),i=a.n(s),c=a(11),m=a.n(c),p=a(18),u=a.n(p),d=a(13),h=a.n(d),v=a(0),f=a.n(v),E=a(185),b=a(93),y=a(126),g=a.n(y),N=a(127),w=a(20),k=a.n(w),x=a(128);function C(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 Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=h()(e);if(t){var l=h()(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return u()(this,a)}}var O=function(e){m()(a,e);var t=C(a);function a(e){var n;return o()(this,a),(n=t.call(this,e)).state={element:n.props.element,data:n.props.data,dirty:!1},n}return i()(a,[{key:"_setValue",value:function(e){return e.replace(/[^A-Z0-9]+/gi,"_").toLowerCase()}},{key:"editOption",value:function(e,t){var a=this.state.element,n=a.options[e].value!==this._setValue(a.options[e].text)?a.options[e].value:this._setValue(t.target.value);a.options[e].text=t.target.value,a.options[e].value=n,this.setState({element:a,dirty:!0})}},{key:"editValue",value:function(e,t){var a=this.state.element,n=""===t.target.value?this._setValue(a.options[e].text):t.target.value;a.options[e].value=n,this.setState({element:a,dirty:!0})}},{key:"editOptionCorrect",value:function(e,t){var a=this.state.element;a.options[e].hasOwnProperty("correct")?delete a.options[e].correct:a.options[e].correct=!0,this.setState({element:a}),this.props.updateElement.call(this.props.preview,a)}},{key:"updateOption",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"addOption",value:function(e){var t=this.state.element;t.options.splice(e+1,0,{value:"",text:"",key:k.a.uuid()}),this.props.updateElement.call(this.props.preview,t)}},{key:"removeOption",value:function(e){var t=this.state.element;t.options.splice(e,1),this.props.updateElement.call(this.props.preview,t)}},{key:"render",value:function(){var e=this;return this.state.dirty&&(this.state.element.dirty=!0),f.a.createElement("div",{className:"dynamic-option-list"},f.a.createElement("ul",null,f.a.createElement("li",null,f.a.createElement("div",{className:"row"},f.a.createElement("div",{className:"col-sm-6"},f.a.createElement("b",null,f.a.createElement(x.a,{id:"options"}))),this.props.canHaveOptionValue&&f.a.createElement("div",{className:"col-sm-2"},f.a.createElement("b",null,f.a.createElement(x.a,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&f.a.createElement("div",{className:"col-sm-4"},f.a.createElement("b",null,f.a.createElement(x.a,{id:"correct"}))))),this.props.element.options.map((function(t,a){var n="edit_".concat(t.key),l=t.value!==e._setValue(t.text)?t.value:"";return f.a.createElement("li",{className:"clearfix",key:n},f.a.createElement("div",{className:"row"},f.a.createElement("div",{className:"col-sm-6"},f.a.createElement("input",{tabIndex:a+1,className:"form-control",style:{width:"100%"},type:"text",name:"text_".concat(a),placeholder:"Option text",value:t.text,onBlur:e.updateOption.bind(e),onChange:e.editOption.bind(e,a)})),e.props.canHaveOptionValue&&f.a.createElement("div",{className:"col-sm-2"},f.a.createElement("input",{className:"form-control",type:"text",name:"value_".concat(a),value:l,onChange:e.editValue.bind(e,a)})),e.props.canHaveOptionValue&&e.props.canHaveOptionCorrect&&f.a.createElement("div",{className:"col-sm-1"},f.a.createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),f.a.createElement("div",{className:"col-sm-3"},f.a.createElement("div",{className:"dynamic-options-actions-buttons"},f.a.createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},f.a.createElement("i",{className:"fas fa-plus-circle"})),a>0&&f.a.createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},f.a.createElement("i",{className:"fas fa-minus-circle"}))))))}))))}}]),a}(f.a.Component),P=a(111),S=a(66),B=a.n(S),F=a(4),_=a.n(F),I=a(5),V=a.n(I),T=a(44),R=a.n(T),H=a(391),A=a.n(H);function z(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 Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=h()(e);if(t){var l=h()(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return u()(this,a)}}var U=function(e){m()(n,e);var t,a=z(n);function n(e){var t;return o()(this,n),t=a.call(this,e),V()(_()(t),"handleIconChange",(function(e,a){var n=a.target.value;t.editValue(e,a,"icon"),t.setState({activeIconIndex:e}),clearTimeout(t.debounceTimeout),t.debounceTimeout=setTimeout((function(){t.fetchIcons(e,n)}),300)})),V()(_()(t),"onSelectIcon",(function(e){var a,n,l=t.state.element;l.list[t.state.activeIconIndex].icon=null===(a=e.raster_sizes[5])||void 0===a?void 0:a.formats[0].preview_url,t.setState({element:l,selectedIcon:null===(n=e.raster_sizes[5])||void 0===n?void 0:n.formats[0].preview_url,activeIconIndex:null}),t.updateOption()})),t.state={element:t.props.element,dirty:!1,activeIconIndex:null,iconList:[],loading:!0,selectedIcon:null},t}return i()(n,[{key:"_setValue",value:function(e){return e.replace(/[^A-Z0-9]+/gi,"_").toLowerCase()}},{key:"editValue",value:function(e,t,a){var n=this,l=this.state.element,r=t.target.value;l.list[e.toString()][a]=r,this.setState({element:l,dirty:!0},(function(){"bgColor"===a&&n.updateOption()}))}},{key:"updateOption",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"fetchIcons",value:(t=B()(R.a.mark((function e(t,a){var n,l,r,o,s;return R.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(a){e.next=2;break}return e.abrupt("return");case 2:return this.setState({loading:!0}),n=this.props.element.baseUrl||this.props.baseUrl,l=A.a.get("authToken"),r="".concat(n,"/api/v1/icons/search?query=").concat(a),e.prev=6,e.next=9,fetch(r,{method:"GET",headers:{Authorization:"Bearer ".concat(l)}});case 9:if((o=e.sent).ok){e.next=12;break}throw new Error("Error: ".concat(o.status));case 12:return e.next=14,o.json();case 14:s=e.sent,this.setState({iconList:s.icons,loading:!1}),e.next=21;break;case 18:e.prev=18,e.t0=e.catch(6),this.setState({loading:!1});case 21:case"end":return e.stop()}}),e,this,[[6,18]])}))),function(e,a){return t.apply(this,arguments)})},{key:"render",value:function(){var e=this;return f.a.createElement("div",{className:"dynamic-option-list mt-3"},this.props.element.list.map((function(t,a){return f.a.createElement("div",{key:a,className:"dynamic-option-list-item"},f.a.createElement("div",{className:"d-flex align-items-center mb-2",style:{gap:"10px"}},f.a.createElement("input",{type:"text",value:t.link,placeholder:"Enter link",className:"form-control",onChange:function(t){return e.editValue(a,t,"link")},onBlur:e.updateOption.bind(e),style:{maxWidth:"200px"}}),f.a.createElement("input",{type:"text",value:t.text,placeholder:"Enter text",className:"form-control",onChange:function(t){return e.editValue(a,t,"text")},onBlur:e.updateOption.bind(e),style:{maxWidth:"150px"}}),f.a.createElement("div",{className:"position-relative"},f.a.createElement("input",{type:"text",value:t.icon,placeholder:"Search and select the icon",className:"form-control",onChange:function(t){return e.handleIconChange(a,t)}}),e.state.activeIconIndex==a&&f.a.createElement("div",{className:"position-absolute text-center z-index-1 bg-white w-100 p-1 border border-gray",style:{top:"100%",zIndex:99,borderRadius:"5px"}},e.state.loading&&0==e.state.iconList.length&&f.a.createElement("div",{className:"spinner-border",role:"status"}),!e.state.loading&&e.state.iconList.length>0&&f.a.createElement("div",{className:"icon-container"},f.a.createElement("div",{className:"icon-list"},e.state.iconList.map((function(t){var a,n,l;return(null===(a=t.raster_sizes[5])||void 0===a?void 0:a.formats[0].preview_url)&&f.a.createElement("img",{key:t.icon_id,src:null===(n=t.raster_sizes[5])||void 0===n?void 0:n.formats[0].preview_url,alt:"icon",className:"icon-item ".concat(e.state.selectedIcon==(null===(l=t.raster_sizes[5])||void 0===l?void 0:l.formats[0].preview_url)?"selected-pale-icon":""),style:{width:40},onClick:function(){return e.onSelectIcon(t)}})})))))),f.a.createElement("input",{type:"color",value:t.bgColor,className:"form-control border-0 p-0 bg-transparent",style:{minWidth:"25px",maxWidth:"25px",minHeight:"25px",maxHeight:"25px"},onChange:function(t){return e.editValue(a,t,"bgColor")}})))})))}}]),n}(f.a.Component);function L(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 Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=h()(e);if(t){var l=h()(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return u()(this,a)}}var q={options:["inline","list","textAlign","fontSize","link","history","colorPicker"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},D=function(e){m()(a,e);var t=L(a);function a(e){var n;return o()(this,a),(n=t.call(this,e)).state={element:n.props.element,data:n.props.data,dirty:!1},n}return i()(a,[{key:"toggleRequired",value:function(){}},{key:"editElementProp",value:function(e,t,a){var n=this,l=this.state.element;l[e]=a.target[t],this.setState({element:l,dirty:!0},(function(){"checked"===t&&n.updateElement()}))}},{key:"editPaleteElementProp",value:function(e,t,a){var n=this,l=this.state.element;if(l[e]=a.target[t],"rows"===e||"cols"===e){var r=parseInt(l.rows)*parseInt(l.cols);r>0&&(l.list=this.updateListSize(l.list,r),this.setState({element:l,dirty:!0},(function(){"checked"===t&&n.updateElement()})))}}},{key:"updateListSize",value:function(e,t){return e.length<t?[].concat(l()(e),l()(Array.from({length:t-e.length},(function(){return{icon:"",link:"",text:"",bgColor:"#429a62"}})))):e.slice(0,t)}},{key:"onEditorStateChange",value:function(e,t,a){var n=g()(Object(b.convertToRaw)(a.getCurrentContent())).replace(/<p>/g,"").replace(/<\/p>/g,"").replace(/ /g," ").replace(/(?:\r\n|\r|\n)/g," "),l=this.state.element;l[t]=n,this.setState({element:l,dirty:!0})}},{key:"updateElement",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"convertFromHTML",value:function(e){var t=Object(b.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return b.EditorState.createEmpty();var a=b.ContentState.createFromBlockArray(t);return b.EditorState.createWithContent(a)}},{key:"addOptions",value:function(){var e=this,t=document.getElementById("optionsApiUrl").value;t&&Object(P.a)(t).then((function(t){e.props.element.options=[];var a=e.props.element.options;t.forEach((function(e){e.key=k.a.uuid(),a.push(e)}));var n=e.state.element;e.setState({element:n,dirty:!0})}))}},{key:"render",value:function(){this.state.dirty&&(this.props.element.dirty=!0);var e,t=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,a=!!this.props.element.hasOwnProperty("readOnly")&&this.props.element.readOnly,n=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,l=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,r=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,o=!!this.props.element.hasOwnProperty("showTimeInput")&&this.props.element.showTimeInput,s=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,i=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,c=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,m=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,p=!!this.props.element.hasOwnProperty("pageBreakBefore")&&this.props.element.pageBreakBefore,u=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,d=this.props.element,h=d.canHavePageBreakBefore,v=d.canHaveAlternateForm,b=d.canHaveDisplayHorizontal,y=d.canHaveOptionCorrect,g=d.canHaveOptionValue,w="Image"===this.state.element.element||"Camera"===this.state.element.element,k=this.props.files.length?this.props.files:[];return(k.length<1||k.length>0&&""!==k[0].id)&&k.unshift({id:"",file_name:""}),this.props.element.hasOwnProperty("content")&&(e=this.convertFromHTML(this.props.element.content)),this.props.element.hasOwnProperty("label")&&(e=this.convertFromHTML(this.props.element.label)),f.a.createElement("div",null,f.a.createElement("div",{className:"clearfix"},f.a.createElement("h4",{className:"float-left"},this.props.element.text),f.a.createElement("i",{className:"float-right fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label"},f.a.createElement(x.a,{id:"text-to-display"}),":"),f.a.createElement(N.Editor,{toolbar:q,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"fileSelect"},f.a.createElement(x.a,{id:"choose-file"}),":"),f.a.createElement("select",{id:"fileSelect",className:"form-control",defaultValue:this.props.element.file_path,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"file_path","value")},k.map((function(e){var t="file_".concat(e.id);return f.a.createElement("option",{value:e.id,key:t},e.file_name)})))),this.props.element.hasOwnProperty("href")&&f.a.createElement("div",{className:"form-group"},f.a.createElement(E.default,{type:"text",className:"form-control",defaultValue:this.props.element.href,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"href","value")})),this.props.element.hasOwnProperty("label")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",null,f.a.createElement(x.a,{id:"display-label"})),f.a.createElement(N.Editor,{toolbar:q,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),f.a.createElement("br",null),!this.props.element.hasOwnProperty("rows")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"is-required",className:"custom-control-input",type:"checkbox",checked:t,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"is-required"},f.a.createElement(x.a,{id:"required"}))),this.props.element.hasOwnProperty("readOnly")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"is-read-only",className:"custom-control-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"is-read-only"},f.a.createElement(x.a,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"is-default-to-today",className:"custom-control-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"is-default-to-today"},f.a.createElement(x.a,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"show-time-select",className:"custom-control-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select"},f.a.createElement(x.a,{id:"show-time-select"}),"?")),l&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"show-time-select-only",className:"custom-control-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select-only"},f.a.createElement(x.a,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"show-time-input",className:"custom-control-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-input"},f.a.createElement(x.a,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&b&&f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"display-horizontal",className:"custom-control-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"display-horizontal"},f.a.createElement(x.a,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&f.a.createElement("div",null,f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"srcInput"},f.a.createElement(x.a,{id:"link-to"}),":"),f.a.createElement("input",{id:"srcInput",type:"text",className:"form-control",defaultValue:this.props.element.src,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"src","value")}))),w&&f.a.createElement("div",null,f.a.createElement("div",{className:"form-group"},f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"do-center",className:"custom-control-input",type:"checkbox",checked:m,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"do-center"},f.a.createElement(x.a,{id:"center"}),"?"))),f.a.createElement("div",{className:"row"},f.a.createElement("div",{className:"col-sm-3"},f.a.createElement("label",{className:"control-label",htmlFor:"elementWidth"},f.a.createElement(x.a,{id:"width"}),":"),f.a.createElement("input",{id:"elementWidth",type:"text",className:"form-control",defaultValue:this.props.element.width,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"width","value")})),f.a.createElement("div",{className:"col-sm-3"},f.a.createElement("label",{className:"control-label",htmlFor:"elementHeight"},f.a.createElement(x.a,{id:"height"}),":"),f.a.createElement("input",{id:"elementHeight",type:"text",className:"form-control",defaultValue:this.props.element.height,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"height","value")})))),"FileUpload"===this.state.element.element&&f.a.createElement("div",null,f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"fileType"},f.a.createElement(x.a,{id:"choose-file-type"}),":"),f.a.createElement("select",{id:"fileType",className:"form-control",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileType","value")},[{type:"image, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation",typeName:"All File Type"},{type:"image",typeName:"Image"},{type:"application/pdf",typeName:"PDF"},{type:"video/mp4",typeName:"MP4 Video"}].map((function(e,t){return f.a.createElement("option",{value:e.type,key:t},e.typeName)}))))),"Signature"===this.state.element.element&&this.props.element.readOnly?f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"variableKey"},f.a.createElement(x.a,{id:"variable-key"}),":"),f.a.createElement("input",{id:"variableKey",type:"text",className:"form-control",defaultValue:this.props.element.variableKey,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"variableKey","value")}),f.a.createElement("p",{className:"help-block"},f.a.createElement(x.a,{id:"variable-key-desc"}),".")):f.a.createElement("div",null),h&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label"},f.a.createElement(x.a,{id:"print-options"})),f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"page-break-before-element",className:"custom-control-input",type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"pageBreakBefore","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"page-break-before-element"},f.a.createElement(x.a,{id:"page-break-before-elements"}),"?"))),v&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label"},f.a.createElement(x.a,{id:"alternate-signature-page"})),f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"display-on-alternate",className:"custom-control-input",type:"checkbox",checked:u,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"display-on-alternate"},f.a.createElement(x.a,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("div",{className:"form-group-range"},f.a.createElement("label",{className:"control-label",htmlFor:"rangeStep"},f.a.createElement(x.a,{id:"step"})),f.a.createElement("input",{id:"rangeStep",type:"number",className:"form-control",defaultValue:this.props.element.step,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"step","value")}))),this.props.element.hasOwnProperty("min_value")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("div",{className:"form-group-range"},f.a.createElement("label",{className:"control-label",htmlFor:"rangeMin"},f.a.createElement(x.a,{id:"min"})),f.a.createElement("input",{id:"rangeMin",type:"number",className:"form-control",defaultValue:this.props.element.min_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_value","value")}),f.a.createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.min_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_label","value")}))),this.props.element.hasOwnProperty("max_value")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("div",{className:"form-group-range"},f.a.createElement("label",{className:"control-label",htmlFor:"rangeMax"},f.a.createElement(x.a,{id:"max"})),f.a.createElement("input",{id:"rangeMax",type:"number",className:"form-control",defaultValue:this.props.element.max_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_value","value")}),f.a.createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.max_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_label","value")}))),this.props.element.hasOwnProperty("default_value")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("div",{className:"form-group-range"},f.a.createElement("label",{className:"control-label",htmlFor:"defaultSelected"},f.a.createElement(x.a,{id:"default-selected"})),f.a.createElement("input",{id:"defaultSelected",type:"number",className:"form-control",defaultValue:this.props.element.default_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"default_value","value")}))),this.props.element.hasOwnProperty("static")&&this.props.element.static&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label"},f.a.createElement(x.a,{id:"text-style"})),f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"do-bold",className:"custom-control-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"do-bold"},f.a.createElement(x.a,{id:"bold"}))),f.a.createElement("div",{className:"custom-control custom-checkbox"},f.a.createElement("input",{id:"do-italic",className:"custom-control-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),f.a.createElement("label",{className:"custom-control-label",htmlFor:"do-italic"},f.a.createElement(x.a,{id:"italic"})))),this.props.element.showDescription&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"questionDescription"},f.a.createElement(x.a,{id:"description"})),f.a.createElement(E.default,{type:"text",className:"form-control",id:"questionDescription",defaultValue:this.props.element.description,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"description","value")})),this.props.showCorrectColumn&&this.props.element.canHaveAnswer&&!this.props.element.hasOwnProperty("options")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"correctAnswer"},f.a.createElement(x.a,{id:"correct-answer"})),f.a.createElement("input",{id:"correctAnswer",type:"text",className:"form-control",defaultValue:this.props.element.correct,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"correct","value")})),this.props.element.canPopulateFromApi&&this.props.element.hasOwnProperty("options")&&f.a.createElement("div",{className:"form-group"},f.a.createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},f.a.createElement(x.a,{id:"populate-options-from-api"})),f.a.createElement("div",{className:"row"},f.a.createElement("div",{className:"col-sm-6"},f.a.createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),f.a.createElement("div",{className:"col-sm-6"},f.a.createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},f.a.createElement(x.a,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&f.a.createElement(O,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:y,canHaveOptionValue:g,data:this.props.preview.state.data,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}),"Palette"===this.props.element.element&&this.props.element.hasOwnProperty("rows")&&f.a.createElement("div",{className:""},f.a.createElement("h4",{className:"mb-2 fw-bold"},"Grid Options"),f.a.createElement("div",{className:"d-flex w-100",style:{gap:"10px"}},f.a.createElement("div",{className:"form-group w-100"},f.a.createElement("label",null,"Rows:"),f.a.createElement("input",{type:"number",className:"form-control",min:1,max:5,placeholder:"Enter number of rows",defaultValue:this.props.element.rows,onBlur:this.updateElement.bind(this),onChange:this.editPaleteElementProp.bind(this,"rows","value")})),f.a.createElement("div",{className:"form-group w-100"},f.a.createElement("label",null,"Columns:"),f.a.createElement("input",{type:"number",className:"form-control",min:1,max:5,placeholder:"Enter number of rows",defaultValue:this.props.element.cols,onBlur:this.updateElement.bind(this),onChange:this.editPaleteElementProp.bind(this,"cols","value")})))),"Palette"===this.props.element.element&&f.a.createElement(U,{element:this.props.element,preview:this.props.preview,data:this.props.preview.state.data,updateElement:this.props.updateElement,key:this.props.element.list.length,baseUrl:this.props.baseUrl}))}}]),a}(f.a.Component);D.defaultProps={className:"edit-element-fields"}}}]);