react-survey-builder 1.0.1

package/lib/survey-elements/component-drag-preview.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoxDragPreview = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+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; }
+var boxStyles = {
+  border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  cursor: 'move'
+};
+var styles = {
+  display: 'inline-block',
+  transform: 'rotate(-7deg)',
+  WebkitTransform: 'rotate(-7deg)'
+};
+var Box = function Box(_ref) {
+  var title = _ref.title,
+    color = _ref.color;
+  var backgroundColor = color ? '#059862' : 'white';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, boxStyles), {}, {
+      backgroundColor: backgroundColor
+    })
+  }, title);
+};
+var BoxDragPreview = exports.BoxDragPreview = function BoxDragPreview(_ref2) {
+  var item = _ref2.item;
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    tickTock = _React$useState2[0],
+    setTickTock = _React$useState2[1];
+  var text = item.data.content ? item.data.content : item.data.label ? item.data.label : item.data.text;
+  var isLongText = text.length > 20;
+  var previewText = isLongText ? "".concat(text.slice(0, 20), "...") : text;
+
+  // React.useEffect(function subscribeToIntervalTick() {
+  //     const interval = setInterval(() => {
+  //         setTickTock(!tickTock);
+  //     }, 500);
+  //     return () => clearInterval(interval);
+  // }, [tickTock]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles,
+    role: "BoxPreview"
+  }, /*#__PURE__*/_react["default"].createElement(Box, {
+    title: previewText,
+    color: tickTock
+  }));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _headerBar = _interopRequireDefault(require("./header-bar"));
+var ComponentHeader = function ComponentHeader(props) {
+  if (props.mutable) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", null, props.data.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "preview-page-break"
+  }, "Page Break"), /*#__PURE__*/_react["default"].createElement(_headerBar["default"], {
+    isFieldSet: props.isFieldSet,
+    parent: props.parent,
+    editModeOn: props.editModeOn,
+    data: props.data,
+    index: props.index,
+    setAsChild: props.setAsChild,
+    onDestroy: props._onDestroy,
+    onEdit: props.onEdit,
+    "static": props.data["static"],
+    required: props.data.required
+  }));
+};
+var _default = exports["default"] = ComponentHeader;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _myxss = _interopRequireDefault(require("./myxss"));
+var ComponentLabel = function ComponentLabel(props) {
+  var hasRequiredLabel = props.data.hasOwnProperty('required') && props.data.required === true && !props.read_only;
+  var labelText = _myxss["default"].process(props.data.label);
+  if (!labelText || !labelText.trim()) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    className: props.className || 'form-label'
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: labelText
+    }
+  }), hasRequiredLabel && !props.hide_required_alert && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "label-required badge badge-danger"
+  }, "Required"));
+};
+var _default = exports["default"] = ComponentLabel;

package/lib/survey-elements/custom-element.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _componentHeader = _interopRequireDefault(require("./component-header"));
+var _componentLabel = _interopRequireDefault(require("./component-label"));
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var CustomElement = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(CustomElement, _React$Component);
+  var _super = _createSuper(CustomElement);
+  function CustomElement(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CustomElement);
+    _this = _super.call(this, props);
+    _this.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _createClass2["default"])(CustomElement, [{
+    key: "render",
+    value: function render() {
+      var bare = this.props.data.bare;
+      var props = {};
+      props.name = this.props.data.field_name;
+      props.defaultValue = this.props.defaultValue;
+      if (this.props.mutable && this.props.data.forwardRef) {
+        props.ref = this.inputField;
+      }
+      if (this.props.read_only) {
+        props.disabled = 'disabled';
+      }
+
+      // Return if component is invalid.
+      if (!this.props.data.component) return null;
+      var Element = this.props.data.component;
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.data.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: baseClasses,
+        style: _objectSpread({}, this.props.style)
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), bare ? /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+        data: this.props.data
+      }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
+        className: "form-label"
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+        data: this.props.data
+      }, this.props.data.props, props))));
+    }
+  }]);
+  return CustomElement;
+}(_react["default"].Component);
+CustomElement.propTypes = {};
+var _default = exports["default"] = CustomElement;

package/lib/survey-elements/date-picker.js

