@atlaskit/reactions 21.5.1 → 21.6.1

package/dist/es2019/components/Reaction.js

@@ -1,183 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @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
- */
-
-const emojiStyle = css({
-  transformOrigin: 'center center 0',
-  lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
-});
-const reactionStyle = css({
-  outline: 'none',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: `${akHeight}px`,
-  background: 'transparent',
-  border: `1px solid ${token('color.border', N40)}`,
-  boxSizing: 'border-box',
-  borderRadius: '20px',
-  color: `${token('color.text.subtle', N400)}`,
-  cursor: 'pointer',
-  margin: 0,
-  padding: 0,
-  transition: '200ms ease-in-out',
-  '&:hover': {
-    background: `${token('color.background.neutral.subtle.hovered', N20)}`
-  }
-});
-const reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
-  '&:hover': {
-    background: `${token('color.background.selected.hovered', B75)}`
-  }
-});
-const flashHeight = akHeight - 2; // height without the 1px border
-
-const flashStyle = css({
-  display: 'flex',
-  flexDirection: 'row',
-  borderRadius: '10px',
-  height: `${flashHeight}px`
-});
-/**
- * @param id give id for the emoji
- * @param event selected mouse event proerties
- */
-
-class ReactionWithoutAnalytics extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "mounted", false);
-
-    _defineProperty(this, "handleMouseDown", event => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (this.props.onClick && isLeftClick(event)) {
-        const {
-          reaction,
-          createAnalyticsEvent
-        } = this.props;
-        const {
-          reacted,
-          emojiId
-        } = reaction;
-        createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, emojiId);
-        this.props.onClick(this.props.reaction.emojiId, event);
-      }
-    });
-
-    _defineProperty(this, "handleMouseEnter", event => {
-      event.preventDefault();
-      const {
-        onMouseEnter,
-        reaction
-      } = this.props;
-
-      if (!reaction.users || !reaction.users.length) {
-        this.hoverStart = Date.now();
-      }
-
-      if (onMouseEnter) {
-        onMouseEnter(this.props.reaction, event);
-      }
-    });
-
-    this.state = {};
-  }
-
-  componentDidUpdate({
-    reaction: prevReaction
-  }) {
-    if (!prevReaction.users && this.props.reaction.users) {
-      createAndFireSafe(this.props.createAnalyticsEvent, createReactionHoveredEvent, this.hoverStart);
-    }
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-    this.props.emojiProvider.then(emojiResource => emojiResource.findByEmojiId({
-      shortName: '',
-      id: this.props.reaction.emojiId
-    })).then(foundEmoji => {
-      if (foundEmoji && this.mounted) {
-        this.setState({
-          emojiName: foundEmoji.name
-        });
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  render() {
-    const {
-      emojiProvider,
-      reaction,
-      className: classNameProp,
-      flash
-    } = this.props;
-    const {
-      emojiName
-    } = this.state;
-    const 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
-    }))));
-  }
-
-}
-
-_defineProperty(ReactionWithoutAnalytics, "defaultProps", {
-  flash: false,
-  className: undefined,
-  onMouseEnter: undefined
-});
-
-_defineProperty(ReactionWithoutAnalytics, "displayName", 'Reaction');
-
-export const Reaction = withAnalyticsEvents()(ReactionWithoutAnalytics);

package/dist/es2019/components/ReactionPicker.js

