react-survey-builder 1.0.8 → 1.0.10

package/lib/survey-elements/index.js

@@ -23,14 +23,15 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
 var _reactBootstrapRangeSlider = _interopRequireDefault(require("react-bootstrap-range-slider"));
 var _starRating = _interopRequireDefault(require("./star-rating"));
-var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireDefault(require("./myxss"));
 var _fa = require("react-icons/fa");
 var _reactBootstrap = require("react-bootstrap");
 var _reactImask = require("react-imask");
-var _excluded = ["onChange"]; // eslint-disable-next-line max-classes-per-file
+var _reactBootstrapTypeahead = require("react-bootstrap-typeahead");
+var _excluded = ["onChange"],
+  _excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
 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); }; }
@@ -62,6 +63,71 @@ var CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     }
   }));
 });
+var CustomDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+  var onChange = _ref2.onChange,
+    _ref2$formatMask = _ref2.formatMask,
+    formatMask = _ref2$formatMask === void 0 ? 'MM/DD/YYYY' : _ref2$formatMask,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({}, otherProps, {
+    mask: Date,
+    lazy: false,
+    overwrite: true,
+    pattern: formatMask,
+    format: function format(date) {
+      var day = date.getDate();
+      var month = date.getMonth() + 1;
+      var year = date.getFullYear();
+      if (day < 10) day = "0" + day;
+      if (month < 10) month = "0" + month;
+      return [month, day, year].join('/');
+    },
+    autofix: true
+    // min={new Date(1900, 0, 1)}
+    // max={new Date()}
+    ,
+    blocks: {
+      DD: {
+        mask: IMask.MaskedRange,
+        from: 1,
+        to: 31,
+        maxLength: 2,
+        placeholderChar: 'D'
+      },
+      MM: {
+        mask: IMask.MaskedRange,
+        from: 1,
+        to: 12,
+        maxLength: 2,
+        placeholderChar: 'M'
+      },
+      YYYY: {
+        mask: IMask.MaskedRange,
+        from: 1900,
+        to: new Date().getFullYear() + 5,
+        placeholderChar: 'Y'
+      }
+    },
+    parse: function parse(str) {
+      var monthDayYear = str.split('/');
+      return new Date(monthDayYear[2], monthDayYear[0] - 1, monthDayYear[1]);
+    },
+    unmask: false // true|false|'typed'
+    ,
+    inputRef: ref
+    // inputRef={inputRef}  // access to nested input
+    // DO NOT USE onChange TO HANDLE CHANGES!
+    // USE onAccept INSTEAD
+    ,
+    onAccept:
+    // depending on prop above first argument is
+    // `value` if `unmask=false`,
+    // `unmaskedValue` if `unmask=true`,
+    // `typedValue` if `unmask='typed'`
+    function onAccept(value, mask) {
+      onChange(value);
+    }
+  }));
+});
 var SurveyElements = {};
 var Header = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Header, _React$Component);
@@ -201,37 +267,57 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
   (0, _createClass2["default"])(TextInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac;
+      var _this$props$data$plac,
+        _this2 = this;
       var props = {};
       props.type = 'text';
-      //props.className = 'form-control';
       props.name = this.props.data.fieldName;
-      props.help = this.props.data.help;
       props.placeholder = (_this$props$data$plac = this.props.data.placeholder) !== null && _this$props$data$plac !== void 0 ? _this$props$data$plac : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
-      var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
-        baseClasses += ' alwaysbreak';
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this2.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
       }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
       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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
   return TextInput;
@@ -240,45 +326,66 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
   (0, _inherits2["default"])(EmailInput, _React$Component6);
   var _super6 = _createSuper(EmailInput);
   function EmailInput(props) {
-    var _this2;
+    var _this3;
     (0, _classCallCheck2["default"])(this, EmailInput);
-    _this2 = _super6.call(this, props);
-    _this2.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this2;
+    _this3 = _super6.call(this, props);
+    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this3;
   }
   (0, _createClass2["default"])(EmailInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac2;
+      var _this$props$data$plac2,
+        _this4 = this;
       var props = {};
       props.type = 'text';
-      // props.className = 'form-control';
       props.name = this.props.data.fieldName;
-      props.help = this.props.data.help;
       props.placeholder = (_this$props$data$plac2 = this.props.data.placeholder) !== null && _this$props$data$plac2 !== void 0 ? _this$props$data$plac2 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
-      var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
-        baseClasses += ' alwaysbreak';
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this4.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
       }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
       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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
   return EmailInput;
