@atlaskit/reactions 21.4.0 → 21.5.0

package/dist/es2019/client/MockReactionsClient.js

@@ -1,123 +1,127 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { defaultReactionsByShortName } from '../components/Selector';
-export const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
-export const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-export const reaction = (shortName, count, reacted) => ({
-  ari,
-  containerAri,
-  emojiId: defaultReactionsByShortName.get(shortName).id,
-  count,
-  reacted
-});
-export const user = (id, displayName) => ({
+import { Constants } from '../shared';
+export const containerAri = `${Constants.ContainerAriPrefix}1`;
+export const ari = `${Constants.AriPrefix}1`;
+export const getReactionSummary = (shortName, count, reacted) => {
+  return {
+    ari,
+    containerAri,
+    emojiId: defaultReactionsByShortName.get(shortName).id,
+    count,
+    reacted
+  };
+};
+export const getUser = (id, displayName) => ({
   id,
   displayName
 });
 
-const objectReactionKey = (containerAri, ari) => {
+const getReactionKey = (containerAri, ari) => {
   return `${containerAri}|${ari}`;
 };
 
-const defaultUsers = [user('oscar', 'Oscar Wallhult'), user('julien', 'Julien Michel Hoarau'), user('craig', 'Craig Petchell'), user('jerome', 'Jerome Touffe-Blin'), user('esoares', 'Eduardo Soares'), user('lpereira', 'Luiz Pereira'), user('pcurren', 'Paul Curren'), user('ttjandra', 'Tara Tjandra'), user('severington', 'Ste Everington'), user('sguillope', 'Sylvain Guillope'), user('alunnon', 'Alex Lunnon')];
+const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
+const mockData = {
+  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
+};
+/**
+ * Mocked version of the client to fetch user information
+ */
+
 export class MockReactionsClient {
   constructor(delay = 0) {
-    _defineProperty(this, "mockData", {
-      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]
-    });
-
     _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));
 
     this.delay = delay;
   }
 
-  getReactions(containerAri, aris) {
-    return this.delayPromise().then(() => aris.reduce((results, ari) => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      results[ari] = this.mockData[reactionKey] || [];
+  async getReactions(containerAri, aris) {
+    await this.delayPromise();
+    return aris.reduce((results, ari) => {
+      const reactionKey = getReactionKey(containerAri, ari);
+      results[ari] = mockData[reactionKey] || [];
       return results;
-    }, {}));
+    }, {});
   }
 
-  getDetailedReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = `${containerAri}|${ari}`;
-      const reactionsMockData = this.mockData[reactionKey];
+  async getDetailedReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = `${containerAri}|${ari}`;
+    const reactionsMockData = mockData[reactionKey];
 
-      if (reactionsMockData) {
-        const reaction = reactionsMockData.find(reaction => reaction.emojiId === emojiId);
+    if (reactionsMockData) {
+      const reaction = reactionsMockData.find(reaction_1 => reaction_1.emojiId === emojiId);
 
-        if (reaction) {
-          const users = [...defaultUsers].slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
+      if (reaction) {
+        const users = [...defaultUsers].slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
+        return { ...reaction,
+          users
+        };
+      }
+    }
+
+    return {
+      containerAri,
+      ari,
+      emojiId,
+      count: 1,
+      reacted: true,
+      users: []
+    };
+  }
+
+  async addReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = getReactionKey(containerAri, ari);
+    let found = false;
+    const reactionsMockData = mockData[reactionKey];
+
+    if (reactionsMockData) {
+      mockData[reactionKey] = reactionsMockData.map(reaction => {
+        if (reaction.emojiId === emojiId) {
+          found = true;
           return { ...reaction,
-            users
+            count: reaction.count + 1,
+            reacted: true
           };
         }
-      }
 
-      return {
+        return reaction;
+      });
+    }
+
+    if (!found) {
+      mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
         containerAri,
         ari,
         emojiId,
         count: 1,
-        reacted: true,
-        users: []
-      };
-    });
-  }
-
-  addReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      let found = false;
-      const reactionsMockData = this.mockData[reactionKey];
-
-      if (reactionsMockData) {
-        this.mockData[reactionKey] = reactionsMockData.map(reaction => {
-          if (reaction.emojiId === emojiId) {
-            found = true;
-            return { ...reaction,
-              count: reaction.count + 1,
-              reacted: true
-            };
-          }
-
-          return reaction;
-        });
-      }
+        reacted: true
+      }];
+    }
 
-      if (!found) {
-        this.mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
-          containerAri,
-          ari,
-          emojiId,
-          count: 1,
-          reacted: true
-        }];
-      }
-
-      return this.mockData[reactionKey];
-    });
+    return mockData[reactionKey];
   }
 
-  deleteReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      this.mockData[reactionKey] = this.mockData[reactionKey].map(reaction => {
-        if (reaction.emojiId === emojiId) {
-          if (reaction.count === 1) {
-            return undefined;
-          }
-
-          return { ...reaction,
-            count: reaction.count - 1,
-            reacted: false
-          };
+  async deleteReaction(containerAri, ari, emojiId) {
+    await this.delayPromise();
+    const reactionKey = getReactionKey(containerAri, ari);
+    mockData[reactionKey] = mockData[reactionKey].map(reaction => {
+      if (reaction.emojiId === emojiId) {
+        if (reaction.count === 1) {
+          return undefined;
         }
 
-        return reaction;
-      }).filter(reaction => !!reaction);
-      return this.mockData[reactionKey];
-    });
+        return { ...reaction,
+          count: reaction.count - 1,
+          reacted: false
+        };
+      }
+
+      return reaction;
+    }).filter(reaction_1 => !!reaction_1);
+    return mockData[reactionKey];
   }
 
 }

