react-survey-builder 1.0.91 → 1.0.93

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 (14) hide show
  1. package/README.md +1 -0
  2. package/dist/bundle.js +10 -10
  3. package/lib/fieldset/Fieldset.js +1 -0
  4. package/lib/form-fields.js +25 -7
  5. package/lib/form-steps.js +26 -8
  6. package/lib/form.js +26 -8
  7. package/lib/index.js +3 -1
  8. package/lib/multi-column/MultiColumnRow.js +1 -0
  9. package/lib/multi-column/dustbin.js +1 -0
  10. package/lib/preview.js +2 -0
  11. package/lib/step/Step.js +1 -0
  12. package/lib/survey-elements/index.js +62 -31
  13. package/package.json +1 -1
  14. package/types/index.d.ts +2 -0
package/lib/survey-elements/index.js CHANGED
@@ -264,7 +264,8 @@ export var TextInput = function TextInput(_ref) {
264
264
  name: name,
265
265
  id: name + '-2-' + ID.uuid()
266
266
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
267
- muted: true
267
+ muted: true,
268
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
268
269
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
269
270
  name: name
270
271
  })));
@@ -301,7 +302,8 @@ export var TextInput = function TextInput(_ref) {
301
302
  }), /*#__PURE__*/React.createElement(Controller, _extends({
302
303
  control: methods.control
303
304
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
304
- muted: true
305
+ muted: true,
306
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
305
307
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
306
308
  name: name
307
309
  })));
@@ -425,7 +427,8 @@ export var EmailInput = function EmailInput(_ref3) {
425
427
  name: name,
426
428
  id: name + '-2-' + ID.uuid()
427
429
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
428
- muted: true
430
+ muted: true,
431
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
429
432
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
430
433
  name: name
431
434
  })));
@@ -462,7 +465,8 @@ export var EmailInput = function EmailInput(_ref3) {
462
465
  }), /*#__PURE__*/React.createElement(Controller, _extends({
463
466
  control: methods.control
464
467
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
465
- muted: true
468
+ muted: true,
469
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
466
470
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
467
471
  name: name
468
472
  })));
@@ -648,7 +652,8 @@ export var PhoneNumber = function PhoneNumber(_ref5) {
648
652
  name: name,
649
653
  id: name + '-' + ID.uuid()
650
654
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
651
- muted: true
655
+ muted: true,
656
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
652
657
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
653
658
  name: name
654
659
  })));
@@ -685,7 +690,8 @@ export var PhoneNumber = function PhoneNumber(_ref5) {
685
690
  }), /*#__PURE__*/React.createElement(Controller, _extends({
686
691
  control: methods.control
687
692
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
688
- muted: true
693
+ muted: true,
694
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
689
695
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
690
696
  name: name
691
697
  })));
@@ -935,7 +941,8 @@ export var DatePicker = function DatePicker(_ref8) {
935
941
  name: name,
936
942
  id: name + '-' + ID.uuid()
937
943
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
938
- muted: true
944
+ muted: true,
945
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
939
946
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
940
947
  name: name
941
948
  })));
@@ -972,7 +979,8 @@ export var DatePicker = function DatePicker(_ref8) {
972
979
  }), /*#__PURE__*/React.createElement(Controller, _extends({
973
980
  control: methods.control
974
981
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
975
- muted: true
982
+ muted: true,
983
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
976
984
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
977
985
  name: name
978
986
  })));
@@ -1083,7 +1091,8 @@ export var NumberInput = function NumberInput(_ref11) {
1083
1091
  name: name,
1084
1092
  id: name + '-2-' + ID.uuid()
1085
1093
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1086
- muted: true
1094
+ muted: true,
1095
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1087
1096
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1088
1097
  name: name
1089
1098
  })));
@@ -1120,7 +1129,8 @@ export var NumberInput = function NumberInput(_ref11) {
1120
1129
  }), /*#__PURE__*/React.createElement(Controller, _extends({
1121
1130
  control: methods.control
1122
1131
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1123
- muted: true
1132
+ muted: true,
1133
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1124
1134
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1125
1135
  name: name
1126
1136
  })));
@@ -1234,7 +1244,8 @@ export var TextArea = function TextArea(_ref13) {
1234
1244
  id: name + '-2-' + ID.uuid(),
1235
1245
  as: "textarea"
1236
1246
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1237
- muted: true
1247
+ muted: true,
1248
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1238
1249
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1239
1250
  name: name
1240
1251
  })));