@@ -287,90 +394,199 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
   (0, _inherits2["default"])(PhoneNumber, _React$Component7);
   var _super7 = _createSuper(PhoneNumber);
   function PhoneNumber(props) {
-    var _this3;
+    var _this5;
     (0, _classCallCheck2["default"])(this, PhoneNumber);
-    _this3 = _super7.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handleChange", function (e) {
-      _this3.setState({
-        value: e
-      });
-    });
-    _this3.inputField = /*#__PURE__*/_react["default"].createRef();
-    var defaultValue = props.defaultValue,
-      data = props.data;
-    _this3.state = {
-      value: defaultValue
-    };
-    return _this3;
+    _this5 = _super7.call(this, props);
+    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this5;
   }
   (0, _createClass2["default"])(PhoneNumber, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac3;
+      var _this$props$data$plac3,
+        _this6 = this;
       var props = {};
-      props.type = 'tel';
-      props.className = 'form-control';
+      props.type = 'text';
       props.name = this.props.data.fieldName;
-      props.help = this.props.data.help;
       props.placeholder = (_this$props$data$plac3 = this.props.data.placeholder) !== null && _this$props$data$plac3 !== void 0 ? _this$props$data$plac3 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this6.props.onChange(e);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
+      if (this.props.readOnly) {
+        props.disabled = 'disabled';
+      }
+      props.autoComplete = "new-password";
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      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(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props, {
+        as: CustomPhoneInput
+      })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props, {
+        as: CustomPhoneInput
+      }))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.data.help) : null));
+    }
+  }]);
+  return PhoneNumber;
+}(_react["default"].Component);
+var DatePicker = /*#__PURE__*/function (_React$Component8) {
+  (0, _inherits2["default"])(DatePicker, _React$Component8);
+  var _super8 = _createSuper(DatePicker);
+  function DatePicker(props) {
+    var _this7;
+    (0, _classCallCheck2["default"])(this, DatePicker);
+    _this7 = _super8.call(this, props);
+    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this7;
+  }
+  (0, _createClass2["default"])(DatePicker, [{
+    key: "render",
+    value: function render() {
+      var _this$props$data$plac4,
+        _this8 = this;
+      var props = {};
+      props.type = 'text';
+      props.name = this.props.data.fieldName;
+      props.placeholder = (_this$props$data$plac4 = this.props.data.placeholder) !== null && _this$props$data$plac4 !== void 0 ? _this$props$data$plac4 : _myxss["default"].process(this.props.data.label);
+      if (this.props.mutable) {
+        props.defaultValue = this.props.defaultValue;
+        props.ref = this.inputField;
+      }
+      props.formatMask = this.props.data.formatMask || 'MM/DD/YYYY';
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this8.props.onChange(e);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
+      props.autoComplete = "new-password";
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
       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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props, {
-        onChange: this.handleChange,
-        as: CustomPhoneInput
+        as: CustomDateInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props, {
+        as: CustomDateInput
+      }))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
-  return PhoneNumber;
+  return DatePicker;
 }(_react["default"].Component);
-var NumberInput = /*#__PURE__*/function (_React$Component8) {
-  (0, _inherits2["default"])(NumberInput, _React$Component8);
-  var _super8 = _createSuper(NumberInput);
+var NumberInput = /*#__PURE__*/function (_React$Component9) {
+  (0, _inherits2["default"])(NumberInput, _React$Component9);
+  var _super9 = _createSuper(NumberInput);
   function NumberInput(props) {
-    var _this4;
+    var _this9;
     (0, _classCallCheck2["default"])(this, NumberInput);
-    _this4 = _super8.call(this, props);
-    _this4.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this4;
+    _this9 = _super9.call(this, props);
+    _this9.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this9;
   }
   (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac4;
+      var _this$props$data$plac5,
+        _this10 = this;
       var props = {};
       props.type = 'number';
       props.name = this.props.data.fieldName;
-      props.help = this.props.data.help;
-      props.placeholder = (_this$props$data$plac4 = this.props.data.placeholder) !== null && _this$props$data$plac4 !== void 0 ? _this$props$data$plac4 : _myxss["default"].process(this.props.data.label);
+      props.placeholder = (_this$props$data$plac5 = this.props.data.placeholder) !== null && _this$props$data$plac5 !== void 0 ? _this$props$data$plac5 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this10.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
+      if (this.props.readOnly) {
+        props.disabled = 'disabled';
+      }
       props.min = this.props.data.minValue;
       props.max = this.props.data.maxValue;
       props.step = this.props.data.step;
-      if (this.props.readOnly) {
-        props.disabled = 'disabled';
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
       }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
@@ -381,42 +597,66 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
   return NumberInput;
 }(_react["default"].Component);
-var TextArea = /*#__PURE__*/function (_React$Component9) {
-  (0, _inherits2["default"])(TextArea, _React$Component9);
-  var _super9 = _createSuper(TextArea);
+var TextArea = /*#__PURE__*/function (_React$Component10) {
+  (0, _inherits2["default"])(TextArea, _React$Component10);
+  var _super10 = _createSuper(TextArea);
   function TextArea(props) {
-    var _this5;
+    var _this11;
     (0, _classCallCheck2["default"])(this, TextArea);
-    _this5 = _super9.call(this, props);
-    _this5.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this5;
+    _this11 = _super10.call(this, props);
+    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this11;
   }
   (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
-      var _this$props$data$plac5;
+      var _this$props$data$plac6,
+        _this12 = this;
       var props = {};
       props.name = this.props.data.fieldName;
-      props.help = this.props.data.help;
-      props.placeholder = (_this$props$data$plac5 = this.props.data.placeholder) !== null && _this$props$data$plac5 !== void 0 ? _this$props$data$plac5 : _myxss["default"].process(this.props.data.label);
-      if (this.props.readOnly) {
-        props.disabled = 'disabled';
-      }
+      props.placeholder = (_this$props$data$plac6 = this.props.data.placeholder) !== null && _this$props$data$plac6 !== void 0 ? _this$props$data$plac6 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this12.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
+      if (this.props.readOnly) {
+        props.disabled = 'disabled';
+      }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -426,43 +666,67 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        as: "textarea",
+        id: props.name
+      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
   return TextArea;
 }(_react["default"].Component);
-var Dropdown = /*#__PURE__*/function (_React$Component10) {
-  (0, _inherits2["default"])(Dropdown, _React$Component10);
-  var _super10 = _createSuper(Dropdown);
+var Dropdown = /*#__PURE__*/function (_React$Component11) {
+  (0, _inherits2["default"])(Dropdown, _React$Component11);
+  var _super11 = _createSuper(Dropdown);
   function Dropdown(props) {
-    var _this6;
+    var _this13;
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this6 = _super10.call(this, props);
-    _this6.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this6;
+    _this13 = _super11.call(this, props);
+    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this13;
   }
   (0, _createClass2["default"])(Dropdown, [{
     key: "render",
     value: function render() {
+      var _this14 = this;
       var props = {};
-      //props.className = 'form-select';
       props.name = this.props.data.fieldName;
-      props.placeholder = this.props.data.placeholder;
-      props.help = this.props.data.help;
+      props.placeholder = this.props.data.placeholder || 'Select One';
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this14.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -472,7 +736,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
         id: props.name
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
@@ -483,45 +747,88 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
           key: thisKey
         }, option.text);
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+        id: props.name
+      }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+        value: ""
+      }, props.placeholder) : null, this.props.data.options.map(function (option) {
+        var thisKey = "preview_".concat(option.key);
+        return /*#__PURE__*/_react["default"].createElement("option", {
+          value: option.value,
+          key: thisKey
+        }, option.text);
+      }))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
-      }, props.help) : null));
+      }, this.props.data.help) : null));
     }
   }]);
   return Dropdown;
 }(_react["default"].Component);
