react-survey-builder 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +15 -15
  2. package/dist/967.index.js +1 -1
  3. package/dist/app.css +1 -1
  4. package/dist/app.css.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/lib/dynamic-option-list.js +52 -58
  7. package/lib/fieldset/FieldSet.js +7 -8
  8. package/lib/form.js +53 -51
  9. package/lib/index.js +6 -4
  10. package/lib/language-provider/IntlMessages.js +2 -2
  11. package/lib/language-provider/locales/en-us.json +9 -9
  12. package/lib/language-provider/locales/it-it.json +2 -2
  13. package/lib/language-provider/locales/vi-vn.json +1 -1
  14. package/lib/multi-column/MultiColumnRow.js +13 -14
  15. package/lib/multi-column/dustbin.js +2 -2
  16. package/lib/preview.js +9 -7
  17. package/lib/survey-elements/component-label.js +9 -5
  18. package/lib/survey-elements/custom-element.js +4 -5
  19. package/lib/survey-elements/date-picker.js +9 -15
  20. package/lib/survey-elements/header-bar.js +11 -8
  21. package/lib/survey-elements/index.js +231 -155
  22. package/lib/survey-elements-edit.js +134 -234
  23. package/lib/survey-validator.js +9 -9
  24. package/lib/toolbar-group-item.js +4 -2
  25. package/lib/toolbar.js +117 -82
  26. package/package.json +7 -3
  27. package/types/index.d.ts +23 -21
package/lib/dynamic-option-list.js CHANGED
@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
14
14
  var _UUID = _interopRequireDefault(require("./UUID"));
15
15
  var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
16
16
  var _fa = require("react-icons/fa");
17
+ var _reactBootstrap = require("react-bootstrap");
17
18
  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); }; }
