react-survey-builder 1.0.6 → 1.0.8

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

@@ -18,7 +18,7 @@
 	"variable-key": "Chiave variabile",
 	"variable-key-desc": "Ciò fornirà all'elemento una chiave che può essere utilizzata per sostituire il contenuto con un valore di runtime",
 	"print-options": "Opzioni di stampa",
-	"page-break-before-elements": "Interruzione di pagina prima dell'elemento",
+	"page-break-before-element": "Interruzione di pagina prima dell'elemento",
 	"alternate-signature-page": "Pagina alternativa/firma",
 	"display-on-alternate-signature-page": "Visualizza su pagina alternativa/firma",
 	"step": "Step",
@@ -79,7 +79,7 @@
 	"place-holder-label": "Etichetta segnaposto",
 	"place-holder-website-link": "Segnaposto link sito...",
 	"place-holder-file-name": "Segnaposto nome file...",
-	"place-holder-email": "E-Mail",
+	"place-holder-email": "Email Address",
 	"place-holder-phone-number": "Numero di telefono",
 	"easy": "Facile",
 	"difficult": "Difficile",

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

@@ -16,7 +16,7 @@
 	"variable-key": "Khóa tham chiếu",
 	"variable-key-desc": "Tùy chọn này cung cấp từ khóa dùng để thay thế nội dung khi biểu mẫu hoạt động",
 	"print-options": "Tùy chọn in ấn",
-	"page-break-before-elements": "Phân trang trước thành phần điểu khiển",
+	"page-break-before-element": "Phân trang trước thành phần điểu khiển",
 	"alternate-signature-page": "Trang thay thế / ký",
 	"display-on-alternate-signature-page": "Hiển thị trên trang thay thế / ký",
 	"step": "Bước nhảy",

package/lib/multi-column/MultiColumnRow.js

