@atlaskit/emoji 65.0.0 → 65.2.0

package/dist/cjs/components/common/EmojiActions.js

@@ -7,19 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.EmojiActions = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _core = require("@emotion/core");
 
@@ -49,177 +39,141 @@ var _styles = require("./styles");
 
 var _styles2 = require("../picker/styles");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var EmojiActions = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiActions, _PureComponent);
+/** @jsx jsx */
+var AddOwnEmoji = function AddOwnEmoji(props) {
+  var onOpenUpload = props.onOpenUpload,
+      uploadEnabled = props.uploadEnabled,
+      formatMessage = props.intl.formatMessage;
+  return (0, _core.jsx)(_react.Fragment, null, uploadEnabled && (0, _core.jsx)("div", {
+    css: _styles.addCustomEmoji
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+    return (0, _core.jsx)(_standardButton.default, {
+      onClick: onOpenUpload,
+      iconBefore: (0, _core.jsx)(_add.default, {
+        label: formatMessage(_i18n.messages.addCustomEmojiLabel),
+        size: "small"
+      }),
+      appearance: "subtle",
+      css: _styles.addCustomEmojiButton,
+      className: _styles.emojiPickerAddEmoji
+    }, label);
+  })));
+};
+
+var TonesWrapper = function TonesWrapper(props) {
+  var toneEmoji = props.toneEmoji,
+      selectedTone = props.selectedTone,
+      intl = props.intl,
+      onToneSelected = props.onToneSelected,
+      onToneOpen = props.onToneOpen,
+      showToneSelector = props.showToneSelector;
+  var formatMessage = intl.formatMessage;
+
+  if (!toneEmoji) {
+    return null;
+  }
 
-  var _super = _createSuper(EmojiActions);
+  var previewEmoji = toneEmoji;
 
-  function EmojiActions() {
-    var _this;
+  if (selectedTone && previewEmoji.skinVariations) {
+    previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+  }
 
-    (0, _classCallCheck2.default)(this, EmojiActions);
+  return (0, _core.jsx)("div", {
+    css: _styles.emojiToneSelectorContainer
+  }, showToneSelector && (0, _core.jsx)(_ToneSelector.default, {
+    emoji: toneEmoji,
+    onToneSelected: onToneSelected,
+    previewEmojiId: previewEmoji.id
+  }), (0, _core.jsx)(_EmojiButton.default, {
+    ariaExpanded: showToneSelector,
+    emoji: previewEmoji,
+    selectOnHover: true,
+    onSelected: onToneOpen,
+    ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
+      selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
+    })
+  }));
+};
+
+var EmojiActions = function EmojiActions(props) {
+  var onToneSelected = props.onToneSelected,
+      onToneSelectorCancelled = props.onToneSelectorCancelled,
+      initialUploadName = props.initialUploadName,
+      onUploadCancelled = props.onUploadCancelled,
+      onCloseDelete = props.onCloseDelete,
+      onDeleteEmoji = props.onDeleteEmoji,
+      onUploadEmoji = props.onUploadEmoji,
+      uploadErrorMessage = props.uploadErrorMessage,
+      uploading = props.uploading,
+      onFileChooserClicked = props.onFileChooserClicked,
+      emojiToDelete = props.emojiToDelete,
+      onChange = props.onChange,
+      query = props.query;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showToneSelector = _useState2[0],
+      setShowToneSelector = _useState2[1];
+
+  var previewFooterClassnames = [_styles2.emojiPickerFooter, _styles2.emojiActionsContainerWithBottomShadow];
+
+  var onToneOpenHandler = function onToneOpenHandler() {
+    return setShowToneSelector(true);
+  };
+
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    setShowToneSelector(false);
+
+    if (onToneSelected) {
+      onToneSelected(toneValue);
+    }
+  };
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var onMouseLeaveHandler = function onMouseLeaveHandler() {
+    if (showToneSelector && onToneSelectorCancelled) {
+      onToneSelectorCancelled();
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      selectingTone: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneButtonClick", function () {
-      _this.setState({
-        selectingTone: !_this.state.selectingTone
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
-      _this.setState({
-        selectingTone: false
-      });
-
-      if (_this.props.onToneSelected) {
-        _this.props.onToneSelected(toneValue);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
-      var selectingTone = _this.state.selectingTone;
-      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
-
-      if (selectingTone && onToneSelectorCancelled) {
-        onToneSelectorCancelled();
-      }
-
-      _this.setState({
-        selectingTone: false
-      });
-    });
-    return _this;
+    setShowToneSelector(false);
+  };
+
+  if (uploading) {
+    return (0, _core.jsx)("div", {
+      css: previewFooterClassnames
+    }, (0, _core.jsx)(_EmojiUploadPicker.default, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    }));
   }
 
-  (0, _createClass2.default)(EmojiActions, [{
-    key: "renderTones",
-    value: function renderTones() {
-      var _this$props = this.props,
-          toneEmoji = _this$props.toneEmoji,
-          selectedTone = _this$props.selectedTone,
-          intl = _this$props.intl;
-      var formatMessage = intl.formatMessage;
-
-      if (!toneEmoji) {
-        return null;
-      }
-
-      var previewEmoji = toneEmoji;
-
-      if (selectedTone && previewEmoji.skinVariations) {
-        previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
-      }
-
-      return (0, _core.jsx)("div", {
-        css: _styles.emojiToneSelectorContainer
-      }, this.state.selectingTone && (0, _core.jsx)(_ToneSelector.default, {
-        emoji: toneEmoji,
-        onToneSelected: this.onToneSelected,
-        previewEmojiId: previewEmoji.id
-      }), (0, _core.jsx)(_EmojiButton.default, {
-        ariaExpanded: this.state.selectingTone,
-        emoji: previewEmoji,
-        selectOnHover: true,
-        onSelected: this.onToneButtonClick,
-        ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
-          selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
-        })
-      }));
-    } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
-
-  }, {
-    key: "renderAddOwnEmoji",
-    value: function renderAddOwnEmoji() {
-      var _this$props2 = this.props,
-          onOpenUpload = _this$props2.onOpenUpload,
-          uploadEnabled = _this$props2.uploadEnabled,
-          intl = _this$props2.intl;
-      var formatMessage = intl.formatMessage;
-
-      if (!uploadEnabled) {
-        return null;
-      }
-
-      return (0, _core.jsx)("div", {
-        css: _styles.addCustomEmoji
-      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-        return (0, _core.jsx)(_standardButton.default, {
-          onClick: onOpenUpload,
-          iconBefore: (0, _core.jsx)(_add.default, {
-            label: formatMessage(_i18n.messages.addCustomEmojiLabel),
-            size: "small"
-          }),
-          appearance: "subtle",
-          css: _styles.addCustomEmojiButton,
-          className: _styles.emojiPickerAddEmoji
-        }, label);
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          initialUploadName = _this$props3.initialUploadName,
-          onUploadCancelled = _this$props3.onUploadCancelled,
-          onUploadEmoji = _this$props3.onUploadEmoji,
-          onCloseDelete = _this$props3.onCloseDelete,
-          onDeleteEmoji = _this$props3.onDeleteEmoji,
-          uploadErrorMessage = _this$props3.uploadErrorMessage,
-          uploading = _this$props3.uploading,
-          onFileChooserClicked = _this$props3.onFileChooserClicked,
-          emojiToDelete = _this$props3.emojiToDelete,
-          onChange = _this$props3.onChange,
-          query = _this$props3.query;
-      var previewFooterClassnames = [_styles2.emojiPickerFooter, _styles2.emojiActionsContainerWithBottomShadow];
-
-      if (uploading) {
-        return (0, _core.jsx)("div", {
-          css: previewFooterClassnames
-        }, (0, _core.jsx)(_EmojiUploadPicker.default, {
-          onUploadCancelled: onUploadCancelled,
-          onUploadEmoji: onUploadEmoji,
-          onFileChooserClicked: onFileChooserClicked,
-          errorMessage: uploadErrorMessage,
-          initialUploadName: initialUploadName
-        }));
-      }
-
-      if (emojiToDelete) {
-        return (0, _core.jsx)("div", {
-          css: previewFooterClassnames
-        }, (0, _core.jsx)(_EmojiDeletePreview.default, {
-          emoji: emojiToDelete,
-          onDeleteEmoji: onDeleteEmoji,
-          onCloseDelete: onCloseDelete
-        }));
-      }
-
-      return (0, _core.jsx)("div", {
-        css: previewFooterClassnames,
-        onMouseLeave: this.onMouseLeave
-      }, (0, _core.jsx)("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center'
-        }
-      }, !this.state.selectingTone && (0, _core.jsx)(_EmojiPickerListSearch.default, {
-        onChange: onChange,
-        query: query
-      }), this.renderTones()), this.renderAddOwnEmoji());
-    }
-  }]);
-  return EmojiActions;
-}(_react.PureComponent);
+  if (emojiToDelete) {
+    return (0, _core.jsx)("div", {
+      css: previewFooterClassnames
+    }, (0, _core.jsx)(_EmojiDeletePreview.default, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    }));
+  }
+
+  return (0, _core.jsx)("div", {
+    css: previewFooterClassnames,
+    onMouseLeave: onMouseLeaveHandler
+  }, (0, _core.jsx)("div", {
+    css: _styles.emojiActionsWrapper
+  }, !showToneSelector && (0, _core.jsx)(_EmojiPickerListSearch.default, {
+    onChange: onChange,
+    query: query
+  }), (0, _core.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  }))), (0, _core.jsx)(AddOwnEmoji, props));
+};
 
 exports.EmojiActions = EmojiActions;
 