@@ -1271,7 +1282,8 @@ export var TextArea = function TextArea(_ref13) {
1271
1282
  }), /*#__PURE__*/React.createElement(Controller, _extends({
1272
1283
  control: methods.control
1273
1284
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1274
- muted: true
1285
+ muted: true,
1286
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1275
1287
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1276
1288
  name: name
1277
1289
  })));
@@ -1406,7 +1418,8 @@ export var Dropdown = function Dropdown(_ref15) {
1406
1418
  key: thisKey
1407
1419
  }, option.text);
1408
1420
  }))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1409
- muted: true
1421
+ muted: true,
1422
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1410
1423
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1411
1424
  name: name
1412
1425
  })));
@@ -1446,7 +1459,8 @@ export var Dropdown = function Dropdown(_ref15) {
1446
1459
  }), /*#__PURE__*/React.createElement(Controller, _extends({
1447
1460
  control: methods.control
1448
1461
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1449
- muted: true
1462
+ muted: true,
1463
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1450
1464
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1451
1465
  name: name
1452
1466
  })));
@@ -1543,7 +1557,8 @@ export var Signature = /*#__PURE__*/function (_React$Component) {
1543
1557
  _this$props$value9,
1544
1558
  _this2 = this,
1545
1559
  _this$props$value$nam,
1546
- _this$props$value10;
1560
+ _this$props$value10,
1561
+ _this$props$item;
1547
1562
  var canClear = !!this.state.value;
1548
1563
  var props = {};
1549
1564
  props.name = this.props.name;
@@ -1627,7 +1642,8 @@ export var Signature = /*#__PURE__*/function (_React$Component) {
1627
1642
  })), /*#__PURE__*/React.createElement(Col, {
1628
1643
  sm: 6
1629
1644
  }, "Today's Date: ", moment().format('MM/DD/YYYY'))))), this.props.item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1630
- muted: true
1645
+ muted: true,
1646
+ className: (_this$props$item = this.props.item) === null || _this$props$item === void 0 ? void 0 : _this$props$item.helpClassName
1631
1647
  }, this.props.item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1632
1648
  name: this.props.name
1633
1649
  }), this.props.methods ? /*#__PURE__*/React.createElement("input", _extends({}, this.props.methods.register(this.props.name), props, {
@@ -1782,7 +1798,8 @@ export var Tags = function Tags(_ref18) {
1782
1798
  name: name,
1783
1799
  id: name + '-' + ID.uuid()
1784
1800
  }, inputProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1785
- muted: true
1801
+ muted: true,
1802
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1786
1803
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1787
1804
  name: name
1788
1805
  })));
@@ -1823,7 +1840,8 @@ export var Tags = function Tags(_ref18) {
1823
1840
  }), /*#__PURE__*/React.createElement(Controller, _extends({
1824
1841
  control: methods.control
1825
1842
  }, controllerProps))), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
1826
- muted: true
1843
+ muted: true,
1844
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
1827
1845
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
1828
1846
  name: name
1829
1847
  })));
@@ -1857,7 +1875,8 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
1857
1875
  _self$props,
1858
1876
  _self$props2,
1859
1877
  _self$props3,
1860
- _this4 = this;
1878
+ _this4 = this,
1879
+ _this$props$item2;
1861
1880
  var self = this;
1862
1881
  var name = (_ref20 = (_self$props$name = self === null || self === void 0 || (_self$props = self.props) === null || _self$props === void 0 ? void 0 : _self$props.name) !== null && _self$props$name !== void 0 ? _self$props$name : self === null || self === void 0 || (_self$props2 = self.props) === null || _self$props2 === void 0 || (_self$props2 = _self$props2.item) === null || _self$props2 === void 0 ? void 0 : _self$props2.customName) !== null && _ref20 !== void 0 ? _ref20 : self === null || self === void 0 || (_self$props3 = self.props) === null || _self$props3 === void 0 || (_self$props3 = _self$props3.item) === null || _self$props3 === void 0 ? void 0 : _self$props3.fieldName;
1863
1882
  var baseClasses = 'SortableItem rfb-item';
