@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/es2019/components/Reactions/Reactions.js

@@ -0,0 +1,156 @@
+/** @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 const RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the tooltip
+ */
+
+export const RENDER_TOOLTIP_TESTID = 'render-tooltip';
+
+/**
+ * Renders list of reactions
+ */
+export const Reactions = /*#__PURE__*/React.memo(({
+  flash = {},
+  status,
+  errorMessage,
+  loadReaction,
+  quickReactionEmojiIds,
+  containerAri,
+  ari,
+  pickerQuickReactionEmojiIds,
+  onReactionHover,
+  onSelection,
+  reactions = [],
+  emojiProvider,
+  allowAllEmojis,
+  onReactionClick
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  let openTime = useRef();
+  let renderTime = useRef();
+
+  if (status !== ReactionStatus.ready) {
+    renderTime.current = Date.now();
+  }
+
+  useEffect(() => {
+    if (status === ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  useEffect(() => {
+    if (status === ReactionStatus.ready && renderTime.current) {
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, renderTime.current);
+      renderTime.current = undefined;
+    }
+  }, [createAnalyticsEvent, status]);
+  /**
+   * Get content of the tooltip
+   */
+
+  const 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;
+    }
+  };
+
+  const handleReactionMouseEnter = summary => {
+    if (onReactionHover) {
+      onReactionHover(summary.emojiId);
+    }
+  };
+
+  const handlePickerOpen = useCallback(() => {
+    openTime.current = Date.now();
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  const handleOnCancel = useCallback(() => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerCancelledEvent, openTime.current);
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  const handleOnMore = useCallback(() => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  const handleOnSelection = useCallback((emojiId, source) => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionSelectionEvent, source, emojiId, reactions.find(reaction => 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
+   */
+
+  const memorizedReactions = useMemo(() => {
+    //
+
+    /**
+     * 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
+
+
+    const items = quickReactionEmojiIds.filter(emojiId => !reactions.some(reaction => reaction.emojiId === emojiId)).map(emojiId => {
+      return {
+        ari,
+        containerAri,
+        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(reaction => 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/es2019/components/Reactions/index.js

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

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

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+export const 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 const 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/es2019/components/Selector/Selector.js

@@ -0,0 +1,98 @@
+/** @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 const RENDER_SELECTOR_TESTID = 'render-selector';
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export const Selector = ({
+  emojiProvider,
+  onMoreClick,
+  onSelection,
+  showMore,
+  pickerQuickReactionEmojiIds = constants.DefaultReactions
+}) => {
+  const [selection, setSelection] = useState();
+  /**
+   * Collection of global DOM timeout ids when user selects emojis for animation display
+   */
+
+  const timeoutIds = useRef([]);
+  /**
+   * Clear the timeouts for the selected emojis when the component unmounts
+   */
+
+  useEffect(() => {
+    const 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
+   */
+
+  const onSelected = (item, description, event) => {
+    timeoutIds.current.push(window.setTimeout(() => {
+      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
+   */
+
+
+  const emojiStyleAnimation = index => ({
+    animationDelay: `${index * 50}ms`
+  });
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+
+
+  const 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/es2019/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/es2019/components/Selector/styles.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { css, keyframes } from '@emotion/core';
+export const selectorStyle = css({
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 0
+});
+export const emojiStyle = css({
+  display: 'inline-block',
+  opacity: 0,
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
+  }
+});
+export const revealAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: 'scale(0.5)'
+  },
+  '75%': {
+    transform: 'scale(1.25)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'scale(1)'
+  }
+});
+export const revealStyle = css({
+  animation: `${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 const emojiStyleAnimation = index => ({
+  animationDelay: `${index * 50}ms`
+});

package/dist/es2019/components/ShowMore/ShowMore.js

@@ -0,0 +1,43 @@
+/** @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 const RENDER_SHOWMORE_TESTID = 'show-more-button';
+
+/**
+ * Show more custom emojis button
+ */
+export const ShowMore = ({
+  onClick,
+  style = {},
+  className = {},
+  buttonStyle
+}) => {
+  return jsx("div", {
+    className: className.container,
+    css: styles.moreEmojiContainerStyle,
+    style: style.container
+  }, jsx("div", {
+    css: styles.separatorStyle
+  }), jsx(FormattedMessage, i18n.messages.moreEmoji, message => 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/es2019/components/ShowMore/index.js

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

package/dist/es2019/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 const moreEmojiContainerStyle = css({
+  display: 'flex'
+});
+export const moreButtonStyle = css({
+  opacity: 0,
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 0,
+  borderRadius: `${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 const separatorStyle = css({
+  backgroundColor: token('color.border', N30A),
+  margin: '8px 8px 8px 4px',
+  width: '1px',
+  height: '60%',
+  display: 'inline-block'
+});

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

@@ -1,38 +1,33 @@
 /** @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';
-const 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 const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     miniMode,
     disabled = false
   } = props;
 
-  const handleMouseDown = () => {
-    if (props.onClick) {
-      props.onClick();
+  const handleMouseDown = (e, analyticsEvent) => {
+    if (props.onClick && !props.disabled) {
+      props.onClick(e, analyticsEvent);
     }
   };
 
   return jsx(Button, {
-    className: miniMode ? 'miniMode' : '',
-    css: triggerStyle,
+    css: styles.triggerStyle({
+      miniMode,
+      disabled
+    }),
     appearance: "subtle",
     onClick: handleMouseDown,
-    isDisabled: disabled,
+    "aria-disabled": disabled,
     iconBefore: jsx(EmojiAddIcon, {
       size: "small",
       label: "Add reaction"

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

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

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

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { N70 } from '@atlaskit/theme/colors';
+export const DISABLED_BUTTON_COLOR = `${token('color.text.disabled', N70)} !important`;
+export const triggerStyle = ({
+  miniMode = false,
+  disabled = false
+}) => css({
+  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/es2019/components/{UfoErrorBoundary.js → UfoErrorBoundary/UfoErrorBoundary.js}

@@ -1,4 +1,8 @@
 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 class UfoErrorBoundary extends React.Component {
   componentDidCatch(error, errorInfo) {
     for (const exp of this.props.experiences) {

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

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

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ReactionPicker, UfoErrorBoundary } from '../../components';
+import { UFO } from '../../analytics';
+
+/**
+ * Reaction Picker component
+ */
+export const ConnectedReactionPicker = props => {
+  /**
+   * callback event when an emoji item is selected
+   * @param emojiId unique id for the reaction emoji
+   */
+  const onSelection = emojiId => {
+    (async () => {
+      const _store = await Promise.resolve(props.store);
+
+      _store.addReaction(props.containerAri, props.ari, emojiId);
+    })();
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [UFO.PickerRender]
+  }, /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, {
+    onSelection: onSelection
+  })));
+};

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

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