@sendbird/uikit-react 3.1.1 → 3.1.2-rc.0

package/ui/ContextMenu.js

@@ -1,81 +1,96 @@
-import { c as _inherits, d as _createSuper, e as _createClass, f as _classCallCheck, g as _defineProperty, h as _assertThisInitialized, _ as _objectSpread2, a as _slicedToArray } from '../_rollupPluginBabelHelpers-30d122aa.js';
-import React__default, { Component, useState } from 'react';
-import PropTypes from 'prop-types';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-07cd4778.js';
-import { k as getClassName } from '../index-65007eeb.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { _ as __assign } from '../tslib.es6-5c8a20bb.js';
 import { createPortal } from 'react-dom';
 import SortByRow from './SortByRow.js';
-import '../stringSet-92f53c6e.js';
-import '../tslib.es6-c793443a.js';
-
-var MenuItems$1 = /*#__PURE__*/function (_Component) {
-  _inherits(MenuItems, _Component);
-
-  var _super = _createSuper(MenuItems);
-
-  function MenuItems(props) {
-    var _this;
-
-    _classCallCheck(this, MenuItems);
-
-    _this = _super.call(this, props);
+import { k as getClassName } from '../index-f37bc955.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-5efc096b.js';
+import '../uuid-8d849862.js';
+import '../_rollupPluginBabelHelpers-4e546dea.js';
+import 'prop-types';
+import '../stringSet-53204a58.js';
+
+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 = useRef(null);
+
+  var _d = useState({
+    left: 0,
+    top: 0
+  }),
+      menuStyle = _d[0],
+      setMenuStyle = _d[1];
+  /* showParent & hideParent */
+
+
+  useEffect(function () {
+    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+      parentContainRef.current.classList.add('sendbird-reactions--pressed');
+    }
 
-    _defineProperty(_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 = _assertThisInitialized(_this),
-          menuRef = _assertThisInitialize.menuRef;
+  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 */
+
+  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();
 
-    _defineProperty(_assertThisInitialized(_this), "cleanUpEvents", function () {
-      var handleClickOutside = _this.state.handleClickOutside;
-      document.removeEventListener('mousedown', handleClickOutside);
-    });
-
-    _defineProperty(_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;
@@ -86,146 +101,92 @@ var MenuItems$1 = /*#__PURE__*/function (_Component) {
         menuStyle.left -= padding;
       }
 
-      return _this.setState({
-        menuStyle: menuStyle
-      });
-    });
-
-    _this.menuRef = /*#__PURE__*/React__default.createRef();
-    _this.state = {
-      menuStyle: {},
-      handleClickOutside: function handleClickOutside() {}
-    };
-    return _this;
-  }
-
-  _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__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "sendbird-dropdown__menu-backdrop"
-      }), /*#__PURE__*/React__default.createElement("ul", {
-        className: "sendbird-dropdown__menu",
-        ref: this.menuRef,
-        style: _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;
-}(Component);
-MenuItems$1.propTypes = {
-  closeDropdown: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
-  style: PropTypes.shape({}),
-  // https://stackoverflow.com/a/51127130
-  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })]).isRequired,
-  // parentContainRef: PropTypes.oneOfType([
-  //   PropTypes.func,
-  //   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  // ]).isRequired,
-  openLeft: PropTypes.bool
+  }, []);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", {
+    className: Array.isArray(className) ? className.join(' ') : className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-dropdown__menu-backdrop"
+  }), /*#__PURE__*/React__default.createElement("ul", {
+    className: "sendbird-dropdown__menu",
+    ref: menuRef,
+    style: __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) {
-  _inherits(EmojiListItems, _Component);
-
-  var _super = _createSuper(EmojiListItems);
-
-  function EmojiListItems(props) {
-    var _this;
-
-    _classCallCheck(this, EmojiListItems);
 
-    _this = _super.call(this, props);
-
-    _defineProperty(_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 = useState({
+    left: 0,
+    top: 0
+  }),
+      reactionStyle = _c[0],
+      setReactionStyle = _c[1];
+
+  var reactionRef = useRef(null);
+  /* showParent & hideParent */
+
+  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 */
 
-    _defineProperty(_assertThisInitialized(_this), "hideParent", function () {
-      var _this$props$parentCon2 = _this.props.parentContainRef,
-          parentContainRef = _this$props$parentCon2 === void 0 ? {} : _this$props$parentCon2;
-      var current = parentContainRef.current;
+  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();
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setupEvents", function () {
-      var closeDropdown = _this.props.closeDropdown;
-
-      var _assertThisInitialize = _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 */
+
+  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
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "cleanUpEvents", function () {
-      var handleClickOutside = _this.state.handleClickOutside;
-      document.removeEventListener('mousedown', handleClickOutside);
-    });
-
-    _defineProperty(_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;
@@ -248,88 +209,43 @@ var EmojiListItems$1 = /*#__PURE__*/function (_Component) {
         reactionStyle.left = 0;
       }
 
-      return _this.setState({
-        reactionStyle: reactionStyle
-      });
-    });
-
-    _this.reactionRef = /*#__PURE__*/React__default.createRef();
-    _this.state = {
-      reactionStyle: {},
-      handleClickOutside: function handleClickOutside() {}
-    };
-    return _this;
-  }
-
-  _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__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "sendbird-dropdown__menu-backdrop"
-      }), /*#__PURE__*/React__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.createElement(SortByRow, {
-        className: "sendbird-dropdown__reaction-bar__row",
-        maxItemCount: 8,
-        itemWidth: 44,
-        itemHeight: 40
-      }, children))), document.getElementById('sendbird-emoji-list-portal'));
+  }, []);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-dropdown__menu-backdrop"
+  }), /*#__PURE__*/React__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;
-}(Component);
-EmojiListItems$1.propTypes = {
-  closeDropdown: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
-  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })]).isRequired,
-  parentContainRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })]).isRequired,
-  spaceFromTrigger: PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number
-  })
-};
-EmojiListItems$1.defaultProps = {
-  spaceFromTrigger: {}
+  }, /*#__PURE__*/React__default.createElement(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.createElement("li", {
@@ -337,7 +253,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.createElement(Label, {
@@ -346,17 +262,6 @@ var MenuItem = function MenuItem(_ref) {
     color: disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
   }, children));
 };
-MenuItem.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  onClick: PropTypes.func.isRequired,
-  disable: PropTypes.bool
-};
-MenuItem.defaultProps = {
-  className: '',
-  disable: false
-}; // Root components should be appended before ContextMenu is rendered
-
 var MenuRoot = function MenuRoot() {
   return /*#__PURE__*/React__default.createElement("div", {
     id: "sendbird-dropdown-portal"
@@ -367,30 +272,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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
+  var _b = useState(false),
+      showMenu = _b[0],
+      setShowMenu = _b[1];
 
   return /*#__PURE__*/React__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.func.isRequired,
-  menuItems: PropTypes.func.isRequired
-};
 
 export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, ContextMenu as default };
 //# sourceMappingURL=ContextMenu.js.map