@@ -1,247 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import React, { Fragment, PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-import { jsx, css } from '@emotion/core';
-import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import { Selector } from './Selector';
-import { Trigger } from './Trigger';
-import { UFO } from '../analytics';
-import { layers } from '@atlaskit/theme/constants';
-const pickerStyle = css({
-  verticalAlign: 'middle',
-  '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
-  }
-});
-const contentStyle = css({
-  display: 'flex'
-});
-const popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
-  '&> div': {
-    boxShadow: undefined
-  }
-});
-
-function noop() {}
-/**
- * This renders the picker component (wrapped by the ConnectedReactionPicker)
- */
-
-
-export class ReactionPicker extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "updatePopper", noop);
-
-    _defineProperty(this, "handleClickOutside", e => {
-      const {
-        isOpen
-      } = this.state;
-
-      if (!isOpen) {
-        return;
-      }
-
-      const domNode = ReactDOM.findDOMNode(this);
-
-      if (!domNode || e.target instanceof Node && !domNode.contains(e.target)) {
-        if (this.props.onCancel) {
-          this.props.onCancel();
-        }
-
-        this.close();
-      }
-    });
-
-    _defineProperty(this, "showFullPicker", e => {
-      e.preventDefault();
-      const {
-        onShowMore
-      } = this.props;
-
-      if (onShowMore) {
-        onShowMore();
-      } // Update popper position
-
-
-      this.setState({
-        isOpen: true,
-        showFullPicker: true
-      }, () => this.updatePopper());
-    });
-
-    _defineProperty(this, "onEmojiSelected", emoji => {
-      const {
-        onSelection
-      } = this.props;
-
-      if (!emoji.id) {
-        return;
-      }
-
-      onSelection(emoji.id, this.state.showFullPicker ? 'emojiPicker' : 'quickSelector');
-      this.close(emoji.id);
-    });
-
-    _defineProperty(this, "onTriggerClick", () => {
-      // ufo start reaction experience
-      UFO.PickerRender.start();
-
-      if (this.props.onOpen) {
-        this.props.onOpen();
-      }
-
-      this.setState({
-        isOpen: !this.state.isOpen,
-        showFullPicker: false
-      }, () => {
-        // ufo add reaction success
-        UFO.PickerRender.success();
-      });
-    });
-
-    _defineProperty(this, "popperModifiers", [{
-      name: 'applyStyle',
-      enabled: false
-    }, {
-      name: 'hide',
-      enabled: false
-    }, {
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [0, 0]
-      }
-    }, {
-      name: 'flip',
-      enabled: true,
-      options: {
-        flipVariations: true,
-        boundariesElement: 'scrollParent'
-      }
-    }, {
-      name: 'preventOverflow',
-      enabled: true
-    }]);
-
-    this.state = {
-      isOpen: false,
-      showFullPicker: false
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleClickOutside, {
-      capture: true
-    });
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleClickOutside, {
-      capture: true
-    });
-    UFO.PickerRender.abort({
-      metadata: {
-        source: 'Reaction-Picker',
-        reason: 'unmount'
-      }
-    });
-  }
-
-  close(_emojiId) {
-    this.setState({
-      isOpen: false,
-      showFullPicker: false
-    }, () => {
-      // ufo abort reaction experience
-      UFO.PickerRender.abort({
-        metadata: {
-          emojiId: _emojiId,
-          source: 'Reaction-Picker',
-          reason: 'close dialog'
-        }
-      });
-    });
-  }
-
-  renderSelector() {
-    const {
-      emojiProvider,
-      allowAllEmojis
-    } = this.props;
-    return jsx("div", {
-      css: contentStyle
-    }, jsx(Selector, {
-      emojiProvider: emojiProvider,
-      onSelection: this.onEmojiSelected,
-      showMore: allowAllEmojis,
-      onMoreClick: this.showFullPicker
-    }));
-  }
-
-  renderEmojiPicker() {
-    return jsx(EmojiPicker, {
-      emojiProvider: this.props.emojiProvider,
-      onSelection: this.onEmojiSelected
-    });
-  }
-
-  renderContent() {
-    return this.state.showFullPicker ? this.renderEmojiPicker() : this.renderSelector();
-  }
-
-  render() {
-    const {
-      isOpen
-    } = this.state;
-    const {
-      miniMode,
-      className
-    } = this.props;
-    return jsx("div", {
-      className: ` ${isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`,
-      css: pickerStyle
-    }, jsx(Manager, null, jsx(Reference, null, ({
-      ref
-    }) => jsx(Trigger, {
-      ref: ref,
-      onClick: this.onTriggerClick,
-      miniMode: miniMode,
-      disabled: this.props.disabled
-    })), jsx(Popper, {
-      placement: "bottom-start",
-      modifiers: this.popperModifiers
-    }, ({
-      ref,
-      style,
-      update
-    }) => {
-      this.updatePopper = update;
-      return jsx(Fragment, null, isOpen && jsx("div", {
-        style: {
-          zIndex: layers.layer(),
-          ...style
-        },
-        ref: ref
-      }, jsx("div", {
-        css: popupStyle
-      }, this.renderContent())));
-    })));
-  }
-
-}
-
-_defineProperty(ReactionPicker, "defaultProps", {
-  disabled: false
-});

package/dist/es2019/components/ReactionTooltip.js

@@ -1,66 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import React from 'react';
-import { jsx, css } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import { FormattedMessage } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
-import { N90 } from '@atlaskit/theme/colors';
-import { messages } from './i18n';
-const verticalMargin = 5;
-const tooltipStyle = css({
-  maxWidth: '150px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  marginBottom: verticalMargin,
-  ul: {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    textAlign: 'left'
-  },
-  li: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    marginTop: verticalMargin
-  }
-});
-const emojiNameStyle = css({
-  textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
-  fontWeight: 600
-});
-const footerStyle = css({
-  color: token('color.text.inverse', N90),
-  fontWeight: 300
-});
-const TOOLTIP_USERS_LIMIT = 5;
-export const ReactionTooltip = ({
-  emojiName,
-  children,
-  reaction: {
-    users
-  }
-}) => {
-  const content = !users || users.length === 0 ? null : jsx("div", {
-    css: tooltipStyle
-  }, jsx("ul", null, emojiName ? jsx("li", {
-    css: emojiNameStyle
-  }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
-    return jsx("li", {
-      key: index
-    }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? jsx("li", {
-    css: footerStyle
-  }, jsx(FormattedMessage, _extends({}, messages.otherUsers, {
-    values: {
-      count: users.length - TOOLTIP_USERS_LIMIT
-    }
-  }))) : null));
-  return jsx(Tooltip, {
-    content: content,
-    position: "bottom"
-  }, React.Children.only(children));
-};

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,
-      onShowMore: 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);