@atlaskit/reactions 22.2.0 → 22.2.2

package/dist/es2019/hooks/useClickAway.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 /**
  * Custom hook to detect when user action is outside given container ref
  * @param ref ref object to an html element
@@ -7,7 +8,6 @@ import { useEffect } from 'react';
  * @param useCapture (Optional) use capture phase of event. @default false
  * @param enabled (Optional) enable/disable the outside click handler. @default true
  */
-
 export function useClickAway(ref, callback, type = 'click', useCapture = false, enabled = true) {
   useEffect(() => {
     /**
@@ -17,9 +17,8 @@ export function useClickAway(ref, callback, type = 'click', useCapture = false,
       if (ref.current && event.target instanceof Node && !ref.current.contains(event.target) && enabled) {
         callback();
       }
-    } // Bind the event listener
-
-
+    }
+    // Bind the event listener
     document.addEventListener(type, handleClickOutside, useCapture);
     return () => {
       // Unbind the event listener on clean up

package/dist/es2019/index.js

@@ -1,5 +1,6 @@
 export { UFO } from './analytics';
-export { ReactionServiceClient } from './client'; // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
+export { ReactionServiceClient } from './client';
+// TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
 export { constants } from './shared';
 export { Reaction, ReactionPicker, Reactions } from './components';

package/dist/es2019/shared/constants.js

@@ -20,10 +20,10 @@ export const DefaultReactions = [{
   id: '1f914',
   shortName: ':thinking:'
 }];
+
 /**
  * Extended list of reactions used only for examples
  */
-
 export const ExtendedReactions = [{
   id: '1f44d',
   shortName: ':thumbsup:'
@@ -67,25 +67,25 @@ export const ExtendedReactions = [{
   id: '1f642',
   shortName: ':slight_smile:'
 }];
+
 /**
  * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
  */
-
 export const DefaultReactionsByShortName = new Map(DefaultReactions.map(reaction => [reaction.shortName, reaction]));
+
 /**
  * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
  * Only for use in extended reaction examples
  */
-
 export const ExtendedReactionsByShortName = new Map(ExtendedReactions.map(reaction => [reaction.shortName, reaction]));
+
 /**
  * Maximum number of users to show in the tooltip for an emoji reaction
  */
-
 export const TOOLTIP_USERS_LIMIT = 5;
+
 /**
  * Maximum number of reactions that will fit in the horizontal scroll of
  * reactions dialog
  */
-
 export const NUMBER_OF_REACTIONS_TO_DISPLAY = 9;

package/dist/es2019/shared/utils.js

@@ -1,22 +1,22 @@
 import { DefaultReactions } from './constants';
+
 /**
  * Is selected mouse event a left click
  * @param event event data
  */
-
 export const isLeftClick = event => event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+
 /**
  * Does provided item part of the default emoji ids
  * @param item selected emoji item
  */
-
 export const isDefaultReaction = item => DefaultReactions.some(otherEmojiId => isEqualEmojiId(otherEmojiId, item));
+
 /**
  * compare 2 emoji items if they are same input
  * @param a first emoji item
  * @param b second emoji item
  */
-
 const isEqualEmojiId = (a, b) => {
   if (isEmojiId(a) && isEmojiId(b)) {
     return a === b || a && b && a.id === b.id && a.shortName === b.shortName;
@@ -24,37 +24,32 @@ const isEqualEmojiId = (a, b) => {
     return a === b;
   }
 };
+
 /**
  * Type guard if provided object is a string id or an object info collection for the emoji
  * @param item given item
  */
-
-
 const isEmojiId = item => {
   return item.id !== undefined;
 };
-
 export const formatStringWithDecimal = (value, decimalPlaces) => {
   const decimalIndex = value.indexOf('.');
-
   if (decimalIndex === -1) {
     // Integers with trailing 0s will have no decimal (Ex. 18000, 7700000, 500)
     return value.substring(0, value.length);
   }
-
   if (decimalPlaces === 0) {
     // Return an integer value
     return value.substring(0, decimalIndex);
   }
-
   return value.substring(0, decimalIndex + decimalPlaces + 1);
 };
+
 /**
  * Truncates numbers >= 1000 to shorthand representations with a maximum of one decimal point.
  * If the first decimal number is a zero then it's also truncated.
  * (Ex: 9085 will return 9K, 787555 will return 787.5M)
  */
-
 export const formatLargeNumber = value => {
   // 999M+
   const maxLimit = 999999999;
@@ -62,11 +57,9 @@ export const formatLargeNumber = value => {
   const millionSeparator = 1000 * 1000;
   const valueInK = value / thounsandSeparator;
   const valueInM = value / millionSeparator;
-
   if (value > maxLimit) {
     return '999.9M+';
   }
-
   if (value >= 1000000) {
     // determine the decimal breakpoints by length and check its value
     // 1234567 -> 1.234567 and decimal value is 2
@@ -74,13 +67,12 @@ export const formatLargeNumber = value => {
     const decimalIndexValue = valueInM.toString().charAt(numDigits - 5);
     return decimalIndexValue === '0' ? formatStringWithDecimal(valueInM.toString(), 0) + 'M' : formatStringWithDecimal(valueInM.toString(), 1) + 'M';
   }
-
   if (value >= 1000) {
     const numDigits = value.toString().length;
     const decimalIndexValue = valueInK.toString().charAt(numDigits - 2);
     return decimalIndexValue === '0' ? formatStringWithDecimal(valueInK.toString(), 0) + 'K' : formatStringWithDecimal(valueInK.toString(), 1) + 'K';
-  } // <999
-
+  }
 
+  // <999
   return value.toString();
 };

package/dist/es2019/store/MemoryReactionsStore.js

@@ -7,31 +7,29 @@ import { isRealErrorFromService } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
 import { sampledReactionsRendered } from '../analytics/ufo';
 import { extractErrorInfo } from '../analytics/analytics';
+
 /**
  * Set of all available UFO experiences relating to reaction element
  */
-
 export const ufoExperiences = {
   /**
    * Experience when a reaction emoji gets added
    */
   add: UFO.ReactionsAdd,
-
   /**
    * Experience when a reaction emoji gets removed/decrement
    */
   remove: UFO.ReactionsRemove,
-
   /**
    * Experience when the list of reactions gets rendered with sampling
    */
   render: instanceId => sampledReactionsRendered(instanceId),
-
   /**
    * Experience when a reaction details gets fetched
    */
   fetchDetails: UFO.ReactionDetailsFetch
 };
+
 /**
  * Optional metadata information in the store used in sending the API client requests
  */
@@ -40,47 +38,44 @@ export class MemoryReactionsStore {
   /**
    * default initial store data
    */
+
   constructor(client, state, metadata) {
     _defineProperty(this, "callbacks", []);
-
     _defineProperty(this, "initialState", {
       reactions: {},
       flash: {}
     });
-
     _defineProperty(this, "setState", newState => {
-      this.state = { ...this.state,
+      this.state = {
+        ...this.state,
         ...newState
       };
       this.triggerOnChange();
     });
-
     _defineProperty(this, "triggerOnChange", batch(() => this.callbacks.forEach(callback => callback(this.state))));
-
     _defineProperty(this, "setReactions", (containerAri, ari, reactions) => {
       this.setState({
-        reactions: { ...this.state.reactions,
+        reactions: {
+          ...this.state.reactions,
           [`${containerAri}|${ari}`]: reactions
         }
       });
     });
-
     _defineProperty(this, "handleDetailedReactionResponse", detailedReaction => {
       const {
         containerAri,
         ari,
         emojiId
       } = detailedReaction;
-      this.withReaction(reaction => ({ ...reaction,
+      this.withReaction(reaction => ({
+        ...reaction,
         users: detailedReaction.users
       }))(containerAri, ari, emojiId);
     });
-
     _defineProperty(this, "flash", reaction => {
       this.setFlash(reaction.containerAri, reaction.ari, reaction.emojiId, true);
       window.setTimeout(() => this.setFlash(reaction.containerAri, reaction.ari, reaction.emojiId, false), 700);
     });
-
     _defineProperty(this, "optmisticUpdate", (containerAri, ari, emojiId) => updater => {
       this.withReadyReaction(containerAri, ari)(reactionState => {
         let found = false;
@@ -88,17 +83,15 @@ export class MemoryReactionsStore {
           if (reaction.emojiId === emojiId) {
             found = true;
             const updated = updater(reaction);
-
             if (updated) {
-              return { ...updated,
+              return {
+                ...updated,
                 optimisticallyUpdated: true
               };
             }
           }
-
           return reaction;
         });
-
         if (!found) {
           const updated = updater({
             containerAri,
@@ -107,18 +100,16 @@ export class MemoryReactionsStore {
             count: 0,
             reacted: false
           });
-
           if (updated) {
-            reactions.push({ ...updated,
+            reactions.push({
+              ...updated,
               optimisticallyUpdated: true
             });
           }
         }
-
         return utils.readyState(reactions);
       });
     });
-
     _defineProperty(this, "doAddReaction", reaction => {
       const {
         containerAri,
@@ -127,8 +118,8 @@ export class MemoryReactionsStore {
       } = reaction;
       this.optmisticUpdate(containerAri, ari, emojiId)(utils.addOne);
       this.flash(reaction);
-      const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`); // ufo start reaction experience
-
+      const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`);
+      // ufo start reaction experience
       exp.start();
       exp.addMetadata({
         source: 'MemoryReactionsStore',
@@ -140,14 +131,13 @@ export class MemoryReactionsStore {
       this.client.addReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         if (this.createAnalyticsEvent) {
           Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
-        } // ufo add reaction success
-
-
+        }
+        // ufo add reaction success
         exp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
-          this.createAnalyticsEvent && Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code); // ufo add reaction failure
-
+          this.createAnalyticsEvent && Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code);
+          // ufo add reaction failure
           exp.failure({
             metadata: {
               error: extractErrorInfo(error),
@@ -155,18 +145,18 @@ export class MemoryReactionsStore {
             }
           });
         }
-
         return Promise.reject(error);
       });
     });
-
     _defineProperty(this, "doRemoveReaction", reaction => {
       const {
         containerAri,
         ari,
         emojiId
       } = reaction;
-      const exp = ufoExperiences.remove.getInstance(`${ari}|${emojiId}`); // ufo start reaction experience
+      const exp = ufoExperiences.remove.getInstance(`${ari}|${emojiId}`);
+
+      // ufo start reaction experience
 
       exp.start();
       exp.addMetadata({
@@ -190,19 +180,17 @@ export class MemoryReactionsStore {
         });
       });
     });
-
     _defineProperty(this, "setCreateAnalyticsEvent", createAnalyticsEvent => {
       this.createAnalyticsEvent = createAnalyticsEvent;
     });
-
     _defineProperty(this, "getReactions", batchByKey((containerAri, aris) => {
       /**
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
       const sampledExp = ufoExperiences.render(containerAri);
-      const arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
-
+      const arisArr = aris.reduce(utils.flattenAris);
+      // ufo start reaction experience
       sampledExp.start({
         samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
       });
@@ -222,14 +210,12 @@ export class MemoryReactionsStore {
         if (this.createAnalyticsEvent) {
           Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
-
         sampledExp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
           if (this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions');
           }
-
           sampledExp.failure({
             metadata: {
               error: extractErrorInfo(error),
@@ -237,26 +223,25 @@ export class MemoryReactionsStore {
             }
           });
         }
-
-        const reactionsState = arisArr.reduce((acc, ari) => ({ ...acc,
+        const reactionsState = arisArr.reduce((acc, ari) => ({
+          ...acc,
           [`${containerAri}|${ari}`]: {
             reactions: [],
             status: Types.ReactionStatus.error
           }
         }), {});
-        this.setState({ ...this.state,
-          reactions: { ...this.state.reactions,
+        this.setState({
+          ...this.state,
+          reactions: {
+            ...this.state.reactions,
             ...reactionsState
           }
         });
         return Promise.reject(error);
       });
     }));
-
     _defineProperty(this, "toggleReaction", this.withReaction(this.doRemoveReaction, this.doAddReaction));
-
     _defineProperty(this, "addReaction", this.withReaction(this.flash, this.doAddReaction));
-
     _defineProperty(this, "getDetailedReaction", (containerAri, ari, emojiId) => {
       const exp = ufoExperiences.fetchDetails.getInstance(`${ari}|${emojiId}`);
       exp.start();
@@ -281,41 +266,37 @@ export class MemoryReactionsStore {
         });
       });
     });
-
     _defineProperty(this, "getState", () => this.state);
-
     _defineProperty(this, "onChange", callback => {
       this.callbacks.push(callback);
     });
-
     _defineProperty(this, "removeOnChangeListener", toRemove => {
       this.callbacks = this.callbacks.filter(callback => callback !== toRemove);
     });
-
     this.client = client;
     this.state = state !== null && state !== void 0 ? state : this.initialState;
     this.metadata = metadata;
   }
+
   /**
    * Update the store state data with a new data
    * @param newState new store data
    */
 
-
   getReactionsState(containerAri, ari) {
     return this.state.reactions[`${containerAri}|${ari}`];
   }
-
   setFlash(containerAri, ari, emojiId, flash) {
     this.setState({
-      flash: { ...this.state.flash,
-        [`${containerAri}|${ari}`]: { ...this.state.flash[`${containerAri}|${ari}`],
+      flash: {
+        ...this.state.flash,
+        [`${containerAri}|${ari}`]: {
+          ...this.state.flash[`${containerAri}|${ari}`],
           [emojiId]: flash
         }
       }
     });
   }
-
   /**
    * Utility function to help execute a callback to Reaction if its state is ready.
    *
@@ -330,16 +311,15 @@ export class MemoryReactionsStore {
   withReadyReaction(containerAri, ari) {
     return updater => {
       const reactionsState = this.getReactionsState(containerAri, ari);
-
       if (reactionsState && reactionsState.status === Types.ReactionStatus.ready) {
         const updated = updater(reactionsState);
-
         if (updated) {
           this.setReactions(containerAri, ari, updated);
         }
       }
     };
   }
+
   /**
    * Utility function to help execute actions with a reaction. It handles reaction discovery
    * and branching between reacted and not reacted.
@@ -353,8 +333,6 @@ export class MemoryReactionsStore {
    *  A function that will execute the correct callback to the triple containerAri, ari and
    *  emojiId. If some state is returned, the new state will be applied.
    */
-
-
   withReaction(reactedCallback, notReactedCallback) {
     return (containerAri, ari, emojiId) => {
       this.withReadyReaction(containerAri, ari)(reactionsState => {
@@ -367,14 +345,11 @@ export class MemoryReactionsStore {
         };
         const callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
         const updatedReaction = callback(reaction);
-
         if (updatedReaction && !(updatedReaction instanceof Function)) {
           return utils.readyState(reactionsState.reactions.map(utils.updateByEmojiId(emojiId, updatedReaction)));
         }
-
         return;
       });
     };
   }
-
 }

package/dist/es2019/store/ReactionConsumer.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-
 /**
  * A custom mapper class that takes the store instance and mapper functions "mapStateToProps" and "mapActionsToProps" to return the renderProps pattern as a child component
  * @deprecated please avoid using this class as it will be removed in a future release
@@ -8,38 +7,31 @@ import React from 'react';
 export class ReactionConsumer extends React.PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "getPropsFromActions", actions => {
       const {
         mapActionsToProps
       } = this.props;
-
       if (mapActionsToProps) {
         if (!this.previousActions || !this.propsFromActions || this.previousActions !== actions) {
           this.propsFromActions = mapActionsToProps(actions);
         }
       }
-
       this.previousActions = actions;
       return this.propsFromActions;
     });
-
     _defineProperty(this, "getPropsFromState", state => {
       const {
         mapStateToProps
       } = this.props;
       return mapStateToProps ? mapStateToProps(state) : undefined;
     });
-
     _defineProperty(this, "handleOnChange", () => {
       this.forceUpdate();
     });
-
     this.state = {
       store: undefined
     };
   }
-
   componentDidMount() {
     Promise.resolve(this.props.store).then(store => {
       this.setState({
@@ -48,23 +40,20 @@ export class ReactionConsumer extends React.PureComponent {
       store.onChange(this.handleOnChange);
     });
   }
-
   async componentWillUnmount() {
     if (this.state.store) {
       this.state.store.removeOnChangeListener(this.handleOnChange);
     }
   }
+
   /**
    * Get the actions the child component might need to dispatch from its props
    */
 
-
   render() {
     if (!this.state.store) {
       return null;
     }
-
     return this.props.children(Object.assign({}, this.getPropsFromState(this.state.store.getState()), this.getPropsFromActions(this.state.store)));
   }
-
 }

package/dist/es2019/store/batched.js

@@ -8,7 +8,6 @@ export function batch(callback) {
       });
       calls = [];
     }
-
     calls.push(args);
   };
 }
@@ -22,7 +21,6 @@ export function batchByKey(callback) {
       });
       calls[key] = [];
     }
-
     calls[key].push(args);
   };
 }

package/dist/es2019/store/utils.js

@@ -1,9 +1,7 @@
 import { ReactionStatus } from '../types';
-
 const compareEmojiId = (l, r) => {
   return l.localeCompare(r);
 };
-
 const sortByRelevance = (a, b) => {
   if (a.count > b.count) {
     return -1;
@@ -13,30 +11,28 @@ const sortByRelevance = (a, b) => {
     return compareEmojiId(a.emojiId, b.emojiId);
   }
 };
-
 const sortByPreviousPosition = reactions => {
   const indexes = reactions.reduce((map, reaction, index) => {
     map[reaction.emojiId] = index;
     return map;
   }, {});
-
   const getPosition = ({
     emojiId
   }) => indexes[emojiId] === undefined ? reactions.length : indexes[emojiId];
-
   return (a, b) => getPosition(a) - getPosition(b);
 };
-
 export const readyState = reactions => ({
   status: ReactionStatus.ready,
   reactions: reactions.filter(reaction => reaction.count > 0)
 });
 export const byEmojiId = emojiId => reaction => reaction.emojiId === emojiId;
-export const addOne = reaction => ({ ...reaction,
+export const addOne = reaction => ({
+  ...reaction,
   count: reaction.count + 1,
   reacted: true
 });
-export const removeOne = reaction => ({ ...reaction,
+export const removeOne = reaction => ({
+  ...reaction,
   count: reaction.count - 1,
   reacted: false
 });

package/dist/es2019/types/reaction.js

@@ -38,10 +38,10 @@
  * Condition of the reaction when gets loaded from the store
  */
 export let ReactionStatus;
+
 /**
  * state in which the reaction is at
  */
-
 (function (ReactionStatus) {
   ReactionStatus["ready"] = "READY";
   ReactionStatus["loading"] = "LOADING";

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.0"
+	"version": "22.2.2"
 }