react-survey-builder 1.0.5 → 1.0.7

package/dist/index.js.LICENSE.txt

@@ -36,6 +36,16 @@ object-assign
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/lib/form.js

@@ -201,7 +201,8 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       var itemData = {
         id: item.id,
         name: item.field_name,
-        custom_name: item.custom_name || item.field_name
+        custom_name: item.custom_name || item.field_name,
+        help: item.help
       };
       if (!itemData.name) return null;
       var ref = this.inputs[item.field_name];

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

@@ -24,11 +24,14 @@
 	"step": "Step",
 	"min": "Min",
 	"max": "Max",
+	"min_label": "Minimum Value Label",
+	"max_label": "Maximum Value Label",
 	"default-selected": "Default Selected",
 	"text-style": "Text Style",
 	"bold": "Bold",
 	"italic": "Italic",
 	"description": "Description",
+	"help-label": "Help instructions/details that will show up beneath the input field",
 	"correct-answer": "Correct Answer",
 	"populate-options-from-api": "Populate Options from API",
 	"populate": "Populate",

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

@@ -14,6 +14,7 @@ var ComponentLabel = function ComponentLabel(props) {
     return null;
   }
   return /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: props.name,
     className: props.className || 'form-label'
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {

package/lib/survey-elements/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +27,7 @@ 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");
 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); }; }
@@ -175,6 +176,7 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
       props.className = 'form-control';
       props.name = this.props.data.field_name;
       props.placeholder = this.props.data.placeholder;
+      props.help = this.props.data.help;
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -191,7 +193,15 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return TextInput;

package/lib/survey-elements-edit.js

@@ -435,7 +435,16 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.min_value,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'min_value', 'value')
-      }), /*#__PURE__*/_react["default"].createElement("input", {
+      }))), this.props.element.hasOwnProperty('min_label') && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group-range"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "rangeMin"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "min_label"
+      })), /*#__PURE__*/_react["default"].createElement("input", {
         type: "text",
         className: "form-control",
         defaultValue: this.props.element.min_label,
@@ -457,7 +466,16 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.max_value,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'max_value', 'value')
-      }), /*#__PURE__*/_react["default"].createElement("input", {
+      }))), this.props.element.hasOwnProperty('max_label') && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group-range"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "rangeMax"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "max_label"
+      })), /*#__PURE__*/_react["default"].createElement("input", {
         type: "text",
         className: "form-control",
         defaultValue: this.props.element.max_label,
@@ -527,7 +545,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.placeholder,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'placeholder', 'value')
-      })), this.props.element.show_custom_name && /*#__PURE__*/_react["default"].createElement("div", {
+      })), this.props.element.showCustomName && /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
@@ -541,6 +559,20 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.custom_name,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'custom_name', 'value')
+      })), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "help"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "help-label"
+      })), /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
+        type: "text",
+        className: "form-control",
+        id: "help",
+        defaultValue: this.props.element.help,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'help', 'value')
       })), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement("label", {

package/lib/toolbar.js

@@ -159,7 +159,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'dropdown_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         options: []
       }, {
         key: 'Tags',
@@ -172,7 +174,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'tags_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         options: []
       }, {
         key: 'Checkboxes',
@@ -185,7 +189,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'checkboxes_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         options: []
       }, {
         key: 'Checkbox',
@@ -198,7 +204,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'checkbox_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         boxLabel: 'Agree To Rules & Regs'
       }, {
         key: 'RadioButtons',
@@ -211,7 +219,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'radiobuttons_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         options: []
       }, {
         key: 'TextInput',
@@ -224,7 +234,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaFont,
         field_name: 'text_input_',
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'EmailInput',
         canHaveAnswer: true,
@@ -236,7 +248,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaEnvelope,
         field_name: 'email_input_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         placeholder: ''
       }, {
         key: 'NumberInput',
@@ -249,9 +263,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaPlus,
         field_name: 'number_input_',
-        show_custom_name: true,
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
         step: 1,
-        min_value: 1,
+        min_value: 0,
         max_value: 5
       }, {
         key: 'PhoneNumber',
@@ -264,7 +280,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaPhone,
         field_name: 'phone_input_',
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'TextArea',
         canHaveAnswer: true,
@@ -276,7 +294,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaTextHeight,
         field_name: 'text_area_',
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'FieldSet',
         canHaveAnswer: false,
@@ -362,7 +382,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaStar,
         field_name: 'rating_',
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'DatePicker',
         canDefaultToday: true,
@@ -380,7 +402,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         field_name: 'date_picker_',
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'Signature',
         canReadOnly: true,
@@ -436,7 +460,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         max_label: intl.formatMessage({
           id: 'difficult'
         }),
-        show_custom_name: true
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true
       }, {
         key: 'Camera',
         name: intl.formatMessage({
@@ -506,8 +532,10 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.bold = false;
         elementOptions.italic = false;
       }
-      elementOptions.show_custom_name = item.show_custom_name;
+      elementOptions.showCustomName = item.showCustomName;
       elementOptions.custom_name = item.custom_name;
+      elementOptions.showHelp = item.showHelp;
+      elementOptions.help = item.help;
       if (item.canHaveAnswer) {
         elementOptions.canHaveAnswer = item.canHaveAnswer;
       }
@@ -552,6 +580,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions._href = item._href;
         elementOptions.file_path = item.file_path;
       }
+      if (element === 'NumberInput') {
+        elementOptions.step = item.step;
+        elementOptions.min_value = item.min_value;
+        elementOptions.max_value = item.max_value;
+      }
       if (element === 'Range') {
         elementOptions.step = item.step;
         elementOptions.default_value = item.default_value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -138,6 +138,7 @@ export interface SurveyGeneratorOnSubmitParams {
   id: number;
   name: string;
   custom_name: string;
+  help: string;
   value: string | string[];
 }