18
19
  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; } } /**
19
20
  * <DynamicOptionList />
@@ -39,24 +40,24 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
39
40
  }
40
41
  }, {
41
42
  key: "editOption",
42
- value: function editOption(option_index, e) {
43
- var this_element = this.state.element;
44
- var val = this_element.options[option_index].value !== this._setValue(this_element.options[option_index].text) ? this_element.options[option_index].value : this._setValue(e.target.value);
45
- this_element.options[option_index].text = e.target.value;
46
- this_element.options[option_index].value = val;
43
+ value: function editOption(optionIndex, e) {
44
+ var thisElement = this.state.element;
45
+ var val = thisElement.options[optionIndex].value !== this._setValue(thisElement.options[optionIndex].text) ? thisElement.options[optionIndex].value : this._setValue(e.target.value);
46
+ thisElement.options[optionIndex].text = e.target.value;
47
+ thisElement.options[optionIndex].value = val;
47
48
  this.setState({
48
- element: this_element,
49
+ element: thisElement,
49
50
  dirty: true
50
51
  });
51
52
  }
52
53
  }, {
53
54
  key: "editValue",
54
- value: function editValue(option_index, e) {
55
- var this_element = this.state.element;
56
- var val = e.target.value === '' ? this._setValue(this_element.options[option_index].text) : e.target.value;
57
- this_element.options[option_index].value = val;
55
+ value: function editValue(optionIndex, e) {
56
+ var thisElement = this.state.element;
57
+ var val = e.target.value === '' ? this._setValue(thisElement.options[optionIndex].text) : e.target.value;
58
+ thisElement.options[optionIndex].value = val;
58
59
  this.setState({
59
- element: this_element,
60
+ element: thisElement,
60
61
  dirty: true
61
62
  });
62
63
  }
@@ -64,25 +65,25 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
64
65
  // eslint-disable-next-line no-unused-vars
65
66
  }, {
66
67
  key: "editOptionCorrect",
67
- value: function editOptionCorrect(option_index, e) {
68
- var this_element = this.state.element;
69
- if (this_element.options[option_index].hasOwnProperty('correct')) {
70
- delete this_element.options[option_index].correct;
68
+ value: function editOptionCorrect(optionIndex, e) {
69
+ var thisElement = this.state.element;
70
+ if (thisElement.options[optionIndex].hasOwnProperty('correct')) {
71
+ delete thisElement.options[optionIndex].correct;
71
72
  } else {
72
- this_element.options[option_index].correct = true;
73
+ thisElement.options[optionIndex].correct = true;
73
74
  }
74
75
  this.setState({
75
- element: this_element
76
+ element: thisElement
76
77
  });
77
- this.props.updateElement.call(this.props.preview, this_element);
78
+ this.props.updateElement.call(this.props.preview, thisElement);
78
79
  }
79
80
  }, {
80
81
  key: "updateOption",
81
82
  value: function updateOption() {
82
- var this_element = this.state.element;
83
+ var thisElement = this.state.element;
83
84
  // to prevent ajax calls with no change
84
85
  if (this.state.dirty) {
85
- this.props.updateElement.call(this.props.preview, this_element);
86
+ this.props.updateElement.call(this.props.preview, thisElement);
86
87
  this.setState({
87
88
  dirty: false
88
89
  });
@@ -91,20 +92,20 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
91
92
  }, {
92
93
  key: "addOption",
93
94
  value: function addOption(index) {
94
- var this_element = this.state.element;
95
- this_element.options.splice(index + 1, 0, {
95
+ var thisElement = this.state.element;
96
+ thisElement.options.splice(index + 1, 0, {
96
97
  value: '',
97
98
  text: '',
98
99
  key: _UUID["default"].uuid()
99
100
  });
100
- this.props.updateElement.call(this.props.preview, this_element);
101
+ this.props.updateElement.call(this.props.preview, thisElement);
101
102
  }
102
103
  }, {
103
104
  key: "removeOption",
104
105
  value: function removeOption(index) {
105
- var this_element = this.state.element;
106
- this_element.options.splice(index, 1);
107
- this.props.updateElement.call(this.props.preview, this_element);
106
+ var thisElement = this.state.element;
107
+ thisElement.options.splice(index, 1);
108
+ this.props.updateElement.call(this.props.preview, thisElement);
108
109
  }
109
110
  }, {
110
111
  key: "render",
@@ -115,33 +116,28 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
115
116
  }
116
117
  return /*#__PURE__*/_react["default"].createElement("div", {
117
118
  className: "dynamic-option-list"
118
- }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("div", {
119
- className: "row"
120
- }, /*#__PURE__*/_react["default"].createElement("div", {
121
- className: "col-sm-6"
119
+ }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
120
+ sm: 6
122
121
  }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
123
122
  id: "options"
124
- }))), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement("div", {
125
- className: "col-sm-2"
123
+ }))), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
124
+ sm: 2
126
125
  }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
127
126
  id: "value"
128
- }))), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
129
- className: "col-sm-4"
127
+ }))), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
128
+ sm: 4
130
129
  }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
131
130
  id: "correct"
132
131
  }))))), this.props.element.options.map(function (option, index) {
133
- var this_key = "edit_".concat(option.key);
132
+ var thisKey = "edit_".concat(option.key);
134
133
  var val = option.value !== _this2._setValue(option.text) ? option.value : '';
135
134
  return /*#__PURE__*/_react["default"].createElement("li", {
136
135
  className: "clearfix",
137
- key: this_key
138
- }, /*#__PURE__*/_react["default"].createElement("div", {
139
- className: "row"
140
- }, /*#__PURE__*/_react["default"].createElement("div", {
141
- className: "col-sm-6"
142
- }, /*#__PURE__*/_react["default"].createElement("input", {
136
+ key: thisKey
137
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
138
+ sm: 6
139
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
143
140
  tabIndex: index + 1,
144
- className: "form-control",
145
141
  style: {
146
142
  width: '100%'
147
143
  },
@@ -151,32 +147,30 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
151
147
  value: option.text,
152
148
  onBlur: _this2.updateOption.bind(_this2),
153
149
  onChange: _this2.editOption.bind(_this2, index)
154
- })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement("div", {
155
- className: "col-sm-2"
156
- }, /*#__PURE__*/_react["default"].createElement("input", {
157
- className: "form-control",
150
+ })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
151
+ sm: 2
152
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
158
153
  type: "text",
159
154
  name: "value_".concat(index),
160
155
  value: val,
161
156
  onChange: _this2.editValue.bind(_this2, index)
162
- })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
163
- className: "col-sm-1"
164
- }, /*#__PURE__*/_react["default"].createElement("input", {
165
- className: "form-control",
157
+ })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
158
+ sm: 1
159
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
166
160
  type: "checkbox",
167
161
  value: "1",
168
162
  onChange: _this2.editOptionCorrect.bind(_this2, index),
169
163
  checked: option.hasOwnProperty('correct')
170
- })), /*#__PURE__*/_react["default"].createElement("div", {
171
- className: "col-sm-3"
164
+ })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
165
+ sm: 3
172
166
  }, /*#__PURE__*/_react["default"].createElement("div", {
173
167
  className: "dynamic-options-actions-buttons"
174
- }, /*#__PURE__*/_react["default"].createElement("button", {
175
- onClick: _this2.addOption.bind(_this2, index),
176
- className: "btn btn-success"
177
- }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement("button", {
178
- onClick: _this2.removeOption.bind(_this2, index),
179
- className: "btn btn-danger"
168
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
169
+ variant: "success",
170
+ onClick: _this2.addOption.bind(_this2, index)
171
+ }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
172
+ variant: "danger",
173
+ onClick: _this2.removeOption.bind(_this2, index)
180
174
  }, /*#__PURE__*/_react["default"].createElement(_fa.FaMinusCircle, null))))));