@@ -18,8 +18,9 @@ var _componentHeader = _interopRequireDefault(require("../survey-elements/compon
 var _componentLabel = _interopRequireDefault(require("../survey-elements/component-label"));
 var _dustbin = _interopRequireDefault(require("./dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
-var _excluded = ["data", "class_name"],
-  _excluded2 = ["data", "class_name"],
+var _reactBootstrap = require("react-bootstrap");
+var _excluded = ["data", "className"],
+  _excluded2 = ["data", "className"],
   _excluded3 = ["data"];
 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; }
@@ -55,9 +56,7 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
       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", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, childItems.map(function (x, i) {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, childItems.map(function (x, i) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: "".concat(i, "_").concat(x || '_'),
           className: className
@@ -85,39 +84,39 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 var TwoColumnRow = exports.TwoColumnRow = function TwoColumnRow(_ref) {
   var data = _ref.data,
-    class_name = _ref.class_name,
+    className = _ref.className,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var className = class_name || 'col-md-6';
+  var classNameVal = className || 'col-md-6';
   if (!data.childItems) {
     // eslint-disable-next-line no-param-reassign
     data.childItems = [null, null];
     data.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
-    className: className,
+    className: classNameVal,
     data: data
   }));
 };
 var ThreeColumnRow = exports.ThreeColumnRow = function ThreeColumnRow(_ref2) {
   var data = _ref2.data,
-    class_name = _ref2.class_name,
+    className = _ref2.className,
     rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var className = class_name || 'col-md-4';
+  var classNameVal = className || 'col-md-4';
   if (!data.childItems) {
     // eslint-disable-next-line no-param-reassign
     data.childItems = [null, null, null];
     data.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
-    className: className,
+    className: classNameVal,
     data: data
   }));
 };
 var MultiColumnRow = exports.MultiColumnRow = function MultiColumnRow(_ref3) {
   var data = _ref3.data,
     rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
-  var colCount = data.col_count || 4;
-  var className = data.class_name || (colCount === 4 ? 'col-md-3' : 'col');
+  var colCount = data.colCount || 4;
+  var classNameVal = data.className || (colCount === 4 ? 'col-md-3' : 'col');
   if (!data.childItems) {
     // eslint-disable-next-line no-param-reassign
     data.childItems = Array.from({
@@ -128,7 +127,7 @@ var MultiColumnRow = exports.MultiColumnRow = function MultiColumnRow(_ref3) {
     data.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
-    className: className,
+    className: classNameVal,
     data: data
   }));
 };

package/lib/multi-column/dustbin.js

@@ -57,8 +57,8 @@ function isContainer(item) {
       if (data.isContainer) {
         return true;
       }
-      if (data.field_name) {
-        return data.field_name.indexOf('_col_row') > -1;
+      if (data.fieldName) {
+        return data.fieldName.indexOf('_col_row') > -1;
       }
     }
   }

package/lib/preview.js

@@ -19,6 +19,7 @@ var _store = _interopRequireDefault(require("./stores/store"));
 var _surveyDynamicEdit = _interopRequireDefault(require("./survey-dynamic-edit"));
 var _sortableFormElements = _interopRequireDefault(require("./sortable-form-elements"));
 var _componentDragLayer = _interopRequireDefault(require("./survey-elements/component-drag-layer"));
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <Preview />
@@ -33,7 +34,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
       data: [],
-      answer_data: {}
+      answerData: {}
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editModeOff", function (e) {
       if (_this.editForm.current && !_this.editForm.current.contains(e.target)) {
@@ -54,7 +55,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     _this.editForm = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       data: props.data || [],
-      answer_data: {}
+      answerData: {}
     };
     _this.seq = 0;
     _this._onUpdate = _this._onChange.bind((0, _assertThisInitialized2["default"])(_this));
@@ -117,15 +118,15 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     key: "_onChange",
     value: function _onChange(data) {
       var _this3 = this;
-      var answer_data = {};
+      var answerData = {};
       data.forEach(function (item) {
         if (item && item.readOnly && _this3.props.variables[item.variableKey]) {
-          answer_data[item.field_name] = _this3.props.variables[item.variableKey];
+          answerData[item.fieldName] = _this3.props.variables[item.variableKey];
         }
       });
       this.setState({
         data: data,
-        answer_data: answer_data
+        answerData: answerData
       });
     }
   }, {
@@ -358,7 +359,8 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       var items = data.map(function (item, index) {
         return _this6.getElement(item, index);
       });
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        md: 9,
         className: classes
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "edit-form",
@@ -381,7 +383,7 @@ Preview.defaultProps = {
   files: [],
   editMode: false,
   editElement: null,
-  className: 'col-md-9 react-survey-builder-preview float-start',
+  className: 'react-survey-builder-preview',
   renderEditForm: function renderEditForm(props) {
     return /*#__PURE__*/_react["default"].createElement(_surveyDynamicEdit["default"], props);
   }

package/lib/survey-elements/component-label.js

@@ -7,21 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _myxss = _interopRequireDefault(require("./myxss"));
+var _reactBootstrap = require("react-bootstrap");
 var ComponentLabel = function ComponentLabel(props) {
-  var hasRequiredLabel = props.data.hasOwnProperty('required') && props.data.required === true && !props.read_only;
+  var _props$hideRequiredAl;
+  var hasRequiredLabel = props.data.hasOwnProperty('required') && props.data.required === true && !props.readOnly;
   var labelText = _myxss["default"].process(props.data.label);
   if (!labelText || !labelText.trim()) {
     return null;
   }
+  labelText = "".concat(labelText).concat(hasRequiredLabel ? '*' : '');
+  var hideRequiredAlert = (_props$hideRequiredAl = props.hideRequiredAlert) !== null && _props$hideRequiredAl !== void 0 ? _props$hideRequiredAl : props.data.hideRequiredAlert;
   return /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: props.name,
-    className: props.className || 'form-label'
+    className: props.className || ''
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: labelText
     }
-  }), hasRequiredLabel && !props.hide_required_alert && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "label-required badge bg-danger"
+  }), hasRequiredLabel && !hideRequiredAlert && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Badge, {
+    bg: "danger",
+    className: "label-required"
   }, "Required"));
 };
 var _default = exports["default"] = ComponentLabel;

package/lib/survey-elements/custom-element.js