@@ -1886,7 +1905,8 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
1886
1905
  }, /*#__PURE__*/React.createElement(ComponentLabel, _extends({}, this.props, {
1887
1906
  htmlFor: name
1888
1907
  })), this.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
1889
- muted: true
1908
+ muted: true,
1909
+ className: (_this$props$item2 = this.props.item) === null || _this$props$item2 === void 0 ? void 0 : _this$props$item2.helpClassName
1890
1910
  }, this.props.item.help)) : null, this.props.item.options.map(function (option) {
1891
1911
  var _this4$props$checkbox;
1892
1912
  var props = {};
@@ -1946,7 +1966,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
1946
1966
  _this$props2,
1947
1967
  _this$props3,
1948
1968
  _this6 = this,
1949
- _this$props$checkboxB;
1969
+ _this$props$checkboxB,
1970
+ _this$props$item3;
1950
1971
  var baseClasses = 'SortableItem rfb-item';
1951
1972
  if (this.props.item.pageBreakBefore) {
1952
1973
  baseClasses += ' alwaysbreak';
@@ -2015,7 +2036,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
2015
2036
  __html: this.props.item.boxLabel
2016
2037
  }
2017
2038
  })))), this.props.item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2018
- muted: true
2039
+ muted: true,
2040
+ className: (_this$props$item3 = this.props.item) === null || _this$props$item3 === void 0 ? void 0 : _this$props$item3.helpClassName
2019
2041
  }, this.props.item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2020
2042
  name: props.name
2021
2043
  })));
@@ -2039,7 +2061,8 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
2039
2061
  _self$props4,
2040
2062
  _self$props5,
2041
2063
  _self$props6,
2042
- _this8 = this;
2064
+ _this8 = this,
2065
+ _self$props$item;
2043
2066
  var self = this;
2044
2067
  var name = (_ref22 = (_self$props$name2 = self === null || self === void 0 || (_self$props4 = self.props) === null || _self$props4 === void 0 ? void 0 : _self$props4.name) !== null && _self$props$name2 !== void 0 ? _self$props$name2 : self === null || self === void 0 || (_self$props5 = self.props) === null || _self$props5 === void 0 || (_self$props5 = _self$props5.item) === null || _self$props5 === void 0 ? void 0 : _self$props5.customName) !== null && _ref22 !== void 0 ? _ref22 : self === null || self === void 0 || (_self$props6 = self.props) === null || _self$props6 === void 0 || (_self$props6 = _self$props6.item) === null || _self$props6 === void 0 ? void 0 : _self$props6.fieldName;
2045
2068
  var baseClasses = 'SortableItem rfb-item';
@@ -2068,7 +2091,8 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
2068
2091
  }, /*#__PURE__*/React.createElement(ComponentHeader, self.props), /*#__PURE__*/React.createElement(Form.Group, {
2069
2092
  className: "form-group mb-3"
2070
2093
  }, /*#__PURE__*/React.createElement(ComponentLabel, self.props), self.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
2071
- muted: true
2094
+ muted: true,
2095
+ className: (_self$props$item = self.props.item) === null || _self$props$item === void 0 ? void 0 : _self$props$item.helpClassName
2072
2096
  }, self.props.item.help)) : null, self.props.item.options.map(function (option) {
2073
2097
  var _self$props$checkboxB, _self$props7, _self$props8, _self$props10, _self$props11;
2074
2098
  // console.log('option', option);
@@ -2231,7 +2255,8 @@ export var Rating = function Rating(_ref23) {
2231
2255
  editing: false,
2232
2256
  id: name + '-' + ID.uuid()
2233
2257
  }, inputProps)), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2234
- muted: true
2258
+ muted: true,
2259
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
2235
2260
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2236
2261
  name: name
2237
2262
  })));
@@ -2262,7 +2287,8 @@ export var Rating = function Rating(_ref23) {
2262
2287
  }), /*#__PURE__*/React.createElement(Controller, _extends({
2263
2288
  control: methods.control
2264
2289
  }, controllerProps)), item !== null && item !== void 0 && item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2265
- muted: true
2290
+ muted: true,
2291
+ className: item === null || item === void 0 ? void 0 : item.helpClassName
2266
2292
  }, item === null || item === void 0 ? void 0 : item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2267
2293
  name: name
2268
2294
  })));
