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

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatUserListItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../../../");
var _2 = require("../../");
var _CometChatUserConstants = require("../../../Users/CometChatUserConstants");
var _hooks = require("./hooks");
var _style = require("./style");
var UserListItem = function UserListItem(props) {
  var _React$useState = _react["default"].useState(new _2.CometChatTheme({})),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    theme = _React$useState2[0],
    setTheme = _React$useState2[1];
  var showTooltip = function showTooltip(event) {
    var elem = event.target;
    var scrollWidth = elem.scrollWidth;
    var clientWidth = elem.clientWidth;
    if (scrollWidth <= clientWidth) {
      return false;
    }
    elem.setAttribute("title", elem.textContent);
  };
  var hideToolTip = function hideToolTip(event) {
    var elem = event.target;
    var scrollWidth = elem.scrollWidth;
    var clientWidth = elem.clientWidth;
    if (scrollWidth <= clientWidth) {
      return false;
    }
    elem.removeAttribute("title");
  };
  var clickHandler = function clickHandler() {
    _.CometChatUserEvents.emit(_.CometChatUserEvents.onItemClick, props.userObject);
  };
  var getId = function getId() {
    return props.inputData.id && props.userObject[props.inputData.id] ? props.userObject[props.inputData.id] : "";
  };
  var getAvatar = function getAvatar() {
    var _props$configurations, _props$configurations2, _theme$palette, _props$configurations3, _props$configurations4, _props$configurations5, _props$configurations6, _props$configurations7, _props$configurations8, _props$configurations9, _props$configurations10, _props$configurations11, _props$configurations12, _props$configurations13, _props$configurations14, _theme$palette2, _theme$palette3;
    var avatar;
    var avatarConfiguration = new _2.AvatarConfiguration();
    var outerViewWidth = ((_props$configurations = props.configurations) === null || _props$configurations === void 0 ? void 0 : (_props$configurations2 = _props$configurations.avatarConfiguration) === null || _props$configurations2 === void 0 ? void 0 : _props$configurations2.outerViewWidth) || 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 = (props === null || props === void 0 ? void 0 : (_props$configurations3 = props.configurations) === null || _props$configurations3 === void 0 ? void 0 : (_props$configurations4 = _props$configurations3.avatarConfiguration) === null || _props$configurations4 === void 0 ? void 0 : _props$configurations4.borderWidth) || avatarConfiguration.borderWidth;
    var avatarStyle = {
      width: (props === null || props === void 0 ? void 0 : (_props$configurations5 = props.configurations) === null || _props$configurations5 === void 0 ? void 0 : (_props$configurations6 = _props$configurations5.avatarConfiguration) === null || _props$configurations6 === void 0 ? void 0 : _props$configurations6.width) || avatarConfiguration.width,
      height: (props === null || props === void 0 ? void 0 : (_props$configurations7 = props.configurations) === null || _props$configurations7 === void 0 ? void 0 : (_props$configurations8 = _props$configurations7.avatarConfiguration) === null || _props$configurations8 === void 0 ? void 0 : _props$configurations8.height) || avatarConfiguration.height,
      borderRadius: (props === null || props === void 0 ? void 0 : (_props$configurations9 = props.configurations) === null || _props$configurations9 === void 0 ? void 0 : (_props$configurations10 = _props$configurations9.avatarConfiguration) === null || _props$configurations10 === void 0 ? void 0 : _props$configurations10.borderRadius) || (avatarConfiguration === null || avatarConfiguration === void 0 ? void 0 : avatarConfiguration.borderRadius),
      outerView: outerView,
      outerViewSpacing: ((_props$configurations11 = props.configurations) === null || _props$configurations11 === void 0 ? void 0 : (_props$configurations12 = _props$configurations11.avatarConfiguration) === null || _props$configurations12 === void 0 ? void 0 : _props$configurations12.outerViewSpacing) || avatarConfiguration.outerViewSpacing,
      backgroundSize: ((_props$configurations13 = props.configurations) === null || _props$configurations13 === void 0 ? void 0 : (_props$configurations14 = _props$configurations13.avatarConfiguration) === null || _props$configurations14 === void 0 ? void 0 : _props$configurations14.backgroundSize) || avatarConfiguration.backgroundSize,
      backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.accent700[theme === null || theme === void 0 ? void 0 : (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.mode]
    };
    if (props.inputData.thumbnail) {
      if (props.userObject[props.inputData.thumbnail]) {
        avatar = /*#__PURE__*/_react["default"].createElement(_2.CometChatAvatar, (0, _extends2["default"])({}, avatarStyle, {
          border: "0 none",
          image: props.userObject[props.inputData.thumbnail]
        }));
      } else if (props.inputData.title && props.userObject[props.inputData.title]) {
        var _theme$palette4, _theme$palette5, _theme$typography, _theme$palette6;
        avatar = /*#__PURE__*/_react["default"].createElement(_2.CometChatAvatar, (0, _extends2["default"])({}, avatarStyle, {
          border: "".concat(borderWidth, " solid ").concat(theme === null || theme === void 0 ? void 0 : (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.accent700[theme === null || theme === void 0 ? void 0 : (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.mode]),
          nameTextFont: (0, _2.fontHelper)(theme === null || theme === void 0 ? void 0 : (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.name),
          nameTextColor: theme === null || theme === void 0 ? void 0 : (_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.getAccent900(),
          name: props.userObject[props.inputData.title]
        }));
      }
    }
    return avatar;
  };
  var getPresence = function getPresence() {
    var presence;
    if (props.inputData.status && props.userObject[props.inputData.status]) {
      if (props.userObject[props.inputData.status] === _CometChatUserConstants.userStatus.online) {
        var _props$configurations15, _props$configurations16, _props$configurations17, _props$configurations18, _props$configurations19, _props$configurations20, _props$configurations21, _props$configurations22;
        var statusIndicatorConfiguration = new _2.StatusIndicatorConfiguration();
        var width = (props === null || props === void 0 ? void 0 : (_props$configurations15 = props.configurations) === null || _props$configurations15 === void 0 ? void 0 : (_props$configurations16 = _props$configurations15.statusIndicatorConfiguration) === null || _props$configurations16 === void 0 ? void 0 : _props$configurations16.width) || (statusIndicatorConfiguration === null || statusIndicatorConfiguration === void 0 ? void 0 : statusIndicatorConfiguration.width);
        var height = (props === null || props === void 0 ? void 0 : (_props$configurations17 = props.configurations) === null || _props$configurations17 === void 0 ? void 0 : (_props$configurations18 = _props$configurations17.statusIndicatorConfiguration) === null || _props$configurations18 === void 0 ? void 0 : _props$configurations18.height) || (statusIndicatorConfiguration === null || statusIndicatorConfiguration === void 0 ? void 0 : statusIndicatorConfiguration.height);
        var border = (props === null || props === void 0 ? void 0 : (_props$configurations19 = props.configurations) === null || _props$configurations19 === void 0 ? void 0 : (_props$configurations20 = _props$configurations19.statusIndicatorConfiguration) === null || _props$configurations20 === void 0 ? void 0 : _props$configurations20.border) || (statusIndicatorConfiguration === null || statusIndicatorConfiguration === void 0 ? void 0 : statusIndicatorConfiguration.border);
        var borderRadius = (props === null || props === void 0 ? void 0 : (_props$configurations21 = props.configurations) === null || _props$configurations21 === void 0 ? void 0 : (_props$configurations22 = _props$configurations21.statusIndicatorConfiguration) === null || _props$configurations22 === void 0 ? void 0 : _props$configurations22.borderRadius) || (statusIndicatorConfiguration === null || statusIndicatorConfiguration === void 0 ? void 0 : statusIndicatorConfiguration.borderRadius);
        presence = /*#__PURE__*/_react["default"].createElement(_2.CometChatStatusIndicator, {
          backgroundColor: _CometChatUserConstants.userStatusColorCode.online,
          style: {
            position: "absolute",
            top: "23px",
            left: "27px"
          },
          width: width,
          height: height,
          border: border,
          borderRadius: borderRadius
        });
      }
    }
    return presence;
  };
  var getTitle = function getTitle() {
    var title;
    if (props.inputData.title && props.userObject[props.inputData.title]) {
      title = props.userObject[props.inputData.title];
    }
    return title;
  };
  var getSubTitle = function getSubTitle() {
    var subTitle;
    if (typeof props.inputData.subtitle === "string") {
      if (props.inputData.subtitle && props.userObject.hasOwnProperty([props.inputData.subtitle])) {
        subTitle = props.userObject[props.inputData.subtitle];
      } else if (props.inputData.subtitle && props.userObject.metadata && props.userObject.metadata.hasOwnProperty([props.inputData.subtitle])) {
        subTitle = props.userObject.metadata[props.inputData.subtitle];
      }
    } else if (typeof props.inputData.subtitle === "function") {
      subTitle = props.inputData.subtitle(props.userObject);
    }
    if (subTitle) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.itemDescStyle)(props),
        className: "item__subtitle"
      }, subTitle);
    }
    return null;
  };
  (0, _hooks.Hooks)(props, setTheme);
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-id": getId(),
    style: (0, _style.listItem)(props, theme),
    onClick: clickHandler,
    className: "list__item"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.itemThumbnailStyle)(props),
    className: "item__thumbnail"
  }, getAvatar(), getPresence()), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.itemDetailStyle)(props, theme),
    className: "item__details",
    dir: _2.CometChatLocalize.getDir()
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.itemNameStyle)(props),
    className: "item__title",
    onMouseEnter: showTooltip,
    onMouseLeave: hideToolTip
  }, getTitle()), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.itemDescStyle)(props),
    className: "item__subtitle"
  }, getSubTitle())));
};

// Specifies the default values for props:
UserListItem.defaultProps = {
  inputData: {
    id: "uid",
    thumbnail: "avatar",
    status: "status",
    title: "name",
    subtitle: function subtitle() {}
  },
  style: {
    width: "100%",
    height: "auto",
    background: "transparent",
    activeBackground: "transparent",
    border: "",
    borderRadius: "8px",
    titleColor: "#141414",
    titleFont: "600 15px Inter,sans-serif",
    subtitleColor: "#adb5bd",
    subtitleFont: "400 13px Inter,sans-serif"
  },
  isActive: false,
  userOptions: [],
  userObject: {
    uid: "3123-1231-2312-12312",
    avatar: "url",
    name: "xyz",
    status: "online",
    role: "ios"
  },
  configurations: {}
};
UserListItem.propTypes = {
  inputData: _propTypes["default"].object,
  style: _propTypes["default"].object,
  isActive: _propTypes["default"].bool,
  userOptions: _propTypes["default"].array,
  userObject: _propTypes["default"].object,
  configurations: _propTypes["default"].object
};
var CometChatUserListItem = /*#__PURE__*/_react["default"].memo(UserListItem);
exports.CometChatUserListItem = CometChatUserListItem;