cometchat-react-ui-kit2/dist/Shared/SDKDerivedComponents/CometChatDataItem/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatDataItem = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../..");
var _CometChatGroupConstants = require("../../../Groups/CometChatGroupConstants");
var _style = require("./style");
var _passwordIcon = _interopRequireDefault(require("./resources/passwordIcon.svg"));
var _privateIcon = _interopRequireDefault(require("./resources/privateIcon.svg"));
var _chat = require("@cometchat-pro/chat");
var _this = void 0;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var CometChatDataItem = function CometChatDataItem(props) {
  var _ref;
  var isActive = props.isActive,
    user = props.user,
    group = props.group,
    groupMember = props.groupMember,
    onClick = props.onClick,
    inputData = props.inputData,
    style = props.style,
    tail = props.tail,
    options = props.options,
    avatarConfguration = props.avatarConfguration,
    statusIndicatorConfiguration = props.statusIndicatorConfiguration,
    theme = props.theme;

  /**
   * Component internal state
   */
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    isHovering = _useState2[0],
    setIsHovering = _useState2[1];

  /**
   * Component private scoping
   */
  var _avatarConfiguration = new _.AvatarConfiguration(avatarConfguration !== null && avatarConfguration !== void 0 ? avatarConfguration : {});
  var _statusIndicatorConfiguration = new _.StatusIndicatorConfiguration(statusIndicatorConfiguration !== null && statusIndicatorConfiguration !== void 0 ? statusIndicatorConfiguration : {});
  var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
  var _isActive = isHovering || isActive;
  var toggleActiveObject = function toggleActiveObject() {
    setIsHovering(!isHovering);
  };
  //avatar
  var getAvatar = function getAvatar() {
    var _avatarConfiguration$, _theme$palette, _avatarConfiguration$2, _avatarConfiguration$3, _avatarConfiguration$4, _avatarConfiguration$5, _avatarConfiguration$6, _avatarConfiguration$7, _theme$palette2, _avatarConfiguration$8, _theme$typography, _theme$palette3, _avatarConfiguration$9, _avatarConfiguration$10, _avatarConfiguration$11, _theme$palette4;
    var avatar = null;
    var outerViewWidth = _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$ = _avatarConfiguration.style) === null || _avatarConfiguration$ === void 0 ? void 0 : _avatarConfiguration$.outerViewWidth;
    var outerView = "".concat(outerViewWidth, " solid ").concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette = _theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getPrimary());
    var borderWidth = _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$2 = _avatarConfiguration.style) === null || _avatarConfiguration$2 === void 0 ? void 0 : _avatarConfiguration$2.borderWidth;
    var avatarStyle = new _.AvatarStyles({
      width: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$3 = _avatarConfiguration.style) === null || _avatarConfiguration$3 === void 0 ? void 0 : _avatarConfiguration$3.width,
      height: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$4 = _avatarConfiguration.style) === null || _avatarConfiguration$4 === void 0 ? void 0 : _avatarConfiguration$4.height,
      outerViewSpacing: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$5 = _avatarConfiguration.style) === null || _avatarConfiguration$5 === void 0 ? void 0 : _avatarConfiguration$5.outerViewSpacing,
      outerView: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$6 = _avatarConfiguration.style) === null || _avatarConfiguration$6 === void 0 ? void 0 : _avatarConfiguration$6.outerView) || outerView,
      textColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$7 = _avatarConfiguration.style) === null || _avatarConfiguration$7 === void 0 ? void 0 : _avatarConfiguration$7.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette2 = _theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.getAccent900()),
      textFont: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$8 = _avatarConfiguration.style) === null || _avatarConfiguration$8 === void 0 ? void 0 : _avatarConfiguration$8.textFont) || (0, _.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography = _theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.name),
      border: "".concat(borderWidth, " solid ").concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette3 = _theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.getAccent600()),
      borderRadius: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$9 = _avatarConfiguration.style) === null || _avatarConfiguration$9 === void 0 ? void 0 : _avatarConfiguration$9.borderRadius,
      backgroundSize: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$10 = _avatarConfiguration.style) === null || _avatarConfiguration$10 === void 0 ? void 0 : _avatarConfiguration$10.backgroundSize,
      backgroundColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$11 = _avatarConfiguration.style) === null || _avatarConfiguration$11 === void 0 ? void 0 : _avatarConfiguration$11.backgroundColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette4 = _theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.getAccent600())
    });
    var name;
    var image;
    if (inputData !== null && inputData !== void 0 && inputData.thumbnail && user) {
      name = user === null || user === void 0 ? void 0 : user.name;
      image = user === null || user === void 0 ? void 0 : user.avatar;
    } else if (inputData !== null && inputData !== void 0 && inputData.thumbnail && group) {
      name = group === null || group === void 0 ? void 0 : group.name;
      image = group === null || group === void 0 ? void 0 : group.icon;
    } else if (inputData !== null && inputData !== void 0 && inputData.thumbnail && groupMember) {
      name = groupMember === null || groupMember === void 0 ? void 0 : groupMember.name;
      image = groupMember === null || groupMember === void 0 ? void 0 : groupMember.avatar;
    }
    if (inputData !== null && inputData !== void 0 && inputData.thumbnail && image) {
      avatar = /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
        image: image,
        style: avatarStyle
      });
    } else if (inputData !== null && inputData !== void 0 && inputData.thumbnail && name) {
      avatar = /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
        name: name,
        style: avatarStyle
      });
    }
    return avatar;
  };

  //status indicator
  var getPresence = function getPresence() {
    var _statusIndicatorConfi, _statusIndicatorConfi2, _statusIndicatorConfi3, _theme$palette5, _statusIndicatorConfi4;
    var statusIndicatorStyles = new _.StatusIndicatorStyles({
      width: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi === void 0 ? void 0 : _statusIndicatorConfi.width,
      height: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi2 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi2 === void 0 ? void 0 : _statusIndicatorConfi2.height,
      border: (_statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi3 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi3 === void 0 ? void 0 : _statusIndicatorConfi3.border) || "2px solid ".concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette5 = _theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.getBackground()),
      borderRadius: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi4 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi4 === void 0 ? void 0 : _statusIndicatorConfi4.borderRadius
    });
    var backgroundImage;
    var backgroundColor;
    if (inputData !== null && inputData !== void 0 && inputData.status) {
      if (group) {
        if ((group === null || group === void 0 ? void 0 : group.type) === (_.GroupTypeConstants === null || _.GroupTypeConstants === void 0 ? void 0 : _.GroupTypeConstants["private"])) {
          backgroundImage = _privateIcon["default"];
          backgroundColor = _CometChatGroupConstants.groupTypeColorCode === null || _CometChatGroupConstants.groupTypeColorCode === void 0 ? void 0 : _CometChatGroupConstants.groupTypeColorCode["private"];
        } else if ((group === null || group === void 0 ? void 0 : group.type) === (_.GroupTypeConstants === null || _.GroupTypeConstants === void 0 ? void 0 : _.GroupTypeConstants.password)) {
          backgroundImage = _passwordIcon["default"];
          backgroundColor = _CometChatGroupConstants.groupTypeColorCode === null || _CometChatGroupConstants.groupTypeColorCode === void 0 ? void 0 : _CometChatGroupConstants.groupTypeColorCode.password;
        }
      } else if (user && (user === null || user === void 0 ? void 0 : user.status) === _.UserStatusConstants.online) {
        var _theme$palette6;
        backgroundColor = _theme === null || _theme === void 0 ? void 0 : (_theme$palette6 = _theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.getSuccess();
      } else if (groupMember && (groupMember === null || groupMember === void 0 ? void 0 : groupMember.status) === _.UserStatusConstants.online) {
        var _theme$palette7;
        backgroundColor = _theme === null || _theme === void 0 ? void 0 : (_theme$palette7 = _theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.getSuccess();
      }
    }
    if (backgroundImage || backgroundColor) {
      return /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
        backgroundImage: backgroundImage,
        style: _objectSpread(_objectSpread({}, statusIndicatorStyles), {}, {
          backgroundColor: backgroundColor
        })
      });
    } else return null;
  };
  var getTitle = function getTitle() {
    var title;
    if (inputData !== null && inputData !== void 0 && inputData.title && user !== null && user !== void 0 && user.name) {
      title = user === null || user === void 0 ? void 0 : user.name;
    } else if (inputData !== null && inputData !== void 0 && inputData.title && group !== null && group !== void 0 && group.name) {
      title = group === null || group === void 0 ? void 0 : group.name;
    } else if (inputData !== null && inputData !== void 0 && inputData.title && groupMember !== null && groupMember !== void 0 && groupMember.name) {
      title = groupMember === null || groupMember === void 0 ? void 0 : groupMember.name;
    }
    return /*#__PURE__*/_react["default"].createElement("div", null, title);
  };
  var getSubtitle = function getSubtitle() {
    var subtitle;
    if (inputData !== null && inputData !== void 0 && inputData.subtitle) {
      subtitle = inputData === null || inputData === void 0 ? void 0 : inputData.subtitle(user || group || groupMember);
    } else if (user !== null && user !== void 0 && user.status) {
      subtitle = user === null || user === void 0 ? void 0 : user.status;
    } else if (group !== null && group !== void 0 && group.membersCount) {
      subtitle = "".concat(group === null || group === void 0 ? void 0 : group.membersCount, " ").concat((0, _.localize)("MEMBERS"));
    }
    return /*#__PURE__*/_react["default"].createElement("div", null, subtitle, " ");
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "data__item",
    style: (0, _style.dataItemStyle)(style, _theme, _isActive),
    onClick: onClick === null || onClick === void 0 ? void 0 : onClick.bind(_this, (_ref = user !== null && user !== void 0 ? user : group) !== null && _ref !== void 0 ? _ref : groupMember),
    onMouseEnter: toggleActiveObject,
    onMouseLeave: toggleActiveObject
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.dataItemThumbnailStyle)(style, _theme),
    className: "item__thumbnail"
  }, getAvatar(), getPresence()), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.dataItemDetailStyle)(style, _theme),
    className: "item__details"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.dataItemNameStyle)(style, _theme),
    className: "item__title"
  }, getTitle()), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.dataItemSubtitleStyle)(style, _theme),
    className: "item__subtitle"
  }, getSubtitle())));
};
exports.CometChatDataItem = CometChatDataItem;
CometChatDataItem.defaultProps = {
  inputData: {
    id: "id",
    thumbnail: true,
    status: true,
    title: true,
    subtitle: "" //callback function
  },

  style: {
    height: "100%",
    width: "100%",
    background: "",
    activeBackground: "",
    borderRadius: "8px",
    titleFont: "600 15px Inter,sans-serif",
    titleColor: "rgb(20,20,20)",
    subtitleFont: "400 13px Inter, sans-serif",
    subtitleColor: "rgba(20, 20, 20, 0.58)"
  },
  user: null,
  group: null,
  groupMember: null,
  options: [],
  //video, audio, info.
  tail: "",
  //view or component
  isActive: false,
  avatarConfguration: {},
  statusIndicatorConfiguration: {}
};
CometChatDataItem.propTypes = {
  inputData: _propTypes["default"].object,
  user: _propTypes["default"].object,
  group: _propTypes["default"].object,
  groupMember: _propTypes["default"].object,
  onClick: _propTypes["default"].func,
  options: _propTypes["default"].array,
  tail: _propTypes["default"].string,
  //view or component
  isActive: _propTypes["default"].bool,
  style: _propTypes["default"].object,
  avatarConfguration: _propTypes["default"].object,
  statusIndicatorConfiguration: _propTypes["default"].object,
  theme: _propTypes["default"].object
};