@goldenpine/react-form-builder2 0.18.4-patch.1

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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 = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 = function BoxDragPreview(_ref2) {
+  var item = _ref2.item;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tickTock = _useState2[0],
+    setTickTock = _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;
+
+  // 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
+  }));
+};
+exports.BoxDragPreview = BoxDragPreview;

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

@@ -0,0 +1,30 @@
+"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 = ComponentHeader;
+exports["default"] = _default;

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

@@ -0,0 +1,30 @@
+"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) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    className: props.className || 'form-label'
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: labelText
+    }
+  }), hasRequiredLabel && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "label-required",
+    style: {
+      color: "red"
+    }
+  }, "*"));
+};
+var _default = ComponentLabel;
+exports["default"] = _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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 = _interopRequireWildcard(require("react"));
+var _componentHeader = _interopRequireDefault(require("./component-header"));
+var _componentLabel = _interopRequireDefault(require("./component-label"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 (_Component) {
+  (0, _inherits2["default"])(CustomElement, _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.Component);
+CustomElement.propTypes = {};
+var _default = CustomElement;
+exports["default"] = _default;

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

@@ -0,0 +1,185 @@
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _dateFns = require("date-fns");
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+var _componentHeader = _interopRequireDefault(require("./component-header"));
+var _componentLabel = _interopRequireDefault(require("./component-label"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 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);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (dt) {
+      var placeholder;
+      var formatMask = _this.state.formatMask;
+      if (dt && dt.target) {
+        placeholder = dt && dt.target && dt.target.value === '' ? formatMask.toLowerCase() : '';
+        var formattedDate = dt.target.value ? (0, _dateFns.format)((0, _dateFns.parseISO)(dt.target.value), formatMask) : '';
+        _this.setState({
+          value: formattedDate,
+          internalValue: formattedDate,
+          placeholder: placeholder
+        });
+      } else {
+        _this.setState({
+          value: dt ? (0, _dateFns.format)(dt, formatMask) : '',
+          internalValue: dt,
+          placeholder: placeholder
+        });
+      }
+    });
+    _this.inputField = /*#__PURE__*/_react["default"].createRef();
+    var _DatePicker$updateFor = DatePicker.updateFormat(props, null),
+      _formatMask = _DatePicker$updateFor.formatMask;
+    _this.state = DatePicker.updateDateTime(props, {
+      formatMask: _formatMask
+    }, _formatMask);
+    return _this;
+  }
+
+  // formatMask = '';
+  (0, _createClass2["default"])(DatePicker, [{
+    key: "render",
+    value: function render() {
+      var _this$props$data = this.props.data,
+        showTimeSelect = _this$props$data.showTimeSelect,
+        showTimeSelectOnly = _this$props$data.showTimeSelectOnly,
+        showTimeInput = _this$props$data.showTimeInput;
+      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;
+      var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+      var placeholderText = 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: this.state.placeholder,
+        value: this.state.value,
+        className: "form-control"
+      }), iOS && !readOnly && /*#__PURE__*/_react["default"].createElement("input", {
+        type: "date",
+        name: props.name,
+        ref: props.ref,
+        onChange: this.handleChange,
+        dateFormat: "MM/DD/YYYY",
+        value: this.state.value,
+        className: "form-control"
+      }), !iOS && !readOnly && /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
+        name: props.name,
+        ref: props.ref,
+        onChange: this.handleChange,
+        selected: this.state.internalValue,
+        todayButton: 'Today',
+        className: "form-control",
+        isClearable: true,
+        showTimeSelect: showTimeSelect,
+        showTimeSelectOnly: showTimeSelectOnly,
+        showTimeInput: showTimeInput,
+        dateFormat: this.state.formatMask,
+        portalId: "root-portal",
+        autoComplete: "off",
+        placeholderText: placeholderText
+      }))));
+    }
+  }], [{
+    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: "updateDateTime",
+    value: function updateDateTime(props, state, formatMask) {
+      var value;
+      var internalValue;
+      var defaultToday = props.data.defaultToday;
+      if (defaultToday && (props.defaultValue === '' || props.defaultValue === undefined)) {
+        value = (0, _dateFns.format)(new Date(), formatMask);
+        internalValue = new Date();
+      } else {
+        value = props.defaultValue;
+        if (value === '' || value === undefined) {
+          internalValue = undefined;
+        } else {
+          internalValue = (0, _dateFns.parse)(value, state.formatMask, new Date());
+        }
+      }
+      return {
+        value: value,
+        internalValue: internalValue,
+        placeholder: formatMask.toLowerCase(),
+        defaultToday: defaultToday,
+        formatMask: state.formatMask
+      };
+    }
+
+    // componentWillReceiveProps(props) {
+    //   const formatUpdated = this.updateFormat(props);
+    //   if ((props.data.defaultToday !== !this.state.defaultToday) || formatUpdated) {
+    //     const state = this.updateDateTime(props, this.formatMask);
+    //     this.setState(state);
+    //   }
+    // }
+  }, {
+    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) {
+        var newState = DatePicker.updateDateTime(props, state, formatMask);
+        return newState;
+      }
+      return null;
+    }
+  }]);
+  return DatePicker;
+}(_react["default"].Component);
+var _default = DatePicker;
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"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 = /*#__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);
+exports["default"] = HeaderBar;