react-survey-builder 1.0.1

package/lib/survey-elements/myxss.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 _xss = _interopRequireDefault(require("xss"));
+var myxss = new _xss["default"].FilterXSS({
+  whiteList: {
+    a: ['href', 'title', 'target'],
+    u: [],
+    br: [],
+    b: [],
+    i: [],
+    ol: ['style'],
+    ul: ['style'],
+    li: [],
+    p: ['style'],
+    sub: [],
+    sup: [],
+    div: ['style'],
+    em: [],
+    strong: [],
+    span: ['style'],
+    ins: []
+  }
+});
+var _default = exports["default"] = myxss;

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

@@ -0,0 +1,335 @@
+"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 _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; } }
+/**
+ * @fileoverview react-star-rating
+ * @author @cameronjroe
+ * <StarRating
+ *   name={string} - name for form input (required)
+ *   caption={string} - caption for rating (optional)
+ *   ratingAmount={number} - the rating amount (required, default: 5)
+ *   rating={number} - a set rating between the rating amount (optional)
+ *   disabled={boolean} - whether to disable the rating from being selected (optional)
+ *   editing={boolean} - whether the rating is explicitly in editing mode (optional)
+ *   size={string} - size of stars (optional)
+ *   onRatingClick={function} - a handler function that gets called onClick of the rating (optional)
+ *   />
+ */
+var StarRating = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(StarRating, _React$Component);
+  var _super = _createSuper(StarRating);
+  function StarRating(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, StarRating);
+    _this = _super.call(this, props);
+    _this.min = 0;
+    _this.max = props.ratingAmount || 5;
+    var ratingVal = props.rating;
+    var ratingCache = {
+      pos: ratingVal ? _this.getStarRatingPosition(ratingVal) : 0,
+      rating: props.rating
+    };
+    _this.state = {
+      ratingCache: ratingCache,
+      editing: props.editing || !props.rating,
+      stars: 5,
+      rating: ratingCache.rating,
+      pos: ratingCache.pos,
+      glyph: _this.getStars()
+    };
+    return _this;
+  }
+
+  /**
+   * Gets the stars based on ratingAmount
+   * @return {string} stars
+   */
+  (0, _createClass2["default"])(StarRating, [{
+    key: "getStars",
+    value: function getStars() {
+      var stars = '';
+      var numRating = this.props.ratingAmount;
+      for (var i = 0; i < numRating; i++) {
+        stars += "\u2605";
+      }
+      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;
+    }
+  }, {
+    key: "getPosition",
+    value: function getPosition(e) {
+      return e.pageX - this.root.getBoundingClientRect().left;
+    }
+  }, {
+    key: "applyPrecision",
+    value: function applyPrecision(val, precision) {
+      return parseFloat(val.toFixed(precision));
+    }
+  }, {
+    key: "getDecimalPlaces",
+    value: function getDecimalPlaces(num) {
+      var match = "".concat(num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+      return !match ? 0 : Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
+    }
+  }, {
+    key: "getWidthFromValue",
+    value: function getWidthFromValue(val) {
+      var min = this.min;
+      var max = this.max;
+      if (val <= min || min === max) {
+        return 0;
+      }
+      if (val >= max) {
+        return 100;
+      }
+      return val / (max - min) * 100;
+    }
+  }, {
+    key: "getValueFromPosition",
+    value: function getValueFromPosition(pos) {
+      var precision = this.getDecimalPlaces(this.props.step);
+      var maxWidth = this.ratingContainer.offsetWidth;
+      var diff = this.max - this.min;
+      var factor = diff * pos / (maxWidth * this.props.step);
+      factor = Math.ceil(factor);
+      var val = this.applyPrecision(parseFloat(this.min + factor * this.props.step), precision);
+      val = Math.max(Math.min(val, this.max), this.min);
+      return val;
+    }
+  }, {
+    key: "calculate",
+    value: function calculate(pos) {
+      var val = this.getValueFromPosition(pos);
+      var width = this.getWidthFromValue(val);
+      width += '%';
+      return {
+        width: width,
+        val: val
+      };
+    }
+  }, {
+    key: "getStarRatingPosition",
+    value: function getStarRatingPosition(val) {
+      var width = "".concat(this.getWidthFromValue(val), "%");
+      return width;
+    }
+  }, {
+    key: "getRatingEvent",
+    value: function getRatingEvent(e) {
+      var pos = this.getPosition(e);
+      return this.calculate(pos);
+    }
+  }, {
+    key: "getSvg",
+    value: function getSvg() {
+      return /*#__PURE__*/_react["default"].createElement("svg", {
+        className: "react-star-rating__star",
+        viewBox: "0 0 286 272",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/_react["default"].createElement("g", {
+        stroke: "none",
+        "stroke-width": "1",
+        fill: "none",
+        "fill-rule": "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 "
+      })));
+    }
+  }, {
+    key: "handleMouseLeave",
+    value: function handleMouseLeave() {
+      this.setState({
+        pos: this.state.ratingCache.pos,
+        rating: this.state.ratingCache.rating
+      });
+    }
+  }, {
+    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
+      });
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (nextProps !== this.props) {
+        this.updateRating(this.getStarRatingPosition(nextProps.rating), nextProps.rating);
+        return true;
+      }
+      return nextState.ratingCache.rating !== this.state.ratingCache.rating || nextState.rating !== this.state.rating;
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(e) {
+      // is it disabled?
+      if (this.props.disabled) {
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      var ratingCache = {
+        pos: this.state.pos,
+        rating: this.state.rating,
+        caption: this.props.caption,
+        name: this.props.name
+      };
+      this.setState({
+        ratingCache: ratingCache
+      });
+      this.props.onRatingClick(e, ratingCache);
+      return true;
+    }
+  }, {
+    key: "treatName",
+    value: function treatName(title) {
+      if (typeof title === 'string') {
+        return title.toLowerCase().split(' ').join('_');
+      }
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      // let caption = null;
+      var classes = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+        'react-star-rating__root': true,
+        'rating-disabled': this.props.disabled
+      }, "react-star-rating__size--".concat(this.props.size), this.props.size), 'rating-editing', this.state.editing));
+
+      // 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) {
+        starRating = /*#__PURE__*/_react["default"].createElement("div", {
+          ref: function ref(c) {
+            return _this2.node = c;
+          },
+          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)
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "rating-stars",
+          "data-content": this.state.glyph,
+          style: {
+            width: this.state.pos
+          }
+        }));
+      } else {
+        starRating = /*#__PURE__*/_react["default"].createElement("div", {
+          ref: function ref(c) {
+            return _this2.node = c;
+          },
+          className: "rating-container rating-gly-star",
+          "data-content": this.state.glyph
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "rating-stars",
+          "data-content": this.state.glyph,
+          style: {
+            width: this.state.pos
+          }
+        }));
+      }
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: "react-star-rating"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        ref: function ref(c) {
+          return _this2.rootNode = c;
+        },
+        style: {
+          cursor: 'pointer'
+        },
+        className: classes
+      }, starRating, /*#__PURE__*/_react["default"].createElement("input", {
+        type: "hidden",
+        name: this.props.name,
+        value: this.state.ratingCache.rating,
+        style: {
+          display: 'none !important',
+          width: 65
+        },
+        min: this.min,
+        max: this.max,
+        readOnly: true
+      })));
+    }
+  }]);
+  return StarRating;
+}(_react["default"].Component);
+StarRating.propTypes = {
+  name: _propTypes["default"].string.isRequired,
+  caption: _propTypes["default"].string,
+  ratingAmount: _propTypes["default"].number.isRequired,
+  rating: _propTypes["default"].number,
+  onRatingClick: _propTypes["default"].func,
+  disabled: _propTypes["default"].bool,
+  editing: _propTypes["default"].bool,
+  size: _propTypes["default"].string
+};
+StarRating.defaultProps = {
+  step: 0.5,
+  ratingAmount: 5,
+  onRatingClick: function onRatingClick() {},
+  disabled: false
+};