@goldenpine/react-form-builder2 0.20.3-build.20 → 0.20.3-build.21

package/lib/form-elements/index.js

@@ -824,53 +824,103 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
         }
       }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: _objectSpread({}, this.props.style),
-        className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
-        style: imageStyle,
-        src: sourceDataURL
-        // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-container"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
-        type: "file",
-        accept: "image/*"
-        //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
-        ,
-        className: "image-upload visually-hidden",
-        onChange: this.displayImage,
-        "data-clearlabel": this.props.data.label_after_photo_clear_icon,
-        disabled: this.props.read_only,
-        id: name
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control",
-        style: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "btn btn-outline-secondary",
-        htmlFor: name
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-camera"
-      }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
-        onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this13.state.previewImg);
-        },
-        src: this.state.previewImg,
-        height: "100",
-        className: "image-upload-preview"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-image-clear",
-        onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-times"
-      }), " ", this.props.data.label_after_photo_clear_icon)))));
+      if (this.props.data.upload_layout === "standard") {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+          // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*"
+          //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
+          ,
+          className: "image-upload visually-hidden",
+          onChange: this.displayImage,
+          "data-clearlabel": this.props.data.label_after_photo_clear_icon,
+          disabled: this.props.read_only,
+          id: name
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-control",
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("label", {
+          className: "btn btn-outline-secondary",
+          htmlFor: name
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-camera"
+        }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          height: "100",
+          className: "image-upload-preview"
+        }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " ", this.props.data.label_after_photo_clear_icon)))));
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle,
+          className: "upload-card"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*",
+          capture: "camera",
+          className: "visually-hidden",
+          onChange: this.displayImage,
+          id: name,
+          disabled: this.props.read_only
+        }), /*#__PURE__*/_react["default"].createElement("label", {
+          htmlFor: name,
+          className: "upload-card-content"
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-cloud-upload-alt upload-icon"
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: "upload-text"
+        }, this.props.data.message_under_camera_icon), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn-browse"
+        }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "preview-container"
+        }, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          className: "image-upload-preview",
+          alt: "Preview",
+          height: "100"
+        }), /*#__PURE__*/_react["default"].createElement("button", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " Remove Photo")))));
+      }
     }
   }]);
 }(_react["default"].Component);

package/lib/form-elements-edit.js

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
 var _draftJs = require("draft-js");
@@ -34,6 +35,17 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
     var _this;
     (0, _classCallCheck2["default"])(this, FormElementsEdit);
     _this = _callSuper(this, FormElementsEdit, [props]);
+    // Instead of using editElementProp for the camera layout change, we have a separate handler to immediately update the element on change without waiting for blur, as it's a radio button and we want the change to be reflected immediately in the UI.
+    (0, _defineProperty2["default"])(_this, "handleUploadLayoutChange", function (e) {
+      var this_element = _this.state.element;
+      this_element["upload_layout"] = e.target["value"];
+      _this.setState({
+        element: this_element,
+        dirty: true
+      }, function () {
+        _this.updateElement();
+      });
+    });
     _this.state = {
       element: _this.props.element,
       data: _this.props.data,
@@ -348,53 +360,45 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.src,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
-      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "upload-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex align-items-center gap-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-check"
+        className: "form-check d-flex align-items-center"
       }, /*#__PURE__*/_react["default"].createElement("input", {
-        id: "do-center",
         className: "form-check-input",
-        type: "checkbox",
-        checked: this_checked_center,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'center', 'checked')
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutStandard",
+        value: "standard",
+        checked: this.props.element.upload_layout === "standard",
+        onChange: this.handleUploadLayoutChange
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "form-check-label",
-        htmlFor: "do-center"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "center"
-      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementWidth"
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutStandard"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "width"
-      }), ":"), /*#__PURE__*/_react["default"].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')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementHeight"
+        id: "upload-layout-standard"
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check d-flex align-items-center"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        className: "form-check-input",
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutDropZone",
+        value: "dropzone",
+        checked: this.props.element.upload_layout === "dropzone",
+        onChange: this.handleUploadLayoutChange
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutDropZone"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "height"
-      }), ":"), /*#__PURE__*/_react["default"].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')
-      })))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "upload-layout-dropzone"
+      }))))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
@@ -436,7 +440,59 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         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')
-      }))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "image-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        id: "do-center",
+        className: "form-check-input",
+        type: "checkbox",
+        checked: this_checked_center,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'center', 'checked')
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label",
+        htmlFor: "do-center"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "center"
+      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "row mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementWidth"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "width"
+      }), ":"), /*#__PURE__*/_react["default"].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')
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementHeight"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "height"
+      }), ":"), /*#__PURE__*/_react["default"].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')
+      })), /*#__PURE__*/_react["default"].createElement("small", {
+        className: "form-text text-muted"
+      }, "Use ", /*#__PURE__*/_react["default"].createElement("code", null, "px"), " or ", /*#__PURE__*/_react["default"].createElement("code", null, "%"), " (e.g. 200px, 100%)."))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",

