@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/es2019/components/Reactions.js

@@ -1,150 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
-import { ReactionStatus } from '../types/ReactionStatus';
-import { messages } from './i18n';
-import { Reaction } from './Reaction';
-import { ReactionPicker } from './ReactionPicker';
-const reactionStyle = css({
-  display: 'inline-block',
-  // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
-  margin: '2px 4px 0 4px'
-});
-const wrapperStyle = css({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  // To allow to row spacing of 2px on wrap, and 0px on first row
-  marginTop: '-2px',
-  '> :first-of-type > :first-child': {
-    marginLeft: 0
-  }
-});
-export class ReactionsWithoutAnalytics extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "componentDidUpdate", () => {
-      if (this.props.status === ReactionStatus.ready && this.renderTime) {
-        createAndFireSafe(this.props.createAnalyticsEvent, createReactionsRenderedEvent, this.renderTime);
-        this.renderTime = undefined;
-      }
-    });
-
-    _defineProperty(this, "isDisabled", () => this.props.status !== ReactionStatus.ready);
-
-    _defineProperty(this, "getTooltip", () => {
-      const {
-        status,
-        errorMessage
-      } = this.props;
-
-      switch (status) {
-        case ReactionStatus.error:
-          return errorMessage ? errorMessage : jsx(FormattedMessage, messages.unexpectedError);
-
-        case ReactionStatus.loading:
-        case ReactionStatus.notLoaded:
-          return jsx(FormattedMessage, messages.loadingReactions);
-
-        default:
-          return undefined;
-      }
-    });
-
-    _defineProperty(this, "handleReactionMouseEnter", reaction => {
-      if (this.props.onReactionHover) {
-        this.props.onReactionHover(reaction.emojiId);
-      }
-    });
-
-    _defineProperty(this, "handlePickerOpen", () => {
-      this.openTime = Date.now();
-      createAndFireSafe(this.props.createAnalyticsEvent, createPickerButtonClickedEvent, this.props.reactions.length);
-    });
-
-    _defineProperty(this, "handleOnCancel", () => {
-      createAndFireSafe(this.props.createAnalyticsEvent, createPickerCancelledEvent, this.openTime);
-      this.openTime = undefined;
-    });
-
-    _defineProperty(this, "handleOnMore", () => {
-      createAndFireSafe(this.props.createAnalyticsEvent, createPickerMoreClickedEvent, this.openTime);
-    });
-
-    _defineProperty(this, "handleOnSelection", (emojiId, source) => {
-      createAndFireSafe(this.props.createAnalyticsEvent, createReactionSelectionEvent, source, emojiId, this.props.reactions.find(reaction => reaction.emojiId === emojiId), this.openTime);
-      this.openTime = undefined;
-
-      if (this.props.onSelection) {
-        this.props.onSelection(emojiId);
-      }
-    });
-
-    _defineProperty(this, "renderReaction", reaction => jsx(Reaction, {
-      key: reaction.emojiId,
-      css: reactionStyle,
-      reaction: reaction,
-      emojiProvider: this.props.emojiProvider,
-      onClick: this.props.onReactionClick,
-      onMouseEnter: this.handleReactionMouseEnter,
-      flash: this.props.flash[reaction.emojiId]
-    }));
-
-    if (props.status !== ReactionStatus.ready) {
-      this.renderTime = Date.now();
-    }
-  }
-
-  componentDidMount() {
-    if (this.props.status === ReactionStatus.notLoaded) {
-      this.props.loadReaction();
-    }
-  }
-
-  renderPicker() {
-    const {
-      emojiProvider,
-      boundariesElement,
-      allowAllEmojis
-    } = this.props;
-    return jsx(Tooltip, {
-      content: this.getTooltip()
-    }, jsx(ReactionPicker, {
-      css: reactionStyle,
-      emojiProvider: emojiProvider,
-      miniMode: true,
-      boundariesElement: boundariesElement,
-      allowAllEmojis: allowAllEmojis,
-      disabled: this.isDisabled(),
-      onSelection: this.handleOnSelection,
-      onOpen: this.handlePickerOpen,
-      onCancel: this.handleOnCancel,
-      onMore: this.handleOnMore
-    }));
-  }
-
-  render() {
-    return jsx("div", {
-      css: wrapperStyle
-    }, this.props.reactions.map(this.renderReaction), this.renderPicker());
-  }
-
-}
-
-_defineProperty(ReactionsWithoutAnalytics, "defaultProps", {
-  flash: {},
-  reactions: []
-});
-
-_defineProperty(ReactionsWithoutAnalytics, "displayName", 'Reactions');
-
-export const Reactions = withAnalyticsEvents()(ReactionsWithoutAnalytics);

package/dist/es2019/components/Selector.js