181
175
  })));
182
176
  }
package/lib/fieldset/FieldSet.js CHANGED
@@ -14,7 +14,8 @@ var _componentHeader = _interopRequireDefault(require("../survey-elements/compon
14
14
  var _componentLabel = _interopRequireDefault(require("../survey-elements/component-label"));
15
15
  var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
16
16
  var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
17
- var _excluded = ["data", "class_name"];
17
+ var _reactBootstrap = require("react-bootstrap");
18
+ var _excluded = ["data", "className"];
18
19
  /* eslint-disable camelcase */
19
20
  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; }
20
21
  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; }
@@ -30,7 +31,7 @@ function FieldSetBase(props) {
30
31
  setChildItems = _React$useState4[1];
31
32
  _react["default"].useEffect(function () {
32
33
  var data = props.data,
33
- class_name = props.class_name,
34
+ className = props.className,
34
35
  rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
35
36
  setChildData(data);
36
37
  var count = 1;
@@ -56,7 +57,7 @@ function FieldSetBase(props) {
56
57
  };
57
58
  var createChild = function createChild(count, data) {
58
59
  var colCount = count;
59
- var className = data.class_name || "col-md-12";
60
+ var className = data.className || "col-md-12";
60
61
  if (!data.childItems) {
61
62
  // eslint-disable-next-line no-param-reassign
62
63
  data.childItems = Array.from({
@@ -86,12 +87,10 @@ function FieldSetBase(props) {
86
87
  className: baseClasses
87
88
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({}, props, {
88
89
  isFieldSet: true
89
- })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
90
- className: "row"
91
- }, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
92
- return /*#__PURE__*/_react["default"].createElement("div", {
90
+ })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
91
+ return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
93
92
  key: "".concat(i, "_").concat(x || "_"),
94
- className: "col-md-12"
93
+ md: 12
95
94
  }, controls ? controls[i] : /*#__PURE__*/_react["default"].createElement(_dustbin["default"], {
96
95
  style: {
97
96
  width: "100%"
package/lib/form.js CHANGED
@@ -23,6 +23,7 @@ var _multiColumn = require("./multi-column");
23
23
  var _fieldset = require("./fieldset");
24
24
  var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
25
25
  var _registry = _interopRequireDefault(require("./stores/registry"));
26
+ var _reactBootstrap = require("react-bootstrap");
26
27
  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); }; }
27
28
  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; } } /**
28
29
  * <Form />
@@ -44,27 +45,27 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
44
45
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputs", {});
45
46
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "answerData", void 0);
46
47
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderSubmit", function () {
47
- var name = _this.props.action_name || _this.props.actionName;
48
+ var name = _this.props.actionName || _this.props.actionName;
48
49
  var actionName = name || 'Submit';
49
50
  var _this$props$submitBut = _this.props.submitButton,
50
51
  submitButton = _this$props$submitBut === void 0 ? false : _this$props$submitBut;
51
- return submitButton || /*#__PURE__*/_react["default"].createElement("input", {
52
- type: "submit",
53
- className: "btn btn-big",
54
- value: actionName
55
- });
52
+ return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
53
+ variant: "primary",
54
+ type: "submit"
55
+ }, actionName);
56
56
  });
