cometchat-react-ui-kit2/dist/Groups/CometChatJoinProtectedGroup/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatJoinProtectedGroup = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _chat = require("@cometchat-pro/chat");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Shared = require("../../Shared");
var _JoinProtectedGroupsStyles = require("./JoinProtectedGroupsStyles");
var _warning = _interopRequireDefault(require("../CometChatCreateGroup/resources/warning.svg"));
var _style = require("./style");
var _CometChatGroupEvents = require("../CometChatGroupEvents");
var CometChatJoinProtectedGroup = function CometChatJoinProtectedGroup(props) {
  /**
   * Destructuring Props
   */
  var title = props.title,
    group = props.group,
    passwordPlaceholderText = props.passwordPlaceholderText,
    joinGroupButtonText = props.joinGroupButtonText,
    style = props.style,
    theme = props.theme;

  /**
   * Internal states
   */
  var _React$useState = _react["default"].useState(null),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    passwordInput = _React$useState2[0],
    setPasswordInput = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    isError = _React$useState4[0],
    setError = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(null),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    errorText = _React$useState6[0],
    setErrorText = _React$useState6[1];
  var _theme = new _Shared.CometChatTheme(theme || {});

  /**
   * handle password input change
   */
  var handleChange = function handleChange(e) {
    setPasswordInput(e.target.value);
  };

  /**
   *
   * @returns Performs join group on click
   */
  var joinGroup = function joinGroup() {
    if (!passwordInput) {
      setError(true);
      setErrorText((0, _Shared.localize)("GROUP_PASSWORD_BLANK"));
      return false;
    }
    var guid = group === null || group === void 0 ? void 0 : group.guid;
    var type = group === null || group === void 0 ? void 0 : group.type;
    var password = passwordInput;
    _chat.CometChat.joinGroup(guid, type, password).then(function (response) {
      setError(false);
      _CometChatGroupEvents.CometChatGroupEvents.emit(_CometChatGroupEvents.CometChatGroupEvents.onGroupMemberJoin, response);
    })["catch"](function (error) {
      _CometChatGroupEvents.CometChatGroupEvents.emit(_CometChatGroupEvents.CometChatGroupEvents.onGroupError, error);
      setError(true);
      setErrorText(error.message);
    });
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "joingroup__container",
    style: (0, _style.joinGroupContainerStyle)()
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "joingroup__title",
    style: (0, _style.joinGroupTitleStyle)(style, _theme)
  }, title), /*#__PURE__*/_react["default"].createElement("div", {
    className: "joingroup__input--password"
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "password",
    placeholder: passwordPlaceholderText,
    value: passwordInput,
    onChange: handleChange,
    style: (0, _style.joinGroupPasswordInputStyle)(style, _theme)
  })), isError && errorText ? /*#__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)(_theme)
  }, errorText))) : null, /*#__PURE__*/_react["default"].createElement("button", {
    className: "joingroup__button--join",
    style: (0, _style.joinGroupButtonStyle)(style, _theme),
    onClick: joinGroup
  }, joinGroupButtonText));
};
exports.CometChatJoinProtectedGroup = CometChatJoinProtectedGroup;
CometChatJoinProtectedGroup.defaultProps = {
  title: (0, _Shared.localize)("ENTER_GROUP_PASSWORD"),
  group: null,
  passwordPlaceholderText: (0, _Shared.localize)("GROUP_PASSWORD"),
  joinGroupButtonText: (0, _Shared.localize)("CONTINUE"),
  style: {
    width: "",
    height: "",
    boxShadow: "",
    background: "",
    border: "",
    borderRadius: "",
    titleTextFont: "",
    titleTextColor: "",
    errorTextFont: "",
    errorTextColor: "",
    passwordTextFont: "",
    passwordTextColor: "",
    passwordPlaceholderTextFont: "",
    passwordPlaceholderTextColor: "",
    passwordInputBackground: "",
    passwordInputBorder: "",
    passwordInputBorderRadius: "",
    passwordInputBoxShadow: "",
    joinButtonTextFont: "",
    joinButtonTextColor: "",
    joinButtonBackground: "",
    joinButtonBorderRadius: ""
  }
};
CometChatJoinProtectedGroup.propTypes = {
  title: _propTypes["default"].string,
  group: _propTypes["default"].object,
  passwordPlaceholderText: _propTypes["default"].string,
  joinGroupButtonText: _propTypes["default"].string,
  style: _propTypes["default"].object
};