@@ -15,6 +15,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
+var _reactBootstrap = require("react-bootstrap");
 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; }
 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); }; }
@@ -34,12 +35,12 @@ var CustomElement = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var bare = this.props.data.bare;
       var props = {};
-      props.name = this.props.data.field_name;
+      props.name = this.props.data.fieldName;
       props.defaultValue = this.props.defaultValue;
       if (this.props.mutable && this.props.data.forwardRef) {
         props.ref = this.inputField;
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
 
@@ -55,9 +56,7 @@ var CustomElement = /*#__PURE__*/function (_React$Component) {
         style: _objectSpread({}, this.props.style)
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), bare ? /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         data: this.props.data
-      }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
+      }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
       }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         data: this.props.data

package/lib/survey-elements/date-picker.js

@@ -15,6 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 var _dateFns = require("date-fns");
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
+var _reactBootstrap = require("react-bootstrap");
 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; }
 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); }; }
@@ -116,8 +117,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       var props = {};
       props.type = 'date';
       props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      var readOnly = this.props.data.readOnly || this.props.read_only;
+      props.name = this.props.data.fieldName;
+      var readOnly = this.props.data.readOnly || this.props.readOnly;
       this.state.formatMask.toLowerCase();
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
@@ -130,24 +131,20 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: baseClasses,
         style: _objectSpread({}, this.props.style)
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
         name: props.name,
         ref: props.ref,
         readOnly: readOnly,
         placeholder: placeholder || this.state.placeholder,
-        value: this.state.value,
-        className: "form-control"
-      }), !readOnly && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "input-group",
+        value: this.state.value
+      }), !readOnly && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.InputGroup, {
         style: {
           border: '1px solid #ced4da',
           borderRadius: '0.25rem',
           marginTop: 10
         }
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         value: this.state.month,
         onKeyUp: function onKeyUp(e) {
           return e.target.value && e.target.value.length === 2 && document.getElementById('day').focus();
@@ -157,7 +154,6 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(e) {
           return _this2.handleDateChange(e);
         },
-        className: "form-control",
         type: "text",
         style: {
           border: 'none'
@@ -173,14 +169,13 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           display: this.state.year || this.state.day || this.state.month ? '' : 'none',
           alignSelf: 'center'
         }
-      }, "/"), /*#__PURE__*/_react["default"].createElement("input", {
+      }, "/"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         value: this.state.day,
         onKeyUp: function onKeyUp(e) {
           return e.target.value && e.target.value.length === 2 && document.getElementById('year').focus();
         },
         name: "day",
         id: "day",
-        className: "form-control",
         type: "text",
         style: {
           border: 'none'
@@ -198,11 +193,10 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           display: this.state.year || this.state.day || this.state.month ? '' : 'none',
           alignSelf: 'center'
         }
-      }, "/"), /*#__PURE__*/_react["default"].createElement("input", {
+      }, "/"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         value: this.state.year,
         name: "year",
         id: "year",
-        className: "form-control",
         type: "text",
         style: {
           border: 'none'

package/lib/survey-elements/header-bar.js

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _componentDragHandle = _interopRequireDefault(require("./component-drag-handle"));
 var _fa = require("react-icons/fa");
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <HeaderBar />
@@ -27,19 +28,21 @@ var HeaderBar = exports["default"] = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(HeaderBar, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "toolbar-header"
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "badge bg-secondary"
+      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ButtonToolbar, {
+        className: "d-flex toolbar-header align-items-center justify-content-between p-2"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Badge, {
+        bg: "secondary"
       }, this.props.data.text), /*#__PURE__*/_react["default"].createElement("div", {
         className: "toolbar-header-buttons"
-      }, this.props.data.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn is-isolated",
+      }, this.props.data.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
+        className: "is-isolated",
         onClick: this.props.editModeOn.bind(this.props.parent, this.props.data)
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaEdit, {
         className: "is-isolated"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn is-isolated",
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
+        className: "is-isolated",
         onClick: this.props.onDestroy.bind(this, this.props.data)
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTrash, {
         className: "is-isolated"