react-survey-builder 1.0.23 → 1.0.25

package/lib/survey-elements/index.js

@@ -779,7 +779,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component12) {
           htmlFor: props.name
         })), /*#__PURE__*/_react["default"].createElement("div", null, (_this$props$item$opti = this.props.item.options.filter(function (selectedOption) {
           return selectedOption.value === _this14.props.value;
-        })) === null || _this$props$item$opti === void 0 ? void 0 : _this$props$item$opti.label)));
+        })) === null || _this$props$item$opti === void 0 ? void 0 : _this$props$item$opti.text)));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
@@ -1077,8 +1077,10 @@ var Tags = /*#__PURE__*/function (_React$Component14) {
           className: "form-group mb-3"
         }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
           htmlFor: props.name
-        })), /*#__PURE__*/_react["default"].createElement("div", null, props.selected.map(function (selectedOption) {
-          return selectedOption.label;
+        })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
+          return _this18.props.value.includes(option.value);
+        }).map(function (option) {
+          return option.text;
         }).join(', '))));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1151,7 +1153,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
           return _this20.props.value.includes(option.value);
         }).map(function (option) {
-          return option.label;
+          return option.text;
         }).join(', '))));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1298,7 +1300,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
         })), /*#__PURE__*/_react["default"].createElement("div", null, this.props.item.options.filter(function (option) {
           return _this24.props.value === option.value;
         }).map(function (option) {
-          return option.label;
+          return option.text;
         }).join(', '))));
       }
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/survey-elements-edit.js

@@ -10,17 +10,20 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
 var _draftJs = require("draft-js");
 var _draftjsToHtml = _interopRequireDefault(require("draftjs-to-html"));
-var _reactDraftWysiwyg = require("react-draft-wysiwyg");
 var _dynamicOptionList = _interopRequireDefault(require("./dynamic-option-list"));
 var _requests = require("./stores/requests");
 var _UUID = _interopRequireDefault(require("./UUID"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
 var _fa = require("react-icons/fa");
 var _reactBootstrap = require("react-bootstrap");
+var _reactSimpleWysiwyg = _interopRequireDefault(require("react-simple-wysiwyg"));
+var _excluded = ["onChange", "onBlur", "value", "name"]; // import { Editor } from 'react-draft-wysiwyg';
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var bodyToolbar = {
@@ -47,6 +50,26 @@ var labelToolbar = {
     options: ['bold', 'italic', 'underline', 'superscript', 'subscript']
   }
 };
+var CustomWysiwygInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    value = _ref.value,
+    name = _ref.name,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_reactSimpleWysiwyg["default"], (0, _extends2["default"])({}, otherProps, {
+    onBlur: onBlur,
+    value: value,
+    name: name,
+    onChange: onChange,
+    containerProps: {
+      style: {
+        height: '500px',
+        width: '100%',
+        resize: 'both'
+      }
+    }
+  }));
+});
 var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(SurveyElementsEdit, _React$Component);
   var _super = _createSuper(SurveyElementsEdit);
@@ -186,54 +209,21 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       }, this.props.element.text), /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
         className: "float-end dismiss-edit",
         onClick: this.props.manualEditModeOff
-      })), this.props.element.hasOwnProperty('content') && this.state.element.element === 'Header' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
-        className: "fw-bold"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "text-to-display"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: headerToolbar,
-        defaultEditorState: editorState,
-        onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
-        stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('content') && this.state.element.element === 'Label' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
-        className: "fw-bold"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "text-to-display"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: labelToolbar,
-        defaultEditorState: editorState,
-        onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
-        stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('content') && this.state.element.element === 'Paragraph' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
-        className: "form-group mb-5"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
-        className: "fw-bold"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "text-to-display"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: labelToolbar,
-        defaultEditorState: editorState,
-        onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
-        stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('content') && this.state.element.element === 'ContentBody' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+      })), this.props.element.hasOwnProperty('content') && (this.state.element.element === 'Header' || this.state.element.element === 'Label' || this.state.element.element === 'Paragraph' || this.state.element.element === 'ContentBody') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-5"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         className: "fw-bold"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-to-display"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: bodyToolbar,
-        defaultEditorState: editorState,
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        type: "text",
+        id: "content",
+        name: "content",
+        as: CustomWysiwygInput,
+        value: this.props.element.content,
+        defaultValue: this.props.element.content,
         onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content')