-var Signature = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(Signature, _React$Component11);
-  var _super11 = _createSuper(Signature);
+var Signature = /*#__PURE__*/function (_React$Component12) {
+  (0, _inherits2["default"])(Signature, _React$Component12);
+  var _super12 = _createSuper(Signature);
   function Signature(props) {
-    var _this7;
+    var _this15;
     (0, _classCallCheck2["default"])(this, Signature);
-    _this7 = _super11.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "clear", function () {
-      if (_this7.state.defaultValue) {
-        _this7.setState({
+    _this15 = _super12.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "clear", function () {
+      if (_this15.state.defaultValue) {
+        _this15.setState({
           defaultValue: ''
         });
-      } else if (_this7.canvas.current) {
-        _this7.canvas.current.clear();
+      } else if (_this15.canvas.current) {
+        _this15.canvas.current.clear();
       }
     });
-    _this7.state = {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "_getSignatureImg", function () {
+      var $canvas_sig = _this15.canvas.current;
+      if ($canvas_sig) {
+        var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
+        var isEmpty = $canvas_sig.isEmpty();
+        var $input_sig = _this15.inputField.current;
+        var name = _this15.props.data.fieldName;
+        if (isEmpty) {
+          $input_sig.value = '';
+          if (_this15.props.methods) {
+            _this15.props.methods.setValue(name, '');
+          }
+        } else {
+          $input_sig.value = base64;
+          if (_this15.props.methods) {
+            _this15.props.methods.setValue(name, base64);
+          }
+        }
+      }
+    });
+    _this15.state = {
       defaultValue: props.defaultValue
     };
-    _this7.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this7.canvas = /*#__PURE__*/_react["default"].createRef();
-    return _this7;
+    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this15.canvas = /*#__PURE__*/_react["default"].createRef();
+    return _this15;
   }
   (0, _createClass2["default"])(Signature, [{
     key: "render",
     value: function render() {
+      var _this16 = this;
       var defaultValue = this.state.defaultValue;
       var canClear = !!defaultValue;
       var props = {};
       props.type = 'hidden';
       props.name = this.props.data.fieldName;
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this16.props.onChange(e.target.value);
+        };
+      }
+      if (this.props.value) {
+        props.value = this.props.value;
+      }
       if (this.props.mutable) {
         props.defaultValue = defaultValue;
         props.ref = this.inputField;
@@ -541,6 +848,7 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
       if (defaultValue && defaultValue.length > 0) {
         sourceDataURL = "data:image/png;base64,".concat(defaultValue);
       }
+      padProps.canvasProps = {};
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -548,37 +856,61 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
         src: sourceDataURL
-      }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], padProps), canClear && /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
-        className: "clear-signature",
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: "m-signature-pad"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "m-signature-pad--body"
+      }, /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], (0, _extends2["default"])({}, padProps, {
+        onEnd: function onEnd(e) {
+          _this16._getSignatureImg();
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "m-signature-pad--footer clearfix"
+      }, canClear && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
+        size: "sm",
+        className: "clear-signature float-end",
         onClick: this.clear,
         title: "Clear Signature"
-      }), /*#__PURE__*/_react["default"].createElement("input", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " clear"))), this.props.methods ? /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, this.props.methods.register(props.name), props)) : /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
   return Signature;
 }(_react["default"].Component);
