sprint-digital-react-form-builder/dist/1.app.js

A complete form builder for react.

(window.webpackJsonpReactFormBuilder=window.webpackJsonpReactFormBuilder||[]).push([[1],{390:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return F}));var l=a(9),n=a.n(l),o=a(10),r=a.n(o),s=a(11),i=a.n(s),c=a(17),m=a.n(c),p=a(13),d=a.n(p),u=a(0),h=a.n(u),E=a(183),v=a(90),f=a(124),b=a.n(f),y=a(125),N=a(18),g=a.n(N),k=a(126);function w(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,l=d()(e);if(t){var n=d()(this).constructor;a=Reflect.construct(l,arguments,n)}else a=l.apply(this,arguments);return m()(this,a)}}var x=function(e){i()(a,e);var t=w(a);function a(e){var l;return n()(this,a),(l=t.call(this,e)).state={element:l.props.element,data:l.props.data,dirty:!1},l}return r()(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,l=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=l,this.setState({element:a,dirty:!0})}},{key:"editValue",value:function(e,t){var a=this.state.element,l=""===t.target.value?this._setValue(a.options[e].text):t.target.value;a.options[e].value=l,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:g.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),h.a.createElement("div",{className:"dynamic-option-list"},h.a.createElement("ul",null,h.a.createElement("li",null,h.a.createElement("div",{className:"row"},h.a.createElement("div",{className:"col-sm-6"},h.a.createElement("b",null,h.a.createElement(k.a,{id:"options"}))),this.props.canHaveOptionValue&&h.a.createElement("div",{className:"col-sm-2"},h.a.createElement("b",null,h.a.createElement(k.a,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&h.a.createElement("div",{className:"col-sm-4"},h.a.createElement("b",null,h.a.createElement(k.a,{id:"correct"}))))),this.props.element.options.map((function(t,a){var l="edit_".concat(t.key),n=t.value!==e._setValue(t.text)?t.value:"";return h.a.createElement("li",{className:"clearfix",key:l},h.a.createElement("div",{className:"row"},h.a.createElement("div",{className:"col-sm-6"},h.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&&h.a.createElement("div",{className:"col-sm-2"},h.a.createElement("input",{className:"form-control",type:"text",name:"value_".concat(a),value:n,onChange:e.editValue.bind(e,a)})),e.props.canHaveOptionValue&&e.props.canHaveOptionCorrect&&h.a.createElement("div",{className:"col-sm-1"},h.a.createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),h.a.createElement("div",{className:"col-sm-3"},h.a.createElement("div",{className:"dynamic-options-actions-buttons"},h.a.createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},h.a.createElement("i",{className:"fas fa-plus-circle"})),a>0&&h.a.createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},h.a.createElement("i",{className:"fas fa-minus-circle"}))))))}))))}}]),a}(h.a.Component),O=a(107);function P(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,l=d()(e);if(t){var n=d()(this).constructor;a=Reflect.construct(l,arguments,n)}else a=l.apply(this,arguments);return m()(this,a)}}var C={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},F=function(e){i()(a,e);var t=P(a);function a(e){var l;return n()(this,a),(l=t.call(this,e)).state={element:l.props.element,data:l.props.data,dirty:!1},l}return r()(a,[{key:"toggleRequired",value:function(){}},{key:"editElementProp",value:function(e,t,a){var l=this,n=this.state.element;"isInternal"===e&&a.target.checked?n.required=!1:"required"===e&&a.target.checked&&(n.isInternal=!1),n[e]=a.target[t],this.setState({element:n,dirty:!0},(function(){"checked"===t&&l.updateElement()}))}},{key:"onEditorStateChange",value:function(e,t,a){var l=b()(Object(v.convertToRaw)(a.getCurrentContent())).replace(/<p>/g,"").replace(/<\/p>/g,"").replace(/&nbsp;/g," ").replace(/(?:\r\n|\r|\n)/g," "),n=this.state.element;n[t]=l,this.setState({element:n,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:"validateFieldName",value:function(e){return/^[a-zA-Z0-9_-]+$/.test(e)}},{key:"handleFieldNameBlur",value:function(e){var t=e.target.value;if(t&&!this.validateFieldName(t))return e.target.value=this.props.element.field_name||"",e.target.style.borderColor="#dc3545",e.target.style.backgroundColor="#f8d7da",void setTimeout((function(){e.target.style.borderColor="",e.target.style.backgroundColor=""}),3e3);e.target.style.borderColor="",e.target.style.backgroundColor="",this.updateElement()}},{key:"convertFromHTML",value:function(e){var t=Object(v.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return v.EditorState.createEmpty();var a=v.ContentState.createFromBlockArray(t);return v.EditorState.createWithContent(a)}},{key:"addOptions",value:function(){var e=this,t=document.getElementById("optionsApiUrl").value;t&&Object(O.a)(t).then((function(t){e.props.element.options=[];var a=e.props.element.options;t.forEach((function(e){e.key=g.a.uuid(),a.push(e)}));var l=e.state.element;e.setState({element:l,dirty:!0})}))}},{key:"render",value:function(){var e=this;this.state.dirty&&(this.props.element.dirty=!0);var t,a=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,l=!!this.props.element.hasOwnProperty("readOnly")&&this.props.element.readOnly,n=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,o=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,r=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,s=!!this.props.element.hasOwnProperty("showTimeInput")&&this.props.element.showTimeInput,i=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,c=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,m=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,p=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,d=!!this.props.element.hasOwnProperty("pageBreakBefore")&&this.props.element.pageBreakBefore,u=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,v=!!this.props.element.hasOwnProperty("isInternal")&&this.props.element.isInternal,f=this.props.element,b=f.canHavePageBreakBefore,N=f.canHaveAlternateForm,g=f.canHaveDisplayHorizontal,w=f.canHaveOptionCorrect,O=f.canHaveOptionValue,P="Image"===this.state.element.element||"Camera"===this.state.element.element,F=this.props.files.length?this.props.files:[];return(F.length<1||F.length>0&&""!==F[0].id)&&F.unshift({id:"",file_name:""}),this.props.element.hasOwnProperty("content")&&(t=this.convertFromHTML(this.props.element.content)),this.props.element.hasOwnProperty("label")&&(t=this.convertFromHTML(this.props.element.label||"")),h.a.createElement("div",null,h.a.createElement("div",{className:"clearfix"},h.a.createElement("h4",{className:"float-left"},this.props.element.text),h.a.createElement("i",{className:"float-right fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label"},h.a.createElement(k.a,{id:"text-to-display"}),":"),h.a.createElement(y.Editor,{toolbar:C,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"fileSelect"},h.a.createElement(k.a,{id:"choose-file"}),":"),h.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")},F.map((function(e){var t="file_".concat(e.id);return h.a.createElement("option",{value:e.id,key:t},e.file_name)})))),this.props.element.hasOwnProperty("href")&&h.a.createElement("div",{className:"form-group"},h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",null,h.a.createElement(k.a,{id:"display-label"})),h.a.createElement(y.Editor,{toolbar:C,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),h.a.createElement("br",null),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"is-required",className:"custom-control-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"is-required"},h.a.createElement(k.a,{id:"required"}))),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"is-internal",className:"custom-control-input",type:"checkbox",checked:v,value:!0,onChange:this.editElementProp.bind(this,"isInternal","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"is-internal"},"Internal use only - Not visible to candidates")),this.props.element.hasOwnProperty("readOnly")&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"is-read-only",className:"custom-control-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"is-read-only"},h.a.createElement(k.a,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.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")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"is-default-to-today"},h.a.createElement(k.a,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"show-time-select",className:"custom-control-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select"},h.a.createElement(k.a,{id:"show-time-select"}),"?")),o&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.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")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select-only"},h.a.createElement(k.a,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"show-time-input",className:"custom-control-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-input"},h.a.createElement(k.a,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&g&&h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"display-horizontal",className:"custom-control-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"display-horizontal"},h.a.createElement(k.a,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("field_name")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"fieldName"},"Field Name: (must be unique)"),h.a.createElement("input",{id:"fieldName",type:"text",className:"form-control",defaultValue:this.props.element.field_name,onBlur:this.handleFieldNameBlur.bind(this),onChange:this.editElementProp.bind(this,"field_name","value"),placeholder:"Enter field name (used as form input name attribute)"}),h.a.createElement("small",{className:"form-text text-muted"},"This will be used as the HTML input name attribute. Use (preferably lowercase) letters, numbers, underscores, and dashes only.")),this.props.element.hasOwnProperty("src")&&h.a.createElement("div",null,h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"srcInput"},h.a.createElement(k.a,{id:"upload-image"}),":"),h.a.createElement("input",{id:"srcInput",type:"file",accept:"image/*",className:"form-control",onChange:function(t){var a=t.target.files[0];if(a){var l=new FileReader;l.onload=function(t){e.editElementProp("src","value",{target:{value:t.target.result}}),e.updateElement()},l.readAsDataURL(a)}}}),h.a.createElement("small",{className:"form-text text-muted"},"Only image files (jpg, jpeg, png, gif) are allowed."))),P&&h.a.createElement("div",null,h.a.createElement("div",{className:"form-group"},h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"do-center",className:"custom-control-input",type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"do-center"},h.a.createElement(k.a,{id:"center"}),"?"))),h.a.createElement("div",{className:"row"},h.a.createElement("div",{className:"col-sm-3"},h.a.createElement("label",{className:"control-label",htmlFor:"elementWidth"},h.a.createElement(k.a,{id:"width"}),":"),h.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")})),h.a.createElement("div",{className:"col-sm-3"},h.a.createElement("label",{className:"control-label",htmlFor:"elementHeight"},h.a.createElement(k.a,{id:"height"}),":"),h.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&&h.a.createElement("div",null,h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"fileType"},h.a.createElement(k.a,{id:"choose-file-type"}),":"),h.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, video/mp4,video/x-m4v,video/*",typeName:"All File Type"},{type:"image",typeName:"Image"},{type:"application/pdf",typeName:"PDF"},{type:"application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document",typeName:"Word"},{type:"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",typeName:"Excel"},{type:"application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation",typeName:"Powerpoint"},{type:"video/mp4,video/x-m4v,video/*",typeName:"Videos"}].map((function(e,t){return h.a.createElement("option",{value:e.type,key:t},e.typeName)}))))),"Signature"===this.state.element.element&&this.props.element.readOnly?h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"variableKey"},h.a.createElement(k.a,{id:"variable-key"}),":"),h.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")}),h.a.createElement("p",{className:"help-block"},h.a.createElement(k.a,{id:"variable-key-desc"}),".")):h.a.createElement("div",null),b&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label"},h.a.createElement(k.a,{id:"print-options"})),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"page-break-before-element",className:"custom-control-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"pageBreakBefore","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"page-break-before-element"},h.a.createElement(k.a,{id:"page-break-before-elements"}),"?"))),N&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label"},h.a.createElement(k.a,{id:"alternate-signature-page"})),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"display-on-alternate",className:"custom-control-input",type:"checkbox",checked:u,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"display-on-alternate"},h.a.createElement(k.a,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("div",{className:"form-group-range"},h.a.createElement("label",{className:"control-label",htmlFor:"rangeStep"},h.a.createElement(k.a,{id:"step"})),h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("div",{className:"form-group-range"},h.a.createElement("label",{className:"control-label",htmlFor:"rangeMin"},h.a.createElement(k.a,{id:"min"})),h.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")}),h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("div",{className:"form-group-range"},h.a.createElement("label",{className:"control-label",htmlFor:"rangeMax"},h.a.createElement(k.a,{id:"max"})),h.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")}),h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("div",{className:"form-group-range"},h.a.createElement("label",{className:"control-label",htmlFor:"defaultSelected"},h.a.createElement(k.a,{id:"default-selected"})),h.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&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label"},h.a.createElement(k.a,{id:"text-style"})),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"do-bold",className:"custom-control-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"do-bold"},h.a.createElement(k.a,{id:"bold"}))),h.a.createElement("div",{className:"custom-control custom-checkbox"},h.a.createElement("input",{id:"do-italic",className:"custom-control-input",type:"checkbox",checked:m,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),h.a.createElement("label",{className:"custom-control-label",htmlFor:"do-italic"},h.a.createElement(k.a,{id:"italic"})))),this.props.element.showDescription&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"questionDescription"},h.a.createElement(k.a,{id:"description"})),h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"correctAnswer"},h.a.createElement(k.a,{id:"correct-answer"})),h.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")&&h.a.createElement("div",{className:"form-group"},h.a.createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},h.a.createElement(k.a,{id:"populate-options-from-api"})),h.a.createElement("div",{className:"row"},h.a.createElement("div",{className:"col-sm-6"},h.a.createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),h.a.createElement("div",{className:"col-sm-6"},h.a.createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},h.a.createElement(k.a,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&h.a.createElement(x,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:w,canHaveOptionValue:O,data:this.props.preview.state.data,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}))}}]),a}(h.a.Component);F.defaultProps={className:"edit-element-fields"}}}]);