@atlaskit/reactions 21.5.1 → 21.6.1

package/dist/esm/components/ReactionPicker.js

@@ -1,274 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/** @jsx jsx */
-import React, { Fragment, PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-import { jsx, css } from '@emotion/core';
-import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import { Selector } from './Selector';
-import { Trigger } from './Trigger';
-import { UFO } from '../analytics';
-import { layers } from '@atlaskit/theme/constants';
-var pickerStyle = css({
-  verticalAlign: 'middle',
-  '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
-  }
-});
-var contentStyle = css({
-  display: 'flex'
-});
-var popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
-  borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
-  '&> div': {
-    boxShadow: undefined
-  }
-});
-
-function noop() {}
-/**
- * This renders the picker component (wrapped by the ConnectedReactionPicker)
- */
-
-
-export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ReactionPicker, _PureComponent);
-
-  var _super = _createSuper(ReactionPicker);
-
-  function ReactionPicker(props) {
-    var _this;
-
-    _classCallCheck(this, ReactionPicker);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "updatePopper", noop);
-
-    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (e) {
-      var isOpen = _this.state.isOpen;
-
-      if (!isOpen) {
-        return;
-      }
-
-      var domNode = ReactDOM.findDOMNode(_assertThisInitialized(_this));
-
-      if (!domNode || e.target instanceof Node && !domNode.contains(e.target)) {
-        if (_this.props.onCancel) {
-          _this.props.onCancel();
-        }
-
-        _this.close();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "showFullPicker", function (e) {
-      e.preventDefault();
-      var onShowMore = _this.props.onShowMore;
-
-      if (onShowMore) {
-        onShowMore();
-      } // Update popper position
-
-
-      _this.setState({
-        isOpen: true,
-        showFullPicker: true
-      }, function () {
-        return _this.updatePopper();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onEmojiSelected", function (emoji) {
-      var onSelection = _this.props.onSelection;
-
-      if (!emoji.id) {
-        return;
-      }
-
-      onSelection(emoji.id, _this.state.showFullPicker ? 'emojiPicker' : 'quickSelector');
-
-      _this.close(emoji.id);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onTriggerClick", function () {
-      // ufo start reaction experience
-      UFO.PickerRender.start();
-
-      if (_this.props.onOpen) {
-        _this.props.onOpen();
-      }
-
-      _this.setState({
-        isOpen: !_this.state.isOpen,
-        showFullPicker: false
-      }, function () {
-        // ufo add reaction success
-        UFO.PickerRender.success();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "popperModifiers", [{
-      name: 'applyStyle',
-      enabled: false
-    }, {
-      name: 'hide',
-      enabled: false
-    }, {
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [0, 0]
-      }
-    }, {
-      name: 'flip',
-      enabled: true,
-      options: {
-        flipVariations: true,
-        boundariesElement: 'scrollParent'
-      }
-    }, {
-      name: 'preventOverflow',
-      enabled: true
-    }]);
-
-    _this.state = {
-      isOpen: false,
-      showFullPicker: false
-    };
-    return _this;
-  }
-
-  _createClass(ReactionPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('click', this.handleClickOutside, {
-        capture: true
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.handleClickOutside, {
-        capture: true
-      });
-      UFO.PickerRender.abort({
-        metadata: {
-          source: 'Reaction-Picker',
-          reason: 'unmount'
-        }
-      });
-    }
-  }, {
-    key: "close",
-    value: function close(_emojiId) {
-      this.setState({
-        isOpen: false,
-        showFullPicker: false
-      }, function () {
-        // ufo abort reaction experience
-        UFO.PickerRender.abort({
-          metadata: {
-            emojiId: _emojiId,
-            source: 'Reaction-Picker',
-            reason: 'close dialog'
-          }
-        });
-      });
-    }
-  }, {
-    key: "renderSelector",
-    value: function renderSelector() {
-      var _this$props = this.props,
-          emojiProvider = _this$props.emojiProvider,
-          allowAllEmojis = _this$props.allowAllEmojis;
-      return jsx("div", {
-        css: contentStyle
-      }, jsx(Selector, {
-        emojiProvider: emojiProvider,
-        onSelection: this.onEmojiSelected,
-        showMore: allowAllEmojis,
-        onMoreClick: this.showFullPicker
-      }));
-    }
-  }, {
-    key: "renderEmojiPicker",
-    value: function renderEmojiPicker() {
-      return jsx(EmojiPicker, {
-        emojiProvider: this.props.emojiProvider,
-        onSelection: this.onEmojiSelected
-      });
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      return this.state.showFullPicker ? this.renderEmojiPicker() : this.renderSelector();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var isOpen = this.state.isOpen;
-      var _this$props2 = this.props,
-          miniMode = _this$props2.miniMode,
-          className = _this$props2.className;
-      return jsx("div", {
-        className: " ".concat(isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className),
-        css: pickerStyle
-      }, jsx(Manager, null, jsx(Reference, null, function (_ref) {
-        var ref = _ref.ref;
-        return jsx(Trigger, {
-          ref: ref,
-          onClick: _this2.onTriggerClick,
-          miniMode: miniMode,
-          disabled: _this2.props.disabled
-        });
-      }), jsx(Popper, {
-        placement: "bottom-start",
-        modifiers: this.popperModifiers
-      }, function (_ref2) {
-        var ref = _ref2.ref,
-            style = _ref2.style,
-            update = _ref2.update;
-        _this2.updatePopper = update;
-        return jsx(Fragment, null, isOpen && jsx("div", {
-          style: _objectSpread({
-            zIndex: layers.layer()
-          }, style),
-          ref: ref
-        }, jsx("div", {
-          css: popupStyle
-        }, _this2.renderContent())));
-      })));
-    }
-  }]);
-
-  return ReactionPicker;
-}(PureComponent);
-
-_defineProperty(ReactionPicker, "defaultProps", {
-  disabled: false
-});

package/dist/esm/components/ReactionTooltip.js

@@ -1,63 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import React from 'react';
-import { jsx, css } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import { FormattedMessage } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
-import { N90 } from '@atlaskit/theme/colors';
-import { messages } from './i18n';
-var verticalMargin = 5;
-var tooltipStyle = css({
-  maxWidth: '150px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  marginBottom: verticalMargin,
-  ul: {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    textAlign: 'left'
-  },
-  li: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    marginTop: verticalMargin
-  }
-});
-var emojiNameStyle = css({
-  textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
-  fontWeight: 600
-});
-var footerStyle = css({
-  color: token('color.text.inverse', N90),
-  fontWeight: 300
-});
-var TOOLTIP_USERS_LIMIT = 5;
-export var ReactionTooltip = function ReactionTooltip(_ref) {
-  var emojiName = _ref.emojiName,
-      children = _ref.children,
-      users = _ref.reaction.users;
-  var content = !users || users.length === 0 ? null : jsx("div", {
-    css: tooltipStyle
-  }, jsx("ul", null, emojiName ? jsx("li", {
-    css: emojiNameStyle
-  }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
-    return jsx("li", {
-      key: index
-    }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? jsx("li", {
-    css: footerStyle
-  }, jsx(FormattedMessage, _extends({}, messages.otherUsers, {
-    values: {
-      count: users.length - TOOLTIP_USERS_LIMIT
-    }
-  }))) : null));
-  return jsx(Tooltip, {
-    content: content,
-    position: "bottom"
-  }, React.Children.only(children));
-};

package/dist/esm/components/Reactions.js

@@ -1,180 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
-import { ReactionStatus } from '../types/ReactionStatus';
-import { messages } from './i18n';
-import { Reaction } from './Reaction';
-import { ReactionPicker } from './ReactionPicker';
-var reactionStyle = css({
-  display: 'inline-block',
-  // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
-  margin: '2px 4px 0 4px'
-});
-var wrapperStyle = css({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  // To allow to row spacing of 2px on wrap, and 0px on first row
-  marginTop: '-2px',
-  '> :first-of-type > :first-child': {
-    marginLeft: 0
-  }
-});
-export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ReactionsWithoutAnalytics, _React$PureComponent);
-
-  var _super = _createSuper(ReactionsWithoutAnalytics);
-
-  function ReactionsWithoutAnalytics(props) {
-    var _this;
-
-    _classCallCheck(this, ReactionsWithoutAnalytics);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
-      if (_this.props.status === ReactionStatus.ready && _this.renderTime) {
-        createAndFireSafe(_this.props.createAnalyticsEvent, createReactionsRenderedEvent, _this.renderTime);
-        _this.renderTime = undefined;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isDisabled", function () {
-      return _this.props.status !== ReactionStatus.ready;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getTooltip", function () {
-      var _this$props = _this.props,
-          status = _this$props.status,
-          errorMessage = _this$props.errorMessage;
-
-      switch (status) {
-        case ReactionStatus.error:
-          return errorMessage ? errorMessage : jsx(FormattedMessage, messages.unexpectedError);
-
-        case ReactionStatus.loading:
-        case ReactionStatus.notLoaded:
-          return jsx(FormattedMessage, messages.loadingReactions);
-
-        default:
-          return undefined;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleReactionMouseEnter", function (reaction) {
-      if (_this.props.onReactionHover) {
-        _this.props.onReactionHover(reaction.emojiId);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handlePickerOpen", function () {
-      _this.openTime = Date.now();
-      createAndFireSafe(_this.props.createAnalyticsEvent, createPickerButtonClickedEvent, _this.props.reactions.length);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnCancel", function () {
-      createAndFireSafe(_this.props.createAnalyticsEvent, createPickerCancelledEvent, _this.openTime);
-      _this.openTime = undefined;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnMore", function () {
-      createAndFireSafe(_this.props.createAnalyticsEvent, createPickerMoreClickedEvent, _this.openTime);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnSelection", function (emojiId, source) {
-      createAndFireSafe(_this.props.createAnalyticsEvent, createReactionSelectionEvent, source, emojiId, _this.props.reactions.find(function (reaction) {
-        return reaction.emojiId === emojiId;
-      }), _this.openTime);
-      _this.openTime = undefined;
-
-      if (_this.props.onSelection) {
-        _this.props.onSelection(emojiId);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderReaction", function (reaction) {
-      return jsx(Reaction, {
-        key: reaction.emojiId,
-        css: reactionStyle,
-        reaction: reaction,
-        emojiProvider: _this.props.emojiProvider,
-        onClick: _this.props.onReactionClick,
-        onMouseEnter: _this.handleReactionMouseEnter,
-        flash: _this.props.flash[reaction.emojiId]
-      });
-    });
-
-    if (props.status !== ReactionStatus.ready) {
-      _this.renderTime = Date.now();
-    }
-
-    return _this;
-  }
-
-  _createClass(ReactionsWithoutAnalytics, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.status === ReactionStatus.notLoaded) {
-        this.props.loadReaction();
-      }
-    }
-  }, {
-    key: "renderPicker",
-    value: function renderPicker() {
-      var _this$props2 = this.props,
-          emojiProvider = _this$props2.emojiProvider,
-          boundariesElement = _this$props2.boundariesElement,
-          allowAllEmojis = _this$props2.allowAllEmojis;
-      return jsx(Tooltip, {
-        content: this.getTooltip()
-      }, jsx(ReactionPicker, {
-        css: reactionStyle,
-        emojiProvider: emojiProvider,
-        miniMode: true,
-        boundariesElement: boundariesElement,
-        allowAllEmojis: allowAllEmojis,
-        disabled: this.isDisabled(),
-        onSelection: this.handleOnSelection,
-        onOpen: this.handlePickerOpen,
-        onCancel: this.handleOnCancel,
-        onShowMore: this.handleOnMore
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        css: wrapperStyle
-      }, this.props.reactions.map(this.renderReaction), this.renderPicker());
-    }
-  }]);
-
-  return ReactionsWithoutAnalytics;
-}(React.PureComponent);
-
-_defineProperty(ReactionsWithoutAnalytics, "defaultProps", {
-  flash: {},
-  reactions: []
-});
-
-_defineProperty(ReactionsWithoutAnalytics, "displayName", 'Reactions');
-
-export var Reactions = withAnalyticsEvents()(ReactionsWithoutAnalytics);