package/lib/language-provider/locales/en-us.json

@@ -37,9 +37,13 @@
   "word" : "Word",
   "excel" : "Excel",
   "ppt" : "PPT",
-  "display-label-after-camera-icon" : "Display label after camera icon",
+  "upload-layout" : "Upload Area Layout",
+  "upload-layout-standard" : "Standard",
+  "upload-layout-dropzone" : "Dropzone",
+  "image-layout" : "Image Layout",
+  "display-label-after-camera-icon" : "Display label on button",
   "place-holder-display-label-after-camera-icon" : "Upload Photo",
-  "display-message-under-camera-icon" : "Display message under camera icon",
+  "display-message-under-camera-icon" : "Display message under icon",
   "place-holder-display-message-under-camera-icon" : "Select an image from your computer or device.",
   "display-label-after-photo-clear-icon" : "Display label after photo clear icon",
   "place-holder-display-label-after-photo-clear-icon" : "Clear Photo",
@@ -107,12 +111,4 @@
   "message.was-not-registered": "was not registered",
   "message.invalid-email": "field requires valid email address",
   "message.invalid-phone-number": "field requires a valid phone number"
-
-
-
-
-
-
-
-
 }

package/lib/language-provider/locales/fa-ir.json

@@ -37,9 +37,13 @@
   "word": "Word",
   "excel": "Excel",
   "ppt": "PPT",
+  "upload-layout" : "چیدمان بخش بارگذاری",
+  "upload-layout-standard" : "استاندارد",
+  "upload-layout-dropzone" : "رها کردن فایل",
+  "image-layout" : "چیدمان تصویر",
   "display-label-after-camera-icon" : "نمایش برچسب پس از آیکون دوربین",
   "place-holder-display-label-after-camera-icon" : "آپلود عکس",
-  "display-message-under-camera-icon" : "نمایش پیام زیر آیکون دوربین",
+  "display-message-under-camera-icon" : "نمایش پیام زیر آیکون",
   "place-holder-display-message-under-camera-icon" : "یک تصویر را از رایانه یا دستگاه خود انتخاب کنید.",
   "display-label-after-photo-clear-icon" : "نمایش برچسب پس از آیکون حذف عکس",
   "place-holder-display-label-after-photo-clear-icon" : "حذف عکس",
@@ -107,4 +111,4 @@
   "message.was-not-registered": "ثبت نشد",
   "message.invalid-email": "فیلد نیاز به آدرس ایمیل معتبر دارد",
   "message.invalid-phone-number": "فیلد نیاز به شماره تلفن معتبر دارد"
-}
+}

package/lib/language-provider/locales/it-it.json

@@ -37,9 +37,13 @@
   "word" : "Word",
   "excel" : "Excel",
   "ppt" : "PPT",
+  "upload-layout" : "Layout dell'area di caricamento",
+  "upload-layout-standard" : "Standard",
+  "upload-layout-dropzone" : "Area di rilascio",
+  "image-layout" : "Layout dell'immagine",
   "display-label-after-camera-icon" : "Mostra etichetta dopo l'icona della fotocamera",
   "place-holder-display-label-after-camera-icon" : "Carica foto",
-  "display-message-under-camera-icon" : "Mostra messaggio sotto l'icona della fotocamera",
+  "display-message-under-camera-icon" : "Mostra il messaggio sotto l'icona",
   "place-holder-display-message-under-camera-icon" : "Seleziona un'immagine dal tuo computer o dispositivo.",
   "display-label-after-photo-clear-icon" : "Mostra etichetta dopo l'icona di cancellazione della foto",
   "place-holder-display-label-after-photo-clear-icon" : "Cancella foto",

package/lib/language-provider/locales/vi-vn.json

