@atlaskit/reactions 21.5.1 → 21.6.0

package/dist/esm/components/Reactions/Reactions.js

@@ -0,0 +1,166 @@
+/** @jsx jsx */
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import Tooltip from '@atlaskit/tooltip';
+import { FormattedMessage } from 'react-intl-next';
+import { Analytics } from '../../analytics';
+import { ReactionStatus } from '../../types';
+import { i18n } from '../../shared';
+import { Reaction } from '../Reaction';
+import { ReactionPicker } from '../ReactionPicker';
+import * as styles from './styles';
+
+/**
+ * Test id for wrapper Reactions div
+ */
+export var RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the tooltip
+ */
+
+export var RENDER_TOOLTIP_TESTID = 'render-tooltip';
+
+/**
+ * Renders list of reactions
+ */
+export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$flash = _ref.flash,
+      flash = _ref$flash === void 0 ? {} : _ref$flash,
+      status = _ref.status,
+      errorMessage = _ref.errorMessage,
+      loadReaction = _ref.loadReaction,
+      quickReactionEmojiIds = _ref.quickReactionEmojiIds,
+      containerAri = _ref.containerAri,
+      ari = _ref.ari,
+      pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
+      onReactionHover = _ref.onReactionHover,
+      onSelection = _ref.onSelection,
+      _ref$reactions = _ref.reactions,
+      reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+      emojiProvider = _ref.emojiProvider,
+      allowAllEmojis = _ref.allowAllEmojis,
+      onReactionClick = _ref.onReactionClick;
+
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var openTime = useRef();
+  var renderTime = useRef();
+
+  if (status !== ReactionStatus.ready) {
+    renderTime.current = Date.now();
+  }
+
+  useEffect(function () {
+    if (status === ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  useEffect(function () {
+    if (status === ReactionStatus.ready && renderTime.current) {
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, renderTime.current);
+      renderTime.current = undefined;
+    }
+  }, [createAnalyticsEvent, status]);
+  /**
+   * Get content of the tooltip
+   */
+
+  var getTooltip = function getTooltip() {
+    switch (status) {
+      case ReactionStatus.error:
+        return errorMessage || jsx(FormattedMessage, i18n.messages.unexpectedError);
+
+      case ReactionStatus.loading:
+      case ReactionStatus.notLoaded:
+        return jsx(FormattedMessage, i18n.messages.loadingReactions);
+
+      default:
+        return undefined;
+    }
+  };
+
+  var handleReactionMouseEnter = function handleReactionMouseEnter(summary) {
+    if (onReactionHover) {
+      onReactionHover(summary.emojiId);
+    }
+  };
+
+  var handlePickerOpen = useCallback(function () {
+    openTime.current = Date.now();
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  var handleOnCancel = useCallback(function () {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerCancelledEvent, openTime.current);
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  var handleOnMore = useCallback(function () {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  var handleOnSelection = useCallback(function (emojiId, source) {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionSelectionEvent, source, emojiId, reactions.find(function (reaction) {
+      return reaction.emojiId === emojiId;
+    }), openTime.current);
+    openTime.current = undefined;
+    onSelection(emojiId);
+  }, [createAnalyticsEvent, onSelection, reactions]);
+  /**
+   * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
+   */
+
+  var memorizedReactions = useMemo(function () {
+    //
+
+    /**
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     */
+    if (reactions.length > 0 || !quickReactionEmojiIds) {
+      return reactions;
+    } // add any missing default reactions
+
+
+    var items = quickReactionEmojiIds.filter(function (emojiId) {
+      return !reactions.some(function (reaction) {
+        return reaction.emojiId === emojiId;
+      });
+    }).map(function (emojiId) {
+      return {
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId,
+        count: 0,
+        reacted: false
+      };
+    });
+    return reactions.concat(items);
+  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
+  return jsx("div", {
+    css: styles.wrapperStyle,
+    "data-testid": RENDER_REACTIONS_TESTID
+  }, memorizedReactions.map(function (reaction) {
+    return jsx(Reaction, {
+      key: reaction.emojiId,
+      css: styles.reactionStyle,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      flash: flash[reaction.emojiId]
+    });
+  }), jsx(Tooltip, {
+    testId: RENDER_TOOLTIP_TESTID,
+    content: getTooltip()
+  }, jsx(ReactionPicker, {
+    css: styles.reactionStyle,
+    emojiProvider: emojiProvider,
+    miniMode: true,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore
+  })));
+});

package/dist/esm/components/Reactions/index.js

@@ -0,0 +1 @@
+export { Reactions, RENDER_REACTIONS_TESTID, RENDER_TOOLTIP_TESTID } from './Reactions';

package/dist/esm/components/Reactions/styles.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+export 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'
+});
+export 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
+  }
+});

package/dist/esm/components/Selector/Selector.js

@@ -0,0 +1,107 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import React, { useEffect, useRef, useState } from 'react';
+import { jsx } from '@emotion/core';
+import Tooltip from '@atlaskit/tooltip';
+import { constants } from '../../shared';
+import { EmojiButton } from '../EmojiButton';
+import { ShowMore } from '../ShowMore';
+import * as styles from './styles';
+/**
+ * Test id for wrapper Selector div
+ */
+
+export var RENDER_SELECTOR_TESTID = 'render-selector';
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export var Selector = function Selector(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+      onMoreClick = _ref.onMoreClick,
+      onSelection = _ref.onSelection,
+      showMore = _ref.showMore,
+      _ref$pickerQuickReact = _ref.pickerQuickReactionEmojiIds,
+      pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? constants.DefaultReactions : _ref$pickerQuickReact;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      selection = _useState2[0],
+      setSelection = _useState2[1];
+  /**
+   * Collection of global DOM timeout ids when user selects emojis for animation display
+   */
+
+
+  var timeoutIds = useRef([]);
+  /**
+   * Clear the timeouts for the selected emojis when the component unmounts
+   */
+
+  useEffect(function () {
+    var timeoutValues = timeoutIds.current;
+    return function cleanup() {
+      timeoutValues.forEach(clearTimeout);
+    };
+  }, []);
+  /**
+   * event handler when an emoji gets selected
+   * @param item selected emoji
+   * @param description depth detail of the selected emoji
+   * @param event Dom event data
+   */
+
+  var onSelected = function onSelected(item, description, event) {
+    timeoutIds.current.push(window.setTimeout(function () {
+      onSelection(item, description, event);
+    }, 250));
+    setSelection(item);
+  };
+  /**
+   * custom css styling for the emoji icon
+   * @param index location of the emoji in the rendered list of items
+   */
+
+
+  var emojiStyleAnimation = function emojiStyleAnimation(index) {
+    return {
+      animationDelay: "".concat(index * 50, "ms")
+    };
+  };
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+
+
+  var renderEmoji = function renderEmoji(emoji, index) {
+    var _emoji$id;
+
+    return jsx("div", {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      className: emoji === selection ? 'selected' : undefined,
+      css: [styles.emojiStyle, styles.revealStyle],
+      style: emojiStyleAnimation(index),
+      "data-testid": RENDER_SELECTOR_TESTID
+    }, jsx(Tooltip, {
+      content: emoji.shortName
+    }, jsx(EmojiButton, {
+      emojiId: emoji,
+      emojiProvider: emojiProvider,
+      onClick: onSelected
+    })));
+  };
+
+  return jsx("div", {
+    css: styles.selectorStyle
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {
+    key: "more",
+    buttonStyle: styles.revealStyle,
+    style: {
+      button: emojiStyleAnimation(constants.DefaultReactions.length)
+    },
+    onClick: onMoreClick
+  }) : null);
+};

package/dist/esm/components/Selector/index.js

@@ -0,0 +1,3 @@
+export { Selector, RENDER_SELECTOR_TESTID } from './Selector';
+import * as _styles from './styles';
+export { _styles as styles };

package/dist/esm/components/Selector/styles.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { css, keyframes } from '@emotion/core';
+export var selectorStyle = css({
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 0
+});
+export var emojiStyle = css({
+  display: 'inline-block',
+  opacity: 0,
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
+  }
+});
+export 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")
+});
+/**
+ * custom css styling for the emoji icon
+ * @param index location of the emoji in the rendered list of items
+ */
+
+export var emojiStyleAnimation = function emojiStyleAnimation(index) {
+  return {
+    animationDelay: "".concat(index * 50, "ms")
+  };
+};

