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

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

@@ -31,14 +31,19 @@
   "description": "Description",
   "correct-answer" : "Correct Answer",
   "populate-options-from-api" : "Populate Options from API",
+  "minimum-number-of-selections" : "The minimum number of options a customer must select",
   "populate" : "Populate",
   "pdf" : "PDF",
   "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",
@@ -106,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

@@ -31,14 +31,19 @@
   "description": "توضیحات",
   "correct-answer": "پاسخ صحیح",
   "populate-options-from-api": "پر کردن گزینه‌ها از API",
+  "minimum-number-of-selections" : "حداقل تعداد گزینه‌هایی که مشتری باید انتخاب کند",
   "populate": "پر کردن",
   "pdf": "PDF",
   "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" : "حذف عکس",
@@ -106,4 +111,4 @@
   "message.was-not-registered": "ثبت نشد",
   "message.invalid-email": "فیلد نیاز به آدرس ایمیل معتبر دارد",
   "message.invalid-phone-number": "فیلد نیاز به شماره تلفن معتبر دارد"
-}
+}

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

@@ -31,14 +31,19 @@
   "description": "Descrizione",
   "correct-answer" : "Risposta corretta",
   "populate-options-from-api" : "Popola opzione da API",
+  "minimum-number-of-selections" : "Il numero minimo di opzioni che un cliente deve selezionare",
   "populate" : "Popola",
   "pdf" : "PDF",
   "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",
@@ -29,10 +31,19 @@
   "description": "Mô tả",
   "correct-answer": "Lựa chọn đúng",
   "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",
@@ -66,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",
@@ -80,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/multi-column/dustbin.js

@@ -61,7 +61,9 @@ function isContainer(item) {
         return true;
       }
       if (data.field_name) {
-        return data.field_name.indexOf('_col_row') > -1;
+        // Check if the field name indicates a container
+        // Fix a runtime error when dropping a fieldset inside a multi-column row - which dropping seems not supported
+        return data.field_name.indexOf('_col_row') > -1 || data.field_name.indexOf('fieldset') > -1;
       }
     }
   }

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,7 +494,8 @@ Preview.defaultProps = {
   files: [],
   editMode: false,
   editElement: null,
-  className: 'col-md-9 react-form-builder-preview float-left',
+  // 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);
   }

package/lib/sortable-element.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
-var _excluded = ["index", "id", "moveCard", "seq"];
+var _excluded = ["index", "id", "moveCard", "seq", "component"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -153,20 +153,19 @@ var useDragAndDrop = function useDragAndDrop(props) {
 
 // Modern approach using a functional component wrapper instead of HOC
 var DraggableCard = function DraggableCard(props) {
+  // ✅ Move the default value directly into destructuring
   var index = props.index,
     id = props.id,
     moveCard = props.moveCard,
     _props$seq = props.seq,
     seq = _props$seq === void 0 ? -1 : _props$seq,
+    ComposedComponent = props.component,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useDragAndDrop = useDragAndDrop(props),
     ref = _useDragAndDrop.ref,
     previewRef = _useDragAndDrop.previewRef,
     isDragging = _useDragAndDrop.isDragging;
   var opacity = isDragging ? 0 : 1;
-
-  // Use the ComposedComponent passed in props
-  var ComposedComponent = props.component;
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: previewRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -189,9 +188,11 @@ DraggableCard.propTypes = {
   moveCard: _propTypes["default"].func.isRequired,
   seq: _propTypes["default"].number
 };
-DraggableCard.defaultProps = {
-  seq: -1
-};
+
+// ❌ REMOVE THIS BLOCK ENTIRELY
+// DraggableCard.defaultProps = {
+//   seq: -1,
+// };
 
 // This replaces the HOC pattern with a component that takes the component as a prop
 function createDraggableCard(ComposedComponent) {

package/lib/toolbar.js

@@ -423,6 +423,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'camera_',
+        upload_layout: 'standard',
         label_after_camera_icon: intl.formatMessage({
           id: 'place-holder-display-label-after-camera-icon'
         }),
@@ -539,6 +540,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.max_label = item.max_label;
       }
       if (elementKey === 'Camera') {
+        elementOptions.upload_layout = item.upload_layout;
         elementOptions.label_after_camera_icon = item.label_after_camera_icon;
         elementOptions.message_under_camera_icon = item.message_under_camera_icon;
         elementOptions.label_after_photo_clear_icon = item.label_after_photo_clear_icon;
@@ -588,7 +590,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         grouped = _buildGroupItems.grouped,
         groupKeys = _buildGroupItems.groupKeys;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-md-3 react-form-builder-toolbar float-right",
+        className: "col-md-3 react-form-builder-toolbar float-end",
         style: {
           position: this.state.isPinned ? 'fixed' : '',
           // set up the vertical boundary by top/bottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.2",
+  "version": "0.20.3-build.21",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -29,7 +29,7 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "author": "Kiho Chang",
+  "author": "Golden Pine",
   "dependencies": {
     "beedle": "^0.8.1",
     "classnames": "^2.2.6",
@@ -43,7 +43,7 @@
     "immutability-helper": "^3.1.1",
     "isomorphic-fetch": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react-bootstrap-slider": "^3.0.0",
+    "@goldenpine/react-bootstrap-slider": "^3.0.1",
     "react-datepicker": "^8.3.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",