-        //stripPastedStyles={true}
+        onChange: this.editElementProp.bind(this, 'content', 'value')
       })), this.props.element.hasOwnProperty('filePath') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-5"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
@@ -271,12 +261,15 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         className: "fw-bold"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-label"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: labelToolbar,
-        defaultEditorState: editorState,
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        type: "text",
+        id: "label",
+        name: "label",
+        as: CustomWysiwygInput,
+        value: this.props.element.label,
+        defaultValue: this.props.element.label,
         onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'label'),
-        stripPastedStyles: true
+        onChange: this.editElementProp.bind(this, 'label', 'value')
       })), (this.props.element.hasOwnProperty('required') || this.props.element.hasOwnProperty('readOnly') || this.props.element.hasOwnProperty('defaultToday') || ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 || (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && this.props.element.hasOwnProperty('inline')) && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-5"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
@@ -332,12 +325,22 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         className: "fw-bold"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "checkbox-label-text"
-      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
-        toolbar: toolbar,
-        defaultEditorState: secondaryEditorState,
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        type: "text",
+        id: "boxLabel",
+        name: "boxLabel",
+        as: CustomWysiwygInput,
+        value: this.props.element.boxLabel,
+        defaultValue: this.props.element.boxLabel,
         onBlur: this.updateElement.bind(this),
-        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'boxLabel'),
-        stripPastedStyles: true
+        onChange: this.editElementProp.bind(this, 'boxLabel', 'value'),
+        containerProps: {
+          style: {
+            height: '500px',
+            width: '100%',
+            resize: 'both'
+          }
+        }
       })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-5"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -56,6 +56,7 @@
     "react-intl": "^5.24.3",
     "react-phone-number-input": "^3.3.9",
     "react-signature-canvas": "^1.0.3",
+    "react-simple-wysiwyg": "^3.0.2",
     "react-textarea-autosize": "^8.5.3",
     "xss": "^1.0.8"
   },

