cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
451 lines (424 loc) • 16.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatGroupList = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _hooks = require("./hooks");
var _style = require("./style");
var _spinner = _interopRequireDefault(require("./resources/spinner.svg"));
var _Shared = require("../../Shared");
var _this = void 0;
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; }
/**
*
* CometChatGroupList component retrieves the latest list of groups that a CometChat logged-in user has been a part of.
* The state of the component is communicated via 3 states i.e empty, loading and error
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
var GroupList = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
/**
* Destructuring props
*/
var limit = props.limit,
searchKeyword = props.searchKeyword,
joinedOnly = props.joinedOnly,
tags = props.tags,
style = props.style,
customView = props.customView,
emptyText = props.emptyText,
errorText = props.errorText,
hideError = props.hideError,
activeGroup = props.activeGroup,
loadingIconURL = props.loadingIconURL,
theme = props.theme,
dataItemConfiguration = props.dataItemConfiguration;
/**
* Internal States
*/
var loggedInUser = _react["default"].useRef(null);
var groupListManager = _react["default"].useRef(null);
var callbackData = _react["default"].useRef(null);
var _React$useState = _react["default"].useState([]),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
groupList = _React$useState2[0],
setGroupList = _React$useState2[1];
var _React$useState3 = _react["default"].useState("loading"),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
decoratorMessage = _React$useState4[0],
setDecoratorMessage = _React$useState4[1];
var _theme = new _.CometChatTheme(theme || {});
var _dataItemConfiguration = dataItemConfiguration || new _Shared.DataItemConfiguration({});
_react["default"].useImperativeHandle(ref, function () {
return {
updateGroup: updateGroup,
addGroup: addGroup,
removeGroup: removeGroup
};
});
// Callback received when user updates the group
var groupCallback = function groupCallback(listenerName) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
callbackData.current = {
name: listenerName,
args: [].concat(args)
};
};
/**
*
* Listener callback when a member is kicked from / has left the group
*/
var handleGroupMemberRemoval = function handleGroupMemberRemoval() {
var removedUser = arguments.length <= 1 ? undefined : arguments[1];
var group = arguments.length <= 3 ? undefined : arguments[3];
var grouplist = (0, _toConsumableArray2["default"])(groupList);
//search for group
var groupKey = grouplist.findIndex(function (g) {
return g.guid === group.guid;
});
if (groupKey > -1) {
if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === removedUser.uid) {
var groupObject = _objectSpread({}, grouplist[groupKey]);
var newGroupObject = Object.assign({}, groupObject, {
hasJoined: false
});
grouplist.splice(groupKey, 1, newGroupObject);
setGroupList(grouplist);
} else {
var _newGroupObject = Object.assign({}, group);
grouplist.splice(groupKey, 1, _newGroupObject);
setGroupList(grouplist);
}
}
};
/**
*
* Listener callback when a member is banned from the group
*/
var handleGroupMemberBan = function handleGroupMemberBan() {
var removedUser = arguments.length <= 1 ? undefined : arguments[1];
var group = arguments.length <= 3 ? undefined : arguments[3];
var grouplist = (0, _toConsumableArray2["default"])(groupList);
var groupKey = grouplist.findIndex(function (g) {
return g.guid === group.guid;
});
if (groupKey > -1) {
/**
* If the loggedin user is banned from the group, remove the group from the group list
*/
if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === removedUser.uid) {
var groupObject = _objectSpread({}, grouplist[groupKey]);
var newGroupObject = Object.assign({}, groupObject);
grouplist.splice(groupKey, 1, newGroupObject);
setGroupList(grouplist);
} else {
var _newGroupObject2 = Object.assign({}, group);
grouplist.splice(groupKey, 1, _newGroupObject2);
setGroupList(grouplist);
}
}
};
/**
*
* Listener callback when a user joins/added to the group
*/
var handleGroupMemberAddition = function handleGroupMemberAddition() {
var newUser = arguments.length <= 1 ? undefined : arguments[1];
var group = arguments.length <= 3 ? undefined : arguments[3];
var grouplist = (0, _toConsumableArray2["default"])(groupList);
//search for group
var groupKey = grouplist.findIndex(function (g) {
return g.guid === group.guid;
});
if (groupKey > -1) {
if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === newUser.uid) {
var groupObject = _objectSpread({}, grouplist[groupKey]);
var newgroupObject = Object.assign({}, groupObject, {
hasJoined: true
});
grouplist.splice(groupKey, 1, newgroupObject);
setGroupList(grouplist);
} else {
grouplist.splice(groupKey, 1, group);
setGroupList(grouplist);
}
} else {
grouplist.unshift(group);
setGroupList(grouplist);
}
};
/**
*
* Listener callback when a group member scope is updated
*/
var handleGroupMemberScopeChange = function handleGroupMemberScopeChange() {
var grouplist = (0, _toConsumableArray2["default"])(groupList);
var user = arguments.length <= 1 ? undefined : arguments[1];
var newScope = arguments.length <= 2 ? undefined : arguments[2];
var group = arguments.length <= 4 ? undefined : arguments[4];
//search for group
var groupKey = grouplist.findIndex(function (g) {
return g.guid === group.guid;
});
if (groupKey > -1) {
var groupObject = _objectSpread({}, grouplist[groupKey]);
if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === user.uid) {
var newgroupObject = Object.assign({}, groupObject, {
scope: newScope
});
grouplist.splice(groupKey, 1, newgroupObject);
setGroupList(grouplist);
} else {
var _groupObject = _objectSpread({}, grouplist[groupKey]);
var _newgroupObject = Object.assign({}, _groupObject);
grouplist.splice(groupKey, 1, _newgroupObject);
setGroupList(grouplist);
}
}
};
/**
* Group Listener Handlers
*/
var handlers = {
onMemberAddedToGroup: handleGroupMemberAddition,
onGroupMemberJoined: handleGroupMemberAddition,
onGroupMemberKicked: handleGroupMemberRemoval,
onGroupMemberLeft: handleGroupMemberRemoval,
onGroupMemberBanned: handleGroupMemberBan,
onGroupMemberScopeChanged: handleGroupMemberScopeChange
};
/**
* Remove a group from grouplist
* @param {*} group
*/
var removeGroup = function removeGroup(group) {
var grouplist = (0, _toConsumableArray2["default"])(groupList);
//search for group
var groupKey = grouplist.findIndex(function (g, k) {
return g.guid === group.guid;
});
if (groupKey > -1) {
grouplist.splice(groupKey, 1);
setGroupList(grouplist);
}
};
/**
* Add new group in groupList
* @param {*} group
*/
var addGroup = function addGroup(group) {
var grouplist = (0, _toConsumableArray2["default"])(groupList);
grouplist.unshift(group);
setGroupList(grouplist);
};
/**
* Update Group
* @param {*} group
*/
var updateGroup = function updateGroup(group) {
var grouplist = (0, _toConsumableArray2["default"])(groupList);
//search for group
var groupKey = grouplist.findIndex(function (g, k) {
return g.guid === group.guid;
});
if (groupKey > -1) {
var newGroupObj = _objectSpread(_objectSpread({}, grouplist[groupKey]), group);
grouplist.splice(groupKey, 1, newGroupObj);
setGroupList(grouplist);
}
};
/**
*
* @returns GroupList
*/
var fetchGroups = function fetchGroups() {
return new Promise(function (resolve, reject) {
groupListManager === null || groupListManager === void 0 ? void 0 : groupListManager.current.fetchNextGroups().then(function (grouplist) {
return resolve(grouplist);
})["catch"](function (error) {
return reject(error);
});
});
};
/**
* Fetches new Groups on scroll
*/
var handleGroups = function handleGroups() {
fetchGroups().then(function (grouplist) {
if (groupList.length === 0 && grouplist.length === 0) {
setDecoratorMessage("NO_GROUPS_FOUND");
} else {
setDecoratorMessage("");
}
//setGroupList([...groupList, ...grouplist]);
setGroupList(function (oldlist) {
return [].concat((0, _toConsumableArray2["default"])(oldlist), (0, _toConsumableArray2["default"])(grouplist));
});
})["catch"](function (error) {
setDecoratorMessage("SOMETHING_WRONG");
errorHandler(error);
});
};
/**
* Handles scroll
* @param {*} e
*/
var handleScroll = function handleScroll(e) {
var bottom = Math.round(e.currentTarget.scrollHeight - e.currentTarget.scrollTop) === Math.round(e.currentTarget.clientHeight);
if (bottom) {
handleGroups();
}
};
/**
*
* @param {*} customView
* @returns custom Component
*/
var getCustomView = function getCustomView(customView) {
return /*#__PURE__*/_react["default"].createElement(customView, props);
};
/**
*
* @returns Loading/Empty/Error states
*/
var getMessageContainer = function getMessageContainer() {
if (groupList.length === 0 && (decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === "loading") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupMsgStyle)(style),
className: "grouplist__decorator-message"
}, customView !== null && customView !== void 0 && customView.loading ? getCustomView(customView.loading) : /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupMsgImgStyle)(style, _theme, loadingIconURL),
className: "decorator-message"
}));
} else if (groupList.length === 0 && decoratorMessage.toLowerCase() === "no_groups_found") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupMsgStyle)(style),
className: "grouplist__decorator-message"
}, customView !== null && customView !== void 0 && customView.empty ? getCustomView(customView.empty) : /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupMsgTxtStyle)(style, _theme, decoratorMessage),
className: "decorator-message"
}, emptyText));
} else if (!hideError && decoratorMessage.toLowerCase() === "something_wrong") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupMsgStyle)(style),
className: "grouplist__decorator-message"
}, customView !== null && customView !== void 0 && customView.error ? getCustomView(customView.error, props) : /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.groupMsgTxtStyle)(style, _theme, decoratorMessage),
className: "decorator-message"
}, errorText));
}
};
/**
* Invoked when a group item is clicked
* @param {*} group
*/
var clickHandler = function clickHandler(group) {
_.CometChatGroupEvents.emit(_.CometChatGroupEvents.onItemClick, group);
};
/**
*
* @param {} errorCode
* emits error Event
*/
var errorHandler = function errorHandler(errorCode) {
_.CometChatGroupEvents.emit(_.CometChatGroupEvents.onGroupError, errorCode);
};
/**
* Gets called on mount
*/
(0, _hooks.Hooks)(loggedInUser, handlers, setGroupList, groupListManager, groupCallback, callbackData, handleGroups, limit, searchKeyword, joinedOnly, tags, errorHandler);
/**
*
* @returns GroupList View
*/
var getGroups = function getGroups() {
// Group Mapping
return groupList.map(function (group) {
var isActive = (activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.guid) === group.guid ? true : false;
return /*#__PURE__*/_react["default"].createElement(_.CometChatDataItem, {
key: group.guid,
group: group,
inputData: _dataItemConfiguration.inputData,
style: (0, _style.listItemStyle)(_theme),
theme: _theme,
isActive: isActive,
onClick: clickHandler.bind(_this, group),
avatarConfiguration: _dataItemConfiguration.avatarConfiguration,
statusIndicatorConfiguration: _dataItemConfiguration.statusIndicatorConfiguration
});
});
};
/**
* Component level return
*/
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.groupListStyle)(style, _theme),
className: "cometchat__grouplist",
onScroll: handleScroll
}, getMessageContainer(), getGroups());
});
/**
* Default Props
*/
GroupList.defaultProps = {
limit: 30,
searchKeyword: "",
joinedOnly: false,
tags: null,
style: {
width: "100%",
height: "100%",
background: "",
border: "",
borderRadius: "0",
loadingIconTint: "",
emptyTextFont: "",
emptyTextColor: "",
errorTextFont: "",
errorTextColor: ""
},
customView: {
loading: "",
empty: "",
error: ""
},
loadingIconURL: _spinner["default"],
emptyText: "No groups",
errorText: "Something went wrong",
hideError: false,
activeGroup: {},
dataItemConfiguration: {}
};
/**
* prop types
*/
GroupList.propTypes = {
limit: _propTypes["default"].number,
searchKeyword: _propTypes["default"].string,
joinedOnly: _propTypes["default"].bool,
tags: _propTypes["default"].array,
loadingIconURL: _propTypes["default"].string,
customView: _propTypes["default"].object,
style: _propTypes["default"].object,
errorText: _propTypes["default"].string,
emptyText: _propTypes["default"].string,
hideError: _propTypes["default"].bool,
activeGroup: _propTypes["default"].object,
dataItemConfiguration: _propTypes["default"].object
};
var CometChatGroupList = /*#__PURE__*/_react["default"].memo(GroupList);
exports.CometChatGroupList = CometChatGroupList;