@atlaskit/emoji 65.0.0 → 65.2.0

package/dist/es2019/components/common/CachingEmoji.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { useEffect } from 'react';
-import { PureComponent } from 'react';
+import React, { useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
@@ -10,37 +8,37 @@ import EmojiPlaceholder from './EmojiPlaceholder';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { EmojiContext } from '../../context/EmojiContext';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
+import { useEmojiContext } from '../../hooks/useEmojiContext';
+import { useCallback } from 'react';
 
 /**
  * Renders an emoji from a cached image, if required.
  */
 export const CachingEmoji = props => {
-  // Optimisation to only render the class based CachingMediaEmoji if necessary
+  // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   const {
-    placeholderSize,
-    ...emojiProps
+    emoji
   } = props; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'caching-emoji',
-    emoji: emojiProps.emoji.shortName
+    emoji: emoji.shortName
   });
   useEffect(() => {
-    if (!hasUfoMarked(sampledUfoRenderedEmoji(emojiProps.emoji), 'fmp')) {
-      sampledUfoRenderedEmoji(emojiProps.emoji).markFMP();
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(emoji), 'fmp')) {
+      sampledUfoRenderedEmoji(emoji).markFMP();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
 
   const emojiNode = () => {
-    if (isMediaEmoji(props.emoji)) {
+    if (isMediaEmoji(emoji)) {
       return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
     }
 
-    return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+    return /*#__PURE__*/React.createElement(Emoji, props);
   };
 
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -52,70 +50,32 @@ export const CachingEmoji = props => {
  * rendering paths depending on caching strategy.
  */
 
-export class CachingMediaEmoji extends PureComponent {
-  constructor(props, context) {
-    super(props);
-
-    _defineProperty(this, "handleLoadError", _emojiId => {
-      sampledUfoRenderedEmoji(_emojiId).failure({
-        metadata: {
-          reason: 'load error',
-          source: 'CachingMediaEmoji',
-          emoji: {
-            id: _emojiId.id,
-            shortName: _emojiId.shortName
-          }
-        }
-      });
-      this.setState({
-        invalidImage: true
-      });
-    });
-
-    this.state = {
-      cachedEmoji: undefined
-    };
-    this.loadEmoji(props.emoji, context);
-  }
-
-  componentDidUpdate() {
-    var _this$state$cachedEmo;
-
-    if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
-      this.loadEmoji(this.props.emoji, this.context);
-    }
-  }
-
-  loadEmoji(emoji, context) {
-    if (!context) {
-      return;
-    }
-
-    if (!context.emoji) {
-      return undefined;
-    }
-
-    const {
-      emojiProvider
-    } = context.emoji;
-
-    if (!emojiProvider) {
-      return undefined;
-    }
-
+export const CachingMediaEmoji = props => {
+  const {
+    emoji,
+    placeholderSize,
+    showTooltip,
+    fitToHeight,
+    children,
+    ...restProps
+  } = props;
+  const {
+    shortName,
+    representation
+  } = emoji;
+  const [cachedEmoji, setCachedEmoji] = useState();
+  const [inValidImage, setInvalidImage] = useState(false);
+  const context = useEmojiContext();
+  const loadEmoji = useCallback(emojiProvider => {
     debug('Loading image via media cache', emoji.shortName);
     sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
     emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
-      this.setState({
-        cachedEmoji,
-        invalidImage: false
-      });
+      setCachedEmoji(cachedEmoji);
+      setInvalidImage(false);
       sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
     }).catch(() => {
-      this.setState({
-        cachedEmoji: undefined,
-        invalidImage: true
-      });
+      setCachedEmoji(undefined);
+      setInvalidImage(true);
       sampledUfoRenderedEmoji(emoji).failure({
         metadata: {
           reason: 'failed to load media emoji',
@@ -130,48 +90,41 @@ export class CachingMediaEmoji extends PureComponent {
         }
       });
     });
-  }
-
-  render() {
-    const {
-      cachedEmoji,
-      invalidImage
-    } = this.state;
-    const {
-      children,
-      ...otherProps
-    } = this.props;
-    let emojiComponent;
-
-    if (cachedEmoji && !invalidImage) {
-      emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
-        emoji: cachedEmoji,
-        onLoadError: this.handleLoadError
-      }));
-    } else {
-      const {
-        emoji,
-        placeholderSize,
-        showTooltip,
-        fitToHeight
-      } = this.props;
-      const {
-        shortName,
-        representation
-      } = emoji;
-      emojiComponent = /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-        size: fitToHeight || placeholderSize,
-        shortName: shortName,
-        showTooltip: showTooltip,
-        representation: representation
-      });
+  }, [emoji]);
+  useEffect(() => {
+    if (context && context.emoji.emojiProvider) {
+      loadEmoji(context.emoji.emojiProvider);
     }
+  }, [context, loadEmoji]);
+
+  const handleLoadError = _emojiId => {
+    sampledUfoRenderedEmoji(_emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'CachingMediaEmoji',
+        emoji: {
+          id: _emojiId.id,
+          shortName: _emojiId.shortName
+        }
+      }
+    });
+    setInvalidImage(true);
+  };
 
