cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
239 lines (229 loc) • 14.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatGroupListItem = 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 _CometChatGroupConstants = require("../../../Groups/CometChatGroupConstants");
var _CometChatGroupHelper = require("../../../Groups/CometChatGroupHelper");
var _hooks = require("./hooks");
var _style = require("./style");
var _passwordProtectedGroup = _interopRequireDefault(require("./resources/password-protected-group.svg"));
var _privateGroup = _interopRequireDefault(require("./resources/private-group.svg"));
/**
*
* CometChatGroupListItem is a Shared component. It formats list Item display such as group Icon, group name, etc
* passed on from GroupList component.
*
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
var GroupListItem = function GroupListItem(props) {
var _React$useState = _react["default"].useState(new _.CometChatTheme({})),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
theme = _React$useState2[0],
setTheme = _React$useState2[1];
(0, _hooks.Hooks)(props, setTheme);
// Show Tooltip
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);
};
// Hide Tooltip
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");
};
// ClickHandler for GroupListItem
var clickHandler = function clickHandler() {
_2.CometChatGroupEvents.emit(_2.CometChatGroupEvents.onItemClick, props.groupObject);
};
// ID
var getId = function getId() {
return props.inputData.id && props.groupObject[props.inputData.id] ? props.groupObject[props.inputData.id] : "";
};
// Avatar
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 _.AvatarConfiguration();
var outerViewWidth = (props === null || props === void 0 ? void 0 : (_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 === 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 = (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 === null || avatarConfiguration === void 0 ? void 0 : 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 === null || avatarConfiguration === void 0 ? void 0 : 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 === null || avatarConfiguration === void 0 ? void 0 : 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 === null || props === void 0 ? void 0 : (_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 === null || avatarConfiguration === void 0 ? void 0 : avatarConfiguration.outerViewSpacing),
backgroundSize: (props === null || props === void 0 ? void 0 : (_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 === null || avatarConfiguration === void 0 ? void 0 : 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 group object has thumbnail key
if (props.inputData.thumbnail) {
if (props.groupObject[props.inputData.thumbnail]) {
// If Icon provided
avatar = /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, (0, _extends2["default"])({}, avatarStyle, {
border: "0 none",
image: props.groupObject[props.inputData.thumbnail]
}));
} else if (props.inputData.title && props.groupObject[props.inputData.title]) {
var _theme$palette4, _theme$palette5;
//show initials for name
avatar = /*#__PURE__*/_react["default"].createElement(_.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]),
name: props.groupObject[props.inputData.title],
nameTextFont: (0, _CometChatGroupHelper.fontStyle)(theme.typography.name),
nameTextColor: theme.palette.accent900[theme.palette.mode]
}));
}
}
return avatar;
};
// GroupTypeIcon for Private Or Public Group
var getGroupType = function getGroupType() {
var groupTypeComponent;
if (props.inputData.status && props.groupObject[props.inputData.status]) {
var _props$configurations15, _props$configurations16, _props$configurations17, _props$configurations18, _props$configurations19, _props$configurations20, _props$configurations21, _props$configurations22;
var statusIndicatorConfiguration = new _.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);
if (props.groupObject[props.inputData.status] === _CometChatGroupConstants.groupType["private"]) {
groupTypeComponent = /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
backgroundImage: _passwordProtectedGroup["default"],
backgroundColor: _CometChatGroupConstants.groupTypeColorCode["private"],
style: {
position: "absolute",
top: "25px",
left: "28px"
},
width: width,
height: height,
border: border,
borderRadius: borderRadius
});
} else if (props.groupObject[props.inputData.status] === _CometChatGroupConstants.groupType.password) {
groupTypeComponent = /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
backgroundImage: _privateGroup["default"],
backgroundColor: _CometChatGroupConstants.groupTypeColorCode.password,
style: {
position: "absolute",
top: "25px",
left: "28px"
},
width: width,
height: height,
border: border,
borderRadius: borderRadius
});
}
}
return groupTypeComponent;
};
// Title or name of the Group
var getTitle = function getTitle() {
return props.inputData.title && props.groupObject[props.inputData.title] ? props.groupObject[props.inputData.title] : "";
};
// Subtitle of the Group
var getSubTitle = function getSubTitle() {
var subTitle;
if (props.inputData.subtitle instanceof Function) {
subTitle = props.inputData.subtitle(props.groupObject);
} else {
if (props.inputData.subtitle && props.groupObject[props.inputData.subtitle]) {
subTitle = props.groupObject[props.inputData.subtitle];
} else if (props.inputData.subtitle && props.groupObject.metadata && props.groupObject.metadata[props.inputData.subtitle]) {
subTitle = props.groupObject.metadata[props.inputData.subtitle];
}
}
if (subTitle) {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.itemDescStyle)(props),
className: "item__subtitle"
}, subTitle);
}
return null;
};
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)(),
className: "item__thumbnail"
}, getAvatar(), getGroupType()), /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.itemDetailStyle)(props, theme),
className: "item__details",
dir: _.CometChatLocalize.getDir()
}, /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.itemNameStyle)(props),
className: "item__title",
onMouseEnter: showTooltip,
onMouseLeave: hideToolTip
}, getTitle()), getSubTitle()));
};
GroupListItem.defaultProps = {
inputData: {
id: "guid",
thumbnail: "icon",
status: "type",
title: "name",
subtitle: "membersCount"
},
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,
groupOptions: [],
groupObject: {
guid: "supergroup",
icon: "https://data-us.cometchat.io/assets/images/avatars/supergroup.png",
membersCount: 123,
name: "Comic Superhero Hangout",
metadata: {
phonenum: 4234324,
gender: "male"
}
},
configurations: {}
};
GroupListItem.propTypes = {
inputData: _propTypes["default"].object,
style: _propTypes["default"].object,
isActive: _propTypes["default"].bool,
groupOptions: _propTypes["default"].array,
groupObject: _propTypes["default"].object
};
var CometChatGroupListItem = /*#__PURE__*/_react["default"].memo(GroupListItem);
exports.CometChatGroupListItem = CometChatGroupListItem;