@@ -1,127 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
-import { PureComponent } from 'react';
-import { EmojiButton } from './EmojiButton';
-import { ShowMore } from './ShowMore';
-import { equalEmojiId } from './utils';
-export const renderEmojiTestId = 'render-emoji';
-const selectorStyle = css({
-  boxSizing: 'border-box',
-  display: 'flex',
-  padding: 0
-});
-const emojiStyle = css({
-  display: 'inline-block',
-  opacity: 0,
-  '&.selected': {
-    transition: 'transform 200ms ease-in-out  ',
-    transform: 'translateY(-48px) scale(2.667)'
-  }
-});
-const revealAnimation = keyframes({
-  '0%': {
-    opacity: 1,
-    transform: 'scale(0.5)'
-  },
-  '75%': {
-    transform: 'scale(1.25)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'scale(1)'
-  }
-});
-export const revealStyle = css({
-  animation: `${revealAnimation} 150ms ease-in-out forwards`
-});
-
-const revealDelay = index => ({
-  animationDelay: `${index * 50}ms`
-});
-
-export const defaultReactions = [{
-  id: '1f44d',
-  shortName: ':thumbsup:'
-}, {
-  id: '1f44f',
-  shortName: ':clap:'
-}, {
-  id: '1f525',
-  shortName: ':fire:'
-}, {
-  id: '2764',
-  shortName: ':heart:'
-}, {
-  id: '1f632',
-  shortName: ':astonished:'
-}, {
-  id: '1f914',
-  shortName: ':thinking:'
-}];
-export const defaultReactionsByShortName = new Map(defaultReactions.map(reaction => [reaction.shortName, reaction]));
-export const isDefaultReaction = emojiId => defaultReactions.filter(otherEmojiId => equalEmojiId(otherEmojiId, emojiId)).length > 0;
-export class Selector extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "onEmojiSelected", (emojiId, emoji, event) => {
-      this.timeouts.push(window.setTimeout(() => this.props.onSelection(emojiId, emoji, event), 250));
-      this.setState({
-        selection: emojiId
-      });
-    });
-
-    _defineProperty(this, "renderEmoji", (emojiId, index) => {
-      const {
-        emojiProvider
-      } = this.props;
-      const key = emojiId.id || emojiId.shortName;
-      const style = revealDelay(index);
-      return jsx("div", {
-        key: key,
-        className: emojiId === this.state.selection ? 'selected' : '',
-        css: [emojiStyle, revealStyle],
-        style: style,
-        "data-testid": renderEmojiTestId
-      }, jsx(Tooltip, {
-        content: emojiId.shortName
-      }, jsx(EmojiButton, {
-        emojiId: emojiId,
-        emojiProvider: emojiProvider,
-        onClick: this.onEmojiSelected
-      })));
-    });
-
-    _defineProperty(this, "renderShowMore", () => jsx(ShowMore, {
-      key: "more",
-      revealStyle: revealStyle,
-      style: {
-        button: revealDelay(defaultReactions.length)
-      },
-      onClick: this.props.onMoreClick
-    }));
-
-    this.timeouts = [];
-    this.state = {
-      selection: undefined
-    };
-  }
-
-  componentWillUnmount() {
-    this.timeouts.forEach(clearTimeout);
-  }
-
-  render() {
-    const {
-      showMore
-    } = this.props;
-    return jsx("div", {
-      css: selectorStyle
-    }, defaultReactions.map(this.renderEmoji), showMore ? this.renderShowMore() : null);
-  }
-
-}

package/dist/es2019/components/ShowMore.js

@@ -1,71 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
-import { messages } from './i18n';
-import { FormattedMessage } from 'react-intl-next';
-import { revealStyle } from './Selector';
-const moreEmojiContainerStyle = css({
-  display: 'flex'
-});
-const moreButtonStyle = css({
-  opacity: 0,
-  outline: 'none',
-  backgroundColor: 'transparent',
-  border: 0,
-  borderRadius: `${borderRadius()}px`,
-  cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
-  width: '38px',
-  verticalAlign: 'top',
-  '&:hover': {
-    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
-  }
-});
-const separatorStyle = css({
-  backgroundColor: token('color.border', N30A),
-  margin: '8px 8px 8px 4px',
-  width: '1px',
-  height: '60%',
-  display: 'inline-block'
-});
-export const showMoreTestId = 'show-more-button';
-export class ShowMore extends React.PureComponent {
-  render() {
-    const {
-      style,
-      onClick,
-      className: classNameProp
-    } = this.props;
-    return jsx("div", {
-      className: classNameProp.container,
-      css: moreEmojiContainerStyle,
-      style: style.container
-    }, jsx("div", {
-      css: separatorStyle
-    }), jsx(FormattedMessage, messages.moreEmoji, text => jsx(Tooltip, {
-      content: text
-    }, jsx("button", {
-      className: classNameProp.button,
-      css: [moreButtonStyle, revealStyle],
-      style: style.button,
-      onMouseDown: onClick,
-      "data-testid": showMoreTestId
-    }, jsx(EditorMoreIcon, {
-      label: "More"
-    })))));
-  }
-
-}
-
-_defineProperty(ShowMore, "defaultProps", {
-  className: {},
-  style: {}
-});

