@goldenpine/react-form-builder2 0.18.4-patch.1 → 0.20.3-build.1

package/README.md

@@ -1,68 +1,64 @@
 [![npm version](https://badge.fury.io/js/react-form-builder2.svg)](//npmjs.com/package/react-form-builder2)
 [![downloads](https://img.shields.io/npm/dm/react-form-builder2.svg)](https://img.shields.io/npm/dm/react-form-builder2.svg)
+
 # React Form Builder 2
-A complete react form builder that interfaces with a json endpoint to load and save generated forms.
-- Upgraded to React 16.8.6
-- Bootstrap 4.x, Font-Awesome 5.x
-- Use react-dnd for Drag & Drop
-- Save form data with dummy api server
-- Show posted data on readonly form
-- Multi column row
-- Custom Components
 
-[DEMO](https://kiho.github.io/react-form-builder/) Slow Loading.... back-end is running at FREE Heroku, hence it may not work if free time runs out for month.
+A complete react form builder that interfaces with a json endpoint to load and save generated forms.
 
-![](screenshot.png)
+- Upgraded to React 18.3.1
+- Upgraded related packages
 
 ### Editing Items
+
 ![](screenshot2.png)
 
 # Basic Usage
 
 ```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ReactFormBuilder } from 'react-form-builder2';
-import 'react-form-builder2/dist/app.css';
+import React from "react";
+import ReactDOM from "react-dom";
+import { ReactFormBuilder } from "react-form-builder2";
+import "react-form-builder2/dist/app.css";
 
-ReactDOM.render(
-  <ReactFormBuilder />,
-  document.body
-)
+ReactDOM.render(<ReactFormBuilder />, document.body);
 ```
 
 # Props
 
 ```javascript
-var items = [{
-  key: 'Header',
-  name: 'Header Text',
-  icon: 'fa fa-header',
-  static: true,
-  content: 'Placeholder Text...'
-},
-{
-  key: 'Paragraph',
-  name: 'Paragraph',
-  static: true,
-  icon: 'fa fa-paragraph',
-  content: 'Placeholder Text...'
-}];
+var items = [
+  {
+    key: "Header",
+    name: "Header Text",
+    icon: "fa fa-header",
+    static: true,
+    content: "Placeholder Text...",
+  },
+  {
+    key: "Paragraph",
+    name: "Paragraph",
+    static: true,
+    icon: "fa fa-paragraph",
+    content: "Placeholder Text...",
+  },
+];
 
 <ReactFormBuilder
-  url='path/to/GET/initial.json'
+  url="path/to/GET/initial.json"
   toolbarItems={items}
-  saveUrl='path/to/POST/built/form.json' />
+  saveUrl="path/to/POST/built/form.json"
+/>;
 ```
 
 # React Form Generator
+
 Now that a form is built and saved, let's generate it from the saved json.
 
 ```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ReactFormGenerator } from 'react-form-builder2';
-import 'react-form-builder2/dist/app.css';
+import React from "react";
+import ReactDOM from "react-dom";
+import { ReactFormGenerator } from "react-form-builder2";
+import "react-form-builder2/dist/app.css";
 
 ReactDOM.render(
   <ReactFormGenerator
@@ -74,31 +70,31 @@ ReactDOM.render(
     data={JSON_QUESTION_DATA} // Question data
   />,
   document.body
-)
+);
 ```
 
 ### Form Params
 
-Name | Type | Required? | Description
---- | --- | --- | ---
-form_action | string | Required | URL path to submit the form
-form_method | string | Required | Verb used in the form submission.
-action_name | string | Optional | Defines form submit button text.  Defaults to "Submit"
-onSubmit | function | optional | Invoke when submit data, if exists will override form post.
-onChange | function | optional | Invoke when Change data. only on generator
-onBlur | function | optional | Invoke when Blur data. only on generator
-data | array | Required | Question data retrieved from the database
-back_action | string | Optional | URL path to go back if needed.
-back_name | string | Optional | Button text for back action.  Defaults to "Cancel".
-task_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database.
-answer_data | array | Optional | Answer data, only used if loading a pre-existing form with values.
-authenticity_token | string | Optional | If using Rails and need an auth token to submit form.
-hide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true.
-skip_validations | boolean | Optional | Suppress form validations on submit, if set to true.
-display_short | boolean | Optional | Display an optional "shorter page/form" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.
-read_only | boolean | Optional | Shows a read only version which has fields disabled and removes "required" labels.
-variables | object | Optional | Key/value object that can be used for Signature variable replacement.
-option_key_value | string | Optional | Use "key" or "value" of checked option item in json data, default is "key".
+| Name               | Type     | Required? | Description                                                                                                                                                                                 |
+| ------------------ | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| form_action        | string   | Required  | URL path to submit the form                                                                                                                                                                 |
+| form_method        | string   | Required  | Verb used in the form submission.                                                                                                                                                           |
+| action_name        | string   | Optional  | Defines form submit button text. Defaults to "Submit"                                                                                                                                       |
+| onSubmit           | function | optional  | Invoke when submit data, if exists will override form post.                                                                                                                                 |
+| onChange           | function | optional  | Invoke when Change data. only on generator                                                                                                                                                  |
+| onBlur             | function | optional  | Invoke when Blur data. only on generator                                                                                                                                                    |
+| data               | array    | Required  | Question data retrieved from the database                                                                                                                                                   |
+| back_action        | string   | Optional  | URL path to go back if needed.                                                                                                                                                              |
+| back_name          | string   | Optional  | Button text for back action. Defaults to "Cancel".                                                                                                                                          |
+| task_id            | integer  | Optional  | User to submit a hidden variable with id to the form on the backend database.                                                                                                               |
+| answer_data        | array    | Optional  | Answer data, only used if loading a pre-existing form with values.                                                                                                                          |
+| authenticity_token | string   | Optional  | If using Rails and need an auth token to submit form.                                                                                                                                       |
+| hide_actions       | boolean  | Optional  | If you would like to hide the submit / cancel buttons set to true.                                                                                                                          |
+| skip_validations   | boolean  | Optional  | Suppress form validations on submit, if set to true.                                                                                                                                        |
+| display_short      | boolean  | Optional  | Display an optional "shorter page/form" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements. |
+| read_only          | boolean  | Optional  | Shows a read only version which has fields disabled and removes "required" labels.                                                                                                          |
+| variables          | object   | Optional  | Key/value object that can be used for Signature variable replacement.                                                                                                                       |
+| option_key_value   | string   | Optional  | Use "key" or "value" of checked option item in json data, default is "key".                                                                                                                 |
 
 ### Read only Signatures
 
@@ -113,35 +109,40 @@ The signature data should be in base 64 format.
 There is a `variables.js` file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key "JOHN" to test the variable replacement.
 
 # Vendor Dependencies
+
 In order to make the form builder look pretty, there are a few dependencies other than React. Style sheets from `Bootstrap` and `FontAwesome` must be added to index.html. See the example code in [index.html](https://github.com/Kiho/react-form-builder/blob/master/public/index.html#L5) for more details.
 
 - Bootstrap
 - FontAwesome
 
 # SASS
+
 All relevant styles located in css/application.css.scss.
 
 # Develop
+
 ```bash
-$ yarn install
-$ yarn run build:dist
-$ yarn run serve:api
-$ yarn start
+$ npm install
+$ NODE_OPTIONS=--openssl-legacy-provider npm run build:dist
+$ npm run serve:api
+$ NODE_OPTIONS=--openssl-legacy-provider npm run start
 ```
+
 Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.
 
 # Customizations
+
 - to customize the field edit form copy "src/form-elements-edit.jsx" to your project and pass it to the ReactFormBuilder as a prop. Here is an example
+
 ```jsx
 <ReactFormBuilder
-    edit
-    data={form}
-    //toolbarItems={items}
-    customToolbarItems={items}
-    onChange={handleUpdate}
-    onSubmit={handleSubmit}
-
-    renderEditForm={props => <FormElementsEdit {...props}/>}
+  edit
+  data={form}
+  //toolbarItems={items}
+  customToolbarItems={items}
+  onChange={handleUpdate}
+  onSubmit={handleSubmit}
+  renderEditForm={(props) => <FormElementsEdit {...props} />}
 />
 ```
 
@@ -149,93 +150,123 @@ Then navigate to http://localhost:8080/ in your browser and you should be able t
 
 ```jsx
 <ReactFormGenerator
-    data={form}
-    toolbarItems={items}
-    onSubmit={handleSubmit}
-    actionName="Set this to change the default submit button text"
-    submitButton={<button type="submit" className="btn btn-primary">Submit</button>}
-    backButton={<a href="/" className="btn btn-default btn-cancel btn-big">Back</a>}
+  data={form}
+  toolbarItems={items}
+  onSubmit={handleSubmit}
+  actionName="Set this to change the default submit button text"
+  submitButton={
+    <button type="submit" className="btn btn-primary">
+      Submit
+    </button>
+  }
+  backButton={
+    <a href="/" className="btn btn-default btn-cancel btn-big">
+      Back
+    </a>
+  }
 />
 ```
 
 # Custom Components
+
 - Import component registry from react-form-builder2
+
 ```jsx
-import { ReactFormBuilder, ElementStore, Registry } from 'react-form-builder2';
+import { ReactFormBuilder, ElementStore, Registry } from "react-form-builder2";
 ```
 
-- Simple Custom Component 
+- Simple Custom Component
+
 ```jsx
 const TestComponent = () => <h2>Hello</h2>;
 ```
 
 - Custom Component with input element
+
 ```jsx
 const MyInput = React.forwardRef((props, ref) => {
   const { name, defaultValue, disabled } = props;
-  return <input ref={ref} name={name} defaultValue={defaultValue} disabled={disabled} />;
+  return (
+    <input
+      ref={ref}
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+    />
+  );
 });
 ```
 
 - Register custom components to be used in form builder
+
 ```jsx
-Registry.register('MyInput', MyInput);
-Registry.register('TestComponent', TestComponent);
+Registry.register("MyInput", MyInput);
+Registry.register("TestComponent", TestComponent);
 ```
 
 - Define Custom Components in Toolbar
+
 ```jsx
-const items = [{
-  key: 'TestComponent',
-  element: 'CustomElement',
-  component: TestComponent,
-  type: 'custom',
-  field_name: 'test_component',
-  name: 'Something You Want',
-  icon: 'fa fa-cog',
-  static: true,
-  props: { test: 'test_comp' },
-  label: 'Label Test',
-}, {
-  key: 'MyInput',
-  element: 'CustomElement',
-  component: MyInput,
-  type: 'custom',
-  forwardRef: true,
-  field_name: 'my_input_',
-  name: 'My Input',
-  icon: 'fa fa-cog',
-  props: { test: 'test_input' },
-  label: 'Label Input',
-}, 
-// Additional standard components, you don't need full definition if no modification is required. 
-{  
-  key: 'Header',
-}, {
-  key: 'TextInput',
-}, {
-  key: 'TextArea',
-}, {
-  key: 'RadioButtons',
-}, {
-  key: 'Checkboxes',
-}, {
-  key: 'Image',
-}];
+const items = [
+  {
+    key: "TestComponent",
+    element: "CustomElement",
+    component: TestComponent,
+    type: "custom",
+    field_name: "test_component",
+    name: "Something You Want",
+    icon: "fa fa-cog",
+    static: true,
+    props: { test: "test_comp" },
+    label: "Label Test",
+  },
+  {
+    key: "MyInput",
+    element: "CustomElement",
+    component: MyInput,
+    type: "custom",
+    forwardRef: true,
+    field_name: "my_input_",
+    name: "My Input",
+    icon: "fa fa-cog",
+    props: { test: "test_input" },
+    label: "Label Input",
+  },
+  // Additional standard components, you don't need full definition if no modification is required.
+  {
+    key: "Header",
+  },
+  {
+    key: "TextInput",
+  },
+  {
+    key: "TextArea",
+  },
+  {
+    key: "RadioButtons",
+  },
+  {
+    key: "Checkboxes",
+  },
+  {
+    key: "Image",
+  },
+];
 ```
 
 - Use defined Toolbar in ReactFormBuilder
+
 ```jsx
   <ReactFormBuilder
     ...
     toolbarItems={items}
   />
 ```
-       
-- Find working example [here](https://github.com/Kiho/react-form-builder/blob/master/examples/custom/app.js)
 
+- Find working example [here](https://github.com/Kiho/react-form-builder/blob/master/examples/custom/app.js)
 
 # Examples
+
 - [Basic](https://github.com/Kiho/react-form-builder/tree/master/examples/demo)
 - [JSON Post](https://github.com/Kiho/react-form-builder/tree/master/examples/custom)
 - [UMD](https://github.com/Kiho/react-form-builder/tree/master/examples/umd)
@@ -244,7 +275,9 @@ const items = [{
 - [create-react-app](https://github.com/Kiho/react-form-builder/tree/master/examples/cra)
 
 # Tests
+
 ```bash
 $ npm test
 ```
+
 Test is not working at this moment.

package/dist/1.app.js

@@ -1 +1 @@
-(window.webpackJsonpReactFormBuilder=window.webpackJsonpReactFormBuilder||[]).push([[1],{391:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return _}));var l=a(8),n=a.n(l),o=a(9),r=a.n(o),s=a(10),i=a.n(s),c=a(17),m=a.n(c),p=a(12),d=a.n(p),h=a(0),u=a.n(h),E=a(185),f=a(92),b=a(126),v=a.n(b),y=a(127),N=a(24),g=a.n(N),w=a(128);function k(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=k(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),u.a.createElement("div",{className:"dynamic-option-list"},u.a.createElement("ul",null,u.a.createElement("li",null,u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("b",null,u.a.createElement(w.a,{id:"options"}))),this.props.canHaveOptionValue&&u.a.createElement("div",{className:"col-sm-2"},u.a.createElement("b",null,u.a.createElement(w.a,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&u.a.createElement("div",{className:"col-sm-4"},u.a.createElement("b",null,u.a.createElement(w.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 u.a.createElement("li",{className:"clearfix",key:l},u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.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&&u.a.createElement("div",{className:"col-sm-2"},u.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&&u.a.createElement("div",{className:"col-sm-1"},u.a.createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("div",{className:"dynamic-options-actions-buttons"},u.a.createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},u.a.createElement("i",{className:"fas fa-plus-circle"})),a>0&&u.a.createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},u.a.createElement("i",{className:"fas fa-minus-circle"}))))))}))))}}]),a}(u.a.Component),P=a(110);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,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 O={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},_=function(e){i()(a,e);var t=C(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;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=v()(Object(f.convertToRaw)(a.getCurrentContent())).replace(/<p>/g,"<div>").replace(/<\/p>/g,"</div>"),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:"convertFromHTML",value:function(e){var t=Object(f.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return f.EditorState.createEmpty();var a=f.ContentState.createFromBlockArray(t);return f.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=g.a.uuid(),a.push(e)}));var l=e.state.element;e.setState({element:l,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,l=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,n=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,o=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,r=!!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,d=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,h=this.props.element,f=h.canHavePageBreakBefore,b=h.canHaveAlternateForm,v=h.canHaveDisplayHorizontal,N=h.canHaveOptionCorrect,g=h.canHaveOptionValue,k="Image"===this.state.element.element||"Camera"===this.state.element.element,P=this.props.files.length?this.props.files:[];return(P.length<1||P.length>0&&""!==P[0].id)&&P.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)),u.a.createElement("div",null,u.a.createElement("div",{className:"clearfix"},u.a.createElement("h4",{className:"float-left"},this.props.element.text),u.a.createElement("i",{className:"float-right fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"text-to-display"}),":"),u.a.createElement(y.Editor,{toolbar:O,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"fileSelect"},u.a.createElement(w.a,{id:"choose-file"}),":"),u.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")},P.map((function(e){var t="file_".concat(e.id);return u.a.createElement("option",{value:e.id,key:t},e.file_name)})))),this.props.element.hasOwnProperty("href")&&u.a.createElement("div",{className:"form-group"},u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",null,u.a.createElement(w.a,{id:"display-label"})),u.a.createElement(y.Editor,{toolbar:O,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),u.a.createElement("br",null),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-required",className:"custom-control-input",type:"checkbox",checked:t,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-required"},u.a.createElement(w.a,{id:"required"}))),this.props.element.hasOwnProperty("readOnly")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-read-only",className:"custom-control-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-read-only"},u.a.createElement(w.a,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-default-to-today",className:"custom-control-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-default-to-today"},u.a.createElement(w.a,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-select",className:"custom-control-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select"},u.a.createElement(w.a,{id:"show-time-select"}),"?")),n&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-select-only",className:"custom-control-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select-only"},u.a.createElement(w.a,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-input",className:"custom-control-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-input"},u.a.createElement(w.a,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&v&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"display-horizontal",className:"custom-control-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"display-horizontal"},u.a.createElement(w.a,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"srcInput"},u.a.createElement(w.a,{id:"link-to"}),":"),u.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")}))),k&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-center",className:"custom-control-input",type:"checkbox",checked:m,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-center"},u.a.createElement(w.a,{id:"center"}),"?"))),u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("label",{className:"control-label",htmlFor:"elementWidth"},u.a.createElement(w.a,{id:"width"}),":"),u.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")})),u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("label",{className:"control-label",htmlFor:"elementHeight"},u.a.createElement(w.a,{id:"height"}),":"),u.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")})))),"Camera"===this.state.element.element&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterCameraIcon"},u.a.createElement(w.a,{id:"display-label-after-camera-icon"}),":"),u.a.createElement("input",{id:"LabelAfterCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_camera_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"MessageUnderCameraIcon"},u.a.createElement(w.a,{id:"display-message-under-camera-icon"}),":"),u.a.createElement("input",{id:"MessageUnderCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_camera_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterPhotoClearIcon"},u.a.createElement(w.a,{id:"display-label-after-photo-clear-icon"}),":"),u.a.createElement("input",{id:"LabelAfterPhotoClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_photo_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_photo_clear_icon","value")}))),"FileUpload"===this.state.element.element&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterFileIcon"},u.a.createElement(w.a,{id:"display-label-after-file-icon"}),":"),u.a.createElement("input",{id:"LabelAfterFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"MessageUnderFileIcon"},u.a.createElement(w.a,{id:"display-message-under-file-icon"}),":"),u.a.createElement("input",{id:"MessageUnderFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_file_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterFileClearIcon"},u.a.createElement(w.a,{id:"display-label-after-file-clear-icon"}),":"),u.a.createElement("input",{id:"LabelAfterFileClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_clear_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"fileType"},u.a.createElement(w.a,{id:"choose-file-type"}),":"),u.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 u.a.createElement("option",{value:e.type,key:t},e.typeName)}))))),"Signature"===this.state.element.element&&this.props.element.readOnly?u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"variableKey"},u.a.createElement(w.a,{id:"variable-key"}),":"),u.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")}),u.a.createElement("p",{className:"help-block"},u.a.createElement(w.a,{id:"variable-key-desc"}),".")):u.a.createElement("div",null),f&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"print-options"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.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")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"page-break-before-element"},u.a.createElement(w.a,{id:"page-break-before-elements"}),"?"))),b&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"alternate-signature-page"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"display-on-alternate",className:"custom-control-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"display-on-alternate"},u.a.createElement(w.a,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeStep"},u.a.createElement(w.a,{id:"step"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeMin"},u.a.createElement(w.a,{id:"min"})),u.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")}),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeMax"},u.a.createElement(w.a,{id:"max"})),u.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")}),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"defaultSelected"},u.a.createElement(w.a,{id:"default-selected"})),u.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&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"text-style"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-bold",className:"custom-control-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-bold"},u.a.createElement(w.a,{id:"bold"}))),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-italic",className:"custom-control-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-italic"},u.a.createElement(w.a,{id:"italic"})))),this.props.element.showDescription&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"questionDescription"},u.a.createElement(w.a,{id:"description"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"correctAnswer"},u.a.createElement(w.a,{id:"correct-answer"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},u.a.createElement(w.a,{id:"populate-options-from-api"})),u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},u.a.createElement(w.a,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&u.a.createElement(x,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:N,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}))}}]),a}(u.a.Component);_.defaultProps={className:"edit-element-fields"}}}]);
+(window.webpackJsonpReactFormBuilder=window.webpackJsonpReactFormBuilder||[]).push([[1],{391:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return _}));var l=a(9),n=a.n(l),o=a(10),r=a.n(o),s=a(11),i=a.n(s),c=a(19),m=a.n(c),p=a(13),d=a.n(p),h=a(0),u=a.n(h),E=a(185),f=a(91),b=a(126),v=a.n(b),y=a(127),N=a(23),g=a.n(N),w=a(128);function k(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=k(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,a=t.element.toLowerCase();t.options.splice(e+1,0,{value:"",text:"",key:"".concat(a,"_option_").concat(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),u.a.createElement("div",{className:"dynamic-option-list"},u.a.createElement("ul",null,u.a.createElement("li",null,u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("b",null,u.a.createElement(w.a,{id:"options"}))),this.props.canHaveOptionValue&&u.a.createElement("div",{className:"col-sm-2"},u.a.createElement("b",null,u.a.createElement(w.a,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&u.a.createElement("div",{className:"col-sm-4"},u.a.createElement("b",null,u.a.createElement(w.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 u.a.createElement("li",{className:"clearfix",key:l},u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.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&&u.a.createElement("div",{className:"col-sm-2"},u.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&&u.a.createElement("div",{className:"col-sm-1"},u.a.createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("div",{className:"dynamic-options-actions-buttons"},u.a.createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},u.a.createElement("i",{className:"fas fa-plus-circle"})),a>0&&u.a.createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},u.a.createElement("i",{className:"fas fa-minus-circle"}))))))}))))}}]),a}(u.a.Component),P=a(109);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,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 O={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},_=function(e){i()(a,e);var t=C(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;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=v()(Object(f.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:"convertFromHTML",value:function(e){var t=Object(f.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return f.EditorState.createEmpty();var a=f.ContentState.createFromBlockArray(t);return f.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=g.a.uuid(),a.push(e)}));var l=e.state.element;e.setState({element:l,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,l=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,n=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,o=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,r=!!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,d=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,h=this.props.element,f=h.canHavePageBreakBefore,b=h.canHaveAlternateForm,v=h.canHaveDisplayHorizontal,N=h.canHaveOptionCorrect,g=h.canHaveOptionValue,k="Image"===this.state.element.element||"Camera"===this.state.element.element,P=this.props.files.length?this.props.files:[];return(P.length<1||P.length>0&&""!==P[0].id)&&P.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)),u.a.createElement("div",null,u.a.createElement("div",{className:"clearfix"},u.a.createElement("h4",{className:"float-left"},this.props.element.text),u.a.createElement("i",{className:"float-right fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"text-to-display"}),":"),u.a.createElement(y.Editor,{toolbar:O,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"fileSelect"},u.a.createElement(w.a,{id:"choose-file"}),":"),u.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")},P.map((function(e){var t="file_".concat(e.id);return u.a.createElement("option",{value:e.id,key:t},e.file_name)})))),this.props.element.hasOwnProperty("href")&&u.a.createElement("div",{className:"form-group"},u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",null,u.a.createElement(w.a,{id:"display-label"})),u.a.createElement(y.Editor,{toolbar:O,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),u.a.createElement("br",null),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-required",className:"custom-control-input",type:"checkbox",checked:t,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-required"},u.a.createElement(w.a,{id:"required"}))),this.props.element.hasOwnProperty("readOnly")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-read-only",className:"custom-control-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-read-only"},u.a.createElement(w.a,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"is-default-to-today",className:"custom-control-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"is-default-to-today"},u.a.createElement(w.a,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-select",className:"custom-control-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select"},u.a.createElement(w.a,{id:"show-time-select"}),"?")),n&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-select-only",className:"custom-control-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-select-only"},u.a.createElement(w.a,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"show-time-input",className:"custom-control-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"show-time-input"},u.a.createElement(w.a,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&v&&u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"display-horizontal",className:"custom-control-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"display-horizontal"},u.a.createElement(w.a,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"srcInput"},u.a.createElement(w.a,{id:"link-to"}),":"),u.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")}))),k&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-center",className:"custom-control-input",type:"checkbox",checked:m,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-center"},u.a.createElement(w.a,{id:"center"}),"?"))),u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("label",{className:"control-label",htmlFor:"elementWidth"},u.a.createElement(w.a,{id:"width"}),":"),u.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")})),u.a.createElement("div",{className:"col-sm-3"},u.a.createElement("label",{className:"control-label",htmlFor:"elementHeight"},u.a.createElement(w.a,{id:"height"}),":"),u.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")})))),"Camera"===this.state.element.element&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterCameraIcon"},u.a.createElement(w.a,{id:"display-label-after-camera-icon"}),":"),u.a.createElement("input",{id:"LabelAfterCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_camera_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"MessageUnderCameraIcon"},u.a.createElement(w.a,{id:"display-message-under-camera-icon"}),":"),u.a.createElement("input",{id:"MessageUnderCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_camera_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterPhotoClearIcon"},u.a.createElement(w.a,{id:"display-label-after-photo-clear-icon"}),":"),u.a.createElement("input",{id:"LabelAfterPhotoClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_photo_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_photo_clear_icon","value")}))),"FileUpload"===this.state.element.element&&u.a.createElement("div",null,u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterFileIcon"},u.a.createElement(w.a,{id:"display-label-after-file-icon"}),":"),u.a.createElement("input",{id:"LabelAfterFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"MessageUnderFileIcon"},u.a.createElement(w.a,{id:"display-message-under-file-icon"}),":"),u.a.createElement("input",{id:"MessageUnderFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_file_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"LabelAfterFileClearIcon"},u.a.createElement(w.a,{id:"display-label-after-file-clear-icon"}),":"),u.a.createElement("input",{id:"LabelAfterFileClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_clear_icon","value")})),u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"fileType"},u.a.createElement(w.a,{id:"choose-file-type"}),":"),u.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 u.a.createElement("option",{value:e.type,key:t},e.typeName)}))))),"Signature"===this.state.element.element&&this.props.element.readOnly?u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"variableKey"},u.a.createElement(w.a,{id:"variable-key"}),":"),u.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")}),u.a.createElement("p",{className:"help-block"},u.a.createElement(w.a,{id:"variable-key-desc"}),".")):u.a.createElement("div",null),f&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"print-options"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.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")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"page-break-before-element"},u.a.createElement(w.a,{id:"page-break-before-elements"}),"?"))),b&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"alternate-signature-page"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"display-on-alternate",className:"custom-control-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"display-on-alternate"},u.a.createElement(w.a,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeStep"},u.a.createElement(w.a,{id:"step"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeMin"},u.a.createElement(w.a,{id:"min"})),u.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")}),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"rangeMax"},u.a.createElement(w.a,{id:"max"})),u.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")}),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("div",{className:"form-group-range"},u.a.createElement("label",{className:"control-label",htmlFor:"defaultSelected"},u.a.createElement(w.a,{id:"default-selected"})),u.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&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label"},u.a.createElement(w.a,{id:"text-style"})),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-bold",className:"custom-control-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-bold"},u.a.createElement(w.a,{id:"bold"}))),u.a.createElement("div",{className:"custom-control custom-checkbox"},u.a.createElement("input",{id:"do-italic",className:"custom-control-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),u.a.createElement("label",{className:"custom-control-label",htmlFor:"do-italic"},u.a.createElement(w.a,{id:"italic"})))),this.props.element.showDescription&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"questionDescription"},u.a.createElement(w.a,{id:"description"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"correctAnswer"},u.a.createElement(w.a,{id:"correct-answer"})),u.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")&&u.a.createElement("div",{className:"form-group"},u.a.createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},u.a.createElement(w.a,{id:"populate-options-from-api"})),u.a.createElement("div",{className:"row"},u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),u.a.createElement("div",{className:"col-sm-6"},u.a.createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},u.a.createElement(w.a,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&u.a.createElement(x,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:N,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}))}}]),a}(u.a.Component);_.defaultProps={className:"edit-element-fields"}}}]);