@atlaskit/emoji 65.1.1 → 65.2.0

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

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

@@ -7,21 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.EmojiUploadPicker = void 0;
+exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-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");
 
@@ -51,10 +43,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; } }
-
+/** @jsx jsx */
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 var sanitizeName = function sanitizeName(name) {
@@ -72,302 +61,255 @@ var toEmojiName = function toEmojiName(uploadName) {
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
 
-var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ChooseEmojiFile, _PureComponent);
-
-  var _super = _createSuper(ChooseEmojiFile);
+var ChooseEmojiFile = function ChooseEmojiFile(props) {
+  var _props$name = props.name,
+      name = _props$name === void 0 ? '' : _props$name,
+      onChooseFile = props.onChooseFile,
+      onClick = props.onClick,
+      onNameChange = props.onNameChange,
+      onUploadCancelled = props.onUploadCancelled,
+      errorMessage = props.errorMessage,
+      intl = props.intl;
+  var formatMessage = intl.formatMessage;
+  var disableChooser = !name;
+  var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    if (event.key === 'Escape') {
+      onUploadCancelled();
+    }
+  };
+
+  return (0, _core.jsx)("div", {
+    css: _styles.emojiUpload
+  }, (0, _core.jsx)("div", {
+    css: _styles.uploadChooseFileMessage
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
+    return (0, _core.jsx)("h5", null, message);
+  })), (0, _core.jsx)("div", {
+    css: _styles.uploadChooseFileRow
+  }, (0, _core.jsx)("span", {
+    css: _styles.uploadChooseFileEmojiName
+  }, (0, _core.jsx)(_textfield.default, {
+    placeholder: formatMessage(_i18n.messages.emojiPlaceholder),
+    "aria-label": formatMessage(_i18n.messages.emojiNameAriaLabel),
+    maxLength: maxNameLength,
+    onChange: onNameChange,
+    onKeyDown: onKeyDownHandler,
+    value: name,
+    isCompact: true,
+    autoFocus: true
+  })), (0, _core.jsx)("span", {
+    css: _styles.uploadChooseFileBrowse
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
+    return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("span", {
+      hidden: true,
+      id: fileChooserButtonDescriptionId
+    }, screenReaderDescription), (0, _core.jsx)(_FileChooser.default, {
+      label: formatMessage(_i18n.messages.emojiChooseFileTitle),
+      onChange: onChooseFile,
+      onClick: onClick,
+      accept: "image/png,image/jpeg,image/gif",
+      ariaDescribedBy: fileChooserButtonDescriptionId,
+      isDisabled: disableChooser
+    }));
+  }))), (0, _core.jsx)("div", {
+    css: _styles.emojiUploadBottom
+  }, !errorMessage ? (0, _core.jsx)("p", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _core.jsx)(_EmojiErrorMessage.default, {
+    messageStyles: _styles.emojiChooseFileErrorMessage,
+    message: errorMessage
+  })));
+};
 