package/dist/cjs/components/common/EmojiErrorMessage.js

@@ -7,68 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _core = require("@emotion/core");
 
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
-var _react = require("react");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiErrorMessage, _PureComponent);
-
-  var _super = _createSuper(EmojiErrorMessage);
-
-  function EmojiErrorMessage() {
-    (0, _classCallCheck2.default)(this, EmojiErrorMessage);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(EmojiErrorMessage, [{
-    key: "renderWithTooltip",
-    value: function renderWithTooltip() {
-      return (0, _core.jsx)("div", {
-        css: this.props.messageStyles
-      }, (0, _core.jsx)(_tooltip.default, {
-        content: this.props.message,
-        position: "top"
-      }, (0, _core.jsx)(_error.default, {
-        label: "Error",
-        size: "medium"
-      })));
-    }
-  }, {
-    key: "renderInline",
-    value: function renderInline() {
-      return (0, _core.jsx)("div", {
-        css: this.props.messageStyles
-      }, (0, _core.jsx)(_error.default, {
-        label: "Error",
-        size: "small"
-      }), " ", this.props.message);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.tooltip ? this.renderWithTooltip() : this.renderInline();
-    }
-  }]);
-  return EmojiErrorMessage;
-}(_react.PureComponent);
-
-exports.default = EmojiErrorMessage;
+/** @jsx jsx */
+var EmojiErrorMessage = function EmojiErrorMessage(props) {
+  var messageStyles = props.messageStyles,
+      message = props.message,
+      tooltip = props.tooltip;
+  return tooltip ? (0, _core.jsx)("div", {
+    css: messageStyles
+  }, (0, _core.jsx)(_tooltip.default, {
+    content: message,
+    position: "top"
+  }, (0, _core.jsx)(_error.default, {
+    label: "Error",
+    size: "medium"
+  }))) : (0, _core.jsx)("div", {
+    css: messageStyles
+  }, (0, _core.jsx)(_error.default, {
+    label: "Error",
+    size: "small"
+  }), " ", message);
+};
+
+var _default = EmojiErrorMessage;
+exports.default = _default;

package/dist/cjs/components/common/EmojiPreviewComponent.js

@@ -21,6 +21,7 @@ var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   }, (0, _core.jsx)("span", {
     css: _styles.previewImg
   }, (0, _core.jsx)(_CachingEmoji.default, {
+    key: emoji.id || emoji.shortName,
     emoji: emoji
   })), (0, _core.jsx)("div", {
     css: _styles.previewText