react-survey-builder 1.0.72 → 1.0.73

package/lib/toolbar.js

@@ -1,19 +1,19 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React from 'react';
 import ToolbarItem from './toolbar-draggable-item';
 import ToolbarGroupItem from './toolbar-group-item';
@@ -21,6 +21,303 @@ import store from './stores/store';
 import { FaArrowsAltH, FaBars, FaCamera, FaCaretSquareDown, FaCheckSquare, FaColumns, FaEnvelope, FaFile, FaFont, FaHeading, FaLink, FaParagraph, FaPenSquare, FaPhone, FaPlus, FaRegCalendarAlt, FaRegDotCircle, FaRegImage, FaSlidersH, FaStar, FaTags, FaTextHeight } from 'react-icons/fa';
 import { PiFileHtml } from 'react-icons/pi';
 import ID from './UUID';
+import { GrSteps } from 'react-icons/gr';
+import { isListNotEmpty } from './utils/objectUtils';
+var _defaultItems = [{
+  key: 'Header',
+  name: "Header Text",
+  icon: FaHeading,
+  "static": true,
+  content: "Text..."
+}, {
+  key: 'Label',
+  name: "Label",
+  "static": true,
+  icon: FaFont,
+  content: "Text..."
+}, {
+  key: 'Paragraph',
+  name: "Paragraph",
+  "static": true,
+  icon: FaParagraph,
+  content: "Text..."
+}, {
+  key: 'ContentBody',
+  name: "Static Content",
+  "static": true,
+  icon: PiFileHtml,
+  content: "Text..."
+}, {
+  key: 'LineBreak',
+  name: "Line Break",
+  "static": true,
+  icon: FaArrowsAltH
+}, {
+  key: 'Dropdown',
+  name: "Dropdown",
+  icon: FaCaretSquareDown,
+  label: "Label",
+  fieldName: 'dropdown_',
+  canHaveHelp: true,
+  options: [],
+  placeholder: 'Select One',
+  canHaveLabelLocation: true,
+  answerType: 'ARRAY',
+  hideLabel: false
+}, {
+  key: 'Tags',
+  name: "Tags",
+  icon: FaTags,
+  label: "Label",
+  fieldName: 'tags_',
+  canHaveHelp: true,
+  options: [],
+  placeholder: 'Select...',
+  canHaveLabelLocation: true,
+  answerType: 'ARRAY',
+  hideLabel: false
+}, {
+  key: 'Checkboxes',
+  name: "Checkboxes",
+  icon: FaCheckSquare,
+  label: "Label",
+  fieldName: 'checkboxes_',
+  canHaveHelp: true,
+  options: [],
+  answerType: 'ARRAY',
+  hideLabel: false
+}, {
+  key: 'Checkbox',
+  name: "Checkbox",
+  icon: FaCheckSquare,
+  label: "Label",
+  fieldName: 'checkbox_',
+  canHaveHelp: true,
+  boxLabel: 'Pick me',
+  answerType: 'BOOLEAN',
+  canHideLabel: true,
+  hideLabel: true
+}, {
+  key: 'RadioButtons',
+  name: "Radio Buttons",
+  icon: FaRegDotCircle,
+  label: "Label",
+  fieldName: 'radiobuttons_',
+  canHaveHelp: true,
+  options: [],
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'TextInput',
+  name: "Text Input",
+  label: "Label",
+  icon: FaFont,
+  fieldName: 'text_input_',
+  canHaveHelp: true,
+  placeholder: "Label",
+  canHaveLabelLocation: true,
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'EmailInput',
+  name: "Email Input",
+  label: "Email Address",
+  icon: FaEnvelope,
+  fieldName: 'email_input_',
+  canHaveHelp: true,
+  placeholder: "Email Address",
+  canHaveLabelLocation: true,
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'PhoneNumber',
+  name: "Phone Number",
+  label: "Phone Number",
+  icon: FaPhone,
+  fieldName: 'phone_input_',
+  canHaveHelp: true,
+  canHaveLabelLocation: true,
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'DatePicker',
+  canDefaultToday: true,
+  canReadOnly: true,
+  dateFormat: 'MM/DD/YYYY',
+  name: "Date",
+  icon: FaRegCalendarAlt,
+  label: "Label",
+  fieldName: 'date_picker_',
+  canHaveHelp: true,
+  canHaveLabelLocation: true,
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'TextArea',
+  name: "Multi-line Input",
+  label: "Label",
+  icon: FaTextHeight,
+  fieldName: 'text_area_',
+  canHaveHelp: true,
+  canHaveLabelLocation: true,
+  answerType: 'STRING',
+  hideLabel: false
+}, {
+  key: 'NumberInput',
+  name: "Numerical Input",
+  label: "Label",
+  icon: FaPlus,
+  fieldName: 'number_input_',
+  canHaveHelp: true,
+  step: 1,
+  minValue: 0,
+  maxValue: 5,
+  canHaveLabelLocation: true,
+  answerType: 'NUMBER',
+  hideLabel: false
+}, {
+  key: 'Rating',
+  name: "Rating",
+  label: "Label",
+  icon: FaStar,
+  fieldName: 'rating_',
+  canHaveHelp: true,
+  answerType: 'NUMBER',
+  hideLabel: false
+}, {
+  key: 'Range',
+  name: "Range",
+  icon: FaSlidersH,
+  label: "Label",
+  fieldName: 'range_',
+  step: 1,
+  defaultValue: 3,
+  minValue: 1,
+  maxValue: 5,
+  minLabel: "Easy",
+  maxLabel: "Difficult",
+  canHaveHelp: true,
+  answerType: 'NUMBER',
+  hideLabel: false
+}, {
+  key: 'Signature',
+  canReadOnly: true,
+  name: "Signature",
+  icon: FaPenSquare,
+  label: "Signature",
+  fieldName: 'signature_',
+  canHaveHelp: true,
+  answerType: 'IMAGE',
+  hideLabel: false
+}, {
+  key: 'Camera',
+  name: "Camera",
+  icon: FaCamera,
+  label: "Label",
+  fieldName: 'camera_',
+  answerType: 'IMAGE',
+  hideLabel: false
+}, {
+  key: 'FileUpload',
+  name: "File Upload",
+  icon: FaFile,
+  label: "Label",
+  fieldName: 'file_upload_',
+  answerType: 'FILE',
+  hideLabel: false
+}, {
+  key: 'FieldSet',
+  name: "Fieldset",
+  label: "Fieldset",
+  icon: FaBars,
+  fieldName: 'fieldset-element',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'Image',
+  name: "Image",
+  label: '',
+  icon: FaRegImage,
+  fieldName: 'image_',
+  src: '',
+  "static": true
+}, {
+  key: 'HyperLink',
+  name: "Hyperlink",
+  icon: FaLink,
+  content: "Website Link...",
+  href: 'http://www.example.com',
+  "static": true
+}, {
+  key: 'Download',
+  name: "File Attachment",
+  icon: FaFile,
+  content: "File name...",
+  fieldName: 'download_',
+  filePath: '',
+  href: '',
+  "static": true
+}, {
+  key: 'TwoColumnRow',
+  name: "Two Column Row",
+  label: '',
+  icon: FaColumns,
+  fieldName: 'two_col_row_',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'ThreeColumnRow',
+  name: "Three Columns Row",
+  label: '',
+  icon: FaColumns,
+  fieldName: 'three_col_row_',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'FourColumnRow',
+  element: 'MultiColumnRow',
+  name: "Four Columns Row",
+  label: '',
+  icon: FaColumns,
+  fieldName: 'four_col_row_',
+  colCount: 4,
+  className: 'col-md-3',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'FiveColumnRow',
+  element: 'MultiColumnRow',
+  name: "Five Columns Row",
+  label: '',
+  icon: FaColumns,
+  fieldName: 'five_col_row_',
+  colCount: 5,
+  className: 'col',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'SixColumnRow',
+  element: 'MultiColumnRow',
+  name: "Six Columns Row",
+  label: '',
+  icon: FaColumns,
+  fieldName: 'six_col_row_',
+  colCount: 6,
+  className: 'col-md-2',
+  "static": true,
+  isContainer: true
+}, {
+  key: 'Step',
+  name: "Step",
+  label: "Step",
+  icon: GrSteps,
+  fieldName: 'step_',
+  "static": true,
+  conditional: false,
+  conditionalFieldName: '',
+  conditionalFieldValue: '',
+  isContainer: true
+}];
 var groupBy = function groupBy(list, keyGetter) {
   var map = new Map();
   list.forEach(function (item) {
@@ -34,16 +331,20 @@ var groupBy = function groupBy(list, keyGetter) {
   });
   return map;
 };
-var buildItems = function buildItems(items, defaultItems) {
-  if (!items) {
-    return defaultItems;
+var buildItems = function buildItems() {
+  var dataItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var defaultDataItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var customItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var allItems = [].concat(_toConsumableArray(defaultDataItems), _toConsumableArray(customItems));
+  if (!isListNotEmpty(dataItems)) {
+    return allItems;
   }
-  return items.map(function (x) {
-    var found = defaultItems.find(function (y) {
+  return dataItems.map(function (x) {
+    var found = allItems.find(function (y) {
       return x.element === y.element && y.key === x.key;
     });
     if (!found) {
-      found = defaultItems.find(function (y) {
+      found = allItems.find(function (y) {
         return (x.element || x.key) === (y.element || y.key);
       });
     }
@@ -57,8 +358,9 @@ var buildItems = function buildItems(items, defaultItems) {
     return found || x;
   });
 };
-var buildGroupItems = function buildGroupItems(allItems) {
-  var items = allItems.filter(function (x) {
+var buildGroupItems = function buildGroupItems() {
+  var allItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var ungroupedItems = allItems.filter(function (x) {
     return !x.groupName;
   });
   var gItems = allItems.filter(function (x) {
@@ -73,555 +375,273 @@ var buildGroupItems = function buildGroupItems(allItems) {
     return self.indexOf(v) === i;
   });
   return {
-    items: items,
+    ungroupedItems: ungroupedItems,
     grouped: grouped,
     groupKeys: groupKeys
   };
 };
-var Toolbar = /*#__PURE__*/function (_React$Component) {
-  function Toolbar(props) {
-    var _this;
-    _classCallCheck(this, Toolbar);
-    _this = _callSuper(this, Toolbar, [props]);
-    _defineProperty(_this, "renderItem", function (item) {
-      return /*#__PURE__*/React.createElement(ToolbarItem, {
-        item: item,
-        key: item.key,
-        onClick: _this._onClick.bind(_this, item),
-        onCreate: _this.create
-      });
+var Toolbar = function Toolbar(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$customItems = _ref.customItems,
+    customItems = _ref$customItems === void 0 ? [] : _ref$customItems;
+  var _React$useState = React.useState(isListNotEmpty(items) ? _toConsumableArray(items) : []),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dataItems = _React$useState2[0],
+    setDataItems = _React$useState2[1];
+  var _defaultItemOptions = function _defaultItemOptions(element) {
+    switch (element) {
+      case 'Dropdown':
+        return [{
+          value: 'place_holder_option_1',
+          text: "Place holder option 1",
+          key: "dropdown_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_2',
+          text: "Place holder option 2",
+          key: "dropdown_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_3',
+          text: "Place holder option 3",
+          key: "dropdown_option_".concat(ID.uuid())
+        }];
+      case 'Tags':
+        return [{
+          value: 'place_holder_tag_1',
+          text: "Place holder option 1",
+          key: "tags_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_tag_2',
+          text: "Place holder option 2",
+          key: "tags_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_tag_3',
+          text: "Place holder option 3",
+          key: "tags_option_".concat(ID.uuid())
+        }];
+      case 'Checkboxes':
+        return [{
+          value: 'place_holder_option_1',
+          text: "Place holder option 1",
+          key: "checkboxes_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_2',
+          text: "Place holder option 2",
+          key: "checkboxes_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_3',
+          text: "Place holder option 3",
+          key: "checkboxes_option_".concat(ID.uuid())
+        }];
+      case 'RadioButtons':
+        return [{
+          value: 'place_holder_option_1',
+          text: "Place holder option 1",
+          key: "radiobuttons_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_2',
+          text: "Place holder option 2",
+          key: "radiobuttons_option_".concat(ID.uuid())
+        }, {
+          value: 'place_holder_option_3',
+          text: "Place holder option 3",
+          key: "radiobuttons_option_".concat(ID.uuid())
+        }];
+      default:
+        return [];
+    }
+  };
+  var addCustomOptions = function addCustomOptions(item, elementOptions) {
+    if (item.type === 'custom') {
+      var customOptions = _objectSpread(_objectSpread({}, item), elementOptions);
+      customOptions.custom = true;
+      customOptions.component = item.component || null;
+      customOptions.customOptions = item.customOptions || [];
+      return customOptions;
+    }
+    return _objectSpread(_objectSpread({}, elementOptions), item);
+  };
+  var create = function create(item) {
+    var _item$static;
+    var element = item.element || item.key;
+    var elementOptions = addCustomOptions(item, {
+      id: ID.uuid(),
+      element: element,
+      text: item.name,
+      "static": (_item$static = item["static"]) !== null && _item$static !== void 0 ? _item$static : false
     });
-    var items = buildItems(props.items, _this._defaultItems());
-    _this.state = {
-      items: items
-    };
-    _this.create = _this.create.bind(_this);
-    return _this;
-  }
-  _inherits(Toolbar, _React$Component);
-  return _createClass(Toolbar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      store.subscribe(function (state) {
-        return _this2.setState({
-          store: state
-        });
-      });
+    if (item.groupName) {
+      var _item$groupName;
+      elementOptions.groupName = (_item$groupName = item.groupName) !== null && _item$groupName !== void 0 ? _item$groupName : null;
+    }
+    if (!item["static"]) {
+      elementOptions.required = false;
+    }
+    if (item.isContainer) {
+      elementOptions.isContainer = true;
     }
-  }, {
-    key: "_defaultItems",
-    value: function _defaultItems() {
-      return [{
-        key: 'Header',
-        name: "Header Text",
-        icon: FaHeading,
-        "static": true,
-        content: "Text..."
-      }, {
-        key: 'Label',
-        name: "Label",
-        "static": true,
-        icon: FaFont,
-        content: "Text..."
-      }, {
-        key: 'Paragraph',
-        name: "Paragraph",
-        "static": true,
-        icon: FaParagraph,
-        content: "Text..."
-      }, {
-        key: 'ContentBody',
-        name: "Static Content",
-        "static": true,
-        icon: PiFileHtml,
-        content: "Text..."
-      }, {
-        key: 'LineBreak',
-        name: "Line Break",
-        "static": true,
-        icon: FaArrowsAltH
-      }, {
-        key: 'Dropdown',
-        name: "Dropdown",
-        icon: FaCaretSquareDown,
-        label: "Label",
-        fieldName: 'dropdown_',
-        canHaveHelp: true,
-        options: [],
-        placeholder: 'Select One',
-        canHaveLabelLocation: true,
-        answerType: 'ARRAY'
-      }, {
-        key: 'Tags',
-        name: "Tags",
-        icon: FaTags,
-        label: "Label",
-        fieldName: 'tags_',
-        canHaveHelp: true,
-        options: [],
-        placeholder: 'Select...',
-        canHaveLabelLocation: true,
-        answerType: 'ARRAY'
-      }, {
-        key: 'Checkboxes',
-        name: "Checkboxes",
-        icon: FaCheckSquare,
-        label: "Label",
-        fieldName: 'checkboxes_',
-        canHaveHelp: true,
-        options: [],
-        answerType: 'ARRAY'
-      }, {
-        key: 'Checkbox',
-        name: "Checkbox",
-        icon: FaCheckSquare,
-        label: "Label",
-        fieldName: 'checkbox_',
-        canHaveHelp: true,
-        boxLabel: 'Pick me',
-        answerType: 'BOOLEAN',
-        canHideLabel: true,
-        hideLabel: true
-      }, {
-        key: 'RadioButtons',
-        name: "Radio Buttons",
-        icon: FaRegDotCircle,
-        label: "Label",
-        fieldName: 'radiobuttons_',
-        canHaveHelp: true,
-        options: [],
-        answerType: 'STRING'
-      }, {
-        key: 'TextInput',
-        name: "Text Input",
-        label: "Label",
-        icon: FaFont,
-        fieldName: 'text_input_',
-        canHaveHelp: true,
-        placeholder: "Label",
-        canHaveLabelLocation: true,
-        answerType: 'STRING'
-      }, {
-        key: 'EmailInput',
-        name: "Email Input",
-        label: "Email Address",
-        icon: FaEnvelope,
-        fieldName: 'email_input_',
-        canHaveHelp: true,
-        placeholder: "Email Address",
-        canHaveLabelLocation: true,
-        answerType: 'STRING'
-      }, {
-        key: 'PhoneNumber',
-        name: "Phone Number",
-        label: "Phone Number",
-        icon: FaPhone,
-        fieldName: 'phone_input_',
-        canHaveHelp: true,
-        canHaveLabelLocation: true,
-        answerType: 'STRING'
-      }, {
-        key: 'DatePicker',
-        canDefaultToday: true,
-        canReadOnly: true,
-        dateFormat: 'MM/DD/YYYY',
-        name: "Date",
-        icon: FaRegCalendarAlt,
-        label: "Label",
-        fieldName: 'date_picker_',
-        canHaveHelp: true,
-        canHaveLabelLocation: true,
-        answerType: 'STRING'
-      }, {
-        key: 'TextArea',
-        name: "Multi-line Input",
-        label: "Label",
-        icon: FaTextHeight,
-        fieldName: 'text_area_',
-        canHaveHelp: true,
-        canHaveLabelLocation: true,
-        answerType: 'STRING'
-      }, {
-        key: 'NumberInput',
-        name: "Numerical Input",
-        label: "Label",
-        icon: FaPlus,
-        fieldName: 'number_input_',
-        canHaveHelp: true,
-        step: 1,
-        minValue: 0,
-        maxValue: 5,
-        canHaveLabelLocation: true,
-        answerType: 'NUMBER'
-      }, {
-        key: 'Rating',
-        name: "Rating",
-        label: "Label",
-        icon: FaStar,
-        fieldName: 'rating_',
-        canHaveHelp: true,
-        answerType: 'NUMBER'
-      }, {
-        key: 'Range',
-        name: "Range",
-        icon: FaSlidersH,
-        label: "Label",
-        fieldName: 'range_',
-        step: 1,
-        defaultValue: 3,
-        minValue: 1,
-        maxValue: 5,
-        minLabel: "Easy",
-        maxLabel: "Difficult",
-        canHaveHelp: true,
-        answerType: 'NUMBER'
-      }, {
-        key: 'Signature',
-        canReadOnly: true,
-        name: "Signature",
-        icon: FaPenSquare,
-        label: "Signature",
-        fieldName: 'signature_',
-        canHaveHelp: true,
-        answerType: 'IMAGE'
-      }, {
-        key: 'Camera',
-        name: "Camera",
-        icon: FaCamera,
-        label: "Label",
-        fieldName: 'camera_',
-        answerType: 'IMAGE'
-      }, {
-        key: 'FileUpload',
-        name: "File Upload",
-        icon: FaFile,
-        label: "Label",
-        fieldName: 'file_upload_',
-        answerType: 'FILE'
-      }, {
-        key: 'FieldSet',
-        name: "Fieldset",
-        label: "Fieldset",
-        icon: FaBars,
-        fieldName: 'fieldset-element',
-        "static": true
-      }, {
-        key: 'Image',
-        name: "Image",
-        label: '',
-        icon: FaRegImage,
-        fieldName: 'image_',
-        src: '',
-        "static": true
-      }, {
-        key: 'HyperLink',
-        name: "Hyperlink",
-        icon: FaLink,
-        content: "Website Link...",
-        href: 'http://www.example.com',
-        "static": true
-      }, {
-        key: 'Download',
-        name: "File Attachment",
-        icon: FaFile,
-        content: "File name...",
-        fieldName: 'download_',
-        filePath: '',
-        href: '',
-        "static": true
-      }, {
-        key: 'TwoColumnRow',
-        name: "Two Column Row",
-        label: '',
-        icon: FaColumns,
-        fieldName: 'two_col_row_',
-        "static": true
-      }, {
-        key: 'ThreeColumnRow',
-        name: "Three Columns Row",
-        label: '',
-        icon: FaColumns,
-        fieldName: 'three_col_row_',
-        "static": true
-      }, {
-        key: 'FourColumnRow',
-        element: 'MultiColumnRow',
-        name: "Four Columns Row",
-        label: '',
-        icon: FaColumns,
-        fieldName: 'four_col_row_',
-        colCount: 4,
-        className: 'col-md-3',
-        "static": true
-      }, {
-        key: 'FiveColumnRow',
-        element: 'MultiColumnRow',
-        name: "Five Columns Row",
-        label: '',
-        icon: FaColumns,
-        fieldName: 'five_col_row_',
-        colCount: 5,
-        className: 'col',
-        "static": true
-      }, {
-        key: 'SixColumnRow',
-        element: 'MultiColumnRow',
-        name: "Six Columns Row",
-        label: '',
-        icon: FaColumns,
-        fieldName: 'six_col_row_',
-        colCount: 6,
-        className: 'col-md-2',
-        "static": true
-      }];
-    }
-  }, {
-    key: "addCustomOptions",
-    value: function addCustomOptions(item, elementOptions) {
-      if (item.type === 'custom') {
-        var customOptions = _objectSpread(_objectSpread({}, item), elementOptions);
-        customOptions.custom = true;
-        customOptions.component = item.component || null;
-        customOptions.customOptions = item.customOptions || [];
-        return customOptions;
-      }
-      return elementOptions;
-    }
-  }, {
-    key: "create",
-    value: function create(item) {
-      var _item$static;
-      var element = item.element || item.key;
-      var elementOptions = this.addCustomOptions(item, {
-        id: ID.uuid(),
-        element: element,
-        text: item.name,
-        "static": (_item$static = item["static"]) !== null && _item$static !== void 0 ? _item$static : false
-      });
-      if (item.groupName) {
-        var _item$groupName;
-        elementOptions.groupName = (_item$groupName = item.groupName) !== null && _item$groupName !== void 0 ? _item$groupName : null;
-      }
-      if (!item["static"]) {
-        elementOptions.required = false;
-      }
 
-      // add placeholder to form input
-      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags'].indexOf(element) !== -1) {
-        var _item$placeholder;
-        elementOptions.placeholder = (_item$placeholder = item.placeholder) !== null && _item$placeholder !== void 0 ? _item$placeholder : '';
-      }
-      if (item.type === 'custom') {
-        elementOptions.key = item.key;
-        elementOptions.custom = true;
-        elementOptions.forwardRef = item.forwardRef;
-        elementOptions.bare = item.bare;
-        elementOptions.props = item.props;
-        elementOptions.component = item.component || null;
-        elementOptions.customOptions = item.customOptions || [];
-      }
-      if (item["static"] && ['Header', 'Paragraph', 'Label'].indexOf(element) !== -1) {
-        elementOptions.bold = false;
-        elementOptions.italic = false;
-      }
-      if (item.canHaveLabelLocation || item.labelLocation !== undefined) {
-        var _item$labelLocation;
-        elementOptions.labelLocation = (_item$labelLocation = item.labelLocation) !== null && _item$labelLocation !== void 0 ? _item$labelLocation : 'ABOVE';
-      }
-      if (item.canHaveHelp || item.help !== undefined) {
-        var _item$help;
-        elementOptions.help = (_item$help = item.help) !== null && _item$help !== void 0 ? _item$help : '';
-      }
-      if (item.canHideLabel || item.hideLabel !== undefined) {
-        var _item$hideLabel;
-        elementOptions.hideLabel = (_item$hideLabel = item.hideLabel) !== null && _item$hideLabel !== void 0 ? _item$hideLabel : false;
-      }
-      if (item.canReadOnly || item.readOnly !== undefined) {
-        var _item$readOnly;
-        elementOptions.readOnly = (_item$readOnly = item.readOnly) !== null && _item$readOnly !== void 0 ? _item$readOnly : false;
-      }
-      if (item.canDefaultToday || item.defaultToday !== undefined) {
-        var _item$defaultToday;
-        elementOptions.defaultToday = (_item$defaultToday = item.defaultToday) !== null && _item$defaultToday !== void 0 ? _item$defaultToday : false;
-      }
-      if (item.content) {
-        elementOptions.content = item.content;
-      }
-      if (item.href) {
-        elementOptions.href = item.href;
-      }
-      if (item.inherited !== undefined) {
-        elementOptions.inherited = item.inherited;
-      }
-      if (item.canHavePageBreakBefore || item.pageBreakBefore !== undefined) {
-        var _item$pageBreakBefore;
-        elementOptions.pageBreakBefore = (_item$pageBreakBefore = item.pageBreakBefore) !== null && _item$pageBreakBefore !== void 0 ? _item$pageBreakBefore : false;
-      }
-      if (item.canHaveAlternateForm || item.alternateForm !== undefined) {
-        var _item$alternateForm;
-        elementOptions.alternateForm = (_item$alternateForm = item.alternateForm) !== null && _item$alternateForm !== void 0 ? _item$alternateForm : false;
-      }
-      if (item.canHaveDisplayHorizontal || item.inline !== undefined) {
-        var _item$inline;
-        elementOptions.inline = (_item$inline = item.inline) !== null && _item$inline !== void 0 ? _item$inline : false;
-      }
-      if (item.canHaveOptionCorrect) {
-        var _item$canHaveOptionCo;
-        elementOptions.canHaveOptionCorrect = (_item$canHaveOptionCo = item.canHaveOptionCorrect) !== null && _item$canHaveOptionCo !== void 0 ? _item$canHaveOptionCo : false;
-      }
-      if (item.canHaveOptionValue) {
-        var _item$canHaveOptionVa;
-        elementOptions.canHaveOptionValue = (_item$canHaveOptionVa = item.canHaveOptionValue) !== null && _item$canHaveOptionVa !== void 0 ? _item$canHaveOptionVa : false;
-      }
-      if (item.canPopulateFromApi) {
-        var _item$canPopulateFrom;
-        elementOptions.canPopulateFromApi = (_item$canPopulateFrom = item.canPopulateFromApi) !== null && _item$canPopulateFrom !== void 0 ? _item$canPopulateFrom : false;
-      }
-      if (item.className) {
-        elementOptions.className = item.className;
-      }
-      if (element === 'Image') {
-        elementOptions.src = item.src;
-      }
-      if (element === 'DatePicker') {
-        elementOptions.dateFormat = item.dateFormat;
-      }
-      if (element === 'Download') {
-        elementOptions.href = item.href;
-        elementOptions.filePath = item.filePath;
-      }
-      if (element === 'NumberInput') {
-        elementOptions.step = item.step;
-        elementOptions.minValue = item.minValue;
-        elementOptions.maxValue = item.maxValue;
-      }
-      if (element === 'Range') {
-        elementOptions.step = item.step;
-        elementOptions.defaultValue = item.defaultValue;
-        elementOptions.minValue = item.minValue;
-        elementOptions.maxValue = item.maxValue;
-        elementOptions.minLabel = item.minLabel;
-        elementOptions.maxLabel = item.maxLabel;
-      }
-      if (element === 'MultiColumnRow') {
-        elementOptions.colCount = item.colCount;
-      }
-      if (item.defaultValue) {
-        elementOptions.defaultValue = item.defaultValue;
-      }
-      if (item.fieldName) {
-        elementOptions.fieldName = item.fieldName + ID.uuid();
-      }
-      if (!item["static"]) {
-        var _item$customName;
-        elementOptions.customName = (_item$customName = item.customName) !== null && _item$customName !== void 0 ? _item$customName : elementOptions.fieldName;
-      }
-      if (item.label) {
-        elementOptions.label = item.label.trim();
-      }
-      if (item.options) {
-        if (item.options.length > 0) {
-          elementOptions.options = item.options.map(function (x) {
-            return _objectSpread(_objectSpread({}, x), {}, {
-              key: "custom_option_".concat(ID.uuid())
-            });
+    // add placeholder to form input
+    if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags'].indexOf(element) !== -1) {
+      var _item$placeholder;
+      elementOptions.placeholder = (_item$placeholder = item.placeholder) !== null && _item$placeholder !== void 0 ? _item$placeholder : '';
+    }
+    if (item.type === 'custom') {
+      elementOptions.key = item.key;
+      elementOptions.custom = true;
+      elementOptions.forwardRef = item.forwardRef;
+      elementOptions.bare = item.bare;
+      elementOptions.props = item.props;
+      elementOptions.component = item.component || null;
+      elementOptions.customOptions = item.customOptions || [];
+    }
+    if (item["static"] && ['Header', 'Paragraph', 'Label'].indexOf(element) !== -1) {
+      elementOptions.bold = false;
+      elementOptions.italic = false;
+    }
+    if (item.canHaveLabelLocation || item.labelLocation !== undefined) {
+      var _item$labelLocation;
+      elementOptions.labelLocation = (_item$labelLocation = item.labelLocation) !== null && _item$labelLocation !== void 0 ? _item$labelLocation : 'ABOVE';
+    }
+    if (item.canHaveHelp || item.help !== undefined) {
+      var _item$help;
+      elementOptions.help = (_item$help = item.help) !== null && _item$help !== void 0 ? _item$help : '';
+    }
+    if (item.canHideLabel || item.hideLabel !== undefined) {
+      var _item$hideLabel;
+      elementOptions.hideLabel = (_item$hideLabel = item.hideLabel) !== null && _item$hideLabel !== void 0 ? _item$hideLabel : false;
+    }
+    if (item.canReadOnly || item.readOnly !== undefined) {
+      var _item$readOnly;
+      elementOptions.readOnly = (_item$readOnly = item.readOnly) !== null && _item$readOnly !== void 0 ? _item$readOnly : false;
+    }
+    if (item.canDefaultToday || item.defaultToday !== undefined) {
+      var _item$defaultToday;
+      elementOptions.defaultToday = (_item$defaultToday = item.defaultToday) !== null && _item$defaultToday !== void 0 ? _item$defaultToday : false;
+    }
+    if (item.content) {
+      elementOptions.content = item.content;
+    }
+    if (item.href) {
+      elementOptions.href = item.href;
+    }
+    if (item.inherited !== undefined) {
+      elementOptions.inherited = item.inherited;
+    }
+    if (item.canHavePageBreakBefore || item.pageBreakBefore !== undefined) {
+      var _item$pageBreakBefore;
+      elementOptions.pageBreakBefore = (_item$pageBreakBefore = item.pageBreakBefore) !== null && _item$pageBreakBefore !== void 0 ? _item$pageBreakBefore : false;
+    }
+    if (item.canHaveAlternateForm || item.alternateForm !== undefined) {
+      var _item$alternateForm;
+      elementOptions.alternateForm = (_item$alternateForm = item.alternateForm) !== null && _item$alternateForm !== void 0 ? _item$alternateForm : false;
+    }
+    if (item.canHaveDisplayHorizontal || item.inline !== undefined) {
+      var _item$inline;
+      elementOptions.inline = (_item$inline = item.inline) !== null && _item$inline !== void 0 ? _item$inline : false;
+    }
+    if (item.canHaveOptionCorrect) {
+      var _item$canHaveOptionCo;
+      elementOptions.canHaveOptionCorrect = (_item$canHaveOptionCo = item.canHaveOptionCorrect) !== null && _item$canHaveOptionCo !== void 0 ? _item$canHaveOptionCo : false;
+    }
+    if (item.canHaveOptionValue) {
+      var _item$canHaveOptionVa;
+      elementOptions.canHaveOptionValue = (_item$canHaveOptionVa = item.canHaveOptionValue) !== null && _item$canHaveOptionVa !== void 0 ? _item$canHaveOptionVa : false;
+    }
+    if (item.canPopulateFromApi) {
+      var _item$canPopulateFrom;
+      elementOptions.canPopulateFromApi = (_item$canPopulateFrom = item.canPopulateFromApi) !== null && _item$canPopulateFrom !== void 0 ? _item$canPopulateFrom : false;
+    }
+    if (item.className) {
+      elementOptions.className = item.className;
+    }
+    if (element === 'Step') {
+      elementOptions.conditional = item.conditional;
+      elementOptions.conditionalFieldName = item.conditionalFieldName;
+      elementOptions.conditionalFieldValue = item.conditionalFieldValue;
+    }
+    if (element === 'Image') {
+      elementOptions.src = item.src;
+    }
+    if (element === 'DatePicker') {
+      elementOptions.dateFormat = item.dateFormat;
+    }
+    if (element === 'Download') {
+      elementOptions.href = item.href;
+      elementOptions.filePath = item.filePath;
+    }
+    if (element === 'NumberInput') {
+      elementOptions.step = item.step;
+      elementOptions.minValue = item.minValue;
+      elementOptions.maxValue = item.maxValue;
+    }
+    if (element === 'Range') {
+      elementOptions.step = item.step;
+      elementOptions.defaultValue = item.defaultValue;
+      elementOptions.minValue = item.minValue;
+      elementOptions.maxValue = item.maxValue;
+      elementOptions.minLabel = item.minLabel;
+      elementOptions.maxLabel = item.maxLabel;
+    }
+    if (element === 'MultiColumnRow') {
+      elementOptions.colCount = item.colCount;
+    }
+    if (item.defaultValue) {
+      elementOptions.defaultValue = item.defaultValue;
+    }
+    if (item.fieldName) {
+      elementOptions.fieldName = item.fieldName + ID.uuid();
+    }
+    if (!item["static"]) {
+      var _item$customName;
+      elementOptions.customName = (_item$customName = item.customName) !== null && _item$customName !== void 0 ? _item$customName : elementOptions.fieldName;
+    }
+    if (item.label) {
+      elementOptions.label = item.label.trim();
+    }
+    if (item.options) {
+      if (item.options.length > 0) {
+        elementOptions.options = item.options.map(function (x) {
+          return _objectSpread(_objectSpread({}, x), {}, {
+            key: "custom_option_".concat(ID.uuid())
           });
-        } else {
-          elementOptions.options = Toolbar._defaultItemOptions(elementOptions.element);
-        }
-      }
-      return elementOptions;
-    }
-  }, {
-    key: "_onClick",
-    value: function _onClick(item) {
-      // ElementActions.createElement(this.create(item));
-      store.dispatch('create', this.create(item));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var _buildGroupItems = buildGroupItems(this.state.items),
-        items = _buildGroupItems.items,
-        grouped = _buildGroupItems.grouped,
-        groupKeys = _buildGroupItems.groupKeys;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "react-survey-builder-toolbar"
-      }, /*#__PURE__*/React.createElement("h4", null, "Survey Blocks Toolbox"), /*#__PURE__*/React.createElement("ul", null, items.map(this.renderItem), groupKeys.map(function (k) {
-        return /*#__PURE__*/React.createElement(ToolbarGroupItem, {
-          key: k,
-          name: k,
-          group: grouped.get(k),
-          renderItem: _this3.renderItem
         });
-      })));
-    }
-  }], [{
-    key: "_defaultItemOptions",
-    value: function _defaultItemOptions(element) {
-      switch (element) {
-        case 'Dropdown':
-          return [{
-            value: 'place_holder_option_1',
-            text: "Place holder option 1",
-            key: "dropdown_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_2',
-            text: "Place holder option 2",
-            key: "dropdown_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_3',
-            text: "Place holder option 3",
-            key: "dropdown_option_".concat(ID.uuid())
-          }];
-        case 'Tags':
-          return [{
-            value: 'place_holder_tag_1',
-            text: "Place holder option 1",
-            key: "tags_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_tag_2',
-            text: "Place holder option 2",
-            key: "tags_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_tag_3',
-            text: "Place holder option 3",
-            key: "tags_option_".concat(ID.uuid())
-          }];
-        case 'Checkboxes':
-          return [{
-            value: 'place_holder_option_1',
-            text: "Place holder option 1",
-            key: "checkboxes_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_2',
-            text: "Place holder option 2",
-            key: "checkboxes_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_3',
-            text: "Place holder option 3",
-            key: "checkboxes_option_".concat(ID.uuid())
-          }];
-        case 'RadioButtons':
-          return [{
-            value: 'place_holder_option_1',
-            text: "Place holder option 1",
-            key: "radiobuttons_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_2',
-            text: "Place holder option 2",
-            key: "radiobuttons_option_".concat(ID.uuid())
-          }, {
-            value: 'place_holder_option_3',
-            text: "Place holder option 3",
-            key: "radiobuttons_option_".concat(ID.uuid())
-          }];
-        default:
-          return [];
+      } else {
+        elementOptions.options = _defaultItemOptions(elementOptions.element);
       }
     }
-  }]);
-}(React.Component);
+    return elementOptions;
+  };
+  var _onClick = function _onClick(item) {
+    // ElementActions.createElement(create(item));
+    store.dispatch('create', create(item));
+  };
+  var renderItem = function renderItem(item) {
+    return /*#__PURE__*/React.createElement(ToolbarItem, {
+      item: item,
+      key: item.key,
+      onClick: function onClick() {
+        _onClick(item);
+      },
+      onCreate: create
+    });
+  };
+  React.useEffect(function () {
+    setDataItems(buildItems(dataItems, _defaultItems, customItems));
+  }, []);
+  var _buildGroupItems = buildGroupItems(dataItems),
+    ungroupedItems = _buildGroupItems.ungroupedItems,
+    grouped = _buildGroupItems.grouped,
+    groupKeys = _buildGroupItems.groupKeys;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "react-survey-builder-toolbar"
+  }, /*#__PURE__*/React.createElement("h4", null, "Survey Blocks Toolbox"), /*#__PURE__*/React.createElement("ul", null, ungroupedItems.map(renderItem), groupKeys.map(function (k) {
+    return /*#__PURE__*/React.createElement(ToolbarGroupItem, {
+      key: k,
+      name: k,
+      group: grouped.get(k),
+      renderItem: renderItem
+    });
+  })));
+};
 export default Toolbar;