@atlaskit/reactions 22.2.0 → 22.2.2

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -10,20 +10,17 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Reactions, UfoErrorBoundary } from '../../components';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
-
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
 export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
-
   if (!state || !reactionsState) {
     return {
       status: ReactionStatus.notLoaded,
       reactions: []
     };
   }
-
   switch (reactionsState.status) {
     case ReactionStatus.ready:
       return {
@@ -31,13 +28,11 @@ export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri,
         status: reactionsState.status,
         flash: state.flash["".concat(containerAri, "|").concat(ari)]
       };
-
     case ReactionStatus.error:
       return {
         status: ReactionStatus.error,
         reactions: []
       };
-
     default:
       return {
         status: ReactionStatus.loading,
@@ -45,10 +40,10 @@ export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri,
       };
   }
 };
+
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-
 export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari) {
   return {
     loadReaction: function loadReaction() {
@@ -67,38 +62,32 @@ export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions,
 };
 export var ConnectedReactionsView = function ConnectedReactionsView(props) {
   var ari = props.ari,
-      containerAri = props.containerAri,
-      store = props.store,
-      rest = _objectWithoutProperties(props, _excluded);
+    containerAri = props.containerAri,
+    store = props.store,
+    rest = _objectWithoutProperties(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
    */
-
-
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      stateData = _useState2[0],
-      setStateData = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    stateData = _useState2[0],
+    setStateData = _useState2[1];
   var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      dispatchData = _useState4[0],
-      setDispatchData = _useState4[1]; // compose a UFO experience object
-
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    dispatchData = _useState4[0],
+    setDispatchData = _useState4[1];
+  // compose a UFO experience object
   var experienceInstance = useRef();
-
   var _useAnalyticsEvents = useAnalyticsEvents(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   useEffect(function () {
     experienceInstance.current = ufoExperiences.render(ari);
-  }, [ari]); // abort when component gets unmounted
+  }, [ari]);
 
+  // abort when component gets unmounted
   useEffect(function () {
     return function cleanup() {
       var _experienceInstance$c;
-
       (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
         metadata: {
           source: 'ConnectedReactionsView',
@@ -109,45 +98,40 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
       });
     };
   }, [experienceInstance, containerAri, ari]);
+
   /**
    * Maps the store instance "reactions" data to the <Reactions /> component state data
    * @param state store instance latest data
    */
-
   var mapStateToProps = useCallback(function (state) {
     return mapStateToPropsHelper(containerAri, ari, state);
   }, [containerAri, ari]);
+
   /**
    * Map the store instance "actions" methods to the <Reactions /> component actions methods
    * @param actions list of actions in the store instance
    */
-
   var mapDispatchToProps = useCallback(function (actions) {
     return mapDispatchToPropsHelper(actions, containerAri, ari);
   }, [ari, containerAri]);
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _store, state, dispatch;
-
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
               return Promise.resolve(store);
-
             case 2:
               _store = _context.sent;
-
               if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
                 _store.setCreateAnalyticsEvent(createAnalyticsEvent);
               }
-
               state = mapStateToProps(_store.getState());
               dispatch = mapDispatchToProps(_store);
               setStateData(state);
               setDispatchData(dispatch);
-
             case 8:
             case "end":
               return _context.stop();
@@ -156,33 +140,28 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
       }, _callee);
     }))();
   }, [createAnalyticsEvent, store, ari, containerAri, mapStateToProps, mapDispatchToProps]);
+
   /**
    * Listen to changes on the store data.
    * TODO: Needs to be refactored inside the MemoryReactionsStore to different pattern, currently it relies on internal callbacks variable to trigger changes to the store.
    * The flow that each action method triggers a call to "setState" => "triggerOnChange" => calls the callback function registered by the onChange method and de-register by the "removeOnChangeListener" method
    */
-
   useEffect(function () {
     var onChangeCallback = function onChangeCallback(state) {
       var stateProps = mapStateToProps(state);
       setStateData(stateProps);
     };
-
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var _store;
-
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _context2.next = 2;
               return Promise.resolve(store);
-
             case 2:
               _store = _context2.sent;
-
               _store.onChange(onChangeCallback);
-
             case 4:
             case "end":
               return _context2.stop();
@@ -190,23 +169,18 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
         }
       }, _callee2);
     }))();
-
     return function cleanup() {
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var _store;
-
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 _context3.next = 2;
                 return Promise.resolve(store);
-
               case 2:
                 _store = _context3.sent;
-
                 _store.removeOnChangeListener(onChangeCallback);
-
               case 4:
               case "end":
                 return _context3.stop();

package/dist/esm/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) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'click';
   var useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -20,9 +20,8 @@ export function useClickAway(ref, callback) {
       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 function () {
       // Unbind the event listener on clean up

package/dist/esm/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/esm/shared/constants.js

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

package/dist/esm/shared/utils.js

@@ -1,28 +1,28 @@
 import { DefaultReactions } from './constants';
+
 /**
  * Is selected mouse event a left click
  * @param event event data
  */
-
 export var isLeftClick = function isLeftClick(event) {
   return 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 var isDefaultReaction = function isDefaultReaction(item) {
   return DefaultReactions.some(function (otherEmojiId) {
     return isEqualEmojiId(otherEmojiId, item);
   });
 };
+
 /**
  * compare 2 emoji items if they are same input
  * @param a first emoji item
  * @param b second emoji item
  */
-
 var isEqualEmojiId = function isEqualEmojiId(a, b) {
   if (isEmojiId(a) && isEmojiId(b)) {
     return a === b || a && b && a.id === b.id && a.shortName === b.shortName;
@@ -30,37 +30,32 @@ var isEqualEmojiId = function 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
  */
-
-
 var isEmojiId = function isEmojiId(item) {
   return item.id !== undefined;
 };
-
 export var formatStringWithDecimal = function formatStringWithDecimal(value, decimalPlaces) {
   var 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 var formatLargeNumber = function formatLargeNumber(value) {
   // 999M+
   var maxLimit = 999999999;
@@ -68,11 +63,9 @@ export var formatLargeNumber = function formatLargeNumber(value) {
   var millionSeparator = 1000 * 1000;
   var valueInK = value / thounsandSeparator;
   var 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
@@ -80,15 +73,12 @@ export var formatLargeNumber = function formatLargeNumber(value) {
     var decimalIndexValue = valueInM.toString().charAt(numDigits - 5);
     return decimalIndexValue === '0' ? formatStringWithDecimal(valueInM.toString(), 0) + 'M' : formatStringWithDecimal(valueInM.toString(), 1) + 'M';
   }
-
   if (value >= 1000) {
     var _numDigits = value.toString().length;
-
     var _decimalIndexValue = valueInK.toString().charAt(_numDigits - 2);
-
     return _decimalIndexValue === '0' ? formatStringWithDecimal(valueInK.toString(), 0) + 'K' : formatStringWithDecimal(valueInK.toString(), 1) + 'K';
-  } // <999
-
+  }
 
+  // <999
   return value.toString();
 };