package/dist/186.index.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkReactSurveyBuilder=self.webpackChunkReactSurveyBuilder||[]).push([[186],{8186:(e,t,n)=>{n.r(t),n.d(t,{default:()=>Y});var a=n(5671),r=n(3144),l=n(136),o=n(2963),i=n(1120),s=n(359),m=n.n(s),p=n(7462),c=n(3366);const d=s.useLayoutEffect;var h=function(e,t){"function"!=typeof e?e.current=t:e(t)};var u={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},b=function(e){Object.keys(u).forEach((function(t){e.style.setProperty(t,u[t],"important")}))},f=null,E=function(e,t){var n=e.scrollHeight;return"border-box"===t.sizingStyle.boxSizing?n+t.borderSize:n-t.paddingSize},y=function(){},v=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak"],g=!!document.documentElement.currentStyle;function w(e,t,n){var a,r,l=(a=n,r=s.useRef(a),d((function(){r.current=a})),r);s.useLayoutEffect((function(){var n=function(e){return l.current(e)};if(e)return e.addEventListener(t,n),function(){return e.removeEventListener(t,n)}}),[])}var Z=["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"],C=function(e,t){var n,a=e.cacheMeasurements,r=e.maxRows,l=e.minRows,o=e.onChange,i=void 0===o?y:o,m=e.onHeightChange,d=void 0===m?y:m,u=(0,c.Z)(e,Z),C=void 0!==u.value,k=s.useRef(null),x=function(e,t){var n=(0,s.useRef)();return(0,s.useCallback)((function(a){e.current=a,n.current&&h(n.current,null),n.current=t,t&&h(t,a)}),[t])}(k,t),P=s.useRef(0),N=s.useRef(),O=function(){var e=k.current,t=a&&N.current?N.current:function(e){var t=window.getComputedStyle(e);if(null===t)return null;var n,a=(n=t,v.reduce((function(e,t){return e[t]=n[t],e}),{})),r=a.boxSizing;return""===r?null:(g&&"border-box"===r&&(a.width=parseFloat(a.width)+parseFloat(a.borderRightWidth)+parseFloat(a.borderLeftWidth)+parseFloat(a.paddingRight)+parseFloat(a.paddingLeft)+"px"),{sizingStyle:a,paddingSize:parseFloat(a.paddingBottom)+parseFloat(a.paddingTop),borderSize:parseFloat(a.borderBottomWidth)+parseFloat(a.borderTopWidth)})}(e);if(t){N.current=t;var n=function(e,t,n,a){void 0===n&&(n=1),void 0===a&&(a=1/0),f||((f=document.createElement("textarea")).setAttribute("tabindex","-1"),f.setAttribute("aria-hidden","true"),b(f)),null===f.parentNode&&document.body.appendChild(f);var r=e.paddingSize,l=e.borderSize,o=e.sizingStyle,i=o.boxSizing;Object.keys(o).forEach((function(e){var t=e;f.style[t]=o[t]})),b(f),f.value=t;var s=E(f,e);f.value=t,s=E(f,e),f.value="x";var m=f.scrollHeight-r,p=m*n;"border-box"===i&&(p=p+r+l),s=Math.max(p,s);var c=m*a;return"border-box"===i&&(c=c+r+l),[s=Math.min(c,s),m]}(t,e.value||e.placeholder||"x",l,r),o=n[0],i=n[1];P.current!==o&&(P.current=o,e.style.setProperty("height",o+"px","important"),d(o,{rowHeight:i}))}};return s.useLayoutEffect(O),w(window,"resize",O),n=O,w(document.fonts,"loadingdone",n),s.createElement("textarea",(0,p.Z)({},u,{onChange:function(e){C||O(),i(e)},ref:x}))},k=s.forwardRef(C),x=n(7163),P=n(9265),N=n.n(P),O=n(5108),S=n(9333),L=n.n(S),B=n(7582),F=n(4806),V=n(680);function R(e){var t=function(){var e=s.useContext(F._y);return(0,V.lq)(e),e}(),n=t.formatMessage,a=t.textComponent,r=void 0===a?s.Fragment:a,l=e.id,o=e.description,i=e.defaultMessage,m=e.values,p=e.children,c=e.tagName,d=void 0===c?r:c,h=n({id:l,description:o,defaultMessage:i},m,{ignoreTag:e.ignoreTag});return"function"==typeof p?p(Array.isArray(h)?h:[h]):d?s.createElement(d,null,s.Children.toArray(h)):s.createElement(s.Fragment,null,h)}R.displayName="FormattedMessage";var G=s.memo(R,(function(e,t){var n=e.values,a=(0,B._T)(e,["values"]),r=t.values,l=(0,B._T)(t,["values"]);return(0,V.wU)(r,n)&&(0,V.wU)(a,l)}));G.displayName="MemoizedFormattedMessage";const T=G,H=(0,F.ZP)((function(e){return m().createElement(T,e)}),{withRef:!1});var z=n(2091),M=n(4051),A=n(1555),_=n(7833),I=n(5005);var W=function(e){(0,l.Z)(p,e);var t,n,s=(t=p,n=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}}(),function(){var e,a=(0,i.Z)(t);if(n){var r=(0,i.Z)(this).constructor;e=Reflect.construct(a,arguments,r)}else e=a.apply(this,arguments);return(0,o.Z)(this,e)});function p(e){var t;return(0,a.Z)(this,p),(t=s.call(this,e)).state={element:t.props.element,item:t.props.item,dirty:!1},t}return(0,r.Z)(p,[{key:"_setValue",value:function(e){return e.replace(/[^A-Z0-9]+/gi,"_").toLowerCase()}},{key:"editOption",value:function(e,t){var n=this.state.element,a=n.options[e].value!==this._setValue(n.options[e].text)?n.options[e].value:this._setValue(t.target.value);n.options[e].text=t.target.value,n.options[e].value=a,this.setState({element:n,dirty:!0})}},{key:"editValue",value:function(e,t){var n=this.state.element,a=""===t.target.value?this._setValue(n.options[e].text):t.target.value;n.options[e].value=a,this.setState({element:n,dirty:!0})}},{key:"editOptionCorrect",value:function(e,t){var n=this.state.element;n.options[e].hasOwnProperty("correct")?delete n.options[e].correct:n.options[e].correct=!0,this.setState({element:n}),this.props.updateElement.call(this.props.preview,n)}},{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:L().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),m().createElement("div",{className:"dynamic-option-list"},m().createElement("ul",null,m().createElement("li",null,m().createElement(M.Z,null,m().createElement(A.Z,{sm:6},m().createElement("b",null,m().createElement(H,{id:"options"}))),this.props.canHaveOptionValue&&m().createElement(A.Z,{sm:2},m().createElement("b",null,m().createElement(H,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&m().createElement(A.Z,{sm:4},m().createElement("b",null,m().createElement(H,{id:"correct"}))))),this.props.element.options.map((function(t,n){var a="edit_".concat(t.key),r=t.value!==e._setValue(t.text)?t.value:"";return m().createElement("li",{className:"clearfix",key:a},m().createElement(M.Z,null,m().createElement(A.Z,{sm:6},m().createElement(_.Z.Control,{tabIndex:n+1,style:{width:"100%"},type:"text",name:"text_".concat(n),placeholder:"Option text",value:t.text,onBlur:e.updateOption.bind(e),onChange:e.editOption.bind(e,n)})),e.props.canHaveOptionValue&&m().createElement(A.Z,{sm:2},m().createElement(_.Z.Control,{type:"text",name:"value_".concat(n),value:r,onChange:e.editValue.bind(e,n)})),e.props.canHaveOptionValue&&e.props.canHaveOptionCorrect&&m().createElement(A.Z,{sm:1},m().createElement(_.Z.Check,{type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,n),checked:t.hasOwnProperty("correct")})),m().createElement(A.Z,{sm:3},m().createElement("div",{className:"dynamic-options-actions-buttons"},m().createElement(I.Z,{variant:"success",onClick:e.addOption.bind(e,n)},m().createElement(z.EIY,null)),n>0&&m().createElement(I.Z,{variant:"danger",onClick:e.removeOption.bind(e,n)},m().createElement(z.wbB,null))))))}))))}}]),p}(m().Component),q=n(2083);var D={options:["inline","blockType","list","textAlign","fontSize","link","remove","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","strikethrough","monospace","superscript","subscript"]}},U={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},j={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},Y=function(e){(0,l.Z)(p,e);var t,n,s=(t=p,n=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}}(),function(){var e,a=(0,i.Z)(t);if(n){var r=(0,i.Z)(this).constructor;e=Reflect.construct(a,arguments,r)}else e=a.apply(this,arguments);return(0,o.Z)(this,e)});function p(e){var t;return(0,a.Z)(this,p),(t=s.call(this,e)).state={element:t.props.element,item:t.props.item,dirty:!1},t}return(0,r.Z)(p,[{key:"toggleRequired",value:function(){}},{key:"editElementProp",value:function(e,t,n){var a=this,r=this.state.element;r[e]=n.target[t],this.setState({element:r,dirty:!0},(function(){"checked"===t&&a.updateElement()}))}},{key:"onEditorStateChange",value:function(e,t,n){var a=N()((0,x.convertToRaw)(n.getCurrentContent())).replace(/&nbsp;/g," ").replace(/(?:\r\n|\r|\n)/g,""),r=this.state.element;r[t]=a,this.setState({element:r,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=(0,x.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return x.EditorState.createEmpty();var n=x.ContentState.createFromBlockArray(t);return x.EditorState.createWithContent(n)}},{key:"addOptions",value:function(){var e=this,t=document.getElementById("optionsApiUrl").value;t&&(0,q.U)(t).then((function(t){e.props.element.options=[];var n=e.props.element.options;t.forEach((function(e){e.key=L().uuid(),n.push(e)}));var a=e.state.element;e.setState({element:a,dirty:!0})}))}},{key:"render",value:function(){this.state.dirty&&(this.props.element.dirty=!0);var e,t,n=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,a=!!this.props.element.hasOwnProperty("defaultChecked")&&this.props.element.defaultChecked,r=!!this.props.element.hasOwnProperty("readOnly")&&this.props.element.readOnly,l=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,o=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,i=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,s=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,p=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,c=!!this.props.element.hasOwnProperty("pageBreakBefore")&&this.props.element.pageBreakBefore,d=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,h=!!this.props.element.hasOwnProperty("hideLabel")&&this.props.element.hideLabel,u=-1!==["NumberInput","EmailInput","TextInput","PhoneNumber","TextArea","DatePicker","Dropdown","Tags","Checkboxes","Checkbox","RadioButtons","Rating","Range"].indexOf(this.state.element.element),b=-1!==["Dropdown","Tags","Checkboxes","RadioButtons"].indexOf(this.state.element.element),f=u&&b,E=this.props.files.length?this.props.files:[];return(E.length<1||E.length>0&&""!==E[0].id)&&E.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)),this.props.element.hasOwnProperty("boxLabel")&&(t=this.convertFromHTML(this.props.element.boxLabel)),m().createElement("div",null,m().createElement("div",{className:"clearfix"},m().createElement("h4",{className:"float-start"},this.props.element.text),m().createElement(z.aHS,{className:"float-end dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&"Header"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:U,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("content")&&"Label"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:j,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("content")&&"Paragraph"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:j,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("content")&&"ContentBody"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:D,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content")})),this.props.element.hasOwnProperty("filePath")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"fileSelect"},m().createElement(H,{id:"choose-file"}),":"),m().createElement(_.Z.Select,{id:"fileSelect",defaultValue:this.props.element.filePath,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"filePath","value")},E.map((function(e){var t="file_".concat(e.id);return m().createElement("option",{value:e.id,key:t},e.file_name)})))),this.props.element.hasOwnProperty("href")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"href"},m().createElement(H,{id:"link-to"}),":"),m().createElement(_.Z.Control,{id:"href",type:"text",defaultValue:this.props.element.href,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"href","value")})),this.props.element.hasOwnProperty("label")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"display-label"}),":"),m().createElement(O.Editor,{toolbar:j,defaultEditorState:e,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0})),(this.props.element.hasOwnProperty("required")||this.props.element.hasOwnProperty("readOnly")||this.props.element.hasOwnProperty("defaultToday")||-1!==["Checkboxes","Checkbox"].indexOf(this.state.element.element)||("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&this.props.element.hasOwnProperty("inline"))&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},"Field Properties:"),this.props.element.hasOwnProperty("required")&&m().createElement(_.Z.Check,{id:"is-required",label:m().createElement(H,{id:"required"}),type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),this.props.element.hasOwnProperty("readOnly")&&m().createElement(_.Z.Check,{id:"is-read-only",label:m().createElement(H,{id:"read-only"}),type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),this.props.element.hasOwnProperty("defaultToday")&&m().createElement(_.Z.Check,{id:"is-default-to-today",label:m().createElement(H,{id:"default-to-today"}),type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),-1!==["Checkboxes","Checkbox"].indexOf(this.state.element.element)&&m().createElement(_.Z.Check,{id:"default-checked",label:m().createElement(H,{id:"default-checked"}),type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"defaultChecked","checked")}),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&this.props.element.hasOwnProperty("inline")&&m().createElement(_.Z.Check,{id:"display-horizontal",label:m().createElement(H,{id:"display-horizontal"}),type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")})),"Checkbox"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"checkbox-label-text"}),":"),m().createElement(O.Editor,{toolbar,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"boxLabel"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("src")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"srcInput"},m().createElement(H,{id:"link-to"}),":"),m().createElement(_.Z.Control,{id:"srcInput",type:"text",defaultValue:this.props.element.src,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"src","value")})),("Image"===this.state.element.element||"Camera"===this.state.element.element)&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(M.Z,null,m().createElement(A.Z,{sm:3},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"do-center"},"Alignment:"),m().createElement(_.Z.Check,{id:"do-center",label:m().createElement(H,{id:"center"}),type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"center","checked")})),m().createElement(A.Z,{sm:3},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"elementWidth"},m().createElement(H,{id:"width"}),":"),m().createElement(_.Z.Control,{id:"elementWidth",type:"number",defaultValue:this.props.element.width,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"width","value")})),m().createElement(A.Z,{sm:3},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"elementHeight"},m().createElement(H,{id:"height"}),":"),m().createElement(_.Z.Control,{id:"elementHeight",type:"number",defaultValue:this.props.element.height,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"height","value")})))),"FileUpload"===this.state.element.element&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"fileType"},m().createElement(H,{id:"choose-file-type"}),":"),m().createElement(_.Z.Select,{id:"fileType",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 m().createElement("option",{value:e.type,key:t},e.typeName)})))),this.props.element.hasOwnProperty("pageBreakBefore")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"print-options"}),":"),m().createElement(_.Z.Check,{id:"page-break-before-element",label:m().createElement(H,{id:"page-break-before-element"}),type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"pageBreakBefore","checked")})),this.props.element.hasOwnProperty("alternateForm")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"alternate-signature-page"}),":"),m().createElement(_.Z.Check,{id:"display-on-alternate",label:m().createElement(H,{id:"display-on-alternate-signature-page"}),type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")})),this.props.element.hasOwnProperty("step")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"rangeStep"},m().createElement(H,{id:"step"}),":"),m().createElement(_.Z.Control,{id:"rangeStep",type:"number",defaultValue:this.props.element.step,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"step","value")}))),this.props.element.hasOwnProperty("minValue")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"rangeMin"},m().createElement(H,{id:"min"}),":"),m().createElement(_.Z.Control,{id:"rangeMin",type:"number",defaultValue:this.props.element.minValue,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"minValue","value")}))),this.props.element.hasOwnProperty("minLabel")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"rangeMin"},m().createElement(H,{id:"min-label"}),":"),m().createElement(_.Z.Control,{type:"text",defaultValue:this.props.element.minLabel,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"minLabel","value")}))),this.props.element.hasOwnProperty("maxValue")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"rangeMax"},m().createElement(H,{id:"max"}),":"),m().createElement(_.Z.Control,{id:"rangeMax",type:"number",defaultValue:this.props.element.maxValue,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"maxValue","value")}))),this.props.element.hasOwnProperty("maxLabel")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"rangeMax"},m().createElement(H,{id:"max-label"}),":"),m().createElement(_.Z.Control,{type:"text",defaultValue:this.props.element.maxLabel,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"maxLabel","value")}))),this.props.element.hasOwnProperty("defaultValue")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement("div",{className:"form-group-range"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"defaultSelected"},m().createElement(H,{id:"default-selected"}),":"),m().createElement(_.Z.Control,{id:"defaultSelected",type:"number",defaultValue:this.props.element.defaultValue,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"defaultValue","value")}))),this.props.element.hasOwnProperty("static")&&this.props.element.static&&this.props.element.hasOwnProperty("bold")&&this.props.element.hasOwnProperty("italic")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},m().createElement(H,{id:"text-style"}),":"),m().createElement(_.Z.Check,{id:"do-bold",inline:!0,label:m().createElement(H,{id:"bold"}),type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),m().createElement(_.Z.Check,{id:"do-italic",inline:!0,label:m().createElement(H,{id:"italic"}),type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")})),this.props.element.hasOwnProperty("placeholder")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"placeholder"},m().createElement(H,{id:"place-holder-text-label"}),":"),m().createElement(_.Z.Control,{type:"text",id:"placeholder",defaultValue:this.props.element.placeholder,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"placeholder","value")})),this.props.element.hasOwnProperty("customName")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"customName"},m().createElement(H,{id:"custom-name-label"}),":"),m().createElement(_.Z.Control,{type:"text",id:"customName",defaultValue:this.props.element.customName,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"customName","value")})),this.props.element.hasOwnProperty("labelLocation")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"labelLocation"},m().createElement(H,{id:"choose-label-location"}),":"),m().createElement(_.Z.Select,{id:"labelLocation",defaultValue:this.props.element.labelLocation,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"labelLocation","value")},m().createElement("option",{value:"ABOVE"},"Above Form Field"),m().createElement("option",{value:"FLOATING"},"Floating Inside Form Field"))),this.props.element.hasOwnProperty("hideLabel")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold"},"Hide Label:"),m().createElement(_.Z.Check,{id:"hide-label",label:"Hide Label",type:"checkbox",checked:h,value:!0,onChange:this.editElementProp.bind(this,"hideLabel","checked")})),this.props.element.hasOwnProperty("help")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"help"},m().createElement(H,{id:"help-label"}),":"),m().createElement(k,{type:"text",className:"form-control",id:"help",defaultValue:this.props.element.help,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"help","value")})),(this.props.showDescription&&!this.props.element.static||this.props.element.hasOwnProperty("description"))&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"description"},m().createElement(H,{id:"description"}),":"),m().createElement(k,{type:"text",className:"form-control",id:"description",defaultValue:this.props.element.description,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"description","value")})),this.props.showCorrectColumn&&u&&!this.props.element.hasOwnProperty("options")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"correct"},m().createElement(H,{id:"correct-answer"}),":"),m().createElement(_.Z.Control,{id:"correct",type:"text",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")&&m().createElement(_.Z.Group,{className:"form-group mb-5"},m().createElement(_.Z.Label,{className:"fw-bold",htmlFor:"optionsApiUrl"},m().createElement(H,{id:"populate-options-from-api"}),":"),m().createElement(M.Z,null,m().createElement(A.Z,{sm:6},m().createElement(_.Z.Control,{style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),m().createElement(A.Z,{sm:6},m().createElement(I.Z,{variant:"success",onClick:this.addOptions.bind(this)},m().createElement(H,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&m().createElement(W,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:f,canHaveOptionValue:b,item:this.props.preview.state.item,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}))}}]),p}(m().Component);Y.defaultProps={className:"edit-element-fields"}}}]);