-    return emojiComponent;
+  if (cachedEmoji && !inValidImage) {
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+      showTooltip: showTooltip,
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
   }
 
-}
-
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
-
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
+};
 export default CachingEmoji;

package/dist/es2019/components/common/Emoji.js

@@ -133,7 +133,7 @@ export const SpriteEmoji = props => {
     onMouseDown: event => {
       handleMouseDown(props, event);
     },
-    onMouseMove: event => {
+    onMouseEnter: event => {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
@@ -257,7 +257,7 @@ export const ImageEmoji = props => {
     onMouseDown: event => {
       handleMouseDown(props, event);
     },
-    onMouseMove: event => {
+    onMouseEnter: event => {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,

package/dist/es2019/components/common/EmojiActions.js

@@ -1,8 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { Fragment, useState } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
@@ -13,168 +13,142 @@ import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
+import { addCustomEmoji, addCustomEmojiButton, emojiActionsWrapper, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
 import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
-export class EmojiActions extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      selectingTone: false
-    });
-
-    _defineProperty(this, "onToneButtonClick", () => {
-      this.setState({
-        selectingTone: !this.state.selectingTone
-      });
-    });
-
-    _defineProperty(this, "onToneSelected", toneValue => {
-      this.setState({
-        selectingTone: false
-      });
-
-      if (this.props.onToneSelected) {
-        this.props.onToneSelected(toneValue);
-      }
-    });
-
-    _defineProperty(this, "onMouseLeave", () => {
-      const {
-        selectingTone
-      } = this.state;
-      const {
-        onToneSelectorCancelled
-      } = this.props;
-
-      if (selectingTone && onToneSelectorCancelled) {
-        onToneSelectorCancelled();
-      }
-
-      this.setState({
-        selectingTone: false
-      });
-    });
-  }
 
-  renderTones() {
-    const {
-      toneEmoji,
-      selectedTone,
-      intl
-    } = this.props;
-    const {
+const AddOwnEmoji = props => {
+  const {
+    onOpenUpload,
+    uploadEnabled,
+    intl: {
       formatMessage
-    } = intl;
-
-    if (!toneEmoji) {
-      return null;
-    }
-
-    let previewEmoji = toneEmoji;
-
-    if (selectedTone && previewEmoji.skinVariations) {
-      previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
     }
+  } = props;
+  return jsx(Fragment, null, uploadEnabled && jsx("div", {
+    css: addCustomEmoji
+  }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => jsx(AkButton, {
+    onClick: onOpenUpload,
+    iconBefore: jsx(AddIcon, {
+      label: formatMessage(messages.addCustomEmojiLabel),
+      size: "small"
+    }),
+    appearance: "subtle",
+    css: addCustomEmojiButton,
+    className: emojiPickerAddEmoji
+  }, label))));
+};
+
+const TonesWrapper = props => {
+  const {
+    toneEmoji,
+    selectedTone,
+    intl,
+    onToneSelected,
+    onToneOpen,
+    showToneSelector
+  } = props;
+  const {
+    formatMessage
+  } = intl;
+
+  if (!toneEmoji) {
+    return null;
+  }
 
-    return jsx("div", {
-      css: emojiToneSelectorContainer
-    }, this.state.selectingTone && jsx(ToneSelector, {
-      emoji: toneEmoji,
-      onToneSelected: this.onToneSelected,
-      previewEmojiId: previewEmoji.id
-    }), jsx(EmojiButton, {
-      ariaExpanded: this.state.selectingTone,
-      emoji: previewEmoji,
-      selectOnHover: true,
-      onSelected: this.onToneButtonClick,
-      ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
-        selectedTone: `${setSkinToneAriaLabelText(previewEmoji.name)} selected`
-      })
-    }));
-  } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
+  let previewEmoji = toneEmoji;
 
+  if (selectedTone && previewEmoji.skinVariations) {
+    previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+  }
 
-  renderAddOwnEmoji() {
-    const {
-      onOpenUpload,
-      uploadEnabled,
-      intl
-    } = this.props;
-    const {
-      formatMessage
-    } = intl;
+  return jsx("div", {
+    css: emojiToneSelectorContainer
+  }, showToneSelector && jsx(ToneSelector, {
+    emoji: toneEmoji,
+    onToneSelected: onToneSelected,
+    previewEmojiId: previewEmoji.id
+  }), jsx(EmojiButton, {
+    ariaExpanded: showToneSelector,
+    emoji: previewEmoji,
+    selectOnHover: true,
+    onSelected: onToneOpen,
+    ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
+      selectedTone: `${setSkinToneAriaLabelText(previewEmoji.name)} selected`
+    })
+  }));
+};
+
+export const EmojiActions = props => {
+  const {
+    onToneSelected,
+    onToneSelectorCancelled,
+    initialUploadName,
+    onUploadCancelled,
+    onCloseDelete,
+    onDeleteEmoji,
+    onUploadEmoji,
+    uploadErrorMessage,
+    uploading,
+    onFileChooserClicked,
+    emojiToDelete,
+    onChange,
+    query
+  } = props;
+  const [showToneSelector, setShowToneSelector] = useState(false);
+  const previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
+
+  const onToneOpenHandler = () => setShowToneSelector(true);
+
+  const onToneSelectedHandler = toneValue => {
+    setShowToneSelector(false);
+
+    if (onToneSelected) {
+      onToneSelected(toneValue);
+    }
+  };
 
-    if (!uploadEnabled) {
-      return null;
+  const onMouseLeaveHandler = () => {
+    if (showToneSelector && onToneSelectorCancelled) {
+      onToneSelectorCancelled();
     }
 
+    setShowToneSelector(false);
+  };
+
+  if (uploading) {
     return jsx("div", {
-      css: addCustomEmoji
-    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => jsx(AkButton, {
-      onClick: onOpenUpload,
-      iconBefore: jsx(AddIcon, {
-        label: formatMessage(messages.addCustomEmojiLabel),
-        size: "small"
-      }),
-      appearance: "subtle",
-      css: addCustomEmojiButton,
-      className: emojiPickerAddEmoji
-    }, label)));
+      css: previewFooterClassnames
+    }, jsx(EmojiUploadPicker, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    }));
   }
 