package/dist/esm/components/ShowMore/ShowMore.js

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
+import Tooltip from '@atlaskit/tooltip';
+import { i18n } from '../../shared';
+import * as styles from './styles';
+/**
+ * Test id for wrapper button
+ */
+
+export var RENDER_SHOWMORE_TESTID = 'show-more-button';
+
+/**
+ * Show more custom emojis button
+ */
+export var ShowMore = function ShowMore(_ref) {
+  var onClick = _ref.onClick,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? {} : _ref$className,
+      buttonStyle = _ref.buttonStyle;
+  return jsx("div", {
+    className: className.container,
+    css: styles.moreEmojiContainerStyle,
+    style: style.container
+  }, jsx("div", {
+    css: styles.separatorStyle
+  }), jsx(FormattedMessage, i18n.messages.moreEmoji, function (message) {
+    return jsx(Tooltip, {
+      content: message
+    }, jsx("button", {
+      className: className.button,
+      css: [styles.moreButtonStyle, buttonStyle],
+      title: i18n.messages.moreEmoji.defaultMessage,
+      type: "button",
+      style: style.button,
+      onMouseDown: onClick,
+      "data-testid": RENDER_SHOWMORE_TESTID
+    }, jsx(EditorMoreIcon, {
+      label: "More"
+    })));
+  }));
+};

