cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
305 lines (288 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatUserList = 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 _hooks = require("./hooks");
var _ = require("../../");
var _Shared = require("../../Shared");
var _style = require("./style");
var _spinner = _interopRequireDefault(require("./resources/spinner.svg"));
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; }
var UserList = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
/**
* Destructuring prop values
*/
var limit = props.limit,
searchKeyword = props.searchKeyword,
status = props.status,
friendsOnly = props.friendsOnly,
hideBlockedUsers = props.hideBlockedUsers,
style = props.style,
customView = props.customView,
roles = props.roles,
tags = props.tags,
uids = props.uids,
errorText = props.errorText,
emptyText = props.emptyText,
hideError = props.hideError,
activeUser = props.activeUser,
loadingIconURL = props.loadingIconURL,
dataItemConfiguration = props.dataItemConfiguration,
theme = props.theme;
/**
* Internal States
*/
var loggedInUser = _react["default"].useRef(null);
var userListManager = _react["default"].useRef(null);
var _React$useState = _react["default"].useState([]),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
userList = _React$useState2[0],
setUserList = _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({});
/**
* Public methods
*/
_react["default"].useImperativeHandle(ref, function () {
return {
addUser: addUser,
updateUser: updateUser
};
});
/**
* Emits Error event
* @param {*} errorCode
*/
var errorHandler = function errorHandler(errorCode) {
_.CometChatUserEvents.emit(_.CometChatUserEvents.onUserError, errorCode);
};
/**
* Updates user when an action is performed on it
* @param {*} user
*/
var updateUser = function updateUser(user) {
var userlist = (0, _toConsumableArray2["default"])(userList);
var userKey = userlist.findIndex(function (u) {
return u.uid === user.uid;
});
if (userKey > -1) {
var newUserObj = _objectSpread(_objectSpread({}, userlist[userKey]), user);
userlist.splice(userKey, 1, newUserObj);
setUserList(userlist);
}
};
/**
* Adds new User to the list at the top
* @param {*} user
*/
var addUser = function addUser(user) {
var userlist = (0, _toConsumableArray2["default"])(userList);
userlist.unshift(user);
setUserList(userlist);
};
/**
* Fetch Userlist
* @returns
*/
var fetchUsers = function fetchUsers() {
return new Promise(function (resolve, reject) {
userListManager === null || userListManager === void 0 ? void 0 : userListManager.current.fetchNextUsers().then(function (userlist) {
return resolve(userlist);
})["catch"](function (error) {
return reject(error);
});
});
};
/**
* Handles fetching of new user when scrolled
*/
var handleUsers = function handleUsers() {
fetchUsers().then(function (userlist) {
if (userList.length === 0 && userlist.length === 0) {
setDecoratorMessage("NO_USERS_FOUND");
} else {
setDecoratorMessage("");
}
setUserList(function (oldlist) {
return [].concat((0, _toConsumableArray2["default"])(oldlist), (0, _toConsumableArray2["default"])(userlist));
});
})["catch"](function (error) {
errorHandler(error);
setDecoratorMessage("SOMETHING_WRONG");
});
};
/**
* Performs action on 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) {
handleUsers();
}
};
/**
*
* @param {*} customView
* @param {*} props
* @returns custom Component
*/
var getCustomView = function getCustomView(customView, props) {
return /*#__PURE__*/_react["default"].createElement(customView, props);
};
/**
*
* @returns Loading/Empty/Error Screens
*/
var getMessageContainer = function getMessageContainer() {
if (userList.length === 0 && decoratorMessage.toLowerCase() === "loading") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactMsgStyle)(style),
className: "userlist__decorator-message"
}, customView.loading ? getCustomView(customView.loading, props) : /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactMsgImgStyle)(style, loadingIconURL, _theme),
className: "decorator-message"
}));
} else if (userList.length === 0 && decoratorMessage.toLowerCase() === "no_users_found") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactMsgStyle)(style),
className: "userlist__decorator-message"
}, customView.empty ? getCustomView(customView.empty, props) : /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactMsgTxtStyle)(style, _theme, decoratorMessage, _Shared.fontHelper),
className: "decorator-message"
}, emptyText));
} else if (!hideError && decoratorMessage.toLowerCase() === "something_wrong") {
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactMsgStyle)(style),
className: "userlist__decorator-message"
}, customView.error ? getCustomView(customView.error, props) : /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.contactMsgTxtStyle)(style, _theme, decoratorMessage, _Shared.fontHelper),
className: "decorator-message"
}, errorText));
}
};
/**
* Handles click on a user item
* @param {*} user
*/
var clickHandler = function clickHandler(user) {
_.CometChatUserEvents.emit(_.CometChatUserEvents.onItemClick, user);
};
/**
*
* @returns Division of Users in an alphabetical order
*/
var getUsers = function getUsers() {
var currentLetter = "";
return userList.map(function (user) {
var isActive = (activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) === user.uid ? true : false;
var chr = user.name[0].toUpperCase();
var firstChar = null;
if (chr !== currentLetter) {
currentLetter = chr;
firstChar = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactAlphabetStyle)(_theme),
className: "userlist__alphabet-filter"
}, currentLetter);
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
key: user.uid
}, firstChar, /*#__PURE__*/_react["default"].createElement(_.CometChatDataItem, {
key: user.uid,
user: user,
inputData: _dataItemConfiguration.inputData,
style: (0, _style.listItemStyle)(_theme),
theme: _theme,
isActive: isActive,
onClick: clickHandler.bind(_this, user),
avatarConfiguration: _dataItemConfiguration.avatarConfiguration,
statusIndicatorConfiguration: _dataItemConfiguration.statusIndicatorConfiguration
}));
});
};
/**
* Gets called on Mounting
*/
(0, _hooks.Hooks)(loggedInUser, setUserList, userListManager, updateUser, handleUsers, limit, searchKeyword, status, roles, friendsOnly, hideBlockedUsers, tags, uids, errorHandler);
/**
* Component level return
*/
return /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.contactListStyle)(style, _theme),
className: "cometchat__userlist",
onScroll: handleScroll
}, getMessageContainer(), getUsers());
});
/**
* Default Props
*/
UserList.defaultProps = {
limit: 30,
searchKeyword: "",
status: "",
roles: null,
friendsOnly: false,
hideBlockedUsers: true,
tags: null,
uids: null,
style: {
width: "100%",
height: "100%",
background: "",
border: "",
borderRadius: "0",
loadingIconTint: "",
emptyTextFont: "",
emptyTextColor: "",
errorTextFont: "",
errorTextColor: ""
},
customView: {
loading: "",
empty: "",
error: ""
},
loadingIconURL: _spinner["default"],
emptyText: "No users",
errorText: "Something went wrong",
hideError: false,
activeUser: {},
dataItemConfiguration: {}
};
/**
* Types of Props
*/
UserList.propTypes = {
limit: _propTypes["default"].number,
searchKeyword: _propTypes["default"].string,
status: _propTypes["default"].string,
friendsOnly: _propTypes["default"].bool,
hideBlockedUsers: _propTypes["default"].bool,
loadingIconURL: _propTypes["default"].string,
style: _propTypes["default"].object,
customView: _propTypes["default"].object,
roles: _propTypes["default"].array,
tags: _propTypes["default"].array,
uids: _propTypes["default"].array,
errorText: _propTypes["default"].string,
emptyText: _propTypes["default"].string,
hideError: _propTypes["default"].bool,
activeUser: _propTypes["default"].object,
dataItemConfiguration: _propTypes["default"].object
};
var CometChatUserList = /*#__PURE__*/_react["default"].memo(UserList);
exports.CometChatUserList = CometChatUserList;