package/dist/esm/components/Selector.js

@@ -1,160 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
-import { PureComponent } from 'react';
-import { EmojiButton } from './EmojiButton';
-import { ShowMore } from './ShowMore';
-import { equalEmojiId } from './utils';
-export var renderEmojiTestId = 'render-emoji';
-var selectorStyle = css({
-  boxSizing: 'border-box',
-  display: 'flex',
-  padding: 0
-});
-var emojiStyle = css({
-  display: 'inline-block',
-  opacity: 0,
-  '&.selected': {
-    transition: 'transform 200ms ease-in-out  ',
-    transform: 'translateY(-48px) scale(2.667)'
-  }
-});
-var revealAnimation = keyframes({
-  '0%': {
-    opacity: 1,
-    transform: 'scale(0.5)'
-  },
-  '75%': {
-    transform: 'scale(1.25)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'scale(1)'
-  }
-});
-export var revealStyle = css({
-  animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
-});
-
-var revealDelay = function revealDelay(index) {
-  return {
-    animationDelay: "".concat(index * 50, "ms")
-  };
-};
-
-export var defaultReactions = [{
-  id: '1f44d',
-  shortName: ':thumbsup:'
-}, {
-  id: '1f44f',
-  shortName: ':clap:'
-}, {
-  id: '1f525',
-  shortName: ':fire:'
-}, {
-  id: '2764',
-  shortName: ':heart:'
-}, {
-  id: '1f632',
-  shortName: ':astonished:'
-}, {
-  id: '1f914',
-  shortName: ':thinking:'
-}];
-export var defaultReactionsByShortName = new Map(defaultReactions.map(function (reaction) {
-  return [reaction.shortName, reaction];
-}));
-export var isDefaultReaction = function isDefaultReaction(emojiId) {
-  return defaultReactions.filter(function (otherEmojiId) {
-    return equalEmojiId(otherEmojiId, emojiId);
-  }).length > 0;
-};
-export var Selector = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Selector, _PureComponent);
-
-  var _super = _createSuper(Selector);
-
-  function Selector(props) {
-    var _this;
-
-    _classCallCheck(this, Selector);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "onEmojiSelected", function (emojiId, emoji, event) {
-      _this.timeouts.push(window.setTimeout(function () {
-        return _this.props.onSelection(emojiId, emoji, event);
-      }, 250));
-
-      _this.setState({
-        selection: emojiId
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderEmoji", function (emojiId, index) {
-      var emojiProvider = _this.props.emojiProvider;
-      var key = emojiId.id || emojiId.shortName;
-      var style = revealDelay(index);
-      return jsx("div", {
-        key: key,
-        className: emojiId === _this.state.selection ? 'selected' : '',
-        css: [emojiStyle, revealStyle],
-        style: style,
-        "data-testid": renderEmojiTestId
-      }, jsx(Tooltip, {
-        content: emojiId.shortName
-      }, jsx(EmojiButton, {
-        emojiId: emojiId,
-        emojiProvider: emojiProvider,
-        onClick: _this.onEmojiSelected
-      })));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderShowMore", function () {
-      return jsx(ShowMore, {
-        key: "more",
-        revealStyle: revealStyle,
-        style: {
-          button: revealDelay(defaultReactions.length)
-        },
-        onClick: _this.props.onMoreClick
-      });
-    });
-
-    _this.timeouts = [];
-    _this.state = {
-      selection: undefined
-    };
-    return _this;
-  }
-
-  _createClass(Selector, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.timeouts.forEach(clearTimeout);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var showMore = this.props.showMore;
-      return jsx("div", {
-        css: selectorStyle
-      }, defaultReactions.map(this.renderEmoji), showMore ? this.renderShowMore() : null);
-    }
-  }]);
-
-  return Selector;
-}(PureComponent);