cometchat-react-ui-kit2/dist/Shared/PrimaryComponents/CometChatListBase/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatListBase = void 0;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../../../../");
var styles = _interopRequireWildcard(require("./style"));
var _search = _interopRequireDefault(require("./resources/search.svg"));
var _back = _interopRequireDefault(require("./resources/back.svg"));
var _this = void 0;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 *
 * @version 1.0.0
 * @author CometChat
 * @description CometChatListBase is a component useful when presenting a list of items.
 * This component displays list of items, title, and supports style along with back button, and search and filtering of list items.
 * 
 */

var CometChatListBase = function CometChatListBase(props) {
  /**
   * Props destructuring
   */
  var title = props.title,
    searchPlaceholder = props.searchPlaceholder,
    onSearch = props.onSearch,
    onBackButtonClick = props.onBackButtonClick,
    style = props.style,
    backButtonIconURL = props.backButtonIconURL,
    searchIconURL = props.searchIconURL,
    showBackButton = props.showBackButton,
    hideSearch = props.hideSearch,
    searchText = props.searchText,
    theme = props.theme;

  /**
   * Component private scoping
   */
  var defaultConfig = new _.ListBaseConfiguration({});
  var _title = title !== null && title !== void 0 ? title : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.title;
  var _searchPlaceholder = searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.searchPlaceholder;
  var _onSearch = onSearch !== null && onSearch !== void 0 ? onSearch : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.onSearch;
  var _onBackButtonClick = onBackButtonClick !== null && onBackButtonClick !== void 0 ? onBackButtonClick : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.onBackButtonClick;
  var _style = style !== null && style !== void 0 ? style : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.style;
  var _backButtonIconURL = backButtonIconURL !== null && backButtonIconURL !== void 0 ? backButtonIconURL : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.backButtonIconURL;
  var _searchIconURL = searchIconURL !== null && searchIconURL !== void 0 ? searchIconURL : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.searchIconURL;
  var _showBackButton = showBackButton !== null && showBackButton !== void 0 ? showBackButton : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.showBackButton;
  var _hideSearch = hideSearch !== null && hideSearch !== void 0 ? hideSearch : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.hideSearch;
  var _searchText = searchText !== null && searchText !== void 0 ? searchText : defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.searchText;
  var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
  ;

  /**
   * Component internal handlers/methods 
   */
  var searchHandler = function searchHandler(e) {
    var _e$target$value;
    setTimeout(_onSearch((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : _searchText), 500);
  };

  /**
   * Component template scoping
   */
  var getBackButtonElem = function getBackButtonElem() {
    if (_showBackButton) {
      return /*#__PURE__*/React.createElement("div", {
        style: styles.backButtonStyle(_style, _theme, _showBackButton, _backButtonIconURL),
        onClick: _onBackButtonClick.bind(_this)
      });
    }
    return null;
  };
  var getSearchElem = function getSearchElem() {
    if (!_hideSearch) {
      return /*#__PURE__*/React.createElement("div", {
        style: styles.listBaseSearchStyle(_style, _theme),
        className: "listbase__search"
      }, /*#__PURE__*/React.createElement("button", {
        type: "button",
        className: "listbase__search__button",
        style: styles.listBaseSearchButtonStyle(_style, _theme, _searchIconURL)
      }), /*#__PURE__*/React.createElement("input", {
        type: "text",
        autoComplete: "off",
        style: styles.listBaseSearchInputStyle(_style, _theme),
        className: "listbase__search__input",
        placeholder: _searchPlaceholder,
        dir: _.CometChatLocalize.getDir(),
        onChange: searchHandler.bind(_this)
      }));
    }
    return null;
  };

  /**
   * Component template
   */
  return /*#__PURE__*/React.createElement("div", {
    style: styles.listBaseStyle(_style, _theme),
    className: "cometchat__listbase",
    dir: _.CometChatLocalize.getDir()
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.listBaseHeadStyle(_style, _hideSearch),
    className: "listbase__header"
  }, /*#__PURE__*/React.createElement("div", {
    style: styles.listBaseNavStyle(_style),
    className: "listbase__nav"
  }, getBackButtonElem(), /*#__PURE__*/React.createElement("div", {
    style: styles.listBaseTitleStyle(_style, _theme),
    className: "listbase__title"
  }, _title)), getSearchElem()), /*#__PURE__*/React.createElement("div", {
    style: styles.listBaseContainerStyle(_style, _hideSearch),
    className: "listbase__container"
  }, props.children));
};

/**
 * Component default props
 */
exports.CometChatListBase = CometChatListBase;
CometChatListBase.defaultProps = {
  backButtonIconURL: _back["default"],
  searchIconURL: _search["default"]
};

/**
 * Component default props types
 */
CometChatListBase.propTypes = {
  title: _propTypes["default"].string,
  searchPlaceholder: _propTypes["default"].string,
  onSearch: _propTypes["default"].func,
  onBackButtonClick: _propTypes["default"].func,
  style: _propTypes["default"].object,
  hideSearch: _propTypes["default"].bool,
  showBackButton: _propTypes["default"].bool,
  backButtonIconURL: _propTypes["default"].string,
  searchIconURL: _propTypes["default"].string,
  searchText: _propTypes["default"].string,
  theme: _propTypes["default"].object
};