react-snowflakes/target/index.js

Fancy snowfall React component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DepthOfFieldSnowfall = DepthOfFieldSnowfall;
exports.Snowfall = exports.Snowflake = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = require("prop-types");

var _class, _temp2, _class2, _temp4;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function DepthOfFieldSnowfall(_ref) {
  var _ref$count = _ref.count,
      count = _ref$count === void 0 ? 50 : _ref$count,
      props = _objectWithoutProperties(_ref, ["count"]);

  return _react.default.createElement(Snowfall, _extends({}, props, {
    count: count,
    snowflakeFactory: function snowflakeFactory(index) {
      var size = index / count;
      var w = 5 + 10 * size + 'px';
      return _react.default.createElement(Snowflake, {
        speed: .05 + size * 2,
        xSpeedPrc: .3 * size,
        ySpeedPrc: .1 * size,
        style: {
          width: w,
          height: w,
          borderRadius: '50%',
          backgroundColor: 'currentColor',
          opacity: .2 + .8 * size,
          filter: "blur(".concat(Math.round(Math.max(size - .5, 0) * 15), "px)")
        }
      });
    }
  }));
}

var Snowflake = (_temp2 = _class =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Snowflake, _React$Component);

  function Snowflake() {
    var _ref2;

    var _temp, _this;

    _classCallCheck(this, Snowflake);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref2 = Snowflake.__proto__ || Object.getPrototypeOf(Snowflake)).call.apply(_ref2, [this].concat(args))), Object.defineProperty(_this, "node", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: void 0
    }), Object.defineProperty(_this, "x", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: void 0
    }), Object.defineProperty(_this, "y", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: 1 / 0
    }), Object.defineProperty(_this, "sign", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: Math.random() - 1
    }), Object.defineProperty(_this, "setNode", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value(node) {
        return _this.node = node;
      }
    }), _temp));
  }

  _createClass(Snowflake, [{
    key: "animate",
    value: function animate(time, vw, vh) {
      var _props = this.props,
          speed = _props.speed,
          xSpeedPrc = _props.xSpeedPrc,
          ySpeedPrc = _props.ySpeedPrc,
          timeFactor = _props.timeFactor;

      if (time === 0) {
        this.x = Math.random() * vw;
        this.y = Math.random() * vh;
      }

      if (this.y > vh) {
        this.x = Math.random() * vw;
        this.y = -this.node.offsetHeight;
      } else {
        this.x += this.sign * speed * xSpeedPrc * Math.cos(time / timeFactor);
        this.y += speed + speed * ySpeedPrc * Math.sin(time / timeFactor);
      }

      this.node.style.transform = "translate(".concat(this.x, "px, ").concat(this.y, "px)");
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          style = _props2.style,
          children = _props2.children,
          speed = _props2.speed,
          xSpeedPrc = _props2.xSpeedPrc,
          ySpeedPrc = _props2.ySpeedPrc,
          timeFactor = _props2.timeFactor,
          props = _objectWithoutProperties(_props2, ["style", "children", "speed", "xSpeedPrc", "ySpeedPrc", "timeFactor"]);

      return _react.default.createElement("div", _extends({}, props, {
        ref: this.setNode,
        style: _extends({
          pointerEvents: 'none'
        }, style, {
          position: 'absolute',
          top: 0,
          left: 0
        })
      }), children);
    }
  }]);

  return Snowflake;
}(_react.default.Component), Object.defineProperty(_class, "propTypes", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    speed: _propTypes.number,
    xSpeedPrc: _propTypes.number,
    ySpeedPrc: _propTypes.number,
    timeFactor: _propTypes.number
  }
}), Object.defineProperty(_class, "defaultProps", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    speed: .02 + Math.random() * 3,
    xSpeedPrc: .3,
    ySpeedPrc: .1,
    timeFactor: 1e3
  }
}), _temp2);
exports.Snowflake = Snowflake;
var Snowfall = (_temp4 = _class2 =
/*#__PURE__*/
function (_React$Component2) {
  _inherits(Snowfall, _React$Component2);

  function Snowfall() {
    var _ref3;

    var _temp3, _this2;

    _classCallCheck(this, Snowfall);

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    return _possibleConstructorReturn(_this2, (_temp3 = _this2 = _possibleConstructorReturn(this, (_ref3 = Snowfall.__proto__ || Object.getPrototypeOf(Snowfall)).call.apply(_ref3, [this].concat(args))), Object.defineProperty(_this2, "state", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: {
        renderPermitted: false
      }
    }), Object.defineProperty(_this2, "node", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: void 0
    }), Object.defineProperty(_this2, "snowflakes", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: []
    }), Object.defineProperty(_this2, "animationFrame", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: void 0
    }), Object.defineProperty(_this2, "pushSnowflake", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value(snowflake) {
        return _this2.snowflakes.push(snowflake);
      }
    }), Object.defineProperty(_this2, "setNode", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value(node) {
        return _this2.node = node;
      }
    }), Object.defineProperty(_this2, "animateSnowfall", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value() {
        var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Date.now();
        _this2.animationFrame = requestAnimationFrame(_this2.animateSnowfall);

        if (_this2.snowflakes.length > 0) {
          var _this2$node = _this2.node,
              offsetWidth = _this2$node.offsetWidth,
              offsetHeight = _this2$node.offsetHeight;

          _this2.snowflakes.forEach(function (snowflake) {
            return snowflake.animate(time, offsetWidth, offsetHeight);
          });
        }
      }
    }), Object.defineProperty(_this2, "startAnimation", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value() {
        return _this2.animateSnowfall(0);
      }
    }), Object.defineProperty(_this2, "stopAnimation", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function value() {
        return cancelAnimationFrame(_this2.animationFrame);
      }
    }), _temp3));
  }

  _createClass(Snowfall, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        renderPermitted: true
      });
      this.forceUpdate(this.startAnimation);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.stopAnimation();
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate() {
      return false;
    }
  }, {
    key: "render",
    value: function render() {
      var _props3 = this.props,
          snowflakeFactory = _props3.snowflakeFactory,
          count = _props3.count,
          props = _objectWithoutProperties(_props3, ["snowflakeFactory", "count"]);

      if (this.state.renderPermitted) {
        this.snowflakes = [];
        var snowflakeElements = [];

        for (var i = 0; i < count; ++i) {
          snowflakeElements.push(_react.default.cloneElement(snowflakeFactory(i), {
            key: i,
            ref: this.pushSnowflake
          }));
        }

        return _react.default.createElement("div", _extends({}, props, {
          ref: this.setNode
        }), snowflakeElements);
      }

      return null;
    }
  }]);

  return Snowfall;
}(_react.default.Component), Object.defineProperty(_class2, "propTypes", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    count: _propTypes.number,
    snowflakeFactory: _propTypes.func
  }
}), Object.defineProperty(_class2, "defaultProps", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    count: 50,
    snowflakeFactory: function snowflakeFactory(i) {
      return _react.default.createElement(Snowflake, null);
    }
  }
}), _temp4);
exports.Snowfall = Snowfall;