-var Tags = /*#__PURE__*/function (_React$Component12) {
-  (0, _inherits2["default"])(Tags, _React$Component12);
-  var _super12 = _createSuper(Tags);
-  function Tags(props) {
-    var _this8;
-    (0, _classCallCheck2["default"])(this, Tags);
-    _this8 = _super12.call(this, props);
-    // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this8), "handleChange", function (e) {
-      _this8.setState({
-        value: e || []
+var Tags2 = /*#__PURE__*/function (_React$Component13) {
+  (0, _inherits2["default"])(Tags2, _React$Component13);
+  var _super13 = _createSuper(Tags2);
+  function Tags2(props) {
+    var _this17;
+    (0, _classCallCheck2["default"])(this, Tags2);
+    _this17 = _super13.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "handleChange", function (e) {
+      _this17.setState({
+        value: e.map(function (i) {
+          return i.value;
+        }).join(',') || null
       });
+      if (_this17.props.onChange) {
+        _this17.props.onChange(e ? e.map(function (i) {
+          return i.value;
+        }).join(',') : null);
+      }
     });
-    _this8.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
     var defaultValue = props.defaultValue,
       data = props.data;
-    _this8.state = {
-      value: _this8.getDefaultValue(defaultValue, data.options)
-    };
-    return _this8;
+    if (props.value) {
+      _this17.state = {
+        value: props.value
+      };
+    } else {
+      _this17.state = {
+        value: defaultValue
+      };
+    }
+    return _this17;
   }
-  (0, _createClass2["default"])(Tags, [{
+  (0, _createClass2["default"])(Tags2, [{
     key: "getDefaultValue",
     value: function getDefaultValue(defaultValue, options) {
       if (defaultValue) {
@@ -607,52 +939,201 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
       props.isMulti = true;
       props.name = this.props.data.fieldName;
       props.onChange = this.handleChange;
+
+      //if (this.props.isInvalid) { props.isInvalid = this.props.isInvalid; }
+      //if (this.props.onBlur) { props.onBlur = this.props.onBlur; }
+
       props.options = options;
       if (!this.props.mutable) {
         props.value = options[0].text;
       } // to show a sample of what tags looks like
       if (this.props.mutable) {
         props.isDisabled = this.props.readOnly;
-        props.value = this.state.value;
+        props.value = this.getDefaultValue(this.state.value, options);
         props.ref = this.inputField;
       }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], (0, _extends2["default"])({
+        id: props.name
+      }, props)), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.data.help) : null));
+    }
+  }]);
+  return Tags2;
+}(_react["default"].Component);
+var Tags = /*#__PURE__*/function (_React$Component14) {
+  (0, _inherits2["default"])(Tags, _React$Component14);
+  var _super14 = _createSuper(Tags);
+  function Tags(props) {
+    var _this18;
+    (0, _classCallCheck2["default"])(this, Tags);
+    _this18 = _super14.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this18), "handleChange", function (selected) {
+      if (selected !== undefined && selected !== null && selected.length > 0) {
+        _this18.setState({
+          value: selected.map(function (i) {
+            return i.id;
+          }).join(',')
+        });
+        if (_this18.props.onChange) {
+          _this18.props.onChange(selected.map(function (i) {
+            return i.id;
+          }).join(','));
+        }
+      } else {
+        _this18.setState({
+          value: []
+        });
+        if (_this18.props.onChange) {
+          _this18.props.onChange([]);
+        }
+      }
+    });
+    _this18.inputField = /*#__PURE__*/_react["default"].createRef();
+    var defaultValue = props.defaultValue,
+      data = props.data;
+    if (props.value) {
+      _this18.state = {
+        value: props.value
+      };
+    } else {
+      _this18.state = {
+        value: defaultValue
+      };
+    }
+    return _this18;
+  }
+  (0, _createClass2["default"])(Tags, [{
+    key: "getDefaultValue",
+    value: function getDefaultValue(defaultValue, options) {
+      console.log(defaultValue);
+      if (defaultValue) {
+        if (typeof defaultValue === 'string') {
+          var vals = defaultValue.split(',').map(function (x) {
+            return x.trim();
+          });
+          return options.filter(function (x) {
+            return vals.indexOf(x.value) > -1;
+          });
+        }
+        return options.filter(function (x) {
+          return defaultValue.indexOf(x.value) > -1;
+        });
+      }
+      return [];
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var options = this.props.data.options.map(function (option) {
+        option.label = option.text;
+        option.id = option.value;
+        return option;
+      });
+      var props = {};
+      props.multiple = true;
+      props.name = this.props.data.fieldName;
+      props.onChange = this.handleChange;
+      props.placeholder = this.props.data.placeholder || 'Select...';
+      props.required = this.props.data.required;
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
+      props.options = options;
+      if (this.props.mutable) {
+        props.disabled = this.props.readOnly;
+        props.selected = this.getDefaultValue(this.state.value, options);
+        props.ref = this.inputField;
+      }
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
+      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(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrapTypeahead.Typeahead, (0, _extends2["default"])({
+        labelKey: function labelKey(option) {
+          return option.label;
+        },
+        id: props.name
+      }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrapTypeahead.Typeahead, (0, _extends2["default"])({
+        labelKey: function labelKey(option) {
+          return option.label;
+        },
+        id: props.name
+      }, props))), this.props.data.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.data.help) : null));
     }
   }]);
   return Tags;
 }(_react["default"].Component);
