@sendbird/uikit-react 3.1.1 → 3.1.2

package/cjs/ui/ContextMenu.js

@@ -2,89 +2,103 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-92e5e012.js');
 var React = require('react');
-var PropTypes = require('prop-types');
-var ui_Label = require('../index-cce2b8c0.js');
-var index = require('../index-10b68ab4.js');
+var tslib_es6 = require('../tslib.es6-ba69891c.js');
 var reactDom = require('react-dom');
 var ui_SortByRow = require('./SortByRow.js');
-require('../stringSet-afc1ff3b.js');
-require('../tslib.es6-12c25052.js');
+var index = require('../index-06c3dca9.js');
+var ui_Label = require('../index-089e0fba.js');
+require('../uuid-49679ac2.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
+require('prop-types');
+require('../stringSet-857a128c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var MenuItems$1 = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers._inherits(MenuItems, _Component);
-
-  var _super = _rollupPluginBabelHelpers._createSuper(MenuItems);
-
-  function MenuItems(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers._classCallCheck(this, MenuItems);
-
-    _this = _super.call(this, props);
+var MenuItems$1 = function MenuItems(_a) {
+  var className = _a.className,
+      children = _a.children,
+      _b = _a.style,
+      style = _b === void 0 ? {} : _b,
+      parentRef = _a.parentRef,
+      parentContainRef = _a.parentContainRef,
+      _c = _a.openLeft,
+      openLeft = _c === void 0 ? false : _c,
+      closeDropdown = _a.closeDropdown;
+  var menuRef = React.useRef(null);
+
+  var _d = React.useState({
+    left: 0,
+    top: 0
+  }),
+      menuStyle = _d[0],
+      setMenuStyle = _d[1];
+  /* showParent & hideParent */
+
+
+  React.useEffect(function () {
+    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+      parentContainRef.current.classList.add('sendbird-reactions--pressed');
+    }
 
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "setupEvents", function () {
-      var closeDropdown = _this.props.closeDropdown;
+    return function () {
+      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
+      }
+    };
+  }, []);
+  /* setupEvents & cleanupEvents */
 
-      var _assertThisInitialize = _rollupPluginBabelHelpers._assertThisInitialized(_this),
-          menuRef = _assertThisInitialize.menuRef;
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      var _a, _b;
 
-      var handleClickOutside = function handleClickOutside(event) {
-        if (menuRef.current && !menuRef.current.contains(event.target)) {
-          closeDropdown();
-        }
-      };
+      if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = menuRef === null || menuRef === void 0 ? void 0 : (_a = menuRef.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+        closeDropdown();
+      }
+    };
 
-      _this.setState({
-        handleClickOutside: handleClickOutside
-      });
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  /* getMenuPosition */
+
+  React.useEffect(function () {
+    var _a;
+
+    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var x = parentRect.x || parentRect.left;
+    var y = parentRect.y || parentRect.top;
+    var menuStyle = {
+      top: y,
+      left: x
+    };
 
-      document.addEventListener('mousedown', handleClickOutside);
-    });
+    if (!(menuRef === null || menuRef === void 0 ? void 0 : menuRef.current)) {
+      setMenuStyle(menuStyle);
+    } else {
+      var innerWidth_1 = window.innerWidth,
+          innerHeight_1 = window.innerHeight;
+      var rect = menuRef.current.getBoundingClientRect();
 
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "cleanUpEvents", function () {
-      var handleClickOutside = _this.state.handleClickOutside;
-      document.removeEventListener('mousedown', handleClickOutside);
-    });
-
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "getMenuPosition", function () {
-      var _this$props = _this.props,
-          parentRef = _this$props.parentRef,
-          openLeft = _this$props.openLeft;
-      var parentRect = parentRef.current.getBoundingClientRect();
-      var x = parentRect.x || parentRect.left;
-      var y = parentRect.y || parentRect.top;
-      var menuStyle = {
-        top: y,
-        left: x
-      };
-      if (!_this.menuRef.current) return menuStyle;
-      var _window = window,
-          innerWidth = _window.innerWidth,
-          innerHeight = _window.innerHeight;
-
-      var rect = _this.menuRef.current.getBoundingClientRect();
-
-      if (y + rect.height > innerHeight) {
+      if (y + rect.height > innerHeight_1) {
         menuStyle.top -= rect.height;
       }
 
-      if (x + rect.width > innerWidth && !openLeft) {
+      if (x + rect.width > innerWidth_1 && !openLeft) {
         menuStyle.left -= rect.width;
       }
 
       if (menuStyle.top < 0) {
-        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
+        menuStyle.top = rect.height < innerHeight_1 ? (innerHeight_1 - rect.height) / 2 : 0;
       }
 
       if (menuStyle.left < 0) {
-        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
+        menuStyle.left = rect.width < innerWidth_1 ? (innerWidth_1 - rect.width) / 2 : 0;
       }
 
       menuStyle.top += 32;
@@ -95,146 +109,92 @@ var MenuItems$1 = /*#__PURE__*/function (_Component) {
         menuStyle.left -= padding;
       }
 
-      return _this.setState({
-        menuStyle: menuStyle
-      });
-    });
-
-    _this.menuRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.state = {
-      menuStyle: {},
-      handleClickOutside: function handleClickOutside() {}
-    };
-    return _this;
-  }
-
-  _rollupPluginBabelHelpers._createClass(MenuItems, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setupEvents();
-      this.getMenuPosition();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.cleanUpEvents();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var menuStyle = this.state.menuStyle;
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          style = _this$props2.style;
-      return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "sendbird-dropdown__menu-backdrop"
-      }), /*#__PURE__*/React__default["default"].createElement("ul", {
-        className: "sendbird-dropdown__menu",
-        ref: this.menuRef,
-        style: _rollupPluginBabelHelpers._objectSpread2({
-          display: 'inline-block',
-          position: 'fixed',
-          left: "".concat(Math.round(menuStyle.left), "px"),
-          top: "".concat(Math.round(menuStyle.top), "px")
-        }, style)
-      }, children)), document.getElementById('sendbird-dropdown-portal'));
+      setMenuStyle(menuStyle);
     }