@@ -0,0 +1,278 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _dateFns = require("date-fns");
+var _componentHeader = _interopRequireDefault(require("./component-header"));
+var _componentLabel = _interopRequireDefault(require("./component-label"));
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+// This is the utility function that will attempt to parse a date string
+// using several different formats until it finds one that works.
+var DatePicker = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(DatePicker, _React$Component);
+  var _super = _createSuper(DatePicker);
+  function DatePicker(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DatePicker);
+    _this = _super.call(this, props);
+    _this.inputField = /*#__PURE__*/_react["default"].createRef();
+    var _DatePicker$updateFor = DatePicker.updateFormat(props, null),
+      formatMask = _DatePicker$updateFor.formatMask;
+    var state = DatePicker.updateDateTime(props, {
+      formatMask: formatMask
+    }, formatMask);
+
+    // Ensure state.value and state.internalValue are not undefined
+    state.value = state.value || '';
+    state.internalValue = state.internalValue || '';
+    _this.state = state;
+    return _this;
+  }
+  (0, _createClass2["default"])(DatePicker, [{
+    key: "handleBirthdayFocus",
+    value: function handleBirthdayFocus() {
+      this.setState({
+        birthdayFocused: true
+      }, function () {
+        document.getElementById('year').placeholder = 'YYYY';
+        document.getElementById('day').placeholder = 'DD';
+        document.getElementById('month').placeholder = 'MM';
+      });
+    }
+  }, {
+    key: "handleDateChange",
+    value: function handleDateChange(event) {
+      var _this$state = this.state,
+        month = _this$state.month,
+        day = _this$state.day,
+        year = _this$state.year;
+      var newValue = event.target.value;
+      switch (event.target.name) {
+        case 'month':
+          if (newValue > 12) {
+            this.setState({
+              month: '12'
+            });
+          } else {
+            this.setState({
+              month: newValue
+            });
+          }
+          break;
+        case 'day':
+          if (newValue > 31) {
+            this.setState({
+              day: '31'
+            });
+          } else {
+            this.setState({
+              day: newValue
+            });
+          }
+          break;
+        case 'year':
+          if (newValue > new Date().getFullYear()) {
+            this.setState({
+              year: new Date().getFullYear().toString()
+            });
+          } else {
+            this.setState({
+              year: newValue
+            });
+          }
+          break;
+        default:
+          break;
+      }
+      var updatedMonth = event.target.name === 'month' ? newValue : month;
+      var updatedDay = event.target.name === 'day' ? newValue : day;
+      var updatedYear = event.target.name === 'year' ? newValue : year;
+      this.setState({
+        value: {
+          year: updatedYear,
+          month: updatedMonth,
+          day: updatedDay
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var placeholder = this.props.data.placeholder;
+      var props = {};
+      props.type = 'date';
+      props.className = 'form-control';
+      props.name = this.props.data.field_name;
+      var readOnly = this.props.data.readOnly || this.props.read_only;
+      this.state.formatMask.toLowerCase();
+      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';
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: baseClasses,
+        style: _objectSpread({}, this.props.style)
+      }, /*#__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("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
+        type: "text",
+        name: props.name,
+        ref: props.ref,
+        readOnly: readOnly,
+        placeholder: placeholder || this.state.placeholder,
+        value: this.state.value,
+        className: "form-control"
+      }), !readOnly && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "input-group",
+        style: {
+          border: '1px solid #ced4da',
+          borderRadius: '0.25rem',
+          marginTop: 10
+        }
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        value: this.state.month,
+        onKeyUp: function onKeyUp(e) {
+          return e.target.value && e.target.value.length === 2 && document.getElementById('day').focus();
+        },
+        name: "month",
+        id: "month",
+        onChange: function onChange(e) {
+          return _this2.handleDateChange(e);
+        },
+        className: "form-control",
+        type: "text",
+        style: {
+          border: 'none'
+        },
+        onFocus: function onFocus(e) {
+          return _this2.handleBirthdayFocus();
+        },
+        placeholder: placeholder || this.state.placeholder,
+        maxLength: "2",
+        pattern: "\\d*"
+      }), this.state.birthdayFocused && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          display: this.state.year || this.state.day || this.state.month ? '' : 'none',
+          alignSelf: 'center'
+        }
+      }, "/"), /*#__PURE__*/_react["default"].createElement("input", {
+        value: this.state.day,
+        onKeyUp: function onKeyUp(e) {
+          return e.target.value && e.target.value.length === 2 && document.getElementById('year').focus();
+        },
+        name: "day",
+        id: "day",
+        className: "form-control",
+        type: "text",
+        style: {
+          border: 'none'
+        },
+        onChange: function onChange(e) {
+          return _this2.handleDateChange(e);
+        },
+        onFocus: function onFocus(e) {
+          return _this2.handleBirthdayFocus();
+        },
+        maxLength: "2",
+        pattern: "\\d*"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          display: this.state.year || this.state.day || this.state.month ? '' : 'none',
+          alignSelf: 'center'
+        }
+      }, "/"), /*#__PURE__*/_react["default"].createElement("input", {
+        value: this.state.year,
+        name: "year",
+        id: "year",
+        className: "form-control",
+        type: "text",
+        style: {
+          border: 'none'
+        },
+        onFocus: function onFocus(e) {
+          return _this2.handleBirthdayFocus();
+        },
+        maxLength: "4",
+        pattern: "\\d*",
+        onChange: function onChange(e) {
+          return _this2.handleDateChange(e);
+        }
+      }))))));
+    }
+  }], [{
+    key: "updateDateTime",
+    value: function updateDateTime(props, state, formatMask) {
+      var value;
+      var internalValue;
+      var defaultToday = props.data.defaultToday;
+      var iOSFormatMask = 'yyyy-MM-dd';
+      if (defaultToday && (props.defaultValue === '' || props.defaultValue === undefined)) {
+        var dateToFormat = new Date();
+        value = dateToFormat.toString() === 'Invalid Date' ? '' : (0, _dateFns.format)(dateToFormat, iOSFormatMask);
+        internalValue = dateToFormat.toString() === 'Invalid Date' ? '' : dateToFormat; // Ensure not undefined
+      } else {
+        value = props.defaultValue || ''; // Ensure not undefined
+        if (value === '') {
+          internalValue = '';
+        } else {
+          var parsedDate = (0, _dateFns.parse)(value, formatMask, new Date());
+          internalValue = parsedDate.toString() === 'Invalid Date' ? '' : parsedDate; // Ensure not undefined
+        }
+      }
+      return {
+        value: value,
+        internalValue: internalValue,
+        placeholder: formatMask.toLowerCase(),
+        defaultToday: defaultToday,
+        formatMask: formatMask
+      };
+    }
+  }, {
+    key: "updateFormat",
+    value: function updateFormat(props, oldFormatMask) {
+      var _props$data = props.data,
+        showTimeSelect = _props$data.showTimeSelect,
+        showTimeSelectOnly = _props$data.showTimeSelectOnly,
+        showTimeInput = _props$data.showTimeInput;
+      var dateFormat = showTimeSelect && showTimeSelectOnly ? '' : props.data.dateFormat;
+      var timeFormat = showTimeSelect || showTimeInput ? props.data.timeFormat : '';
+      var formatMask = "".concat(dateFormat, " ").concat(timeFormat).trim();
+      var updated = formatMask !== oldFormatMask;
+      return {
+        updated: updated,
+        formatMask: formatMask
+      };
+    }
+  }, {
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var _DatePicker$updateFor2 = DatePicker.updateFormat(props, state.formatMask),
+        updated = _DatePicker$updateFor2.updated,
+        formatMask = _DatePicker$updateFor2.formatMask;
+      if (props.data.defaultToday !== state.defaultToday || updated) {
+        return DatePicker.updateDateTime(props, state, formatMask);
+      }
+      return null;
+    }
+  }]);
+  return DatePicker;
+}(_react["default"].Component);
+var _default = exports["default"] = DatePicker;

