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

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatGroups = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../..");
var _GroupListConfiguration = require("../../Groups/CometChatGroupList/GroupListConfiguration");
var _CreateGroupConfiguration = require("../../Groups/CometChatCreateGroup/CreateGroupConfiguration");
var _style = require("./style");
var _CometChatCreateGroup = require("../CometChatCreateGroup");
var _this = void 0;
/**
 *
 * CometChatGroups is a container component that wraps and
 * formats CometChatListBase and CometChatGroupList component, with no behavior of its own.
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 *
 */

var Groups = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  /**
   * Destructuring Props
   */
  var title = props.title,
    searchPlaceholder = props.searchPlaceholder,
    activeGroup = props.activeGroup,
    style = props.style,
    createGroupIconURL = props.createGroupIconURL,
    backButtonIconURL = props.backButtonIconURL,
    searchIconURL = props.searchIconURL,
    showBackButtonURL = props.showBackButtonURL,
    hideCreateGroup = props.hideCreateGroup,
    hideSearch = props.hideSearch,
    groupListConfiguration = props.groupListConfiguration,
    createGroupConfiguration = props.createGroupConfiguration,
    theme = props.theme;

  /**
   * Component internal state
   */
  var groupListRef = _react["default"].useRef(null);
  var _React$useState = _react["default"].useState(""),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    searchInput = _React$useState2[0],
    setSearchInput = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    viewCreateGroup = _React$useState4[0],
    setViewCreateGroup = _React$useState4[1];
  var _theme = new _.CometChatTheme(theme || {});
  var _groupListConfiguration = groupListConfiguration || new _GroupListConfiguration.GroupListConfiguration({});
  var _createGroupConfiguration = createGroupConfiguration || new _CreateGroupConfiguration.CreateGroupConfiguration({});

  /**
   * Public methods
   */
  _react["default"].useImperativeHandle(ref, function () {
    return {
      groupListRef: groupListRef.current
    };
  });

  /**
   * Triggers addGroup method og groupList
   * @param {*} group
   */
  var updateGroup = function updateGroup(group) {
    if (groupListRef !== null && groupListRef !== void 0 && groupListRef.current) {
      groupListRef.current.addGroup(group);
    }
  };

  /**
   * Listener when Group is created successfully
   */
  _.CometChatGroupEvents.addListener(_.CometChatGroupEvents.onGroupCreate, "onGroupCreate", updateGroup);

  /**
   * Action to be performed when clicked on close icon of create group modal
   */
  var closeCreateGroup = function closeCreateGroup() {
    setViewCreateGroup(false);
  };

  /**
   * Action to be performed when clicked on create Group icon
   */
  var openCreateGroup = function openCreateGroup() {
    setViewCreateGroup(true);
  };

  /**
   *
   * @returns Create Group Modal View
   */
  var showCreateGroup = function showCreateGroup() {
    return viewCreateGroup ? /*#__PURE__*/_react["default"].createElement(_.CometChatPopover, {
      withBackDrop: viewCreateGroup ? true : false,
      style: (0, _style.popOverForCreateGroup)(_theme, _createGroupConfiguration)
    }, /*#__PURE__*/_react["default"].createElement(_CometChatCreateGroup.CometChatCreateGroup, {
      title: (0, _.localize)("NEW__GROUP"),
      namePlaceholderText: (0, _.localize)("ENTER_GROUP_NAME"),
      passwordPlaceholderText: (0, _.localize)("ENTER_GROUP_PASSWORD"),
      createGroupButtonText: (0, _.localize)("CREATE_GROUP"),
      onClose: _createGroupConfiguration.onClose || closeCreateGroup,
      onCreateGroup: _createGroupConfiguration.onCreateGroup,
      hideCloseButton: _createGroupConfiguration.hideCloseButton,
      closeButtonIconURL: _createGroupConfiguration.closeButtonIconURL,
      style: (0, _style.getCreateGroupStyle)(_createGroupConfiguration, _theme)
    })) : null;
  };

  /**
   *
   * @returns Create group button
   */
  var getCreateGroupButtonElem = function getCreateGroupButtonElem() {
    if (!hideCreateGroup) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        onClick: openCreateGroup.bind(_this),
        style: (0, _style.createGroupBtnStyle)(style, createGroupIconURL, _theme)
      });
    }
    return null;
  };

  /**
   * Handles search
   * @param {*} searchText
   */
  var searchHandler = function searchHandler(searchText) {
    setSearchInput(searchText);
  };

  /**
   * Component Level Return
   */
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.containerStyle)(style),
    className: "cometchat__groups"
  }, getCreateGroupButtonElem(), /*#__PURE__*/_react["default"].createElement(_.CometChatListBase, {
    title: title,
    searchPlaceholder: searchInput ? searchInput : searchPlaceholder,
    onSearch: searchHandler,
    style: (0, _style.getListBaseStyle)(style, _theme),
    searchIconURL: searchIconURL,
    showBackButton: showBackButtonURL,
    hideSearch: hideSearch,
    backButtonIconURL: backButtonIconURL
  }, /*#__PURE__*/_react["default"].createElement(_.CometChatGroupList, {
    ref: groupListRef,
    limit: _groupListConfiguration.limit,
    searchKeyword: searchInput ? searchInput : _groupListConfiguration.searchKeyword,
    joinedOnly: _groupListConfiguration.joinedOnly,
    tags: _groupListConfiguration.tags,
    style: (0, _style.getListStyle)(_groupListConfiguration, _theme),
    customView: _groupListConfiguration.customView,
    loadingIconURL: _groupListConfiguration.loadingIconURL,
    emptyText: (0, _.localize)("NO_GROUPS_FOUND"),
    errorText: (0, _.localize)("SOMETHING_WENT_WRONG"),
    hideError: _groupListConfiguration.hideError,
    activeGroup: activeGroup,
    dataItemConfiguration: _groupListConfiguration.dataItemConfiguration
  })), showCreateGroup());
});

/**
 * Default Props
 */
Groups.defaultProps = {
  title: "Groups",
  searchPlaceholder: "Search",
  activeGroup: null,
  style: {
    width: "",
    height: "",
    border: "",
    cornerRadius: "",
    background: "",
    titleFont: "",
    titleColor: "",
    backIconTint: "",
    createGroupIconTint: "",
    searchBorder: "",
    searchBorderRadius: "",
    searchBackground: "",
    searchTextFont: "",
    searchTextColor: "",
    searchIconTint: ""
  },
  createGroupIconURL: null,
  backButtonIconURL: null,
  searchIconURL: null,
  showBackButton: false,
  hideCreateGroup: false,
  hideSearch: false,
  groupListConfiguration: null,
  createGroupConfiguration: null
};

/**
 * Props Types
 */
Groups.propTypes = {
  title: _propTypes["default"].string,
  searchPlaceholder: _propTypes["default"].string,
  activeGroup: _propTypes["default"].object,
  style: _propTypes["default"].object,
  createGroupIconURL: _propTypes["default"].string,
  backButtonIconURL: _propTypes["default"].string,
  searchIconURL: _propTypes["default"].string,
  showBackButton: _propTypes["default"].bool,
  hideCreateGroup: _propTypes["default"].bool,
  hideSearch: _propTypes["default"].bool,
  groupListConfiguration: _propTypes["default"].object,
  createGroupConfiguration: _propTypes["default"].object
};
var CometChatGroups = /*#__PURE__*/_react["default"].memo(Groups);
exports.CometChatGroups = CometChatGroups;