57
57
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderBack", function () {
58
- var name = _this.props.back_name || _this.props.backName;
58
+ var name = _this.props.backName || _this.props.backName;
59
59
  var backName = name || 'Cancel';
60
60
  var _this$props$backButto = _this.props.backButton,
61
61
  backButton = _this$props$backButto === void 0 ? false : _this$props$backButto;
62
- return backButton || /*#__PURE__*/_react["default"].createElement("a", {
63
- href: _this.props.back_action,
64
- className: "btn btn-default btn-cancel btn-big"
62
+ return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
63
+ variant: "secondary",
64
+ href: _this.props.backAction,
65
+ className: "btn-cancel me-2"
65
66
  }, backName);
66
67
  });
67
- _this.answerData = _this._convert(props.answer_data);
68
+ _this.answerData = _this._convert(props.answerData);
68
69
  _this.emitter = new _fbemitter.EventEmitter();
69
70
  _this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
70
71
 
@@ -95,7 +96,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
95
96
  }, {
96
97
  key: "_getDefaultValue",
97
98
  value: function _getDefaultValue(item) {
98
- return this.answerData[item.field_name];
99
+ return this.answerData[item.fieldName];
99
100
  }
100
101
  }, {
101
102
  key: "_optionsDefaultValue",
@@ -143,7 +144,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
143
144
  value: function _isIncorrect(item) {
144
145
  var incorrect = false;
145
146
  if (item.canHaveAnswer) {
146
- var ref = this.inputs[item.field_name];
147
+ var ref = this.inputs[item.fieldName];
147
148
  if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
148
149
  item.options.forEach(function (option) {
149
150
  var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
@@ -169,7 +170,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
169
170
  value: function _isInvalid(item) {
170
171
  var invalid = false;
171
172
  if (item.required === true) {
172
- var ref = this.inputs[item.field_name];
173
+ var ref = this.inputs[item.fieldName];
173
174
  if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
174
175
  var checked_options = 0;
175
176
  item.options.forEach(function (option) {
@@ -200,12 +201,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
200
201
  value: function _collect(item) {
201
202
  var itemData = {
202
203
  id: item.id,
203
- name: item.field_name,
204
- custom_name: item.custom_name || item.field_name,
205
- help: item.help
204
+ name: item.fieldName,
205
+ customName: item.customName || item.fieldName,
206
+ help: item.help,
207
+ label: item.label !== null && item.label !== undefined && item.label !== '' ? item.label.trim() : ''
206
208
  };
207
209
  if (!itemData.name) return null;
208
- var ref = this.inputs[item.field_name];
210
+ var ref = this.inputs[item.fieldName];
209
211
  if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
210
212
  var checked_options = [];
211
213
  item.options.forEach(function (option) {
@@ -244,7 +246,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
244
246
  }, {
245
247
  key: "_getSignatureImg",
246
248
  value: function _getSignatureImg(item) {
247
- var ref = this.inputs[item.field_name];
249
+ var ref = this.inputs[item.fieldName];
248
250
  var $canvas_sig = ref.canvas.current;
249
251
  if ($canvas_sig) {
250
252
  var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
@@ -262,7 +264,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
262
264
  value: function handleSubmit(e) {
263
265
  e.preventDefault();
264
266
  var errors = [];
265
- if (!this.props.skip_validations) {
267
+ if (!this.props.skipValidations) {
266
268
  errors = this.validateForm();
267
269
  // Publish errors, if any.
268
270
  this.emitter.emit('surveyValidation', errors);
@@ -307,7 +309,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
307
309
  var errors = [];
308
310
  var data_items = this.props.data;
309
311
  var intl = this.props.intl;
310
- if (this.props.display_short) {
312
+ if (this.props.displayShort) {
311
313
  data_items = this.props.data.filter(function (i) {
312
314
  return i.alternateForm === true;
313
315
  });
@@ -322,7 +324,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
322
324
  }), "!"));
323
325
  }
324
326
  if (item.element === 'EmailInput') {
325
- var ref = _this4.inputs[item.field_name];
327
+ var ref = _this4.inputs[item.fieldName];
326
328
  var emailValue = _this4._getItemValue(item, ref).value;
327
329
  if (emailValue) {
328
330
  var validateEmail = function validateEmail(email) {
@@ -339,7 +341,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
339
341
  }
340
342
  }
341
343
  if (item.element === 'PhoneNumber') {
342
- var _ref = _this4.inputs[item.field_name];
344
+ var _ref = _this4.inputs[item.fieldName];
343
345
  var phoneValue = _this4._getItemValue(item, _ref).value;
344
346
  if (phoneValue) {
345
347
  var validatePhone = function validatePhone(phone) {
@@ -382,13 +384,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
382
384
  return /*#__PURE__*/_react["default"].createElement(Input, {
383
385
  handleChange: this.handleChange,
384
386
  ref: function ref(c) {
385
- return _this5.inputs[item.field_name] = c;
387
+ return _this5.inputs[item.fieldName] = c;
386
388
  },
387
389
  mutable: true,
388
390
  key: "form_".concat(item.id),
389
391
  data: item,
390
- read_only: this.props.read_only,
391
- hide_required_alert: this.props.hide_required_alert,
392
+ readOnly: this.props.readOnly,
393
+ hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
392
394
  defaultValue: this._getDefaultValue(item)
393
395
  });
394
396
  }
@@ -404,7 +406,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
404
406
  key: "form_".concat(item.id),
405
407
  data: item,
406
408
  controls: controls,
407
- hide_required_alert: this.props.hide_required_alert
409
+ hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert
408
410
  });
409
411
  }
410
412
  }, {
@@ -415,7 +417,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
415
417
  mutable: true,
416
418
  key: "form_".concat(item.id),
417
419
  data: item,
418
- hide_required_alert: this.props.hide_required_alert
420
+ hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert
419
421
  });
420
422
  }
421
423
  }, {
@@ -435,13 +437,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
435
437
  handleChange: this.handleChange,
436
438
  defaultValue: this._getDefaultValue(item),
437
439
  ref: function ref(c) {
438
- return _this7.inputs[item.field_name] = c;
440
+ return _this7.inputs[item.fieldName] = c;
439
441
  }
440
442
  };
441
443
  return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({
442
444
  mutable: true,
443
- read_only: this.props.read_only,
444
- hide_required_alert: this.props.hide_required_alert,
445
+ readOnly: this.props.readOnly,
446
+ hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
445
447
  key: "form_".concat(item.id),
446
448
  data: item
447
449
  }, inputProps));
@@ -451,14 +453,14 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
451
453
  value: function render() {
452
454
  var _this8 = this;
453
455
  var data_items = this.props.data;
454
- if (this.props.display_short) {
456
+ if (this.props.displayShort) {
455
457
  data_items = this.props.data.filter(function (i) {
456
458
  return i.alternateForm === true;
457
459
  });
458
460
  }
459
461
  data_items.forEach(function (item) {
460
462
  if (item && item.readOnly && item.variableKey && _this8.props.variables[item.variableKey]) {
461
- _this8.answerData[item.field_name] = _this8.props.variables[item.variableKey];
463
+ _this8.answerData[item.fieldName] = _this8.props.variables[item.variableKey];
462
464
  }
463
465
  });
464
466
  var items = data_items.filter(function (x) {
@@ -492,9 +494,9 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
492
494
  case 'Signature':
493
495
  return /*#__PURE__*/_react["default"].createElement(Signature, {
494
496
  ref: function ref(c) {
495
- return _this8.inputs[item.field_name] = c;
497
+ return _this8.inputs[item.fieldName] = c;
496
498
  },
497
- read_only: _this8.props.read_only || item.readOnly,
499
+ readOnly: _this8.props.readOnly || item.readOnly,
498
500
  mutable: true,
499
501
  key: "form_".concat(item.id),
500
502
  data: item,
@@ -503,58 +505,58 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
503
505
  case 'Checkboxes':
504
506
  return /*#__PURE__*/_react["default"].createElement(Checkboxes, {
505
507
  ref: function ref(c) {
506
- return _this8.inputs[item.field_name] = c;
508
+ return _this8.inputs[item.fieldName] = c;
507
509
  },
508
- read_only: _this8.props.read_only,
510
+ readOnly: _this8.props.readOnly,
509
511
  handleChange: _this8.handleChange,
510
512
  mutable: true,
511
513
  key: "form_".concat(item.id),
512
514
  data: item,
513
515
  defaultValue: _this8._optionsDefaultValue(item),
514
- hide_required_alert: _this8.props.hide_required_alert
516
+ hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
515
517
  });
516
518
  case 'Image':
517
519
  return /*#__PURE__*/_react["default"].createElement(Image, {
518
520
  ref: function ref(c) {
519
- return _this8.inputs[item.field_name] = c;
521
+ return _this8.inputs[item.fieldName] = c;
520
522
  },
521
523
  handleChange: _this8.handleChange,
522
524
  mutable: true,
523
525
  key: "form_".concat(item.id),
524
526
  data: item,
525
527
  defaultValue: _this8._getDefaultValue(item),
526
- hide_required_alert: _this8.props.hide_required_alert
528
+ hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
527
529
  });
528
530
  case 'Download':
529
531
  return /*#__PURE__*/_react["default"].createElement(Download, {
530
- download_path: _this8.props.download_path,
532
+ downloadPath: _this8.props.downloadPath,
531
533
  mutable: true,
532
534
  key: "form_".concat(item.id),
533
535
  data: item,
534
- hide_required_alert: _this8.props.hide_required_alert
536
+ hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
535
537
  });
536
538
  case 'Camera':
537
539
  return /*#__PURE__*/_react["default"].createElement(Camera, {
538
540
  ref: function ref(c) {
539
- return _this8.inputs[item.field_name] = c;
541
+ return _this8.inputs[item.fieldName] = c;
540
542
  },
541
- read_only: _this8.props.read_only || item.readOnly,
543
+ readOnly: _this8.props.readOnly || item.readOnly,
542
544
  mutable: true,
543
545
  key: "form_".concat(item.id),
544
546
  data: item,
545
547
  defaultValue: _this8._getDefaultValue(item),
546
- hide_required_alert: _this8.props.hide_required_alert
548
+ hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
547
549
  });
548
550
  case 'FileUpload':
549
551
  return /*#__PURE__*/_react["default"].createElement(FileUpload, {
550
552
  ref: function ref(c) {
551
- return _this8.inputs[item.field_name] = c;
553
+ return _this8.inputs[item.fieldName] = c;
552
554
  },
553
- read_only: _this8.props.read_only || item.readOnly,
555
+ readOnly: _this8.props.readOnly || item.readOnly,
554
556
  mutable: true,
555
557
  key: "form_".concat(item.id),
556
558
  data: item,
557
- hide_required_alert: _this8.props.hide_required_alert,
559
+ hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert,
558
560
  defaultValue: _this8._getDefaultValue(item)
559
561
  });
560
562
  default:
@@ -573,11 +575,11 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
573
575
  ref: function ref(c) {
574
576
  return _this8.form = c;
575
577
  },
576
- action: this.props.form_action,
578
+ action: this.props.formAction,
577
579
  onBlur: this.handleBlur,
578
580
  onChange: this.handleChange,
579
581
  onSubmit: this.handleSubmit,
580
- method: this.props.form_method
582
+ method: this.props.formMethod
581
583
  }, this.props.authenticity_token && /*#__PURE__*/_react["default"].createElement("div", {
582
584
  style: formTokenStyle
583
585
  }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -594,7 +596,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
594
596
  value: this.props.task_id
595
597
  })), items, /*#__PURE__*/_react["default"].createElement("div", {
596
598
  className: "btn-toolbar"
597
- }, !this.props.hide_actions && this.handleRenderSubmit(), !this.props.hide_actions && this.props.back_action && this.handleRenderBack()))));
599
+ }, !this.props.hideActions && this.props.backAction && this.handleRenderBack(), !this.props.hideActions && this.handleRenderSubmit()))));
598
600
  }
599
601
  }]);