-  }]);
-
-  return MenuItems;
-}(React.Component);
-MenuItems$1.propTypes = {
-  closeDropdown: PropTypes__default["default"].func.isRequired,
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]).isRequired,
-  style: PropTypes__default["default"].shape({}),
-  // https://stackoverflow.com/a/51127130
-  parentRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].instanceOf(Element)
-  })]).isRequired,
-  // parentContainRef: PropTypes.oneOfType([
-  //   PropTypes.func,
-  //   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  // ]).isRequired,
-  openLeft: PropTypes__default["default"].bool
+  }, []);
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: Array.isArray(className) ? className.join(' ') : className
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-dropdown__menu-backdrop"
+  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "sendbird-dropdown__menu",
+    ref: menuRef,
+    style: tslib_es6.__assign({
+      display: 'inline-block',
+      position: 'fixed',
+      left: "".concat(Math.round(menuStyle.left), "px"),
+      top: "".concat(Math.round(menuStyle.top), "px")
+    }, style)
+  }, children)), document.getElementById('sendbird-dropdown-portal'));
 };
-MenuItems$1.defaultProps = {
-  style: {},
-  openLeft: false
-};
-
-var EmojiListItems$1 = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers._inherits(EmojiListItems, _Component);
-
-  var _super = _rollupPluginBabelHelpers._createSuper(EmojiListItems);
-
-  function EmojiListItems(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers._classCallCheck(this, EmojiListItems);
 
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "showParent", function () {
-      var _this$props$parentCon = _this.props.parentContainRef,
-          parentContainRef = _this$props$parentCon === void 0 ? {} : _this$props$parentCon;
-      var current = parentContainRef.current;
+var EmojiListItems$1 = function EmojiListItems(_a) {
+  var children = _a.children,
+      parentRef = _a.parentRef,
+      parentContainRef = _a.parentContainRef,
+      _b = _a.spaceFromTrigger,
+      spaceFromTrigger = _b === void 0 ? {
+    x: 0,
+    y: 0
+  } : _b,
+      closeDropdown = _a.closeDropdown;
+
+  var _c = React.useState({
+    left: 0,
+    top: 0
+  }),
+      reactionStyle = _c[0],
+      setReactionStyle = _c[1];
+
+  var reactionRef = React.useRef(null);
+  /* showParent & hideParent */
+
+  React.useEffect(function () {
+    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+      parentContainRef.current.classList.add('sendbird-reactions--pressed');
+    }
 
-      if (parentContainRef && current) {
-        current.classList.add('sendbird-reactions--pressed');
+    return function () {
+      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
       }
-    });
+    };
+  }, []);
+  /* setupEvents & cleanupEvents */
 
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "hideParent", function () {
-      var _this$props$parentCon2 = _this.props.parentContainRef,
-          parentContainRef = _this$props$parentCon2 === void 0 ? {} : _this$props$parentCon2;
-      var current = parentContainRef.current;
+  React.useEffect(function () {
+    var handleClickOutSide = function handleClickOutSide(event) {
+      var _a, _b;
 
-      if (parentContainRef && current) {
-        current.classList.remove('sendbird-reactions--pressed');
+      if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+        closeDropdown();
       }
-    });
-
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "setupEvents", function () {
-      var closeDropdown = _this.props.closeDropdown;
-
-      var _assertThisInitialize = _rollupPluginBabelHelpers._assertThisInitialized(_this),
-          reactionRef = _assertThisInitialize.reactionRef;
-
-      var handleClickOutside = function handleClickOutside(event) {
-        if (reactionRef.current && !reactionRef.current.contains(event.target)) {
-          closeDropdown();
-        }
-      };
-
-      _this.setState({
-        handleClickOutside: handleClickOutside
-      });
+    };
 
-      document.addEventListener('mousedown', handleClickOutside);
-    });
+    document.addEventListener('mousedown', handleClickOutSide);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutSide);
+    };
+  }, []);
+  /* getBarPosition */
+
+  React.useEffect(function () {
+    var _a, _b;
+
+    var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
+    var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
+    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var x = parentRect.x || parentRect.left;
+    var y = parentRect.y || parentRect.top;
+    var reactionStyle = {
+      top: y,
+      left: x
+    };
 
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "cleanUpEvents", function () {
-      var handleClickOutside = _this.state.handleClickOutside;
-      document.removeEventListener('mousedown', handleClickOutside);
-    });
-
-    _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._assertThisInitialized(_this), "getBarPosition", function () {
-      // calculate the location that the context menu should be
-      var _this$props = _this.props,
-          parentRef = _this$props.parentRef,
-          spaceFromTrigger = _this$props.spaceFromTrigger;
-      var spaceFromTriggerX = spaceFromTrigger.x || 0;
-      var spaceFromTriggerY = spaceFromTrigger.y || 0;
-      var parentRect = parentRef.current.getBoundingClientRect();
-      var x = parentRect.x || parentRect.left;
-      var y = parentRect.y || parentRect.top;
-      var reactionStyle = {
-        top: y,
-        left: x
-      };
-      if (!_this.reactionRef.current) return reactionStyle;
-
-      var rect = _this.reactionRef.current.getBoundingClientRect();
+    if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
+      setReactionStyle(reactionStyle);
+    } else {
+      var rect = (_b = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
 
       if (reactionStyle.top < rect.height) {
         reactionStyle.top += parentRect.height;
@@ -257,88 +217,43 @@ var EmojiListItems$1 = /*#__PURE__*/function (_Component) {
         reactionStyle.left = 0;
       }
 
-      return _this.setState({
-        reactionStyle: reactionStyle
-      });
-    });
-
-    _this.reactionRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.state = {
-      reactionStyle: {},
-      handleClickOutside: function handleClickOutside() {}
-    };
-    return _this;
-  }
-
-  _rollupPluginBabelHelpers._createClass(EmojiListItems, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setupEvents();
-      this.getBarPosition();
-      this.showParent();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.cleanUpEvents();
-      this.hideParent();
+      setReactionStyle(reactionStyle);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var reactionStyle = this.state.reactionStyle;
-      var children = this.props.children;
-      return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "sendbird-dropdown__menu-backdrop"
-      }), /*#__PURE__*/React__default["default"].createElement("ul", {
-        className: "sendbird-dropdown__reaction-bar",
-        ref: this.reactionRef,
-        style: {
-          display: 'inline-block',
-          position: 'fixed',
-          left: "".concat(Math.round(reactionStyle.left), "px"),
-          top: "".concat(Math.round(reactionStyle.top), "px")
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
-        className: "sendbird-dropdown__reaction-bar__row",
-        maxItemCount: 8,
-        itemWidth: 44,
-        itemHeight: 40
-      }, children))), document.getElementById('sendbird-emoji-list-portal'));
+  }, []);
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-dropdown__menu-backdrop"
+  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "sendbird-dropdown__reaction-bar",
+    ref: reactionRef,
+    style: {
+      display: 'inline-block',
+      position: 'fixed',
+      left: "".concat(Math.round(reactionStyle.left), "px"),
+      top: "".concat(Math.round(reactionStyle.top), "px")
     }