package/dist/es2019/client/index.js

@@ -1 +1,2 @@
-export { ReactionServiceClient } from './ReactionServiceClient';
+export { ReactionServiceClient } from './ReactionServiceClient';
+export { MockReactionsClient, ari, containerAri, getReactionSummary, getUser } from './MockReactionsClient';

package/dist/es2019/components/Reaction.js

@@ -59,6 +59,10 @@ const flashStyle = css({
   borderRadius: '10px',
   height: `${flashHeight}px`
 });
+/**
+ * @param id give id for the emoji
+ * @param event selected mouse event proerties
+ */
 
 class ReactionWithoutAnalytics extends PureComponent {
   constructor(props) {
@@ -171,8 +175,7 @@ class ReactionWithoutAnalytics extends PureComponent {
 _defineProperty(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseEnter: undefined,
-  flashOnMount: false
+  onMouseEnter: undefined
 });
 
 _defineProperty(ReactionWithoutAnalytics, "displayName", 'Reaction');

package/dist/es2019/components/ReactionPicker.js

@@ -33,6 +33,10 @@ const popupStyle = css({
 });
 
 function noop() {}
+/**
+ * This renders the picker component (wrapped by the ConnectedReactionPicker)
+ */
+
 
 export class ReactionPicker extends PureComponent {
   constructor(props) {
@@ -63,11 +67,11 @@ export class ReactionPicker extends PureComponent {
     _defineProperty(this, "showFullPicker", e => {
       e.preventDefault();
       const {
-        onMore
+        onShowMore
       } = this.props;
 
-      if (onMore) {
-        onMore();
+      if (onShowMore) {
+        onShowMore();
       } // Update popper position
 
 
@@ -138,11 +142,15 @@ export class ReactionPicker extends PureComponent {
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.handleClickOutside);
+    document.addEventListener('click', this.handleClickOutside, {
+      capture: true
+    });
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleClickOutside);
+    document.removeEventListener('click', this.handleClickOutside, {
+      capture: true
+    });
     UFO.PickerRender.abort({
       metadata: {
         source: 'Reaction-Picker',

package/dist/es2019/components/Reactions.js

@@ -128,7 +128,7 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
       onSelection: this.handleOnSelection,
       onOpen: this.handlePickerOpen,
       onCancel: this.handleOnCancel,
-      onMore: this.handleOnMore
+      onShowMore: this.handleOnMore
     }));
   }
 

package/dist/es2019/containers/ConnectedReactionPicker.js

@@ -11,8 +11,17 @@ export const ConnectedReactionPicker = props => {
   const renderChild = innerProps => {
     return /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, innerProps));
   };
+  /**
+   * Mapping actions for the picker selection
+   * @param actions
+   * @returns void
+   */
+
 
   const actionsMapper = actions => ({
+    /**
+     * Event handler when an emoji gets selected
+     */
     onSelection: emojiId => {
       actions.addReaction(props.containerAri, props.ari, emojiId);
     }

package/dist/es2019/shared/constants.js

@@ -0,0 +1,4 @@
+// site id for jdog.jira-dev.com
+export const demoCloudId = `49d8b9d6-ee7d-4931-a0ca-7fcae7d1c3b5`;
+export const AriPrefix = `ari:cloud:test:${demoCloudId}:item/`;
+export const ContainerAriPrefix = `ari:cloud:test:${demoCloudId}:container/`;

package/dist/es2019/shared/index.js

@@ -0,0 +1,2 @@
+import * as _Constants from './constants';
+export { _Constants as Constants };

package/dist/es2019/store/ReactionsStore.js

@@ -6,6 +6,9 @@ import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
 import { sampledReactionsRendered } from '../analytics/ufo';
+/**
+ * store main structure
+ */
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -31,6 +34,10 @@ export const ufoExperiences = {
    */
   fetchDetails: Analytics.UFO.ReactionDetailsFetch
 };
+/**
+ * Collection of methods to manage internal state across the different Reaction container components ConnectedReactionPicker and ConnectedReactionsView
+ */
+
 export class MemoryReactionsStore {
   constructor(client, state = {
     reactions: {},
@@ -302,7 +309,7 @@ export class MemoryReactionsStore {
     return updater => {
       const reactionsState = this.getReactionsState(containerAri, ari);
 
-      if (reactionsState.status === Types.ReactionStatus.ready) {
+      if (reactionsState && reactionsState.status === Types.ReactionStatus.ready) {
         const updated = updater(reactionsState);
 
         if (updated) {

package/dist/es2019/types/ReactionStatus.js

@@ -1,3 +1,6 @@
+/**
+ * Conditions of the reaction when loaded from the store
+ */
 export let ReactionStatus;
 
 (function (ReactionStatus) {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.4.0"
+	"version": "21.5.0"
 }