package/dist/esm/components/ShowMore/index.js

@@ -0,0 +1 @@
+export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';

package/dist/esm/components/ShowMore/styles.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export var moreEmojiContainerStyle = css({
+  display: 'flex'
+});
+export var moreButtonStyle = css({
+  opacity: 0,
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 0,
+  borderRadius: "".concat(borderRadius(), "px"),
+  cursor: 'pointer',
+  margin: '4px 4px 4px 0',
+  padding: '4px',
+  width: '38px',
+  verticalAlign: 'top',
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+  }
+});
+export var separatorStyle = css({
+  backgroundColor: token('color.border', N30A),
+  margin: '8px 8px 8px 4px',
+  width: '1px',
+  height: '60%',
+  display: 'inline-block'
+});

package/dist/esm/components/{Trigger.js → Trigger/Trigger.js}

@@ -1,37 +1,32 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import React from 'react';
+import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
-import React from 'react';
-var triggerStyle = css({
-  width: '32px',
-  height: '32px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  lineHeight: '16px',
-  '&.miniMode': {
-    width: '24px',
-    height: '24px'
-  }
-});
+import * as styles from './styles';
+
+/**
+ * Render a button to open the reactions picker
+ */
 export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var miniMode = props.miniMode,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled;
 
-  var handleMouseDown = function handleMouseDown() {
-    if (props.onClick) {
-      props.onClick();
+  var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
+    if (props.onClick && !props.disabled) {
+      props.onClick(e, analyticsEvent);
     }
   };
 
   return jsx(Button, {
-    className: miniMode ? 'miniMode' : '',
-    css: triggerStyle,
+    css: styles.triggerStyle({
+      miniMode: miniMode,
+      disabled: disabled
+    }),
     appearance: "subtle",
     onClick: handleMouseDown,
-    isDisabled: disabled,
+    "aria-disabled": disabled,
     iconBefore: jsx(EmojiAddIcon, {
       size: "small",
       label: "Add reaction"

package/dist/esm/components/Trigger/index.js

@@ -0,0 +1 @@
+export { Trigger } from './Trigger';

package/dist/esm/components/Trigger/styles.js

@@ -0,0 +1,31 @@
+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; }
+
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { N70 } from '@atlaskit/theme/colors';
+export var DISABLED_BUTTON_COLOR = "".concat(token('color.text.disabled', N70), " !important");
+export var triggerStyle = function triggerStyle(_ref) {
+  var _ref$miniMode = _ref.miniMode,
+      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return css(_objectSpread(_objectSpread({
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    lineHeight: '16px'
+  }, miniMode && {
+    width: '24px',
+    height: '24px'
+  }), disabled && {
+    color: DISABLED_BUTTON_COLOR,
+    cursor: 'not-allowed'
+  }));
+};

package/dist/esm/components/{UfoErrorBoundary.js → UfoErrorBoundary/UfoErrorBoundary.js}

@@ -15,6 +15,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import React from 'react';
+
+/**
+ * Error boundary wrapper to notify "failure" for UFO events of components when there was a re-rendering exception caught inside the `componentDidCatch` event handler
+ */
 export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(UfoErrorBoundary, _React$Component);
 

package/dist/esm/components/UfoErrorBoundary/index.js

@@ -0,0 +1 @@
+export { UfoErrorBoundary } from './UfoErrorBoundary';

package/dist/esm/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import { ReactionPicker, UfoErrorBoundary } from '../../components';
+import { UFO } from '../../analytics';
+
+/**
+ * Reaction Picker component
+ */
+export var ConnectedReactionPicker = function ConnectedReactionPicker(props) {
+  /**
+   * callback event when an emoji item is selected
+   * @param emojiId unique id for the reaction emoji
+   */
+  var onSelection = function onSelection(emojiId) {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _store;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve(props.store);
+
+            case 2:
+              _store = _context.sent;
+
+              _store.addReaction(props.containerAri, props.ari, emojiId);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [UFO.PickerRender]
+  }, /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, {
+    onSelection: onSelection
+  })));
+};

package/dist/esm/containers/ConnectedReactionPicker/index.js

@@ -0,0 +1 @@
+export { ConnectedReactionPicker } from './ConnectedReactionPicker';