package/dist/es2019/components/utils.js

@@ -1,13 +0,0 @@
-export const akHeight = 24;
-export const isLeftClick = event => event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
-export const equalEmojiId = (l, r) => {
-  if (isEmojiId(l) && isEmojiId(r)) {
-    return l === r || l && r && l.id === r.id && l.shortName === r.shortName;
-  } else {
-    return l === r;
-  }
-};
-
-const isEmojiId = emojiId => {
-  return emojiId.id !== undefined;
-};

package/dist/es2019/containers/ConnectedReactionPicker.js

@@ -1,27 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { ReactionPicker, UfoErrorBoundary } from '../components';
-import { ReactionConsumer } from '../store/ReactionConsumer';
-import { UFO } from '../analytics';
-
-/**
- * UFO Instance for picker
- */
-export const ConnectedReactionPicker = props => {
-  const renderChild = innerProps => {
-    return /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, innerProps));
-  };
-
-  const actionsMapper = actions => ({
-    onSelection: emojiId => {
-      actions.addReaction(props.containerAri, props.ari, emojiId);
-    }
-  });
-
-  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-    experiences: [UFO.PickerRender]
-  }, /*#__PURE__*/React.createElement(ReactionConsumer, {
-    store: props.store,
-    actionsMapper: actionsMapper
-  }, renderChild));
-};

package/dist/es2019/containers/ConnectedReactionsView.js

@@ -1,118 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useRef } from 'react';
-import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Reactions, UfoErrorBoundary } from '../components';
-import { ReactionConsumer } from '../store/ReactionConsumer';
-import { ReactionStatus } from '../types/ReactionStatus';
-import { ufoExperiences } from '../store/ReactionsStore';
-
-const ReactionsView = props => {
-  // // compose a UFO experience object
-  let experienceInstance = useRef();
-  const {
-    ari,
-    createAnalyticsEvent,
-    store,
-    containerAri
-  } = props;
-  useEffect(() => {
-    experienceInstance.current = ufoExperiences.render(ari);
-  }, [ari]);
-  useEffect(() => {
-    Promise.resolve(store).then(_store => {
-      if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
-        _store.setCreateAnalyticsEvent(createAnalyticsEvent);
-      }
-    });
-  }, [createAnalyticsEvent, store]); // abort when component gets unmounted
-
-  useEffect(() => {
-    return function cleanup() {
-      var _experienceInstance$c;
-
-      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
-        metadata: {
-          source: 'Connected-Reactions-View',
-          data: {
-            ari,
-            containerAri
-          },
-          reason: 'unmount'
-        }
-      });
-    };
-  }, [experienceInstance, containerAri, ari]);
-
-  const renderChildren = innerProps => {
-    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
-      data: {
-        containerAri,
-        ari
-      }
-    }, /*#__PURE__*/React.createElement(Reactions, _extends({
-      key: `${props.containerAri}|${props.ari}`
-    }, props, innerProps)));
-  };
-
-  const stateMapper = state => {
-    const {
-      containerAri,
-      ari
-    } = props;
-    const reactionsState = state && state.reactions[`${containerAri}|${ari}`];
-
-    if (!state || !reactionsState) {
-      return {
-        status: ReactionStatus.notLoaded,
-        reactions: []
-      };
-    }
-
-    switch (reactionsState.status) {
-      case ReactionStatus.ready:
-        return {
-          reactions: reactionsState.reactions,
-          status: reactionsState.status,
-          flash: state.flash[`${containerAri}|${ari}`]
-        };
-
-      case ReactionStatus.error:
-        return {
-          status: ReactionStatus.error,
-          reactions: []
-        };
-
-      default:
-        return {
-          status: ReactionStatus.loading,
-          reactions: []
-        };
-    }
-  };
-
-  const actionsMapper = actions => ({
-    loadReaction: () => {
-      actions.getReactions(props.containerAri, props.ari);
-    },
-    onReactionClick: emojiId => {
-      actions.toggleReaction(props.containerAri, props.ari, emojiId);
-    },
-    onReactionHover: emojiId => {
-      actions.getDetailedReaction(props.containerAri, props.ari, emojiId);
-    },
-    onSelection: emojiId => {
-      actions.addReaction(props.containerAri, props.ari, emojiId);
-    }
-  });
-
-  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-    experiences: experienceInstance.current ? [experienceInstance.current] : []
-  }, /*#__PURE__*/React.createElement(ReactionConsumer, {
-    store: props.store,
-    actionsMapper: actionsMapper,
-    stateMapper: stateMapper
-  }, renderChildren));
-};
-
-export const ConnectedReactionsView = withAnalyticsEvents()(ReactionsView);

