cometchat-react-ui-kit2/dist/Shared/UtilityComponents/CometChatMenuList/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatMenuList = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _more = _interopRequireDefault(require("./resources/more.svg"));
var _style = require("./style");
var _Shared = require("../../../Shared");
var _this = void 0;
var CometChatMenuList = function CometChatMenuList(props) {
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    toggle = _React$useState2[0],
    setToggle = _React$useState2[1];
  var handleToggle = function handleToggle() {
    return setToggle(!toggle);
  };
  var callback = function callback(onClickFunc, event) {
    onClickFunc(props.data, event);
  };
  var hideTooltip = function hideTooltip(event) {
    return event.target.removeAttribute("title");
  };
  var showTooltip = function showTooltip(event) {
    return event.target.setAttribute("title", event.target.title);
  };
  var getMenuPane = function getMenuPane() {
    var _props$list;
    return toggle ? /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.toggleStyle)(props),
      className: "menu__list"
    }, props === null || props === void 0 ? void 0 : (_props$list = props.list) === null || _props$list === void 0 ? void 0 : _props$list.slice(props.mainMenuLimit).map(function (ele) {
      return /*#__PURE__*/_react["default"].createElement(_Shared.CometChatListItem, {
        key: ele.id,
        type: "button",
        className: "list__item",
        id: ele.id,
        style: (0, _style.listItemStyle)(props),
        text: ele.title,
        onClick: callback.bind(_this, ele.onClick),
        onItemClick: callback.bind(_this, ele.onClick),
        onMouseEnter: showTooltip,
        onMouseLeave: hideTooltip
      });
    })) : null;
  };
  var getMenuList = function getMenuList() {
    var _props$list2;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props === null || props === void 0 ? void 0 : (_props$list2 = props.list) === null || _props$list2 === void 0 ? void 0 : _props$list2.slice(0, props === null || props === void 0 ? void 0 : props.mainMenuLimit).map(function (ele) {
      return /*#__PURE__*/_react["default"].createElement(_Shared.CometChatListItem, {
        key: ele.id,
        className: "list__item",
        id: ele.id,
        iconURL: ele.iconURL,
        onClick: callback.bind(_this, ele.onClick),
        onItemClick: callback.bind(_this, ele.onClick),
        style: (0, _style.menuActionStyle)(props),
        onMouseEnter: showTooltip,
        onMouseLeave: hideTooltip
      });
    }), props.list.length > props.mainMenuLimit && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Shared.CometChatListItem, {
      type: "button",
      style: (0, _style.menuActionStyle)(props),
      className: "list__item",
      iconURL: _more["default"],
      onItemClick: handleToggle.bind(_this),
      onMouseEnter: showTooltip,
      onMouseLeave: hideTooltip
    }), getMenuPane()));
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.actionWrapperStyle)(props),
    className: "menu__list"
  }, getMenuList());
};
exports.CometChatMenuList = CometChatMenuList;
CometChatMenuList.defaultProps = {
  moreIconURL: _more["default"],
  mainMenuLimit: 3,
  data: {},
  subMenuStyle: {
    width: "",
    height: "",
    border: "",
    borderRadius: "",
    background: "",
    moreIconTint: ""
  },
  list: [],
  isOpen: false,
  style: {}
};
CometChatMenuList.propTypes = {
  moreIconURL: _propTypes["default"].string,
  mainMenuLimit: _propTypes["default"].number,
  data: _propTypes["default"].object,
  isOpen: _propTypes["default"].bool,
  list: _propTypes["default"].array,
  subMenuStyle: _propTypes["default"].object,
  style: _propTypes["default"].object
};