-  }]);
-
-  return EmojiListItems;
-}(React.Component);
-EmojiListItems$1.propTypes = {
-  closeDropdown: PropTypes__default["default"].func.isRequired,
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]).isRequired,
-  parentRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].instanceOf(Element)
-  })]).isRequired,
-  parentContainRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].instanceOf(Element)
-  })]).isRequired,
-  spaceFromTrigger: PropTypes__default["default"].shape({
-    x: PropTypes__default["default"].number,
-    y: PropTypes__default["default"].number
-  })
-};
-EmojiListItems$1.defaultProps = {
-  spaceFromTrigger: {}
+  }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
+    className: "sendbird-dropdown__reaction-bar__row",
+    maxItemCount: 8,
+    itemWidth: 44,
+    itemHeight: 40
+  }, children))), document.getElementById('sendbird-emoji-list-portal'));
 };
 
-var ENTER = 13;
+var ENTER_KEY = 13;
 var MenuItems = MenuItems$1;
 var EmojiListItems = EmojiListItems$1;
-var MenuItem = function MenuItem(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      onClick = _ref.onClick,
-      disable = _ref.disable;
+var MenuItem = function MenuItem(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      children = _a.children,
+      onClick = _a.onClick,
+      _c = _a.disable,
+      disable = _c === void 0 ? false : _c;
 
   var handleClickEvent = function handleClickEvent(e) {
-    if (!disable) onClick(e);
+    if (!disable && onClick) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }
   };
 
   return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -346,7 +261,7 @@ var MenuItem = function MenuItem(_ref) {
     role: "menuitem",
     onClick: handleClickEvent,
     onKeyPress: function onKeyPress(e) {
-      if (e.keyCode === ENTER) handleClickEvent(e);
+      if (e.keyCode === ENTER_KEY) handleClickEvent(e);
     },
     tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
@@ -355,17 +270,6 @@ var MenuItem = function MenuItem(_ref) {
     color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
   }, children));
 };