600
602
  return ReactSurvey;
package/lib/index.js CHANGED
@@ -36,6 +36,7 @@ var _form = _interopRequireDefault(require("./form"));
36
36
  var _store = _interopRequireDefault(require("./stores/store"));
37
37
  var _registry = _interopRequireDefault(require("./stores/registry"));
38
38
  var _languageProvider = _interopRequireDefault(require("./language-provider"));
39
+ var _reactBootstrap = require("react-bootstrap");
39
40
  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); }; }
40
41
  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; } } /**
41
42
  * <ReactSurveyBuilder />
@@ -85,7 +86,7 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
85
86
  key: "render",
86
87
  value: function render() {
87
88
  var toolbarProps = {
88
- showDescription: this.props.show_description
89
+ showDescription: this.props.showDescription
89
90
  };
90
91
  var language = this.props.locale ? this.props.locale : 'en';
91
92
  var currentAppLocale = _languageProvider["default"][language];
@@ -97,9 +98,10 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
97
98
  }, /*#__PURE__*/_react["default"].createElement(_reactIntl.IntlProvider, {
98
99
  locale: currentAppLocale.locale,
99
100
  messages: currentAppLocale.messages
100
- }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
101
- className: "react-survey-builder clearfix"
102
- }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
101
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, {
102
+ fluid: true,
103
+ className: "react-survey-builder"
104
+ }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
103
105
  files: this.props.files,