@@ -1,6 +1,8 @@
 {
   "display-label": "Nhãn hiển thị",
   "choose-file": "Chọn tệp tin",
+  "choose-file-type": "Chọn loại tệp",
+  "select-file-type": "Chọn kiểu tập tin",
   "text-to-display": "Chữ hiển thị",
   "link-to": "Liên kết tới",
   "center": "Giữa",
@@ -31,9 +33,17 @@
   "populate-options-from-api": "Lấy dữ liệu từ API",
   "minimum-number-of-selections" : "Số lượng lựa chọn tối thiểu mà khách hàng phải chọn",
   "populate": "Thực hiện",
+  "pdf" : "PDF",
+  "word" : "Word",
+  "excel" : "Excel",
+  "ppt" : "PPT",
+  "upload-layout" : "Bố cục khu vực tải lên",
+  "upload-layout-standard" : "Tiêu chuẩn",
+  "upload-layout-dropzone" : "Vùng thả tệp",
+  "image-layout" : "Bố cục hình ảnh",
   "display-label-after-camera-icon" : "Hiển thị nhãn sau biểu tượng máy ảnh",
   "place-holder-display-label-after-camera-icon" : "Tải ảnh lên",
-  "display-message-under-camera-icon" : "Hiển thị tin nhắn dưới biểu tượng máy ảnh",
+  "display-message-under-camera-icon" : "Hiển thị thông báo dưới biểu tượng",
   "place-holder-display-message-under-camera-icon" : "Chọn một hình ảnh từ máy tính hoặc thiết bị của bạn.",
   "display-label-after-photo-clear-icon" : "Hiển thị nhãn sau biểu tượng xóa ảnh",
   "place-holder-display-label-after-photo-clear-icon" : "Xóa ảnh",
@@ -67,12 +77,16 @@
   "checkboxes" : "Hộp chọn",
   "multiple-choice":"Nhiều lựa chọn",
   "text-input":"Nhập chữ",
+  "email-input": "Email",
+  "phone-input": "Số điện thoại",
   "number-input":"Nhập số",
-  "fieldset":"bộ trường",
   "multi-line-input":"Nhập nhiều dòng",
+  "fieldset":"bộ trường",
   "two-columns-row":"Dòng có hai cột",
   "three-columns-row":"Dòng có ba cột",
   "four-columns-row":"Dòng có bốn cột",
+  "five-columns-row": "Hàng năm cột",
+  "six-columns-row": "Hàng sáu cột",
   "image":"Liên kết ảnh",
   "rating":"Đánh giá",
   "date":"Ngày",
@@ -81,17 +95,20 @@
   "file-attachment":"Tệp đính kèm",
   "range":"Khoảng",
   "camera":"Tải ảnh",
+  "file-upload": "Tải tệp lên",
   "place-holder-text": "Nội dung...",
   "place-holder-label": "Nhãn",
   "place-holder-website-link": "Đường dẫn tới website...",
   "place-holder-file-name": "Tên tệp...",
-  "easy": "Easy",
-  "difficult": "Difficult",
-
+  "place-holder-email": "E-Mail",
+  "place-holder-phone-number": "Số điện thoại",
+  "easy": "Dễ",
+  "difficult": "Khó",
   "drop-zone": "Khu vực kéo thả",
 
   "message.is-required": "không được bỏ trống",
   "message.was-answered incorrectly": "đã trả lời sai",
-  "message.was-not-registered": "chưa đăng ký"
-  
+  "message.was-not-registered": "chưa đăng ký",
+  "message.invalid-email": "trường này yêu cầu địa chỉ email hợp lệ",
+  "message.invalid-phone-number": "trường này yêu cầu số điện thoại hợp lệ"
 }

package/lib/preview.js

