cometchat-react-ui-kit2/dist/Messages/CometChatLiveReactions/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatLiveReactions = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _hooks = require("./hooks");
var _style = require("./style");
var _heart = _interopRequireDefault(require("./resources/heart.png"));
var _Shared = require("../../Shared");
/**
 *
 * CometChatLiveReaction component allows user to show animated images as a reaction in real-time.
 * @version 1.0.0
 * @author CometChatTeam
 *
 */

var CometChatLiveReactions = function CometChatLiveReactions(props) {
  var _React$useState = _react["default"].useState(5),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 1),
    verticalSpeed = _React$useState2[0];
  var _React$useState3 = _react["default"].useState(2),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 1),
    horizontalSpeed = _React$useState4[0];
  var parentElement = /*#__PURE__*/_react["default"].createRef(null);
  var timer = _react["default"].useRef(null);
  var items = [];
  var setItemsHandler = function setItemsHandler() {
    var _parentElement, _parentElement2, _parentElement3;
    var width = (_parentElement = parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.offsetWidth;
    var height = (_parentElement2 = parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.offsetHeight;
    var elements = (_parentElement3 = parentElement) === null || _parentElement3 === void 0 ? void 0 : _parentElement3.querySelectorAll(".live__reaction");
    var _loop = function _loop(i) {
      var element = elements[i],
        elementWidth = element === null || element === void 0 ? void 0 : element.offsetWidth,
        elementHeight = element === null || element === void 0 ? void 0 : element.offsetHeight;
      var item = {
        element: element,
        elementHeight: elementHeight,
        elementWidth: elementWidth,
        ySpeed: -verticalSpeed,
        omega: 2 * Math.PI * horizontalSpeed / (width * 60),
        //omega= 2Pi*frequency
        random: (Math.random() / 2 + 0.5) * i * 10000,
        //random time offset
        x: function x(time) {
          return (Math.sin(this.omega * (time + this.random)) + 1) / 2 * (width - elementWidth);
        },
        y: height + (Math.random() + 1) * i * elementHeight
      };
      items.push(item);
    };
    for (var i = 0; i < elements.length; i++) {
      _loop(i);
    }
  };
  var reactionImg = /*#__PURE__*/_react["default"].createElement("img", {
    src: props.reaction,
    alt: props.reaction,
    style: (0, _style.liveReactionStyle)(props)
  });
  var emojis = Array(6).fill(reactionImg);
  var renderItems = emojis === null || emojis === void 0 ? void 0 : emojis.map(function (emoji, index) {
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: "live__reaction",
      style: (0, _style.reactionStyle)(),
      key: index
    }, emoji);
  });
  (0, _hooks.Hooks)(props, setItemsHandler, parentElement, timer, items);
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: function ref(el) {
      parentElement = el;
    },
    style: (0, _style.reactionContainerStyle)()
  }, renderItems);
};
exports.CometChatLiveReactions = CometChatLiveReactions;
CometChatLiveReactions.defaultProps = {
  reaction: _heart["default"],
  style: new _Shared.BaseStyles("20px", "20px", "transparent", "none", "none", "")
};
CometChatLiveReactions.propTypes = {
  reaction: _propTypes["default"].string,
  style: _propTypes["default"].object
};