package/lib/survey-elements/header-bar.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _componentDragHandle = _interopRequireDefault(require("./component-drag-handle"));
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
+  * <HeaderBar />
+  */ // import Grip from '../multi-column/grip';
+var HeaderBar = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(HeaderBar, _React$Component);
+  var _super = _createSuper(HeaderBar);
+  function HeaderBar() {
+    (0, _classCallCheck2["default"])(this, HeaderBar);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(HeaderBar, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "toolbar-header"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "badge badge-secondary"
+      }, this.props.data.text), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "toolbar-header-buttons"
+      }, this.props.data.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn is-isolated",
+        onClick: this.props.editModeOn.bind(this.props.parent, this.props.data)
+      }, /*#__PURE__*/_react["default"].createElement("i", {
+        className: "is-isolated fas fa-edit"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn is-isolated",
+        onClick: this.props.onDestroy.bind(this, this.props.data)
+      }, /*#__PURE__*/_react["default"].createElement("i", {
+        className: "is-isolated fas fa-trash"
+      })), /*#__PURE__*/_react["default"].createElement(_componentDragHandle["default"], {
+        data: this.props.data,
+        index: this.props.index,
+        onDestroy: this.props.onDestroy,
+        setAsChild: this.props.setAsChild
+      })));
+    }
+  }]);
+  return HeaderBar;
+}(_react["default"].Component);