@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/es2019/client/MockReactionsClient.js

@@ -1,123 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { defaultReactionsByShortName } from '../components/Selector';
-export const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
-export const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-export const reaction = (shortName, count, reacted) => ({
-  ari,
-  containerAri,
-  emojiId: defaultReactionsByShortName.get(shortName).id,
-  count,
-  reacted
-});
-export const user = (id, displayName) => ({
-  id,
-  displayName
-});
-
-const objectReactionKey = (containerAri, ari) => {
-  return `${containerAri}|${ari}`;
-};
-
-const 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 class MockReactionsClient {
-  constructor(delay = 0) {
-    _defineProperty(this, "mockData", {
-      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]
-    });
-
-    _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));
-
-    this.delay = delay;
-  }
-
-  getReactions(containerAri, aris) {
-    return this.delayPromise().then(() => aris.reduce((results, ari) => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      results[ari] = this.mockData[reactionKey] || [];
-      return results;
-    }, {}));
-  }
-
-  getDetailedReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = `${containerAri}|${ari}`;
-      const reactionsMockData = this.mockData[reactionKey];
-
-      if (reactionsMockData) {
-        const reaction = reactionsMockData.find(reaction => reaction.emojiId === emojiId);
-
-        if (reaction) {
-          const users = [...defaultUsers].slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
-          return { ...reaction,
-            users
-          };
-        }
-      }
-
-      return {
-        containerAri,
-        ari,
-        emojiId,
-        count: 1,
-        reacted: true,
-        users: []
-      };
-    });
-  }
-
-  addReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      let found = false;
-      const reactionsMockData = this.mockData[reactionKey];
-
-      if (reactionsMockData) {
-        this.mockData[reactionKey] = reactionsMockData.map(reaction => {
-          if (reaction.emojiId === emojiId) {
-            found = true;
-            return { ...reaction,
-              count: reaction.count + 1,
-              reacted: true
-            };
-          }
-
-          return reaction;
-        });
-      }
-
-      if (!found) {
-        this.mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
-          containerAri,
-          ari,
-          emojiId,
-          count: 1,
-          reacted: true
-        }];
-      }
-
-      return this.mockData[reactionKey];
-    });
-  }
-
-  deleteReaction(containerAri, ari, emojiId) {
-    return this.delayPromise().then(() => {
-      const reactionKey = objectReactionKey(containerAri, ari);
-      this.mockData[reactionKey] = this.mockData[reactionKey].map(reaction => {
-        if (reaction.emojiId === emojiId) {
-          if (reaction.count === 1) {
-            return undefined;
-          }
-
-          return { ...reaction,
-            count: reaction.count - 1,
-            reacted: false
-          };
-        }
-
-        return reaction;
-      }).filter(reaction => !!reaction);
-      return this.mockData[reactionKey];
-    });
-  }
-
-}

package/dist/es2019/components/EmojiButton.js

@@ -1,50 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @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';
-const 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 class EmojiButton extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleMouseDown", event => {
-      event.preventDefault();
-
-      if (this.props.onClick && isLeftClick(event)) {
-        this.props.onClick(this.props.emojiId, undefined, event);
-      }
-    });
-  }
-
-  render() {
-    const {
-      emojiId,
-      emojiProvider
-    } = this.props;
-    return jsx("button", {
-      onMouseUp: this.handleMouseDown,
-      css: emojiButtonStyle
-    }, jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId
-    }));
-  }
-
-}

package/dist/es2019/components/Reaction.js

@@ -1,180 +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`
-});
-
-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,
-  flashOnMount: false
-});
-
-_defineProperty(ReactionWithoutAnalytics, "displayName", 'Reaction');
-
-export const Reaction = withAnalyticsEvents()(ReactionWithoutAnalytics);

package/dist/es2019/components/ReactionPicker.js

@@ -1,239 +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() {}
-
-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 {
-        onMore
-      } = this.props;
-
-      if (onMore) {
-        onMore();
-      } // 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);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleClickOutside);
-    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));
-};