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

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatEmojiKeyboard = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _emojis = require("./emojis");
var _EmojiCategory = require("./EmojiCategory");
var _Emoji = require("./Emoji");
var _style = require("./style");
var _ = require("../../..");
var _this = void 0;
/**
 *
 * CometChatEmojiKeyboard is a component that fetch emoji from emjis file and displays emoji
 * in the CometChatListItem component.
 *
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 *
 */

var CometChatEmojiKeyboard = function CometChatEmojiKeyboard(props) {
  var _React$useState = _react["default"].useState(new _.CometChatTheme(props.theme || {})),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 1),
    theme = _React$useState2[0];
  var handleEvent = function handleEvent(obj) {
    props.onClick(obj);
  };
  var autoScrollView = function autoScrollView(id) {
    document.getElementById(id).scrollIntoView(true);
  };
  var renderItems = function renderItems() {
    var emojiJSX = null;
    var emojiCategoryJSX = [];
    emojiJSX = _emojis.Emojis === null || _emojis.Emojis === void 0 ? void 0 : _emojis.Emojis.map(function (el, i) {
      var _Object$values;
      var vals = Object === null || Object === void 0 ? void 0 : Object.values(el)[0];
      /**Each json iteration filter through EmojiCategory class */
      var emojiCategory = new _EmojiCategory.CometChatEmojiCategory({
        id: vals.id,
        name: vals.name,
        symbol: vals.symbol,
        emojis: vals.emojis
      });
      /**Emoji Category List */
      emojiCategoryJSX.push( /*#__PURE__*/_react["default"].createElement("div", {
        key: emojiCategory.id,
        className: "emoji__autoscroll"
      }, /*#__PURE__*/_react["default"].createElement(_.CometChatListItem, {
        key: emojiCategory.id,
        id: emojiCategory.id,
        iconURL: emojiCategory.symbol,
        style: (0, _style.getListStyle)(theme),
        onItemClick: autoScrollView.bind(_this, emojiCategory.id)
      })));
      var title = /*#__PURE__*/_react["default"].createElement("p", {
        className: "emoji__category__title",
        style: (0, _style.emojiCategoryTitle)(props, theme)
      }, emojiCategory.name);

      /**Emojis List */
      var emojiList = null;
      emojiList = Object === null || Object === void 0 ? void 0 : (_Object$values = Object.values(emojiCategory === null || emojiCategory === void 0 ? void 0 : emojiCategory.emojis)) === null || _Object$values === void 0 ? void 0 : _Object$values.map(function (emoji, i) {
        var _Object$values2;
        var emojiId = Math.floor(Math.random() * ((Object === null || Object === void 0 ? void 0 : (_Object$values2 = Object.values) === null || _Object$values2 === void 0 ? void 0 : _Object$values2.length) - 0) + i);
        var emojiInstance = new _Emoji.CometChatEmoji({
          "char": emoji["char"],
          keywords: emoji.keywords
        });
        return /*#__PURE__*/_react["default"].createElement(_.CometChatListItem, {
          key: emojiId,
          onItemClick: handleEvent.bind(_this, emojiInstance["char"]),
          style: (0, _style.listStyle)(props, theme),
          text: emojiInstance["char"]
        });
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: emojiCategory.id,
        id: emojiCategory.id // for auto scroll
        ,
        className: "emoji__category__wrapper",
        style: (0, _style.emojiCategoryWrapper)(props)
      }, title, /*#__PURE__*/_react["default"].createElement("div", {
        className: "emoji__list",
        style: (0, _style.emojiListStyle)(props, theme)
      }, emojiList));
    });
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "emoji__keyboard",
      style: (0, _style.emojiContainerStyle)(props, theme)
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "emoji__list__items"
    }, emojiJSX), /*#__PURE__*/_react["default"].createElement("div", {
      className: "emoji__category",
      style: (0, _style.emojiTabLsitStyle)(props, theme)
    }, emojiCategoryJSX));
  };
  return renderItems();
};

// Specifies the default values for props:
exports.CometChatEmojiKeyboard = CometChatEmojiKeyboard;
CometChatEmojiKeyboard.defaultProps = {
  hideSearch: false,
  onClick: function onClick() {},
  style: {
    width: "272px",
    height: "330px",
    border: "none",
    background: "rgb(255,255,255)",
    borderRadius: "8px",
    sectionHeaderFont: "500 12px Inter, sans-serif",
    sectionHeaderColor: "rgba(20,20,20,0.58)",
    categoryIconTint: "RGBA(20, 20, 20, 0.58)",
    selectedCategoryIconTint: "#39f",
    categoryBackground: "rgb(255,255,255)"
  }
};
CometChatEmojiKeyboard.propTypes = {
  hideSearch: _propTypes["default"].bool,
  onClick: _propTypes["default"].func,
  style: _propTypes["default"].object
};