cometchat-react-ui-kit2/dist/Messages/Bubbles/CometChatPollBubble/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatPollBubble = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _chat = require("@cometchat-pro/chat");
var _ = require("../../..");
var _2 = require("../");
var _3 = require("../../../");
var _hooks = require("./hooks");
var _checkmark = _interopRequireDefault(require("./resources/checkmark.svg"));
var _style = require("./style");
var _CometChatPollBubble$;
/**
 *
 * CometChatPollBubble is UI component for poll message bubble.
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 *
 */

var CometChatPollBubble = function CometChatPollBubble(props) {
  var _React$useState = _react["default"].useState(null),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    question = _React$useState2[0],
    setQuestion = _React$useState2[1];
  var _React$useState3 = _react["default"].useState({}),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    options = _React$useState4[0],
    setOptions = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(0),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    voteCount = _React$useState6[0],
    setVoteCount = _React$useState6[1];
  var _React$useState7 = _react["default"].useState(),
    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
    pollId = _React$useState8[0],
    setPollId = _React$useState8[1];
  var theme = new _.CometChatTheme(props.theme) || new _.CometChatTheme({});
  var getPollOptions = function getPollOptions() {
    var _Object$entries;
    var votePercent = 0;
    var optionsTemplate = [];
    (_Object$entries = Object.entries(options)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.forEach(function (_ref) {
      var _props$loggedInUser, _theme$palette2, _theme$palette3, _theme$palette4;
      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
        optionKey = _ref2[0],
        option = _ref2[1];
      var fraction = option.count / voteCount;
      votePercent = fraction.toLocaleString("en", {
        style: "percent"
      });
      var backgroundColor = props.style.background || theme.palette.background[theme.palette.mode];
      if (option.hasOwnProperty("voters") && option.voters.hasOwnProperty((_props$loggedInUser = props.loggedInUser) === null || _props$loggedInUser === void 0 ? void 0 : _props$loggedInUser.uid) && voteCount) {
        var _theme$palette;
        backgroundColor = theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getPrimary();
      } else {
        backgroundColor = theme.palette.accent100[theme.palette.mode];
      }
      optionsTemplate.push( /*#__PURE__*/_react["default"].createElement(_2.CometChatPollOptionBubble, {
        optionText: option.text,
        votePercent: votePercent,
        optionId: optionKey,
        voteCount: voteCount,
        optionIconURL: _checkmark["default"],
        theme: theme,
        key: optionKey,
        style: {
          pollOptionTextFont: props.style.pollOptionsFont || (0, _.fontHelper)(theme.typography.subtitle1),
          pollOptionTextColor: props.style.pollOptionsColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.getAccent()),
          pollOptionBackground: props.style.pollOptionsBackground,
          optionIconTint: props.style.iconTint || theme.palette.accent500[theme.palette.mode],
          selectedPollOptionBackground: backgroundColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.getPrimary()),
          pollOptionBorder: props.style.pollOptionBorder,
          votePercentTextFont: props.style.votePercentTextFont || (0, _.fontHelper)(theme.typography.subtitle1),
          votePercentTextColor: props.style.pollOptionsColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.getAccent())
        },
        loggedInUser: props.loggedInUser,
        onClick: votingPoll
      }));
    });
    return optionsTemplate;
  };
  var getPollsMessage = function getPollsMessage() {
    var voteCountText = "".concat(voteCount, " people voted");
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageKitPollBubbleBlockStyle)(props, theme),
      className: "message_kit__blocks"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messagePollBubbleBlockStyle)(props),
      className: "message__message-blocks"
    }, /*#__PURE__*/_react["default"].createElement("p", {
      style: (0, _style.pollQuestionStyle)(props, theme),
      className: "message__message-pollquestion"
    }, question)), /*#__PURE__*/_react["default"].createElement("ul", {
      style: (0, _style.pollAnswerStyle)(props),
      className: "message__message-polloptions"
    }, getPollOptions()), /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.voteCountStyle)(props, theme),
      className: "message__message-votecount"
    }, /*#__PURE__*/_react["default"].createElement("p", {
      style: (0, _style.voteCountTextStyle)(props, theme)
    }, voteCountText)));
  };
  var errorHandler = function errorHandler(errorCode) {
    _3.CometChatMessageEvents.emit(_3.CometChatMessageEvents.onMessageError, errorCode);
  };

  /** vote poll option */
  var votingPoll = function votingPoll(optionNumber) {
    try {
      var _props$messageObject;
      if (props.loggedInUser.uid !== ((_props$messageObject = props.messageObject) === null || _props$messageObject === void 0 ? void 0 : _props$messageObject.sender.uid)) {
        _chat.CometChat.callExtension("polls", "POST", "v2/vote", {
          vote: optionNumber,
          id: pollId
        });
      } else {
        return;
      }
    } catch (error) {
      errorHandler(error);
    }
  };
  (0, _hooks.Hooks)(props, setQuestion, setOptions, setVoteCount, setPollId);
  return getPollsMessage();
};
exports.CometChatPollBubble = CometChatPollBubble;
CometChatPollBubble.defaultProps = {
  messageObject: null,
  pollQuestion: "",
  options: [],
  totalVoteCount: 0,
  optionIconURL: "",
  style: {
    width: "100%",
    height: "100%",
    border: "0 none",
    borderRadius: "12px",
    background: "transparent",
    votePercentTextFont: "",
    votePercentTextColor: "",
    pollQuestionTextColor: "#fff",
    pollQuestionTextFont: "400 15px Inter,sans-serif",
    pollOptionTextFont: "400 15px Inter,sans-serif",
    pollOptionTextColor: "#39f",
    pollOptionsBackground: "#fff",
    totalVoteCountTextFont: "400 13px Inter,sans-serif",
    totalVoteCountTextColor: "#fff",
    optionIconTint: "rgb(246,246,246)",
    pollOptionBorder: "",
    selectedPollOptionBackground: ""
  }
};
CometChatPollBubble.propTypes = (_CometChatPollBubble$ = {
  messageObject: _propTypes["default"].object,
  pollQuestion: _propTypes["default"].string,
  options: _propTypes["default"].array,
  optionIconURL: _propTypes["default"].string
}, (0, _defineProperty2["default"])(_CometChatPollBubble$, "pollQuestion", _propTypes["default"].string), (0, _defineProperty2["default"])(_CometChatPollBubble$, "totalVoteCount", _propTypes["default"].number), (0, _defineProperty2["default"])(_CometChatPollBubble$, "style", _propTypes["default"].object), _CometChatPollBubble$);