@atlaskit/emoji 64.7.1 → 65.0.0

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

@@ -1,40 +1,67 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
-import CachingEmoji from './CachingEmoji';
+import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
+import { EmojiImage } from './EmojiImage';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-export default class ResourcedEmojiComponent extends Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "ready", false);
-
-    this.state = {
-      emoji: undefined,
-      loaded: false
-    };
-  }
+var ResourcedEmojiComponentRenderStatesEnum;
+
+(function (ResourcedEmojiComponentRenderStatesEnum) {
+  ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
+  ResourcedEmojiComponentRenderStatesEnum["OPTIMISTIC"] = "OPTIMISTIC";
+  ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
+  ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
+})(ResourcedEmojiComponentRenderStatesEnum || (ResourcedEmojiComponentRenderStatesEnum = {}));
+
+export const ResourcedEmojiComponent = ({
+  emojiProvider,
+  emojiId,
+  showTooltip,
+  customFallback,
+  fitToHeight = defaultEmojiHeight,
+  optimistic = false,
+  optimisticImageURL
+}) => {
+  const {
+    shortName,
+    id,
+    fallback
+  } = emojiId;
+  const emojiContextValue = {
+    emoji: {
+      emojiProvider
+    }
+  };
+  const [emoji, setEmoji] = useState();
+  const [loaded, setLoaded] = useState(false);
 
-  refreshEmoji(emojiProvider, emojiId) {
-    const foundEmoji = emojiProvider.findByEmojiId(emojiId);
+  const fetchOrGetEmoji = (emojiProvider, emojiId, optimisticFetch = false) => {
+    // TODO: Pass in optimistic into findByEmojiId to allow a single emoji meta fetch
+    const foundEmoji = emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
     sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
 
     if (isPromise(foundEmoji)) {
-      this.setState({
-        loaded: false
-      });
+      setLoaded(false);
       foundEmoji.then(emoji => {
-        if (this.ready) {
-          // don't update state if component was unmounted
-          this.setState({
-            emoji,
-            loaded: true
+        setEmoji(emoji);
+
+        if (!emoji) {
+          // emoji is undefined
+          sampledUfoRenderedEmoji(emojiId).failure({
+            metadata: {
+              reason: 'failed to find',
+              source: 'ResourcedEmojiComponent',
+              data: {
+                emoji: {
+                  id: emojiId.id,
+                  shortName: emojiId.shortName
+                }
+              }
+            }
           });
           sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
 
@@ -55,6 +82,7 @@ export default class ResourcedEmojiComponent extends Component {
           }
         }
       }).catch(() => {
+        setEmoji(undefined);
         sampledUfoRenderedEmoji(emojiId).failure({
           metadata: {
             reason: 'failed to load',
@@ -67,94 +95,79 @@ export default class ResourcedEmojiComponent extends Component {
             }
           }
         });
+      }).finally(() => {
+        setLoaded(true);
+        sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
       });
     } else {
-      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END); // loaded
-
-      this.setState({
-        emoji: foundEmoji,
-        loaded: true
-      });
+      setEmoji(foundEmoji);
+      setLoaded(true);
+      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
     }
-  }
+  };
 
-  UNSAFE_componentWillMount() {
-    this.ready = true;
-
-    if (!this.state.emoji) {
-      // using UNSAFE_componentWillMount instead of componentDidMount to avoid needless
-      // rerendering.
-      this.refreshEmoji(this.props.emojiProvider, this.props.emojiId);
+  useEffect(() => {
+    if (!emojiId) {
+      return;
     }
-  }
-
-  componentWillUnmount() {
-    this.ready = false;
-  }
 
-  componentDidMount() {
-    if (!hasUfoMarked(sampledUfoRenderedEmoji(this.props.emojiId), UfoEmojiTimings.FMP_END)) {
-      sampledUfoRenderedEmoji(this.props.emojiId).markFMP();
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(emojiId), UfoEmojiTimings.FMP_END)) {
+      sampledUfoRenderedEmoji(emojiId).markFMP();
     }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.emojiProvider !== this.props.emojiProvider || nextProps.emojiId !== this.props.emojiId) {
-      this.refreshEmoji(nextProps.emojiProvider, nextProps.emojiId);
+  }, [emojiId]);
+  useMemo(() => {
+    if (!emojiProvider || !emojiId) {
+      return;
     }
-  }
-
-  render() {
-    const {
-      emojiId,
-      fitToHeight = defaultEmojiHeight,
-      showTooltip
-    } = this.props;
-    const {
-      emoji,
-      loaded
-    } = this.state;
-    const {
-      shortName,
-      fallback
-    } = emojiId;
 
-    if (emoji) {
-      return this.emojiWrapper( /*#__PURE__*/React.createElement(CachingEmoji, {
-        emoji: emoji,
-        showTooltip: showTooltip,
-        fitToHeight: fitToHeight
-      }));
-    } else if (loaded) {
-      // loaded but not found - render fallback
-      return this.emojiWrapper( /*#__PURE__*/React.createElement("span", null, fallback || shortName));
+    fetchOrGetEmoji(emojiProvider, emojiId, optimistic);
+  }, [emojiProvider, emojiId, optimistic]);
+  const emojiRenderState = useMemo(() => {
+    if (!emoji && !loaded && !optimisticImageURL) {
+      return ResourcedEmojiComponentRenderStatesEnum.INITIAL;
+    } else if (!emoji && !loaded && optimisticImageURL) {
+      return ResourcedEmojiComponentRenderStatesEnum.OPTIMISTIC;
+    } else if (!emoji && loaded) {
+      return ResourcedEmojiComponentRenderStatesEnum.FALLBACK;
     }
 
-    return this.emojiWrapper( /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-      shortName: shortName,
-      showTooltip: showTooltip,
-      size: fitToHeight || defaultEmojiHeight
-    }));
-  }
-
-  emojiWrapper(element) {
-    const {
-      shortName,
-      id,
-      fallback
-    } = this.props.emojiId;
-    const emojiContextValue = {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
+    return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
+  }, [emoji, loaded, optimisticImageURL]);
+
+  const handleOnLoadError = emojiId => {
+    sampledUfoRenderedEmoji(emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'ResourcedEmojiComponent',
+        data: {
+          emoji: {
+            id: emojiId.id,
+            shortName: emojiId.shortName
+          }
+        }
       }
-    };
-    return /*#__PURE__*/React.createElement(LegacyEmojiContextProvider, {
-      emojiContextValue: emojiContextValue
-    }, /*#__PURE__*/React.createElement("span", {
-      "data-emoji-id": id,
-      "data-emoji-short-name": shortName,
-      "data-emoji-text": fallback || shortName
-    }, element));
-  }
-
-}
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(LegacyEmojiContextProvider, {
+    emojiContextValue: emojiContextValue
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-emoji-id": id,
+    "data-emoji-short-name": shortName,
+    "data-emoji-text": fallback || shortName
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight || defaultEmojiHeight,
+    loading: true
+  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.OPTIMISTIC && optimisticImageURL && /*#__PURE__*/React.createElement(EmojiImage, {
+    emojiId: emojiId,
+    imageUrl: optimisticImageURL,
+    maxSize: fitToHeight || defaultEmojiHeight
+  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && emoji && /*#__PURE__*/React.createElement(Emoji, {
+    emoji: emoji,
+    onLoadError: handleOnLoadError,
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight
+  })));
+};

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

@@ -2,13 +2,13 @@ import { supportsUploadFeature } from '../../api/EmojiResource';
 import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
 import { messages } from '../i18n';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) => {
+export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) => {
   const startTime = Date.now();
   errorSetter(undefined);
 
   if (supportsUploadFeature(emojiProvider)) {
     ufoExperiences['emoji-uploaded'].start();
-    emojiProvider.uploadCustomEmoji(upload).then(emojiDescription => {
+    emojiProvider.uploadCustomEmoji(upload, retry).then(emojiDescription => {
       fireAnalytics(uploadSucceededEvent({
         duration: Date.now() - startTime
       }));
@@ -25,11 +25,7 @@ export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireA
       ufoExperiences['emoji-uploaded'].failure({
         metadata: {
           source: 'UploadEmoji',
-          error: err,
-          data: {
-            upload: { ...upload
-            }
-          }
+          error: err
         }
       });
     });

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

@@ -1,9 +1,9 @@
-import { css } from '@emotion/core';
+import { css, keyframes } from '@emotion/core';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { N20, N200, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -31,7 +31,7 @@ export const emojiToneSelectorContainer = css({
   padding: '8px 10px 8px 0'
 });
 export const emojiStyles = css({
-  borderRadius: '5px',
+  borderRadius: `${borderRadius()}px`,
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -60,20 +60,41 @@ export const emojiContainer = css({
   [`.${emojiSprite}`]: {
     background: 'transparent no-repeat',
     display: 'inline-block',
-    verticalAlign: 'middle',
     minHeight: `${defaultEmojiHeight}px`,
-    minWidth: `${defaultEmojiHeight}px`
+    minWidth: `${defaultEmojiHeight}px`,
+    verticalAlign: 'middle'
   }
 });
 export const placeholder = 'emoji-common-placeholder';
 export const placeholderContainer = css({
-  // Ensure no vertical reflow
+  position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
   background: token('color.border', '#f7f7f7'),
-  borderRadius: '20%',
+  borderRadius: `${borderRadius()}px`,
+  overflow: 'hidden',
   verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  textAlign: 'center'
+});
+const easeSweep = keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+  to   {
+    transform: translateX(100%);
+  }
+`;
+export const placeholderContainerAnimated = css({
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    background: token('color.background.neutral', N20A),
+    height: '100%',
+    width: '100%',
+    animation: `${easeSweep} 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite`
+  }
 });
 export const emojiButton = css({
   backgroundColor: 'transparent',
@@ -87,7 +108,7 @@ export const emojiButton = css({
     padding: 0
   },
   '&>span': {
-    borderRadius: '5px',
+    borderRadius: `${borderRadius()}px`,
     padding: '8px',
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {

package/dist/es2019/components/picker/EmojiPickerComponent.js

@@ -247,7 +247,7 @@ export default class EmojiPickerComponent extends PureComponent {
         this.scrollToEndOfList();
       };
 
-      uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, this.fireAnalytics);
+      uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, this.fireAnalytics, retry);
     });
 
     _defineProperty(this, "onTriggerDelete", (_emojiId, emoji) => {
@@ -359,12 +359,12 @@ export default class EmojiPickerComponent extends PureComponent {
   }
 
   UNSAFE_componentWillMount() {
+    ufoExperiences['emoji-picker-opened'].success();
     this.openTime = Date.now();
     this.fireAnalytics(openedPickerEvent());
   }
 
   componentDidMount() {
-    ufoExperiences['emoji-picker-opened'].success();
     const {
       emojiProvider,
       hideToneSelector

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -32,7 +32,7 @@ export default class EmojiUploadComponent extends PureComponent {
         });
       };
 
-      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics);
+      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics, retry);
     });
 
     _defineProperty(this, "prepareForUpload", () => {

package/dist/es2019/context/EmojiContextProvider.js

@@ -1,10 +1,18 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { EmojiContext } from './EmojiContext';
 export const EmojiContextProvider = ({
   children,
   emojiContextValue
 }) => {
   const memoizedEmojiContextValue = useMemo(() => emojiContextValue, [emojiContextValue]);
+  useEffect(() => {
+    // trigger emoji fetching
+    async function fetchEmojiProvider() {
+      await (memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.fetchEmojiProvider());
+    }
+
+    fetchEmojiProvider();
+  }, [memoizedEmojiContextValue]);
   return /*#__PURE__*/React.createElement(EmojiContext.Provider, {
     value: memoizedEmojiContextValue
   }, children);

package/dist/es2019/index.js

@@ -6,19 +6,20 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
+import { EmojiImage } from './components/common/EmojiImage';
 export { // renaming exports to prevent breaking changes due to renaming
-commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage } from './components/common/styles';
+commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage, placeholder as emojiPlaceholder } from './components/common/styles';
 import EmojiResource from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
 export { // Classes
-AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, // functions
-denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, // Constants
+AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, // functions
+denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums
 SearchSort, UfoExperienceName, UfoComponentName } from './types';

package/dist/es2019/types.js

@@ -42,6 +42,7 @@ export let ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
+  ProviderTypes["SINGLE"] = "SINGLE";
 })(ProviderTypes || (ProviderTypes = {}));
 
 export let UfoExperienceName;

package/dist/es2019/util/analytics/samplingUfo.js

@@ -42,7 +42,6 @@ const hasSampledFromStart = experience => {
 
   return ufoExperiencesSampled[experience.id].sampled;
 };
-
 /**
  * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
  *
@@ -50,6 +49,8 @@ const hasSampledFromStart = experience => {
  * @param ufoExperience
  * @returns
  */
+
+
 export const withSampling = ufoExperience => {
   const init = () => {
     if (!ufoExperiencesSampled[ufoExperience.id]) {
@@ -110,6 +111,14 @@ export const withSampling = ufoExperience => {
     return ufoExperience.abort(config);
   };
 
+  const addMetadata = data => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.addMetadata(data);
+  };
+
   const mark = (name, timestamp) => {
     if (!hasSampledFromStart(ufoExperience)) {
       return;
@@ -137,6 +146,7 @@ export const withSampling = ufoExperience => {
   init();
   return { ...ufoExperience,
     start,
+    addMetadata,
     success,
     failure,
     abort,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.7.1",
+	"version": "65.0.0",
 	"sideEffects": false
 }