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

package/lib/form-elements/index.js

@@ -866,7 +866,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           src: this.state.previewImg,
           height: "100",
           className: "image-upload-preview"
-        }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+        }), /*#__PURE__*/_react["default"].createElement("button", {
           className: "btn btn-image-clear",
           onClick: this.clearImage
         }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -890,11 +890,11 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           name: name,
           type: "file",
           accept: "image/*",
-          capture: "camera",
           className: "visually-hidden",
           onChange: this.displayImage,
-          id: name,
-          disabled: this.props.read_only
+          "data-clearlabel": this.props.data.label_after_photo_clear_icon,
+          disabled: this.props.read_only,
+          id: name
         }), /*#__PURE__*/_react["default"].createElement("label", {
           htmlFor: name,
           className: "upload-card-content"
@@ -904,9 +904,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           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", {
+        }, this.props.data.label_after_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);
           },
@@ -919,7 +917,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           onClick: this.clearImage
         }, /*#__PURE__*/_react["default"].createElement("i", {
           className: "fas fa-times"
-        }), " Remove Photo")))));
+        }), " ", this.props.data.label_after_photo_clear_icon)))));
       }
     }
   }]);
@@ -1007,6 +1005,61 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      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("button", {
+          className: "btn btn-outline-secondary",
+          onClick: this.saveFile
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-download"
+        }), " Download File")) : /*#__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: this.props.data.fileType || '*',
+          className: "image-upload visually-hidden",
+          onChange: this.displayFileUpload,
+          "data-clearlabel": this.props.data.label_after_file_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-file"
+        }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "file-upload-preview"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginRight: '5px'
+          }
+        }, this.state.fileUpload.name), /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginLeft: '5px'
+          }
+        }, this.state.fileUpload.size.length > 6 ? "  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn btn-file-upload-clear",
+          onClick: this.clearFileUpload
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " ", this.props.data.label_after_file_clear_icon)))));
+      }
+
+      // non-standard layout: use "upload-card" style like Camera
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -1020,27 +1073,27 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
       }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: fileInputStyle
+        style: fileInputStyle,
+        className: "upload-card"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         name: name,
         type: "file",
         accept: this.props.data.fileType || '*',
-        className: "image-upload visually-hidden",
+        className: "visually-hidden",
         onChange: this.displayFileUpload,
         "data-clearlabel": this.props.data.label_after_file_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("label", {
+        htmlFor: name,
+        className: "upload-card-content"
       }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-file"
-      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "fas fa-cloud-upload-alt upload-icon"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "upload-text"
+      }, this.props.data.message_under_file_icon), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn-browse"
+      }, this.props.data.label_after_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {

package/lib/form-elements-edit.js

@@ -134,6 +134,18 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         });
       }
     }
+  }, {
+    key: "validateImageSize",
+    value: function validateImageSize(e) {
+      var regex = /^$|^\d+(px|%)$/;
+      if (regex.test(e.target.value)) {
+        e.target.classList.remove("is-invalid");
+        e.target.classList.add("is-valid");
+      } else {
+        e.target.classList.remove("is-valid");
+        e.target.classList.add("is-invalid");
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -160,6 +172,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
+      var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
       var this_files = this.props.files.length ? this.props.files : [];
       if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
         this_files.unshift({
@@ -360,7 +373,7 @@ 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')
-      }))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), canHaveUploadLayout && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label bold"
@@ -398,7 +411,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         htmlFor: "uploadLayoutDropZone"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "upload-layout-dropzone"
-      }))))), /*#__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",
@@ -473,6 +486,8 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         id: "elementWidth",
         type: "text",
         className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
         defaultValue: this.props.element.width,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'width', 'value')
@@ -487,6 +502,8 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         id: "elementHeight",
         type: "text",
         className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
         defaultValue: this.props.element.height,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'height', 'value')

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

@@ -39,7 +39,7 @@
   "ppt" : "PPT",
   "upload-layout" : "Upload Area Layout",
   "upload-layout-standard" : "Standard",
-  "upload-layout-dropzone" : "Dropzone",
+  "upload-layout-dropzone" : "Large upload area",
   "image-layout" : "Image Layout",
   "display-label-after-camera-icon" : "Display label on button",
   "place-holder-display-label-after-camera-icon" : "Upload Photo",

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

@@ -39,7 +39,7 @@
   "ppt": "PPT",
   "upload-layout" : "چیدمان بخش بارگذاری",
   "upload-layout-standard" : "استاندارد",
-  "upload-layout-dropzone" : "رها کردن فایل",
+  "upload-layout-dropzone" : "بخش بارگذاری بزرگ",
   "image-layout" : "چیدمان تصویر",
   "display-label-after-camera-icon" : "نمایش برچسب پس از آیکون دوربین",
   "place-holder-display-label-after-camera-icon" : "آپلود عکس",

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

@@ -39,7 +39,7 @@
   "ppt" : "PPT",
   "upload-layout" : "Layout dell'area di caricamento",
   "upload-layout-standard" : "Standard",
-  "upload-layout-dropzone" : "Area di rilascio",
+  "upload-layout-dropzone" : "Area di caricamento grande",
   "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",

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

@@ -39,7 +39,7 @@
   "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",
+  "upload-layout-dropzone" : "Khu vực tải lên lớn",
   "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",

package/lib/toolbar.js

@@ -443,6 +443,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'file_upload_',
+        upload_layout: 'standard',
         label_after_file_icon: intl.formatMessage({
           id: 'place-holder-display-label-after-file-icon'
         }),
@@ -546,6 +547,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.label_after_photo_clear_icon = item.label_after_photo_clear_icon;
       }
       if (elementKey === 'FileUpload') {
+        elementOptions.upload_layout = item.upload_layout;
         elementOptions.label_after_file_icon = item.label_after_file_icon;
         elementOptions.message_under_file_icon = item.message_under_file_icon;
         elementOptions.label_after_file_clear_icon = item.label_after_file_clear_icon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.21",
+  "version": "0.20.3-build.23",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",