-  function ChooseEmojiFile() {
-    var _this;
+var EmojiUploadPicker = function EmojiUploadPicker(props) {
+  var errorMessage = props.errorMessage,
+      initialUploadName = props.initialUploadName,
+      onUploadEmoji = props.onUploadEmoji,
+      onFileChooserClicked = props.onFileChooserClicked,
+      onUploadCancelled = props.onUploadCancelled,
+      intl = props.intl;
+
+  var _useState = (0, _react.useState)(errorMessage ? _internalTypes.UploadStatus.Error : _internalTypes.UploadStatus.Waiting),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      uploadStatus = _useState2[0],
+      setUploadStatus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chooseEmojiErrorMessage = _useState4[0],
+      setChooseEmojiErrorMessage = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(initialUploadName && sanitizeName(initialUploadName)),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      name = _useState6[0],
+      setName = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      filename = _useState8[0],
+      setFilename = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      previewImage = _useState10[0],
+      setPreviewImage = _useState10[1];
+
+  (0, _react.useEffect)(function () {
+    if (errorMessage) {
+      setUploadStatus(_internalTypes.UploadStatus.Error);
+      return;
+    } else {
+      if (uploadStatus === _internalTypes.UploadStatus.Error) {
+        setUploadStatus(_internalTypes.UploadStatus.Waiting);
+      }
+    }
+  }, [errorMessage, uploadStatus]);
+  (0, _react.useEffect)(function () {
+    if (initialUploadName) {
+      setName(sanitizeName(initialUploadName));
+    }
+  }, [initialUploadName]);
 
-    (0, _classCallCheck2.default)(this, ChooseEmojiFile);
+  var onNameChange = function onNameChange(event) {
+    var newName = sanitizeName(event.target.value);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (name !== newName) {
+      setName(newName);
     }
+  };
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      if (event.key === 'Escape') {
-        _this.props.onUploadCancelled();
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ChooseEmojiFile, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$name = _this$props.name,
-          name = _this$props$name === void 0 ? '' : _this$props$name,
-          onChooseFile = _this$props.onChooseFile,
-          onClick = _this$props.onClick,
-          onNameChange = _this$props.onNameChange,
-          errorMessage = _this$props.errorMessage,
-          intl = _this$props.intl;
-      var formatMessage = intl.formatMessage;
-      var disableChooser = !name;
-      var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id'; // Note: FileChooser.accept does not work in Electron due to a bug: https://product-fabric.atlassian.net/browse/FS-1626
-
-      return (0, _core.jsx)("div", {
-        css: _styles.emojiUpload
-      }, (0, _core.jsx)("div", {
-        css: _styles.uploadChooseFileMessage
-      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
-        return (0, _core.jsx)("h5", null, message);
-      })), (0, _core.jsx)("div", {
-        css: _styles.uploadChooseFileRow
-      }, (0, _core.jsx)("span", {
-        css: _styles.uploadChooseFileEmojiName
-      }, (0, _core.jsx)(_textfield.default, {
-        placeholder: formatMessage(_i18n.messages.emojiPlaceholder),
-        "aria-label": formatMessage(_i18n.messages.emojiNameAriaLabel),
-        maxLength: maxNameLength,
-        onChange: onNameChange,
-        onKeyDown: this.onKeyDown,
-        value: name,
-        isCompact: true,
-        autoFocus: true
-      })), (0, _core.jsx)("span", {
-        css: _styles.uploadChooseFileBrowse
-      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-        return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("span", {
-          hidden: true,
-          id: fileChooserButtonDescriptionId
-        }, screenReaderDescription), (0, _core.jsx)(_FileChooser.default, {
-          label: formatMessage(_i18n.messages.emojiChooseFileTitle),
-          onChange: onChooseFile,
-          onClick: onClick,
-          accept: "image/png,image/jpeg,image/gif",
-          ariaDescribedBy: fileChooserButtonDescriptionId,
-          isDisabled: disableChooser
-        }));
-      }))), (0, _core.jsx)("div", {
-        css: _styles.emojiUploadBottom
-      }, !errorMessage ? (0, _core.jsx)("p", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _core.jsx)(_EmojiErrorMessage.default, {
-        messageStyles: _styles.emojiChooseFileErrorMessage,
-        message: errorMessage
-      })));
+  var onAddEmoji = function onAddEmoji() {
+    if (uploadStatus === _internalTypes.UploadStatus.Uploading) {
+      return;
     }
-  }]);
-  return ChooseEmojiFile;
-}(_react.PureComponent);
-
-var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
-  (0, _inherits2.default)(EmojiUploadPicker, _PureComponent2);
-
-  var _super2 = _createSuper(EmojiUploadPicker);
-
-  function EmojiUploadPicker(props) {
-    var _this2;
-
-    (0, _classCallCheck2.default)(this, EmojiUploadPicker);
-    _this2 = _super2.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "state", {
-      uploadStatus: _internalTypes.UploadStatus.Waiting,
-      chooseEmojiErrorMessage: undefined
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onNameChange", function (event) {
-      var newName = sanitizeName(event.target.value);
-
-      if (_this2.state.name !== newName) {
-        _this2.setState({
-          name: newName
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onAddEmoji", function () {
-      var onUploadEmoji = _this2.props.onUploadEmoji;
-      var _this2$state = _this2.state,
-          filename = _this2$state.filename,
-          name = _this2$state.name,
-          previewImage = _this2$state.previewImage,
-          uploadStatus = _this2$state.uploadStatus;
-
-      if (uploadStatus === _internalTypes.UploadStatus.Uploading) {
-        return;
-      }
 
-      if (filename && name && previewImage) {
-        var notifyUpload = function notifyUpload(size) {
-          var width = size.width,
-              height = size.height;
-
-          _this2.setState({
-            uploadStatus: _internalTypes.UploadStatus.Uploading
-          });
-
-          onUploadEmoji({
-            name: toEmojiName(name),
-            shortName: ":".concat(name, ":"),
-            filename: filename,
-            dataURL: previewImage,
-            width: width,
-            height: height
-          }, uploadStatus === _internalTypes.UploadStatus.Error);
-        };
-
-        ImageUtil.getNaturalImageSize(previewImage).then(function (size) {
-          notifyUpload(size);
-        }).catch(function (error) {
-          (0, _logger.default)('getNaturalImageSize error', error); // Just set arbitrary size, worse case is it may render
-          // in wrong aspect ratio in some circumstances.
-
-          notifyUpload({
-            width: 32,
-            height: 32
-          });
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "errorOnUpload", function (event) {
-      (0, _logger.default)('File load error: ', event);
+    if (filename && name && previewImage) {
+      var notifyUpload = function notifyUpload(size) {
+        var width = size.width,
+            height = size.height;
+        setUploadStatus(_internalTypes.UploadStatus.Uploading);
+        onUploadEmoji({
+          name: toEmojiName(name),
+          shortName: ":".concat(name, ":"),
+          filename: filename,
+          dataURL: previewImage,
+          width: width,
+          height: height
+        }, uploadStatus === _internalTypes.UploadStatus.Error, clearUploadPicker);
+      };
 
-      _this2.setState({
-        chooseEmojiErrorMessage: _i18n.messages.emojiUploadFailed
-      });
+      ImageUtil.getNaturalImageSize(previewImage).then(function (size) {
+        notifyUpload(size);
+      }).catch(function (error) {
+        (0, _logger.default)('getNaturalImageSize error', error); // Just set arbitrary size, worse case is it may render
+        // in wrong aspect ratio in some circumstances.
 
-      _this2.cancelChooseFile();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onFileLoad", function (file) {
-      return function (f) {
-        return ImageUtil.parseImage(f.target.result).then(function () {
-          var state = {
-            previewImage: f.target.result,
-            filename: file.name
-          };
-
-          _this2.setState(state);
-        }).catch(function () {
-          _this2.setState({
-            chooseEmojiErrorMessage: _i18n.messages.emojiInvalidImage
-          });
-
-          _this2.cancelChooseFile();
+        notifyUpload({
+          width: 32,
+          height: 32
         });
-      };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "cancelChooseFile", function () {
-      _this2.setState({
-        previewImage: undefined
       });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onChooseFile", function (event) {
-      var files = event.target.files;
-
-      if (files.length) {
-        var reader = new FileReader();
-        var file = files[0];
-
-        if (ImageUtil.hasFileExceededSize(file)) {
-          _this2.setState({
-            chooseEmojiErrorMessage: _i18n.messages.emojiImageTooBig
-          });
-
-          _this2.cancelChooseFile();
-
-          return;
-        }
-
-        reader.addEventListener('load', _this2.onFileLoad(file));
-        reader.addEventListener('abort', _this2.errorOnUpload);
-        reader.addEventListener('error', _this2.errorOnUpload);
-        reader.readAsDataURL(file);
-      } else {
-        _this2.cancelChooseFile();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "clearUploadPicker", function () {
-      _this2.setState({
-        name: undefined,
-        previewImage: undefined,
-        uploadStatus: _internalTypes.UploadStatus.Waiting
-      });
-    });
-
-    if (props.errorMessage) {
-      _this2.state.uploadStatus = _internalTypes.UploadStatus.Error;
     }
+  };
+
+  var errorOnUpload = function errorOnUpload(event) {
+    (0, _logger.default)('File load error: ', event);
+    setChooseEmojiErrorMessage(_i18n.messages.emojiUploadFailed);
+    cancelChooseFile();
+  };
+
+  var onFileLoad = function onFileLoad(file) {
+    return /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(f) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                setFilename(file.name);
+                _context.next = 4;
+                return ImageUtil.parseImage(f.target.result);
+
+              case 4:
+                setPreviewImage(f.target.result);
+                _context.next = 11;
+                break;
+
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](0);
+                setChooseEmojiErrorMessage(_i18n.messages.emojiInvalidImage);
+                cancelChooseFile();
+
+              case 11:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  };
 
-    if (props.initialUploadName) {
-      _this2.state.name = sanitizeName(props.initialUploadName);
-    }
-
-    return _this2;
-  }
-
-  (0, _createClass2.default)(EmojiUploadPicker, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var updatedState = {};
-
-      if (nextProps.errorMessage) {
-        updatedState.uploadStatus = _internalTypes.UploadStatus.Error;
-      } else {
-        if (this.state.uploadStatus === _internalTypes.UploadStatus.Error) {
-          updatedState.uploadStatus = _internalTypes.UploadStatus.Waiting;
-        }
-      }
+  var cancelChooseFile = function cancelChooseFile() {
+    setPreviewImage(undefined);
+  };
 
-      if (nextProps.initialUploadName) {
-        if (!this.state.name) {
-          updatedState.name = sanitizeName(nextProps.initialUploadName);
-        }
-      }
+  var onChooseFile = function onChooseFile(event) {
+    var files = event.target.files;
 
-      this.setState(updatedState);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props2 = this.props,
-          errorMessage = _this$props2.errorMessage,
-          onUploadCancelled = _this$props2.onUploadCancelled,
-          intl = _this$props2.intl;
-      var _this$state = this.state,
-          name = _this$state.name,
-          previewImage = _this$state.previewImage,
-          uploadStatus = _this$state.uploadStatus,
-          chooseEmojiErrorMessage = _this$state.chooseEmojiErrorMessage;
-
-      var cancelUpload = function cancelUpload() {
-        _this3.clearUploadPicker();
-
-        onUploadCancelled();
-      };
+    if (files.length) {
+      var reader = new FileReader();
+      var file = files[0];
 
-      if (name && previewImage) {
-        return (0, _core.jsx)(_EmojiUploadPreview.default, {
-          errorMessage: errorMessage,
-          name: name,
-          onAddEmoji: this.onAddEmoji,
-          onUploadCancelled: cancelUpload,
-          previewImage: previewImage,
-          uploadStatus: uploadStatus
-        });
+      if (ImageUtil.hasFileExceededSize(file)) {
+        setChooseEmojiErrorMessage(_i18n.messages.emojiImageTooBig);
+        cancelChooseFile();
+        return;
       }
 
-      return (0, _core.jsx)(ChooseEmojiFile, {
-        name: name,
-        onChooseFile: this.onChooseFile,
-        onClick: this.props.onFileChooserClicked,
-        onNameChange: this.onNameChange,
-        onUploadCancelled: cancelUpload,
-        errorMessage: chooseEmojiErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
-        intl: intl
-      });
+      reader.addEventListener('load', onFileLoad(file));
+      reader.addEventListener('abort', errorOnUpload);
+      reader.addEventListener('error', errorOnUpload);
+      reader.readAsDataURL(file);
+    } else {
+      cancelChooseFile();
     }
-  }]);
-  return EmojiUploadPicker;
-}(_react.PureComponent);
-
-exports.EmojiUploadPicker = EmojiUploadPicker;
+  };
+
+  var clearUploadPicker = function clearUploadPicker() {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(_internalTypes.UploadStatus.Waiting);
+  };
+
+  var cancelUpload = function cancelUpload() {
+    clearUploadPicker();
+    onUploadCancelled();
+  };
+
+  return (0, _core.jsx)(_react.default.Fragment, null, name && previewImage ? (0, _core.jsx)(_EmojiUploadPreview.default, {
+    errorMessage: errorMessage,
+    name: name,
+    onAddEmoji: onAddEmoji,
+    onUploadCancelled: cancelUpload,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus
+  }) : (0, _core.jsx)(ChooseEmojiFile, {
+    name: name,
+    onChooseFile: onChooseFile,
+    onClick: onFileChooserClicked,
+    onNameChange: onNameChange,
+    onUploadCancelled: cancelUpload,
+    errorMessage: chooseEmojiErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
+    intl: intl
+  }));
+};
 
-var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPicker, {
-  forwardRef: true
-});
+var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPicker);
 
 exports.default = _default;