@goldenpine/react-form-builder2 0.18.4-patch.1 → 0.20.3-build.1

package/lib/dynamic-option-list.js

@@ -91,10 +91,11 @@ var DynamicOptionList = /*#__PURE__*/function (_React$Component) {
     key: "addOption",
     value: function addOption(index) {
       var this_element = this.state.element;
+      var groupKey = this_element.element.toLowerCase();
       this_element.options.splice(index + 1, 0, {
         value: '',
         text: '',
-        key: _UUID["default"].uuid()
+        key: "".concat(groupKey, "_option_").concat(_UUID["default"].uuid())
       });
       this.props.updateElement.call(this.props.preview, this_element);
     }

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

@@ -6,86 +6,62 @@ 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDnd = require("react-dnd");
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
 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 _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 style = {
-  // display: 'inline-block',
-  // border: '1px dashed gray',
-  // padding: '0.5rem 1rem',
-  // backgroundColor: 'white',
   cursor: 'move'
 };
-var dragHandleSource = {
-  beginDrag: function beginDrag(props) {
-    var data = props.data,
-      index = props.index,
-      onDestroy = props.onDestroy,
-      setAsChild = props.setAsChild,
-      getDataById = props.getDataById;
-    return {
-      itemType: _ItemTypes["default"].BOX,
-      index: data.parentId ? -1 : index,
-      parentIndex: data.parentIndex,
-      id: data.id,
-      col: data.col,
-      onDestroy: onDestroy,
-      setAsChild: setAsChild,
-      getDataById: getDataById,
-      data: data
-    };
-  }
-};
-var DragHandle = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(DragHandle, _PureComponent);
-  var _super = _createSuper(DragHandle);
-  function DragHandle() {
-    (0, _classCallCheck2["default"])(this, DragHandle);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2["default"])(DragHandle, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var connectDragPreview = this.props.connectDragPreview;
-      if (connectDragPreview) {
-        // Use empty image as a drag preview so browsers don't draw it
-        // and we can draw whatever we want on the custom drag layer instead.
-        connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
-          // IE fallback: specify that we'd rather screenshot the node
-          // when it already knows it's being dragged so we can hide it with CSS.
-          captureDraggingState: true
-        });
+var DragHandle = function DragHandle(props) {
+  var data = props.data,
+    index = props.index,
+    onDestroy = props.onDestroy,
+    setAsChild = props.setAsChild,
+    getDataById = props.getDataById;
+  var _useDrag = (0, _reactDnd.useDrag)({
+      type: _ItemTypes["default"].BOX,
+      item: function item() {
+        return {
+          itemType: _ItemTypes["default"].BOX,
+          index: data.parentId ? -1 : index,
+          parentIndex: data.parentIndex,
+          id: data.id,
+          col: data.col,
+          onDestroy: onDestroy,
+          setAsChild: setAsChild,
+          getDataById: getDataById,
+          data: data
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var connectDragSource = this.props.connectDragSource;
-      return connectDragSource(/*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn is-isolated",
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "is-isolated fas fa-grip-vertical"
-      })));
-    }
-  }]);
-  return DragHandle;
-}(_react.PureComponent);
-var _default = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, dragHandleSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging()
-  };
-})(DragHandle);
+    }),
+    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 3),
+    dragRef = _useDrag2[1],
+    dragPreviewRef = _useDrag2[2];
+
+  // Use empty image as drag preview
+  (0, _react.useEffect)(function () {
+    dragPreviewRef((0, _reactDndHtml5Backend.getEmptyImage)(), {
+      // IE fallback: specify that we'd rather screenshot the node
+      // when it already knows it's being dragged so we can hide it with CSS.
+      captureDraggingState: true
+    });
+  }, [dragPreviewRef]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: dragRef,
+    className: "btn is-isolated",
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "is-isolated fas fa-grip-vertical"
+  }));
+};
+var _default = DragHandle;
 exports["default"] = _default;

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

@@ -18,9 +18,7 @@ var layerStyles = {
   width: '100%',
   height: '100%'
 };
-function getItemStyles(props) {
-  var initialOffset = props.initialOffset,
-    currentOffset = props.currentOffset;
+function getItemStyles(initialOffset, currentOffset) {
   if (!initialOffset || !currentOffset) {
     return {
       display: 'none'
@@ -34,10 +32,21 @@ function getItemStyles(props) {
     WebkitTransform: transform
   };
 }
-var CustomDragLayer = function CustomDragLayer(props) {
-  var item = props.item,
-    itemType = props.itemType,
-    isDragging = props.isDragging;
+var CustomDragLayer = function CustomDragLayer() {
+  var _useDragLayer = (0, _reactDnd.useDragLayer)(function (monitor) {
+      return {
+        item: monitor.getItem(),
+        itemType: monitor.getItemType(),
+        initialOffset: monitor.getInitialSourceClientOffset(),
+        currentOffset: monitor.getSourceClientOffset(),
+        isDragging: monitor.isDragging()
+      };
+    }),
+    itemType = _useDragLayer.itemType,
+    isDragging = _useDragLayer.isDragging,
+    item = _useDragLayer.item,
+    initialOffset = _useDragLayer.initialOffset,
+    currentOffset = _useDragLayer.currentOffset;
   function renderItem() {
     switch (itemType) {
       case _ItemTypes["default"].BOX:
@@ -54,16 +63,8 @@ var CustomDragLayer = function CustomDragLayer(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: layerStyles
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: getItemStyles(props)
+    style: getItemStyles(initialOffset, currentOffset)
   }, renderItem()));
 };
-var _default = (0, _reactDnd.DragLayer)(function (monitor) {
-  return {
-    item: monitor.getItem(),
-    itemType: monitor.getItemType(),
-    initialOffset: monitor.getInitialSourceClientOffset(),
-    currentOffset: monitor.getSourceClientOffset(),
-    isDragging: monitor.isDragging()
-  };
-})(CustomDragLayer);
+var _default = CustomDragLayer;
 exports["default"] = _default;

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

@@ -12,7 +12,7 @@ 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; }
+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; } /* eslint-disable no-nested-ternary */ /* eslint-disable import/prefer-default-export */ /* eslint-disable no-unused-vars */
 var boxStyles = {
   border: '1px dashed gray',
   padding: '0.5rem 1rem',
@@ -42,14 +42,6 @@ var BoxDragPreview = function BoxDragPreview(_ref2) {
   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"

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

@@ -14,8 +14,8 @@ 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';
+ * <HeaderBar />
+ */ // import Grip from '../multi-column/grip';
 var HeaderBar = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(HeaderBar, _React$Component);
   var _super = _createSuper(HeaderBar);

package/lib/form-elements/index.js

@@ -29,7 +29,7 @@ var _myxss = _interopRequireDefault(require("./myxss"));
 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; } } // eslint-disable-next-line max-classes-per-file
+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; } } /* eslint-disable quote-props */ // eslint-disable-next-line max-classes-per-file
 var FormElements = {};
 var Header = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Header, _React$Component);
@@ -923,7 +923,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component20) {
                 return (0, _isomorphicFetch["default"])(sourceUrl, {
                   method: 'GET',
                   headers: {
-                    Accept: 'application/json',
+                    'Accept': 'application/json',
                     'Content-Type': 'application/json; charset=utf-8'
                   },
                   responseType: 'blob'

package/lib/form-elements/star-rating.js

@@ -8,12 +8,12 @@ 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 _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 _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _classnames = _interopRequireDefault(require("classnames"));
 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; } }
@@ -40,6 +40,15 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.min = 0;
     _this.max = props.ratingAmount || 5;
+
+    // Pre-bind methods to avoid creating new functions on each render
+    _this.handleMouseLeave = _this.handleMouseLeave.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
+
+    // Create refs properly
+    _this.rootNode = /*#__PURE__*/_react["default"].createRef();
+    _this.ratingContainerNode = /*#__PURE__*/_react["default"].createRef();
     var ratingVal = props.rating;
     var ratingCache = {
       pos: ratingVal ? _this.getStarRatingPosition(ratingVal) : 0,
@@ -70,39 +79,24 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       }
       return stars;
     }
-
-    // componentWillMount() {
-    //   this.min = 0;
-    //   this.max = this.props.ratingAmount || 5;
-    //   if (this.props.rating) {
-    //     this.state.editing = this.props.editing || false;
-    //     const ratingVal = this.props.rating;
-    //     this.state.ratingCache.pos = this.getStarRatingPosition(ratingVal);
-    //     this.state.ratingCache.rating = ratingVal;
-
-    //     this.setState({
-    //       ratingCache: this.state.ratingCache,
-    //       rating: ratingVal,
-    //       pos: this.getStarRatingPosition(ratingVal),
-    //     });
-    //   }
-    // }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.root = _reactDom["default"].findDOMNode(this.rootNode);
-      this.ratingContainer = _reactDom["default"].findDOMNode(this.node);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      delete this.root;
-      delete this.ratingContainer;
+      // Initialize with proper values from props
+      if (this.props.rating) {
+        this.setState({
+          pos: this.getStarRatingPosition(this.props.rating),
+          rating: this.props.rating
+        });
+      }
     }
+
+    // REMOVED componentWillUnmount as it wasn't doing anything useful
   }, {
     key: "getPosition",
     value: function getPosition(e) {
-      return e.pageX - this.root.getBoundingClientRect().left;
+      if (!this.rootNode.current) return 0;
+      return e.pageX - this.rootNode.current.getBoundingClientRect().left;
     }
   }, {
     key: "applyPrecision",
@@ -118,6 +112,7 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getWidthFromValue",
     value: function getWidthFromValue(val) {
+      if (val === null || val === undefined || typeof val !== 'number') return 0;
       var min = this.min;
       var max = this.max;
       if (val <= min || min === max) {
@@ -126,13 +121,15 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       if (val >= max) {
         return 100;
       }
-      return val / (max - min) * 100;
+      return (val - min) / (max - min) * 100;
     }
   }, {
     key: "getValueFromPosition",
     value: function getValueFromPosition(pos) {
+      if (!this.ratingContainerNode.current) return 0;
       var precision = this.getDecimalPlaces(this.props.step);
-      var maxWidth = this.ratingContainer.offsetWidth;
+      var maxWidth = this.ratingContainerNode.current.offsetWidth;
+      if (!maxWidth) return 0;
       var diff = this.max - this.min;
       var factor = diff * pos / (maxWidth * this.props.step);
       factor = Math.ceil(factor);
@@ -144,8 +141,7 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
     key: "calculate",
     value: function calculate(pos) {
       var val = this.getValueFromPosition(pos);
-      var width = this.getWidthFromValue(val);
-      width += '%';
+      var width = "".concat(this.getWidthFromValue(val), "%");
       return {
         width: width,
         val: val
@@ -173,9 +169,9 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
         xmlns: "http://www.w3.org/2000/svg"
       }, /*#__PURE__*/_react["default"].createElement("g", {
         stroke: "none",
-        "stroke-width": "1",
+        strokeWidth: "1",
         fill: "none",
-        "fill-rule": "evenodd"
+        fillRule: "evenodd"
       }, /*#__PURE__*/_react["default"].createElement("polygon", {
         id: "star-flat",
         points: "143 225 54.8322122 271.352549 71.6707613 173.176275 0.341522556 103.647451 98.9161061 89.3237254 143 0 187.083894 89.3237254 285.658477 103.647451 214.329239 173.176275 231.167788 271.352549 "
@@ -192,26 +188,46 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleMouseMove",
     value: function handleMouseMove(e) {
-      // get hover position
-      var ratingEvent = this.getRatingEvent(e);
-      this.updateRating(ratingEvent.width, ratingEvent.val);
-    }
-  }, {
-    key: "updateRating",
-    value: function updateRating(width, val) {
-      this.setState({
-        pos: width,
-        rating: val
-      });
+      // Only process if editing is enabled
+      if (!this.props.disabled && (this.state.editing || this.props.editing)) {
+        // get hover position
+        var ratingEvent = this.getRatingEvent(e);
+        this.setState({
+          pos: ratingEvent.width,
+          rating: ratingEvent.val
+        });
+      }
     }
+
+    // REMOVED updateRating method which was causing issues
+
+    // Fixed shouldComponentUpdate to prevent infinite loops
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
-      if (nextProps !== this.props) {
-        this.updateRating(this.getStarRatingPosition(nextProps.rating), nextProps.rating);
+      // Don't trigger a state update from this method!
+      if (nextProps.rating !== this.props.rating) {
         return true;
       }
-      return nextState.ratingCache.rating !== this.state.ratingCache.rating || nextState.rating !== this.state.rating;
+      return nextState.ratingCache.rating !== this.state.ratingCache.rating || nextState.rating !== this.state.rating || nextState.pos !== this.state.pos;
+    }
+
+    // Handle rating changes in componentDidUpdate instead
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Only update if the rating prop changed
+      if (prevProps.rating !== this.props.rating && this.props.rating !== this.state.rating) {
+        // Update state without causing an infinite loop
+        this.setState({
+          pos: this.getStarRatingPosition(this.props.rating),
+          rating: this.props.rating,
+          ratingCache: {
+            pos: this.getStarRatingPosition(this.props.rating),
+            rating: this.props.rating
+          }
+        });
+      }
     }
   }, {
     key: "handleClick",
@@ -222,15 +238,24 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
         e.preventDefault();
         return false;
       }
+
+      // Get the current rating based on click position
+      var ratingEvent = this.getRatingEvent(e);
       var ratingCache = {
-        pos: this.state.pos,
-        rating: this.state.rating,
+        pos: ratingEvent.width,
+        rating: ratingEvent.val,
         caption: this.props.caption,
         name: this.props.name
       };
+
+      // Update the state with new values
       this.setState({
-        ratingCache: ratingCache
+        ratingCache: ratingCache,
+        pos: ratingEvent.width,
+        rating: ratingEvent.val
       });
+
+      // Call the callback with the new rating
       this.props.onRatingClick(e, ratingCache);
       return true;
     }
@@ -245,31 +270,23 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _cx,
-        _this2 = this;
-      // let caption = null;
+      var _cx;
       var classes = (0, _classnames["default"])((_cx = {
         'react-star-rating__root': true,
         'rating-disabled': this.props.disabled
       }, (0, _defineProperty2["default"])(_cx, "react-star-rating__size--".concat(this.props.size), this.props.size), (0, _defineProperty2["default"])(_cx, 'rating-editing', this.state.editing), _cx));
 
-      // is there a caption?
-      // if (this.props.caption) {
-      //   caption = (<span className="react-rating-caption">{this.props.caption}</span>);
-      // }
-
       // are we editing this rating?
       var starRating;
-      if (this.state.editing) {
+      var isEditable = !this.props.disabled && (this.state.editing || this.props.editing);
+      if (isEditable) {
         starRating = /*#__PURE__*/_react["default"].createElement("div", {
-          ref: function ref(c) {
-            return _this2.node = c;
-          },
+          ref: this.ratingContainerNode,
           className: "rating-container rating-gly-star",
           "data-content": this.state.glyph,
-          onMouseMove: this.handleMouseMove.bind(this),
-          onMouseLeave: this.handleMouseLeave.bind(this),
-          onClick: this.handleClick.bind(this)
+          onMouseMove: this.handleMouseMove,
+          onMouseLeave: this.handleMouseLeave,
+          onClick: this.handleClick
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: "rating-stars",
           "data-content": this.state.glyph,
@@ -279,9 +296,7 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
         }));
       } else {
         starRating = /*#__PURE__*/_react["default"].createElement("div", {
-          ref: function ref(c) {
-            return _this2.node = c;
-          },
+          ref: this.ratingContainerNode,
           className: "rating-container rating-gly-star",
           "data-content": this.state.glyph
         }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -295,26 +310,23 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: "react-star-rating"
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        ref: function ref(c) {
-          return _this2.rootNode = c;
-        },
+        ref: this.rootNode,
         style: {
-          cursor: 'pointer'
+          cursor: isEditable ? 'pointer' : 'default'
         },
         className: classes
-      }, starRating, /*#__PURE__*/_react["default"].createElement("input", (0, _defineProperty2["default"])({
+      }, starRating, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         name: this.props.name,
-        value: this.state.ratingCache.rating,
+        value: this.state.rating || 0,
         style: {
-          display: 'none !important'
+          display: 'none !important',
+          width: 65
         },
         min: this.min,
         max: this.max,
         readOnly: true
-      }, "style", {
-        width: 65
-      }))));
+      })));
     }
   }]);
   return StarRating;

package/lib/form-elements-edit.js

@@ -68,9 +68,8 @@ var FormElementsEdit = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onEditorStateChange",
     value: function onEditorStateChange(index, property, editorContent) {
-      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
-      //const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ')
-      //  .replace(/(?:\r\n|\r|\n)/g, ' ');
+      // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
+      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, ' ');
       var this_element = this.state.element;
       this_element[property] = html;
       this.setState({