@@ -2348,7 +2374,7 @@ export var Camera = /*#__PURE__*/function (_React$Component5) {
2348
2374
  }, {
2349
2375
  key: "render",
2350
2376
  value: function render() {
2351
- var _this$props$checkboxB2, _this$props4;
2377
+ var _this$props$checkboxB2, _this$props4, _this$props$item4;
2352
2378
  var imageStyle = {
2353
2379
  objectFit: 'scale-down',
2354
2380
  objectPosition: this.props.item.center ? 'center' : 'left'
@@ -2422,7 +2448,8 @@ export var Camera = /*#__PURE__*/function (_React$Component5) {
2422
2448
  size: "sm",
2423
2449
  onClick: this.clearImage
2424
2450
  }, /*#__PURE__*/React.createElement(FaTimes, null), " Clear Photo"))), this.props.item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2425
- muted: true
2451
+ muted: true,
2452
+ className: (_this$props$item4 = this.props.item) === null || _this$props$item4 === void 0 ? void 0 : _this$props$item4.helpClassName
2426
2453
  }, this.props.item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2427
2454
  name: this.props.name
2428
2455
  })));
@@ -2507,6 +2534,7 @@ export var FileUpload = /*#__PURE__*/function (_React$Component6) {
2507
2534
  return _createClass(FileUpload, [{
2508
2535
  key: "render",
2509
2536
  value: function render() {
2537
+ var _this$props$item5;
2510
2538
  var fileInputStyle = this.state.fileUpload ? {
2511
2539
  display: 'none'
2512
2540
  } : null;
@@ -2571,7 +2599,8 @@ export var FileUpload = /*#__PURE__*/function (_React$Component6) {
2571
2599
  className: "btn-file-upload-clear",
2572
2600
  onClick: this.clearFileUpload
2573
2601
  }, /*#__PURE__*/React.createElement(FaTimes, null), " Clear File"))), this.props.item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2574
- muted: true
2602
+ muted: true,
2603
+ className: (_this$props$item5 = this.props.item) === null || _this$props$item5 === void 0 ? void 0 : _this$props$item5.helpClassName
2575
2604
  }, this.props.item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2576
2605
  name: this.props.name
2577
2606
  })));
@@ -2590,7 +2619,8 @@ export var Range = /*#__PURE__*/function (_React$Component7) {
2590
2619
  return _createClass(Range, [{
2591
2620
  key: "render",
2592
2621
  value: function render() {
2593
- var _this12 = this;
2622
+ var _this12 = this,
2623
+ _this$props$item6;
2594
2624
  var props = {};
2595
2625
  var name = this.props.name;
2596
2626
  props.name = this.props.name;
@@ -2675,7 +2705,8 @@ export var Range = /*#__PURE__*/function (_React$Component7) {
2675
2705
  }, visibleMarks), /*#__PURE__*/React.createElement("datalist", {
2676
2706
  id: props.list
2677
2707
  }, _datalist), this.props.item.help ? /*#__PURE__*/React.createElement(Form.Text, {
2678
- muted: true
2708
+ muted: true,
2709
+ className: (_this$props$item6 = this.props.item) === null || _this$props$item6 === void 0 ? void 0 : _this$props$item6.helpClassName
2679
2710
  }, this.props.item.help) : null, /*#__PURE__*/React.createElement(ComponentErrorMessage, {
2680
2711
  name: name
2681
2712
  })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-survey-builder",
3
- "version": "1.0.91",
3
+ "version": "1.0.93",
4
4
  "description": "A complete survey builder for react.",
5
5
  "main": "lib/index.js",
6
6
  "types": "types/index.d.ts",
package/types/index.d.ts CHANGED
@@ -146,6 +146,7 @@ export interface SurveyBuilderProps {
146
146
  headerClassName?: string;
147
147
  labelClassName?: string;
148
148
  paragraphClassName?: string;
149
+ helpClassName?: string;
149
150
  }
150
151
 
151
152
  export class ReactSurveyBuilder extends React.Component<SurveyBuilderProps> {}
@@ -188,6 +189,7 @@ export interface SurveyGeneratorProps {
188
189
  headerClassName?: string;
189
190
  labelClassName?: string;
190
191
  paragraphClassName?: string;
192
+ helpClassName?: string;
191
193
  formId?: string;
192
194
  methods?: Record<any, any>;
193
195
  print?: boolean;