@@ -30,7 +30,57 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     _this = _callSuper(this, Preview, [props]);
     (0, _defineProperty2["default"])(_this, "state", {
       data: [],
-      answer_data: {}
+      answer_data: {},
+      // make edit form movable state
+      editFormPosition: {
+        x: 100,
+        y: 100
+      },
+      dragging: false,
+      dragOffset: null
+    });
+    // start dragging the edit form (ignore clicks on inputs/buttons)
+    (0, _defineProperty2["default"])(_this, "onEditFormMouseDown", function (e) {
+      var tag = e.target && e.target.tagName && e.target.tagName.toLowerCase();
+      if (['input', 'textarea', 'select', 'button', 'a', 'label'].includes(tag)) {
+        return;
+      }
+      if (!_this.editForm.current) return;
+      var rect = _this.editForm.current.getBoundingClientRect();
+      var offset = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      _this.setState({
+        dragging: true,
+        dragOffset: offset
+      });
+      document.addEventListener('mousemove', _this.onEditFormDrag);
+      document.addEventListener('mouseup', _this.onEditFormMouseUp);
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    (0, _defineProperty2["default"])(_this, "onEditFormDrag", function (e) {
+      if (!_this.state.dragging || !_this.state.dragOffset) return;
+      var x = e.clientX - _this.state.dragOffset.x;
+      var y = e.clientY - _this.state.dragOffset.y;
+      _this.setState({
+        editFormPosition: {
+          x: x,
+          y: y
+        }
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onEditFormMouseUp", function (e) {
+      if (_this.state.dragging) {
+        _this.setState({
+          dragging: false,
+          dragOffset: null
+        });
+        document.removeEventListener('mousemove', _this.onEditFormDrag);
+        document.removeEventListener('mouseup', _this.onEditFormMouseUp);
+      }
+      e.stopPropagation();
     });
     (0, _defineProperty2["default"])(_this, "editModeOff", function (e) {
       if (_this.editForm.current && !_this.editForm.current.contains(e.target)) {
@@ -48,10 +98,20 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     var onLoad = props.onLoad,
       onPost = props.onPost;
     _store["default"].setExternalHandler(onLoad, onPost);
+
+    // eidtForm is for Element Property Edit, 
+    // used to detect clicks outside the edit panel and to make it draggable
     _this.editForm = /*#__PURE__*/_react["default"].createRef();
+    _this._editFormListenerAttached = false; // <-- track listener
     _this.state = {
       data: props.data || [],
-      answer_data: {}
+      answer_data: {},
+      editFormPosition: {
+        x: 100,
+        y: 100
+      },
+      dragging: false,
+      dragOffset: null
     };
     _this.seq = 0;
     _this._onUpdate = _this._onChange.bind(_this);
@@ -83,11 +143,49 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
         saveAlways: saveAlways
       });
       document.addEventListener('mousedown', this.editModeOff);
+
+      // attach drag start on the edit form container if present
+      if (this.editForm && this.editForm.current) {
+        this.editForm.current.addEventListener('mousedown', this.onEditFormMouseDown);
+        this._editFormListenerAttached = true;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // attach/detach mousedown listener when edit panel opens/closes
+      var wasOpen = !!prevProps.editElement;
+      var isOpen = !!this.props.editElement;
+      if (!wasOpen && isOpen) {
+        // always (re)attach the listener to the current DOM node when opening.
+        if (this.editForm && this.editForm.current) {
+          // defensive remove in case a stale listener flag is set
+          try {
+            this.editForm.current.removeEventListener('mousedown', this.onEditFormMouseDown);
+          } catch (e) {/* ignore */}
+          this.editForm.current.addEventListener('mousedown', this.onEditFormMouseDown);
+          this._editFormListenerAttached = true;
+        } else {
+          this._editFormListenerAttached = false;
+        }
+      } else if (wasOpen && !isOpen) {
+        // mark as detached so future opens will reattach; remove if node still exists
+        if (this.editForm && this.editForm.current && this._editFormListenerAttached) {
+          this.editForm.current.removeEventListener('mousedown', this.onEditFormMouseDown);
+        }
+        this._editFormListenerAttached = false;
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       document.removeEventListener('mousedown', this.editModeOff);
+      if (this.editForm && this.editForm.current && this._editFormListenerAttached) {
+        this.editForm.current.removeEventListener('mousedown', this.onEditFormMouseDown);
+        this._editFormListenerAttached = false;
+      }
+      document.removeEventListener('mousemove', this.onEditFormDrag);
+      document.removeEventListener('mouseup', this.onEditFormMouseUp);
     }
   }, {
     key: "_setValue",
@@ -359,12 +457,27 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       var items = data.map(function (item, index) {
         return _this6.getElement(item, index);
       });
+      var editFormStyle = {
+        position: 'fixed',
+        left: this.state.editFormPosition.x,
+        top: this.state.editFormPosition.y,
+        zIndex: 9999,
+        cursor: this.state.dragging ? 'grabbing' : 'move',
+        height: 'auto',
+        // allow height to fit content
+        maxHeight: '80vh',
+        // prevent overflow beyond viewport
+        overflow: 'auto',
+        // enable scrolling when content is taller than maxHeight
+        boxSizing: 'border-box' // ensure padding doesn't grow box beyond maxHeight
+      };
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.props.editElement !== null && /*#__PURE__*/_react["default"].createElement("div", {
         className: "edit-form",
-        ref: this.editForm
-      }, this.props.editElement !== null && this.showEditForm()), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.editForm,
+        style: editFormStyle
+      }, this.showEditForm()), /*#__PURE__*/_react["default"].createElement("div", {
         className: "Sortable"
       }, items), /*#__PURE__*/_react["default"].createElement(PlaceHolder, {
         id: "form-place-holder",
@@ -381,6 +494,7 @@ Preview.defaultProps = {
   files: [],
   editMode: false,
   editElement: null,
+  // element currently being edited
   className: 'col-md-9 react-form-builder-preview float-start',
   renderEditForm: function renderEditForm(props) {
     return /*#__PURE__*/_react["default"].createElement(_formDynamicEdit["default"], props);