@atlaskit/reactions 21.5.1 → 21.6.1

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,36 +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));
-  };
-  /**
-   * 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);
-    }
-  });
-
-  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,11 +0,0 @@
-/**
- * Conditions of the reaction when loaded from the store
- */
-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/ReactionClient.js

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

package/dist/esm/components/EmojiButton.js

@@ -1,77 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import React from 'react';
-import { PureComponent } from 'react';
-import { isLeftClick } from './utils';
-var emojiButtonStyle = css({
-  outline: 'none',
-  display: 'flex',
-  backgroundColor: 'transparent',
-  border: 0,
-  borderRadius: '5px',
-  cursor: 'pointer',
-  margin: '0',
-  padding: '10px 8px',
-  '&:hover > span': {
-    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-    transform: 'scale(1.33)'
-  }
-});
-export var EmojiButton = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiButton, _PureComponent);
-
-  var _super = _createSuper(EmojiButton);
-
-  function EmojiButton() {
-    var _this;
-
-    _classCallCheck(this, EmojiButton);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-
-      if (_this.props.onClick && isLeftClick(event)) {
-        _this.props.onClick(_this.props.emojiId, undefined, event);
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(EmojiButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojiId = _this$props.emojiId,
-          emojiProvider = _this$props.emojiProvider;
-      return jsx("button", {
-        onMouseUp: this.handleMouseDown,
-        css: emojiButtonStyle
-      }, jsx(ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId
-      }));
-    }
-  }]);
-
-  return EmojiButton;
-}(PureComponent);

package/dist/esm/components/Reaction.js

@@ -1,207 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import React from 'react';
-import { PureComponent } from 'react';
-import { createAndFireSafe, createReactionClickedEvent, createReactionHoveredEvent } from '../analytics';
-import { Counter } from './Counter';
-import { FlashAnimation } from './FlashAnimation';
-import { ReactionTooltip } from './ReactionTooltip';
-import { isLeftClick, akHeight } from './utils';
-/**
- * Styling Note:
- * Padding and line height are set within the child components
- * of FlashAnimation b/c it otherwise throws off the flash styling
- */
-
-var emojiStyle = css({
-  transformOrigin: 'center center 0',
-  lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
-});
-var reactionStyle = css({
-  outline: 'none',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: "".concat(akHeight, "px"),
-  background: 'transparent',
-  border: "1px solid ".concat(token('color.border', N40)),
-  boxSizing: 'border-box',
-  borderRadius: '20px',
-  color: "".concat(token('color.text.subtle', N400)),
-  cursor: 'pointer',
-  margin: 0,
-  padding: 0,
-  transition: '200ms ease-in-out',
-  '&:hover': {
-    background: "".concat(token('color.background.neutral.subtle.hovered', N20))
-  }
-});
-var reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
-  '&:hover': {
-    background: "".concat(token('color.background.selected.hovered', B75))
-  }
-});
-var flashHeight = akHeight - 2; // height without the 1px border
-
-var flashStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
-  borderRadius: '10px',
-  height: "".concat(flashHeight, "px")
-});
-/**
- * @param id give id for the emoji
- * @param event selected mouse event proerties
- */
-
-var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ReactionWithoutAnalytics, _PureComponent);
-
-  var _super = _createSuper(ReactionWithoutAnalytics);
-
-  function ReactionWithoutAnalytics(props) {
-    var _this;
-
-    _classCallCheck(this, ReactionWithoutAnalytics);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (_this.props.onClick && isLeftClick(event)) {
-        var _this$props = _this.props,
-            _reaction = _this$props.reaction,
-            createAnalyticsEvent = _this$props.createAnalyticsEvent;
-        var reacted = _reaction.reacted,
-            emojiId = _reaction.emojiId;
-        createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, emojiId);
-
-        _this.props.onClick(_this.props.reaction.emojiId, event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (event) {
-      event.preventDefault();
-      var _this$props2 = _this.props,
-          onMouseEnter = _this$props2.onMouseEnter,
-          reaction = _this$props2.reaction;
-
-      if (!reaction.users || !reaction.users.length) {
-        _this.hoverStart = Date.now();
-      }
-
-      if (onMouseEnter) {
-        onMouseEnter(_this.props.reaction, event);
-      }
-    });
-
-    _this.state = {};
-    return _this;
-  }
-
-  _createClass(ReactionWithoutAnalytics, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref) {
-      var prevReaction = _ref.reaction;
-
-      if (!prevReaction.users && this.props.reaction.users) {
-        createAndFireSafe(this.props.createAnalyticsEvent, createReactionHoveredEvent, this.hoverStart);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.mounted = true;
-      this.props.emojiProvider.then(function (emojiResource) {
-        return emojiResource.findByEmojiId({
-          shortName: '',
-          id: _this2.props.reaction.emojiId
-        });
-      }).then(function (foundEmoji) {
-        if (foundEmoji && _this2.mounted) {
-          _this2.setState({
-            emojiName: foundEmoji.name
-          });
-        }
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          emojiProvider = _this$props3.emojiProvider,
-          reaction = _this$props3.reaction,
-          classNameProp = _this$props3.className,
-          flash = _this$props3.flash;
-      var emojiName = this.state.emojiName;
-      var emojiId = {
-        id: reaction.emojiId,
-        shortName: ''
-      };
-      return jsx(ReactionTooltip, {
-        emojiName: emojiName,
-        reaction: reaction
-      }, jsx("button", {
-        className: classNameProp,
-        css: [reactionStyle, reaction.reacted && reactedStyle],
-        onMouseUp: this.handleMouseDown,
-        onMouseEnter: this.handleMouseEnter
-      }, jsx(FlashAnimation, {
-        flash: flash,
-        css: flashStyle
-      }, jsx("div", {
-        css: emojiStyle
-      }, jsx(ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId,
-        fitToHeight: 16
-      })), jsx(Counter, {
-        value: reaction.count,
-        highlight: reaction.reacted
-      }))));
-    }
-  }]);
-
-  return ReactionWithoutAnalytics;
-}(PureComponent);
-
-_defineProperty(ReactionWithoutAnalytics, "defaultProps", {
-  flash: false,
-  className: undefined,
-  onMouseEnter: undefined
-});
-
-_defineProperty(ReactionWithoutAnalytics, "displayName", 'Reaction');
-
-export var Reaction = withAnalyticsEvents()(ReactionWithoutAnalytics);