104
106
  manualEditModeOff: this.manualEditModeOff.bind(this),
105
107
  showCorrectColumn: this.props.showCorrectColumn,
package/lib/language-provider/IntlMessages.js CHANGED
@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports["default"] = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntl = require("react-intl");
10
- var InjectMassage = function InjectMassage(props) {
10
+ var InjectMessage = function InjectMessage(props) {
11
11
  return /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, props);
12
12
  };
13
- var _default = exports["default"] = (0, _reactIntl.injectIntl)(InjectMassage, {
13
+ var _default = exports["default"] = (0, _reactIntl.injectIntl)(InjectMessage, {
14
14
  withRef: false
15
15
  });
package/lib/language-provider/locales/en-us.json CHANGED
@@ -18,20 +18,20 @@
18
18
  "variable-key": "Variable Key",
19
19
  "variable-key-desc": "This will give the element a key that can be used to replace the content with a runtime value",
20
20
  "print-options": "Print options",
21
- "page-break-before-elements": "Page Break Before Element",
21
+ "page-break-before-element": "Page Break Before Element",
22
22
  "alternate-signature-page": "Alternate/Signature Page",
23
23
  "display-on-alternate-signature-page": "Display on alternate/signature Page",
24
24
  "step": "Step",
25
25
  "min": "Min",
26
26
  "max": "Max",
27
- "min_label": "Minimum Value Label",
28
- "max_label": "Maximum Value Label",
27
+ "min-label": "Minimum Value Label",
28
+ "max-label": "Maximum Value Label",
29
29
  "default-selected": "Default Selected",
30
30
  "text-style": "Text Style",
31
31
  "bold": "Bold",
32
32
  "italic": "Italic",
33
33
  "description": "Description",
34
- "help": "Help",
34
+ "help-label": "Help instructions/details that will show up beneath the input field",
35
35
  "correct-answer": "Correct Answer",
36
36
  "populate-options-from-api": "Populate Options from API",
37
37
  "populate": "Populate",
@@ -81,12 +81,12 @@
81
81
  "range": "Range",
82
82
  "camera": "Camera",
83
83
  "file-upload": "File Upload",
84
- "place-holder-text": "Placeholder text...",
85
- "place-holder-label": "Placeholder label",
84
+ "place-holder-text": "Text...",
85
+ "place-holder-label": "Label",
86
86
  "place-holder-text-label": "Placeholder",
87
- "place-holder-website-link": "Placeholder website Link...",
88
- "place-holder-file-name": "Placeholder file name...",
89
- "place-holder-email": "E-Mail",
87
+ "place-holder-website-link": "Website Link...",
88
+ "place-holder-file-name": "File name...",
89
+ "place-holder-email": "Email Address",
90
90
  "place-holder-phone-number": "Phone Number",
91
91
  "easy": "Easy",
92
92
  "difficult": "Difficult",