-MenuItem.propTypes = {
-  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].element]).isRequired,
-  onClick: PropTypes__default["default"].func.isRequired,
-  disable: PropTypes__default["default"].bool
-};
-MenuItem.defaultProps = {
-  className: '',
-  disable: false
-}; // Root components should be appended before ContextMenu is rendered
-
 var MenuRoot = function MenuRoot() {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     id: "sendbird-dropdown-portal"
@@ -376,30 +280,22 @@ var EmojiReactionListRoot = function EmojiReactionListRoot() {
     id: "sendbird-emoji-list-portal"
   });
 };
-function ContextMenu(_ref2) {
-  var menuTrigger = _ref2.menuTrigger,
-      menuItems = _ref2.menuItems;
+function ContextMenu(_a) {
+  var menuTrigger = _a.menuTrigger,
+      menuItems = _a.menuItems;
 
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
+  var _b = React.useState(false),
+      showMenu = _b[0],
+      setShowMenu = _b[1];
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-context-menu",
-    style: {
-      display: 'inline'
-    }
+    className: "sendbird-context-menu"
   }, menuTrigger(function () {
     return setShowMenu(!showMenu);
   }), showMenu && menuItems(function () {
     return setShowMenu(false);
   }));
 }
-ContextMenu.propTypes = {
-  menuTrigger: PropTypes__default["default"].func.isRequired,
-  menuItems: PropTypes__default["default"].func.isRequired
-};
 
 exports.EmojiListItems = EmojiListItems;
 exports.EmojiReactionListRoot = EmojiReactionListRoot;