-  render() {
-    const {
-      initialUploadName,
-      onUploadCancelled,
-      onUploadEmoji,
-      onCloseDelete,
-      onDeleteEmoji,
-      uploadErrorMessage,
-      uploading,
-      onFileChooserClicked,
-      emojiToDelete,
-      onChange,
-      query
-    } = this.props;
-    const previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
-
-    if (uploading) {
-      return jsx("div", {
-        css: previewFooterClassnames
-      }, jsx(EmojiUploadPicker, {
-        onUploadCancelled: onUploadCancelled,
-        onUploadEmoji: onUploadEmoji,
-        onFileChooserClicked: onFileChooserClicked,
-        errorMessage: uploadErrorMessage,
-        initialUploadName: initialUploadName
-      }));
-    }
-
-    if (emojiToDelete) {
-      return jsx("div", {
-        css: previewFooterClassnames
-      }, jsx(EmojiDeletePreview, {
-        emoji: emojiToDelete,
-        onDeleteEmoji: onDeleteEmoji,
-        onCloseDelete: onCloseDelete
-      }));
-    }
-
+  if (emojiToDelete) {
     return jsx("div", {
-      css: previewFooterClassnames,
-      onMouseLeave: this.onMouseLeave
-    }, jsx("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center'
-      }
-    }, !this.state.selectingTone && jsx(EmojiPickerListSearch, {
-      onChange: onChange,
-      query: query
-    }), this.renderTones()), this.renderAddOwnEmoji());
+      css: previewFooterClassnames
+    }, jsx(EmojiDeletePreview, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    }));
   }
 
-}
+  return jsx("div", {
+    css: previewFooterClassnames,
+    onMouseLeave: onMouseLeaveHandler
+  }, jsx("div", {
+    css: emojiActionsWrapper
+  }, !showToneSelector && jsx(EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query
+  }), jsx(TonesWrapper, _extends({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  }))), jsx(AddOwnEmoji, props));
+};
 export default injectIntl(EmojiActions);

package/dist/es2019/components/common/EmojiErrorMessage.js

@@ -1,32 +1,28 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import { PureComponent } from 'react';
 import Tooltip from '@atlaskit/tooltip';
-export default class EmojiErrorMessage extends PureComponent {
-  renderWithTooltip() {
-    return jsx("div", {
-      css: this.props.messageStyles
-    }, jsx(Tooltip, {
-      content: this.props.message,
-      position: "top"
-    }, jsx(ErrorIcon, {
-      label: "Error",
-      size: "medium"
-    })));
-  }
 
-  renderInline() {
-    return jsx("div", {
-      css: this.props.messageStyles
-    }, jsx(ErrorIcon, {
-      label: "Error",
-      size: "small"
-    }), " ", this.props.message);
-  }
+const EmojiErrorMessage = props => {
+  const {
+    messageStyles,
+    message,
+    tooltip
+  } = props;
+  return tooltip ? jsx("div", {
+    css: messageStyles
+  }, jsx(Tooltip, {
+    content: message,
+    position: "top"
+  }, jsx(ErrorIcon, {
+    label: "Error",
+    size: "medium"
+  }))) : jsx("div", {
+    css: messageStyles
+  }, jsx(ErrorIcon, {
+    label: "Error",
+    size: "small"
+  }), " ", message);
+};
 
-  render() {
-    return this.props.tooltip ? this.renderWithTooltip() : this.renderInline();
-  }
-
-}
+export default EmojiErrorMessage;

package/dist/es2019/components/common/EmojiPreviewComponent.js

@@ -10,6 +10,7 @@ export const EmojiPreviewComponent = ({
   }, jsx("span", {
     css: previewImg
   }, jsx(CachingEmoji, {
+    key: emoji.id || emoji.shortName,
     emoji: emoji
   })), jsx("div", {
     css: previewText