package/dist/es2019/types/ReactionStatus.js

@@ -1,8 +0,0 @@
-export let ReactionStatus;
-
-(function (ReactionStatus) {
-  ReactionStatus["ready"] = "READY";
-  ReactionStatus["loading"] = "LOADING";
-  ReactionStatus["error"] = "ERROR";
-  ReactionStatus["notLoaded"] = "NOT_LOADED";
-})(ReactionStatus || (ReactionStatus = {}));

package/dist/es2019/types/Reactions.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/types/ReactionsState.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/client/MockReactionsClient.js

@@ -1,164 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { defaultReactionsByShortName } from '../components/Selector';
-export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
-export var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-export var reaction = function reaction(shortName, count, reacted) {
-  return {
-    ari: ari,
-    containerAri: containerAri,
-    emojiId: defaultReactionsByShortName.get(shortName).id,
-    count: count,
-    reacted: reacted
-  };
-};
-export var user = function user(id, displayName) {
-  return {
-    id: id,
-    displayName: displayName
-  };
-};
-
-var objectReactionKey = function objectReactionKey(containerAri, ari) {
-  return "".concat(containerAri, "|").concat(ari);
-};
-
-var 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')];
-export var MockReactionsClient = /*#__PURE__*/function () {
-  function MockReactionsClient() {
-    var _this = this;
-
-    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-    _classCallCheck(this, MockReactionsClient);
-
-    _defineProperty(this, "mockData", _defineProperty({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
-
-    _defineProperty(this, "delayPromise", function () {
-      return new Promise(function (resolve) {
-        return window.setTimeout(resolve, _this.delay);
-      });
-    });
-
-    this.delay = delay;
-  }
-
-  _createClass(MockReactionsClient, [{
-    key: "getReactions",
-    value: function getReactions(containerAri, aris) {
-      var _this2 = this;
-
-      return this.delayPromise().then(function () {
-        return aris.reduce(function (results, ari) {
-          var reactionKey = objectReactionKey(containerAri, ari);
-          results[ari] = _this2.mockData[reactionKey] || [];
-          return results;
-        }, {});
-      });
-    }
-  }, {
-    key: "getDetailedReaction",
-    value: function getDetailedReaction(containerAri, ari, emojiId) {
-      var _this3 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = "".concat(containerAri, "|").concat(ari);
-        var reactionsMockData = _this3.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          var _reaction = reactionsMockData.find(function (reaction) {
-            return reaction.emojiId === emojiId;
-          });
-
-          if (_reaction) {
-            var users = [].concat(defaultUsers).slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, _reaction.count);
-            return _objectSpread(_objectSpread({}, _reaction), {}, {
-              users: users
-            });
-          }
-        }
-
-        return {
-          containerAri: containerAri,
-          ari: ari,
-          emojiId: emojiId,
-          count: 1,
-          reacted: true,
-          users: []
-        };
-      });
-    }
-  }, {
-    key: "addReaction",
-    value: function addReaction(containerAri, ari, emojiId) {
-      var _this4 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        var found = false;
-        var reactionsMockData = _this4.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          _this4.mockData[reactionKey] = reactionsMockData.map(function (reaction) {
-            if (reaction.emojiId === emojiId) {
-              found = true;
-              return _objectSpread(_objectSpread({}, reaction), {}, {
-                count: reaction.count + 1,
-                reacted: true
-              });
-            }
-
-            return reaction;
-          });
-        }
-
-        if (!found) {
-          _this4.mockData[reactionKey] = [].concat(_toConsumableArray(reactionsMockData ? reactionsMockData : []), [{
-            containerAri: containerAri,
-            ari: ari,
-            emojiId: emojiId,
-            count: 1,
-            reacted: true
-          }]);
-        }
-
-        return _this4.mockData[reactionKey];
-      });
-    }
-  }, {
-    key: "deleteReaction",
-    value: function deleteReaction(containerAri, ari, emojiId) {
-      var _this5 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        _this5.mockData[reactionKey] = _this5.mockData[reactionKey].map(function (reaction) {
-          if (reaction.emojiId === emojiId) {
-            if (reaction.count === 1) {
-              return undefined;
-            }
-
-            return _objectSpread(_objectSpread({}, reaction), {}, {
-              count: reaction.count - 1,
-              reacted: false
-            });
-          }
-
-          return reaction;
-        }).filter(function (reaction) {
-          return !!reaction;
-        });
-        return _this5.mockData[reactionKey];
-      });
-    }
-  }]);
-
-  return MockReactionsClient;
-}();

package/dist/esm/client/ReactionClient.js

@@ -1 +0,0 @@
-export {};