-var Checkboxes = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Checkboxes, _React$Component13);
-  var _super13 = _createSuper(Checkboxes);
+var Checkboxes = /*#__PURE__*/function (_React$Component15) {
+  (0, _inherits2["default"])(Checkboxes, _React$Component15);
+  var _super15 = _createSuper(Checkboxes);
   function Checkboxes(props) {
-    var _this9;
+    var _this19;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _this9 = _super13.call(this, props);
-    _this9.options = {};
-    return _this9;
+    _this19 = _super15.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this19), "onCheckboxChange", function (checkboxValue, event) {
+      if (_this19.props.onChange) {
+        if (event.target.checked) {
+          _this19.props.onChange(_this19.checkedValues.concat(checkboxValue));
+        } else {
+          _this19.props.onChange(_this19.checkedValues.filter(function (v) {
+            return v !== checkboxValue;
+          }));
+        }
+      }
+    });
+    _this19.options = {};
+    _this19.checkedValues = [];
+    return _this19;
   }
   (0, _createClass2["default"])(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _this10 = this;
+      var _this20 = this;
       var self = this;
-      var classNames = ''; // 'custom-control custom-checkbox';
-      if (this.props.data.inline) {
-        classNames += ' option-inline';
-      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
+      if (this.props.value) {
+        this.checkedValues = this.props.value;
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -662,17 +1143,21 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
         var thisKey = "preview_".concat(option.key);
         var props = {};
         props.name = "option_".concat(option.key);
-        props.type = 'checkbox';
+        if (self.props.data.inline) {
+          props.inline = true;
+        }
         props.value = option.value;
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.key) > -1;
         }
-        if (_this10.props.readOnly) {
+        if (self.props.readOnly) {
           props.disabled = 'disabled';
         }
+        if (self.props.value) {
+          props.checked = _this20.props.value.indexOf(option.value) > -1;
+        }
         return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
           label: option.text,
-          className: classNames,
           type: "checkbox",
           key: thisKey,
           id: "fid_".concat(thisKey),
@@ -680,6 +1165,9 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
             if (c && self.props.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
+          },
+          onChange: function onChange(e) {
+            self.onCheckboxChange(option.value, e);
           }
         }, props));
       })));
