cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
308 lines (297 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatCreateGroup = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _chat = require("@cometchat-pro/chat");
var _CreateGroupStyles = require("./CreateGroupStyles");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Shared = require("../../Shared");
var _UIKitConstants = require("../../Shared/Constants/UIKitConstants");
var _style = require("./style");
var _CometChatGroupEvents = require("../CometChatGroupEvents");
var _warning = _interopRequireDefault(require("./resources/warning.svg"));
var _this = void 0;
var CometChatCreateGroup = function CometChatCreateGroup(props) {
/**
* Destructuring Props
*/
var title = props.title,
namePlaceholderText = props.namePlaceholderText,
passwordPlaceholderText = props.passwordPlaceholderText,
hideCloseButton = props.hideCloseButton,
closeButtonIconURL = props.closeButtonIconURL,
createGroupButtonText = props.createGroupButtonText,
onClose = props.onClose,
onCreateGroup = props.onCreateGroup,
style = props.style,
theme = props.theme;
/**
* Setting Theme
*/
var _theme = new _Shared.CometChatTheme(theme || {});
/**
* Internal States and properties
*/
var groupTypes = {
"public": _Shared.GroupTypeConstants["public"],
"private": _Shared.GroupTypeConstants["private"],
password: _Shared.GroupTypeConstants.password
};
var _React$useState = _react["default"].useState(groupTypes["public"]),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
activeTab = _React$useState2[0],
setActiveTab = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
showPasswordInput = _React$useState4[0],
setShowPasswordInput = _React$useState4[1];
var _React$useState5 = _react["default"].useState(null),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
error = _React$useState6[0],
setError = _React$useState6[1];
var _React$useState7 = _react["default"].useState(null),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
groupNameInput = _React$useState8[0],
setGroupNameInput = _React$useState8[1];
var _React$useState9 = _react["default"].useState(null),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
passwordInput = _React$useState10[0],
setPasswordInput = _React$useState10[1];
/**
* Reset Create Group form
*/
var resetGroupData = function resetGroupData() {
setError(null);
setShowPasswordInput(false);
setGroupNameInput(null);
setPasswordInput(null);
setActiveTab(null);
};
/**
*
* @param {*} errorCode Emits an error event to handle the error occured
*/
var errorHandler = function errorHandler(errorCode) {
_CometChatGroupEvents.CometChatGroupEvents.emit(_CometChatGroupEvents.CometChatGroupEvents.onGroupError, errorCode);
};
/**
*
* @param {*} e
* set Group Name value
*/
var handleGroupNameChange = function handleGroupNameChange(e) {
setGroupNameInput(e.target.value);
};
/**
*
* @param {*} e
* set Group Password value
*/
var handlePasswordChange = function handlePasswordChange(e) {
setPasswordInput(e.target.value);
};
/**
* When Tab is selected
*/
var onActiveTab = function onActiveTab(type) {
resetGroupData();
setActiveTab(type);
setShowPasswordInput(type === groupTypes.password ? true : false);
};
/**
* Validates all the group details that were entered before creating the group
* @param
*/
var validate = function validate() {
if (!groupNameInput) {
setError((0, _Shared.localize)("GROUP_NAME_BLANK"));
return false;
}
if (!activeTab) {
setError((0, _Shared.localize)("GROUP_TYPE_BLANK"));
return false;
}
if (activeTab === groupTypes.password) {
if (!passwordInput) {
setError((0, _Shared.localize)("GROUP_PASSWORD_BLANK"));
return false;
}
}
return true;
};
/**
* Close create group screen
*/
var closeCreateGroupView = function closeCreateGroupView() {
if (onClose) {
resetGroupData();
onClose();
}
};
/**
*
* @returns new group created by user
*/
var createGroup = function createGroup() {
if (!validate()) {
return false;
}
if (onCreateGroup) {
onCreateGroup();
return false;
}
var groupType = activeTab.trim();
var password = passwordInput;
var guid = _UIKitConstants.GroupsConstants.GROUP_ + new Date().getTime();
var name = groupNameInput;
var type;
switch (groupType) {
case groupTypes["public"]:
type = groupTypes["public"];
break;
case groupTypes["private"]:
type = groupTypes["private"];
break;
case groupTypes.password:
type = groupTypes.password;
break;
default:
break;
}
var group = new _chat.CometChat.Group(guid, name, type, password);
_chat.CometChat.createGroup(group).then(function (group) {
closeCreateGroupView();
resetGroupData();
_CometChatGroupEvents.CometChatGroupEvents.emit(_CometChatGroupEvents.CometChatGroupEvents.onGroupCreate, group);
})["catch"](function (error) {
errorHandler(error);
});
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__wrapper",
style: (0, _style.createGroupWrapperStyle)(style, _theme)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__header",
style: (0, _style.createGroupHeader)()
}, /*#__PURE__*/_react["default"].createElement("p", {
className: "creategroup__title",
style: (0, _style.createGroupTitleStyle)(style, _theme)
}, title), !hideCloseButton ? /*#__PURE__*/_react["default"].createElement("span", {
className: "creategroup__close",
style: (0, _style.closeIconStyle)(style, closeButtonIconURL, _theme),
onClick: onClose
}) : null), /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__body",
style: (0, _style.createGroupBodyStyle)()
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__tabcontainer",
style: (0, _style.createGroupTabContainerStyle)(style)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__tablist",
style: (0, _style.createGroupTabListStyle)(style)
}, Object.keys(groupTypes).map(function (tab) {
return /*#__PURE__*/_react["default"].createElement(_Shared.CometChatListItem, {
className: "creategroup__tab",
style: (0, _style.createGroupTabStyle)(style, _theme, activeTab, tab),
text: tab,
onItemClick: onActiveTab.bind(_this, tab)
});
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__input",
style: (0, _style.createGroupInput)(style)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__input--name",
style: (0, _style.createGroupInputName)()
}, /*#__PURE__*/_react["default"].createElement("input", {
onChange: handleGroupNameChange,
value: groupNameInput,
type: "text",
placeholder: namePlaceholderText,
style: (0, _style.nameInputStyle)(style, _theme)
})), showPasswordInput ? /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__input--password",
style: (0, _style.createGroupInputPassword)()
}, /*#__PURE__*/_react["default"].createElement("input", {
onChange: handlePasswordChange,
value: passwordInput,
type: "password",
placeholder: passwordPlaceholderText,
style: (0, _style.passwordInputStyle)(style, _theme)
})) : null), error ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
className: "decorator__message--error",
style: (0, _style.errorContainerStyle)(style, _theme)
}, /*#__PURE__*/_react["default"].createElement(_Shared.CometChatListItem, {
iconURL: _warning["default"],
style: (0, _style.errorIconStyle)()
}), /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.errorTextStyle)(style, _theme)
}, error))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "creategroup__button--create",
style: (0, _style.createGroupButton)(style)
}, /*#__PURE__*/_react["default"].createElement("button", {
onClick: createGroup.bind(_this),
style: (0, _style.createButtonStyle)(style, _theme)
}, createGroupButtonText))));
};
exports.CometChatCreateGroup = CometChatCreateGroup;
CometChatCreateGroup.defaultProps = {
title: (0, _Shared.localize)("NEW__GROUP"),
namePlaceholderText: (0, _Shared.localize)("ENTER_GROUP_NAME"),
passwordPlaceholderText: (0, _Shared.localize)("ENTER_GROUP_PASSWORD"),
hideCloseButton: false,
closeButtonIconURL: "",
createGroupButtonText: (0, _Shared.localize)("CREATE_GROUP"),
onClose: "",
onCreateGroup: "",
style: {
width: "",
height: "",
background: "",
border: "",
borderRadius: "",
boxShadow: "",
closeIconTint: "",
titleTextFont: "",
titleTextColor: "",
errorTextFont: "",
errorTextBackground: "",
errorTextBorderRadius: "",
errorTextBorder: "",
errorTextColor: "",
groupTypeTextFont: "",
groupTypeTextColor: "",
groupTypeTextBackground: "",
groupTypeTextActiveBackground: "",
namePlaceholderTextFont: "",
namePlaceholderTextColor: "",
nameInputBackground: "",
nameInputBorder: "",
nameInputBorderRadius: "",
nameInputBoxShadow: "",
passwordPlaceholderTextFont: "",
passwordPlaceholderTextColor: "",
passwordInputBackground: "",
passwordInputBorder: "",
passwordInputBorderRadius: "",
passwordInputBoxShadow: "",
createGroupButtonTextFont: "",
createGroupButtonTextColor: "",
createGroupButtonBackground: "",
createGroupButtonBorderRadius: ""
}
};
CometChatCreateGroup.propTypes = {
title: _propTypes["default"].string,
namePlaceholderText: _propTypes["default"].string,
passwordPlaceholderText: _propTypes["default"].string,
hideCloseButton: _propTypes["default"].bool,
closeButtonIconURL: _propTypes["default"].string,
createGroupButtonText: _propTypes["default"].string,
onClose: _propTypes["default"].func,
onCreateGroup: _propTypes["default"].func,
style: _propTypes["default"].object
};