@@ -687,22 +1175,20 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
   }]);
   return Checkboxes;
 }(_react["default"].Component);
-var Checkbox = /*#__PURE__*/function (_React$Component14) {
-  (0, _inherits2["default"])(Checkbox, _React$Component14);
-  var _super14 = _createSuper(Checkbox);
+var Checkbox = /*#__PURE__*/function (_React$Component16) {
+  (0, _inherits2["default"])(Checkbox, _React$Component16);
+  var _super16 = _createSuper(Checkbox);
   function Checkbox(props) {
-    var _this11;
+    var _this21;
     (0, _classCallCheck2["default"])(this, Checkbox);
-    _this11 = _super14.call(this, props);
-    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this11;
+    _this21 = _super16.call(this, props);
+    _this21.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this21;
   }
   (0, _createClass2["default"])(Checkbox, [{
     key: "render",
     value: function render() {
-      var classNames = ''; // 'custom-control custom-checkbox';
-      // if (this.props.data.inline) { classNames += ' option-inline'; }
-
+      var _this22 = this;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -715,9 +1201,26 @@ var Checkbox = /*#__PURE__*/function (_React$Component14) {
       if (this.props.mutable) {
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onChange = function (e) {
+          _this22.props.onChange(e.target.checked);
+        };
+      }
+      if (this.props.value) {
+        props.checked = this.props.value;
+      }
+      if (this.props.isInvalid) {
+        props.isInvalid = this.props.isInvalid;
+      }
+      if (this.props.onBlur) {
+        props.onBlur = this.props.onBlur;
+      }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
+      if (this.props.data.inline) {
+        props.inline = true;
+      }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
@@ -738,25 +1241,20 @@ var Checkbox = /*#__PURE__*/function (_React$Component14) {
   }]);
   return Checkbox;
 }(_react["default"].Component);
-var RadioButtons = /*#__PURE__*/function (_React$Component15) {
-  (0, _inherits2["default"])(RadioButtons, _React$Component15);
-  var _super15 = _createSuper(RadioButtons);
+var RadioButtons = /*#__PURE__*/function (_React$Component17) {
+  (0, _inherits2["default"])(RadioButtons, _React$Component17);
+  var _super17 = _createSuper(RadioButtons);
   function RadioButtons(props) {
-    var _this12;
+    var _this23;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this12 = _super15.call(this, props);
-    _this12.options = {};
-    return _this12;
+    _this23 = _super17.call(this, props);
+    _this23.options = {};
+    return _this23;
   }
   (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _this13 = this;
       var self = this;
-      var classNames = ''; // 'custom-control custom-radio';
-      if (this.props.data.inline) {
-        classNames += ' option-inline';
-      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -770,17 +1268,26 @@ var RadioButtons = /*#__PURE__*/function (_React$Component15) {
         var thisKey = "preview_".concat(option.key);
         var props = {};
         props.name = self.props.data.fieldName;
-        props.type = 'radio';
         props.value = option.value;
         if (self.props.mutable) {
-          props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
+          props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.value) > -1;
+        }
+        if (self.props.onChange) {
+          props.onChange = function (e) {
+            self.props.onChange(e.target.value);
+          };
         }
-        if (_this13.props.readOnly) {
+        if (self.props.value) {
+          props.checked = self.props.value === option.value;
+        }
+        if (self.props.readOnly) {
           props.disabled = 'disabled';
         }
+        if (self.props.data.inline) {
+          props.inline = true;
+        }
         return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
           label: option.text,
-          className: classNames,
           type: "radio",
           key: thisKey,
           id: "fid_".concat(thisKey),
@@ -795,12 +1302,12 @@ var RadioButtons = /*#__PURE__*/function (_React$Component15) {
   }]);
   return RadioButtons;
 }(_react["default"].Component);
-var Image = /*#__PURE__*/function (_React$Component16) {
-  (0, _inherits2["default"])(Image, _React$Component16);
-  var _super16 = _createSuper(Image);
+var Image = /*#__PURE__*/function (_React$Component18) {
+  (0, _inherits2["default"])(Image, _React$Component18);
+  var _super18 = _createSuper(Image);
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
-    return _super16.apply(this, arguments);
+    return _super18.apply(this, arguments);
   }
   (0, _createClass2["default"])(Image, [{
     key: "render",
@@ -815,7 +1322,7 @@ var Image = /*#__PURE__*/function (_React$Component16) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread(_objectSpread({}, this.props.style), style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
         src: this.props.data.src,
         width: this.props.data.width,
         height: this.props.data.height
@@ -826,19 +1333,20 @@ var Image = /*#__PURE__*/function (_React$Component16) {
   }]);
   return Image;
 }(_react["default"].Component);
-var Rating = /*#__PURE__*/function (_React$Component17) {
-  (0, _inherits2["default"])(Rating, _React$Component17);
-  var _super17 = _createSuper(Rating);
+var Rating = /*#__PURE__*/function (_React$Component19) {
+  (0, _inherits2["default"])(Rating, _React$Component19);
+  var _super19 = _createSuper(Rating);
   function Rating(props) {
-    var _this14;
+    var _this24;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this14 = _super17.call(this, props);
-    _this14.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this14;
+    _this24 = _super19.call(this, props);
+    _this24.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this24;
   }
   (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
+      var _this25 = this;
       var props = {};
       props.name = this.props.data.fieldName;
       props.ratingAmount = 5;
@@ -848,6 +1356,18 @@ var Rating = /*#__PURE__*/function (_React$Component17) {
         props.disabled = this.props.readOnly;
         props.ref = this.inputField;
       }
+      if (this.props.onChange) {
+        props.onRatingClick = function (e, _ref3) {
+          var rating = _ref3.rating;
+          _this25.props.onChange(rating);
+        };
+      }
+      if (this.props.value) {
+        props.rating = this.props.value;
+      }
+      if (this.props.readOnly) {
+        props.disabled = true;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -862,12 +1382,12 @@ var Rating = /*#__PURE__*/function (_React$Component17) {
   }]);
   return Rating;
 }(_react["default"].Component);
-var HyperLink = /*#__PURE__*/function (_React$Component18) {
-  (0, _inherits2["default"])(HyperLink, _React$Component18);
-  var _super18 = _createSuper(HyperLink);
+var HyperLink = /*#__PURE__*/function (_React$Component20) {
+  (0, _inherits2["default"])(HyperLink, _React$Component20);
+  var _super20 = _createSuper(HyperLink);
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
-    return _super18.apply(this, arguments);
+    return _super20.apply(this, arguments);
   }
   (0, _createClass2["default"])(HyperLink, [{
     key: "render",
@@ -892,12 +1412,12 @@ var HyperLink = /*#__PURE__*/function (_React$Component18) {
   }]);
   return HyperLink;
 }(_react["default"].Component);
-var Download = /*#__PURE__*/function (_React$Component19) {
-  (0, _inherits2["default"])(Download, _React$Component19);
-  var _super19 = _createSuper(Download);
+var Download = /*#__PURE__*/function (_React$Component21) {
+  (0, _inherits2["default"])(Download, _React$Component21);
+  var _super21 = _createSuper(Download);
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
-    return _super19.apply(this, arguments);
+    return _super21.apply(this, arguments);
   }
   (0, _createClass2["default"])(Download, [{
     key: "render",
@@ -918,40 +1438,46 @@ var Download = /*#__PURE__*/function (_React$Component19) {
   }]);
   return Download;
 }(_react["default"].Component);
-var Camera = /*#__PURE__*/function (_React$Component20) {
-  (0, _inherits2["default"])(Camera, _React$Component20);
-  var _super20 = _createSuper(Camera);
+var Camera = /*#__PURE__*/function (_React$Component22) {
+  (0, _inherits2["default"])(Camera, _React$Component22);
+  var _super22 = _createSuper(Camera);
   function Camera(props) {
-    var _this15;
+    var _this26;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this15 = _super20.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "displayImage", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this15);
+    _this26 = _super22.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "displayImage", function (e) {
+      var self = (0, _assertThisInitialized2["default"])(_this26);
       var target = e.target;
       if (target.files && target.files.length) {
         self.setState({
           img: target.files[0],
           previewImg: URL.createObjectURL(target.files[0])
         });
+        if (_this26.props.onChange) {
+          _this26.props.onChange(target.files[0]);
+        }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this15), "clearImage", function () {
-      _this15.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this26), "clearImage", function (e) {
+      _this26.setState({
         img: null,
         previewImg: null
       });
+      if (_this26.props.onChange) {
+        _this26.props.onChange(null);
+      }
     });
-    _this15.state = {
+    _this26.state = {
       img: null,
       previewImg: null
     };
-    return _this15;
+    return _this26;
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref2) {
-      var width = _ref2.width,
-        height = _ref2.height;
+    value: function getImageSizeProps(_ref4) {
+      var width = _ref4.width,
+        height = _ref4.height;
       var imgProps = {
         width: '100%'
       };
@@ -966,7 +1492,7 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
   }, {
     key: "render",
     value: function render() {
-      var _this16 = this;
+      var _this27 = this;
       var imageStyle = {
         objectFit: 'scale-down',
         objectPosition: this.props.data.center ? 'center' : 'left'
@@ -987,12 +1513,15 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
           sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
         }
       }
+      if (this.props.value) {
+        sourceDataURL = this.props.value;
+      }
       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(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, (0, _extends2["default"])({
         style: imageStyle,
         src: sourceDataURL
       }, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -1010,14 +1539,16 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         className: "image-upload-control"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "light"
-      }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Image, {
         onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this16.state.previewImg);
+          return URL.revokeObjectURL(_this27.state.previewImg);
         },
         src: this.state.previewImg,
         height: "100",
         className: "image-upload-preview"
       }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
+        size: "sm",
         className: "btn-image-clear",
         onClick: this.clearImage
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo")))));
@@ -1025,15 +1556,15 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
   }]);
   return Camera;
 }(_react["default"].Component);
-var FileUpload = /*#__PURE__*/function (_React$Component21) {
-  (0, _inherits2["default"])(FileUpload, _React$Component21);
-  var _super21 = _createSuper(FileUpload);
+var FileUpload = /*#__PURE__*/function (_React$Component23) {
+  (0, _inherits2["default"])(FileUpload, _React$Component23);
+  var _super23 = _createSuper(FileUpload);
   function FileUpload(props) {
-    var _this17;
+    var _this28;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this17 = _super21.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "displayFileUpload", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this17);
+    _this28 = _super23.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "displayFileUpload", function (e) {
+      var self = (0, _assertThisInitialized2["default"])(_this28);
       var target = e.target;
       var file;
       if (target.files && target.files.length > 0) {
@@ -1041,21 +1572,27 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
         self.setState({
           fileUpload: file
         });
+        if (_this28.props.onChange) {
+          _this28.props.onChange(file);
+        }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "clearFileUpload", function () {
-      _this17.setState({
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "clearFileUpload", function () {
+      _this28.setState({
         fileUpload: null
       });
+      if (_this28.props.onChange) {
+        _this28.props.onChange(null);
+      }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "saveFile", /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this28), "saveFile", /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this17.props.defaultValue;
+              sourceUrl = _this28.props.defaultValue;
               _context.next = 4;
               return (0, _isomorphicFetch["default"])(sourceUrl, {
                 method: 'GET',
@@ -1074,7 +1611,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
               resBlob = _context.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this17.props.data.fileType || response.headers.get('Content-Type')
+                type: _this28.props.data.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -1090,13 +1627,13 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
         }, _callee);
       }));
       return function (_x) {
-        return _ref3.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }());
-    _this17.state = {
+    _this28.state = {
       fileUpload: null
     };
-    return _this17;
+    return _this28;
   }
   (0, _createClass2["default"])(FileUpload, [{
     key: "render",
@@ -1144,6 +1681,8 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
           marginLeft: '5px'
         }
       }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
+        size: "sm",
         className: "btn-file-upload-clear",
         onClick: this.clearFileUpload
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File")))));
@@ -1151,24 +1690,27 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
   }]);
   return FileUpload;
 }(_react["default"].Component);
-var Range = /*#__PURE__*/function (_React$Component22) {
-  (0, _inherits2["default"])(Range, _React$Component22);
-  var _super22 = _createSuper(Range);
+var Range = /*#__PURE__*/function (_React$Component24) {
+  (0, _inherits2["default"])(Range, _React$Component24);
+  var _super24 = _createSuper(Range);
   function Range(props) {
-    var _this18;
+    var _this29;
     (0, _classCallCheck2["default"])(this, Range);
-    _this18 = _super22.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this18), "changeValue", function (e) {
+    _this29 = _super24.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this29), "changeValue", function (e) {
       var target = e.target;
-      _this18.setState({
+      _this29.setState({
         value: target.value
       });
+      if (_this29.props.onChange) {
+        _this29.props.onChange(target.value);
+      }
     });
-    _this18.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this18.state = {
+    _this29.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this29.state = {
       value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.defaultValue, 10)
     };
-    return _this18;
+    return _this29;
   }
   (0, _createClass2["default"])(Range, [{
     key: "render",
@@ -1259,7 +1801,7 @@ SurveyElements.Dropdown = Dropdown;
 SurveyElements.Signature = Signature;
 SurveyElements.Checkboxes = Checkboxes;
 SurveyElements.Checkbox = Checkbox;
-SurveyElements.DatePicker = _datePicker["default"];
+SurveyElements.DatePicker = DatePicker;
 SurveyElements.RadioButtons = RadioButtons;
 SurveyElements.Image = Image;
 SurveyElements.Rating = Rating;