@atlaskit/emoji 65.1.1 → 65.2.0

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

@@ -1,9 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { Fragment } from 'react';
-import { PureComponent } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
 import * as ImageUtil from '../../util/image';
@@ -31,269 +28,209 @@ const toEmojiName = uploadName => {
   return `${name.substr(0, 1).toLocaleUpperCase()}${name.substr(1)}`;
 };
 
-class ChooseEmojiFile extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onKeyDown", event => {
-      if (event.key === 'Escape') {
-        this.props.onUploadCancelled();
-      }
-    });
-  }
-
-  render() {
-    const {
-      name = '',
-      onChooseFile,
-      onClick,
-      onNameChange,
-      errorMessage,
-      intl
-    } = this.props;
-    const {
-      formatMessage
-    } = intl;
-    const disableChooser = !name;
-    const 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 jsx("div", {
-      css: emojiUpload
-    }, jsx("div", {
-      css: uploadChooseFileMessage
-    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => jsx("h5", null, message))), jsx("div", {
-      css: uploadChooseFileRow
-    }, jsx("span", {
-      css: uploadChooseFileEmojiName
-    }, jsx(TextField, {
-      placeholder: formatMessage(messages.emojiPlaceholder),
-      "aria-label": formatMessage(messages.emojiNameAriaLabel),
-      maxLength: maxNameLength,
-      onChange: onNameChange,
-      onKeyDown: this.onKeyDown,
-      value: name,
-      isCompact: true,
-      autoFocus: true
-    })), jsx("span", {
-      css: uploadChooseFileBrowse
-    }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => jsx(Fragment, null, jsx("span", {
-      hidden: true,
-      id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), jsx(FileChooser, {
-      label: formatMessage(messages.emojiChooseFileTitle),
-      onChange: onChooseFile,
-      onClick: onClick,
-      accept: "image/png,image/jpeg,image/gif",
-      ariaDescribedBy: fileChooserButtonDescriptionId,
-      isDisabled: disableChooser
-    }))))), jsx("div", {
-      css: emojiUploadBottom
-    }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
-      messageStyles: emojiChooseFileErrorMessage,
-      message: errorMessage
-    })));
-  }
-
-}
-
-export class EmojiUploadPicker extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "state", {
-      uploadStatus: UploadStatus.Waiting,
-      chooseEmojiErrorMessage: undefined
-    });
-
-    _defineProperty(this, "onNameChange", event => {
-      let newName = sanitizeName(event.target.value);
-
-      if (this.state.name !== newName) {
-        this.setState({
-          name: newName
-        });
-      }
-    });
-
-    _defineProperty(this, "onAddEmoji", () => {
-      const {
-        onUploadEmoji
-      } = this.props;
-      const {
-        filename,
-        name,
-        previewImage,
-        uploadStatus
-      } = this.state;
+const ChooseEmojiFile = props => {
+  const {
+    name = '',
+    onChooseFile,
+    onClick,
+    onNameChange,
+    onUploadCancelled,
+    errorMessage,
+    intl
+  } = props;
+  const {
+    formatMessage
+  } = intl;
+  const disableChooser = !name;
+  const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
+
+  const onKeyDownHandler = event => {
+    if (event.key === 'Escape') {
+      onUploadCancelled();
+    }
+  };
+
+  return jsx("div", {
+    css: emojiUpload
+  }, jsx("div", {
+    css: uploadChooseFileMessage
+  }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => jsx("h5", null, message))), jsx("div", {
+    css: uploadChooseFileRow
+  }, jsx("span", {
+    css: uploadChooseFileEmojiName
+  }, jsx(TextField, {
+    placeholder: formatMessage(messages.emojiPlaceholder),
+    "aria-label": formatMessage(messages.emojiNameAriaLabel),
+    maxLength: maxNameLength,
+    onChange: onNameChange,
+    onKeyDown: onKeyDownHandler,
+    value: name,
+    isCompact: true,
+    autoFocus: true
+  })), jsx("span", {
+    css: uploadChooseFileBrowse
+  }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => jsx(Fragment, null, jsx("span", {
+    hidden: true,
+    id: fileChooserButtonDescriptionId
+  }, screenReaderDescription), jsx(FileChooser, {
+    label: formatMessage(messages.emojiChooseFileTitle),
+    onChange: onChooseFile,
+    onClick: onClick,
+    accept: "image/png,image/jpeg,image/gif",
+    ariaDescribedBy: fileChooserButtonDescriptionId,
+    isDisabled: disableChooser
+  }))))), jsx("div", {
+    css: emojiUploadBottom
+  }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
+    messageStyles: emojiChooseFileErrorMessage,
+    message: errorMessage
+  })));
+};
 
-      if (uploadStatus === UploadStatus.Uploading) {
-        return;
+const EmojiUploadPicker = props => {
+  const {
+    errorMessage,
+    initialUploadName,
+    onUploadEmoji,
+    onFileChooserClicked,
+    onUploadCancelled,
+    intl
+  } = props;
+  const [uploadStatus, setUploadStatus] = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting);
+  const [chooseEmojiErrorMessage, setChooseEmojiErrorMessage] = useState();
+  const [name, setName] = useState(initialUploadName && sanitizeName(initialUploadName));
+  const [filename, setFilename] = useState();
+  const [previewImage, setPreviewImage] = useState();
+  useEffect(() => {
+    if (errorMessage) {
+      setUploadStatus(UploadStatus.Error);
+      return;
+    } else {
+      if (uploadStatus === UploadStatus.Error) {
+        setUploadStatus(UploadStatus.Waiting);
       }
+    }
+  }, [errorMessage, uploadStatus]);
+  useEffect(() => {
+    if (initialUploadName) {
+      setName(sanitizeName(initialUploadName));
+    }
+  }, [initialUploadName]);
 
-      if (filename && name && previewImage) {
-        const notifyUpload = size => {
-          const {
-            width,
-            height
-          } = size;
-          this.setState({
-            uploadStatus: UploadStatus.Uploading
-          });
-          onUploadEmoji({
-            name: toEmojiName(name),
-            shortName: `:${name}:`,
-            filename,
-            dataURL: previewImage,
-            width,
-            height
-          }, uploadStatus === UploadStatus.Error);
-        };
-
-        ImageUtil.getNaturalImageSize(previewImage).then(size => {
-          notifyUpload(size);
-        }).catch(error => {
-          debug('getNaturalImageSize error', error); // Just set arbitrary size, worse case is it may render
-          // in wrong aspect ratio in some circumstances.
+  const onNameChange = event => {
+    let newName = sanitizeName(event.target.value);
 
-          notifyUpload({
-            width: 32,
-            height: 32
-          });
-        });
-      }
-    });
+    if (name !== newName) {
+      setName(newName);
+    }
+  };
 
-    _defineProperty(this, "errorOnUpload", event => {
-      debug('File load error: ', event);
-      this.setState({
-        chooseEmojiErrorMessage: messages.emojiUploadFailed
-      });
-      this.cancelChooseFile();
-    });
+  const onAddEmoji = () => {
+    if (uploadStatus === UploadStatus.Uploading) {
+      return;
+    }
 
-    _defineProperty(this, "onFileLoad", file => f => {
-      return ImageUtil.parseImage(f.target.result).then(() => {
-        const state = {
-          previewImage: f.target.result,
-          filename: file.name
-        };
-        this.setState(state);
-      }).catch(() => {
-        this.setState({
-          chooseEmojiErrorMessage: messages.emojiInvalidImage
+    if (filename && name && previewImage) {
+      const notifyUpload = size => {
+        const {
+          width,
+          height
+        } = size;
+        setUploadStatus(UploadStatus.Uploading);
+        onUploadEmoji({
+          name: toEmojiName(name),
+          shortName: `:${name}:`,
+          filename,
+          dataURL: previewImage,
+          width,
+          height
+        }, uploadStatus === UploadStatus.Error, clearUploadPicker);
+      };
+
+      ImageUtil.getNaturalImageSize(previewImage).then(size => {
+        notifyUpload(size);
+      }).catch(error => {
+        debug('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
         });
-        this.cancelChooseFile();
       });
-    });
-
-    _defineProperty(this, "cancelChooseFile", () => {
-      this.setState({
-        previewImage: undefined
-      });
-    });
-
-    _defineProperty(this, "onChooseFile", event => {
-      const files = event.target.files;
-
-      if (files.length) {
-        const reader = new FileReader();
-        const file = files[0];
-
-        if (ImageUtil.hasFileExceededSize(file)) {
-          this.setState({
-            chooseEmojiErrorMessage: messages.emojiImageTooBig
-          });
-          this.cancelChooseFile();
-          return;
-        }
-
-        reader.addEventListener('load', this.onFileLoad(file));
-        reader.addEventListener('abort', this.errorOnUpload);
-        reader.addEventListener('error', this.errorOnUpload);
-        reader.readAsDataURL(file);
-      } else {
-        this.cancelChooseFile();
-      }
-    });
-
-    _defineProperty(this, "clearUploadPicker", () => {
-      this.setState({
-        name: undefined,
-        previewImage: undefined,
-        uploadStatus: UploadStatus.Waiting
-      });
-    });
-
-    if (props.errorMessage) {
-      this.state.uploadStatus = UploadStatus.Error;
     }
-
-    if (props.initialUploadName) {
-      this.state.name = sanitizeName(props.initialUploadName);
+  };
+
+  const errorOnUpload = event => {
+    debug('File load error: ', event);
+    setChooseEmojiErrorMessage(messages.emojiUploadFailed);
+    cancelChooseFile();
+  };
+
+  const onFileLoad = file => async f => {
+    try {
+      setFilename(file.name);
+      await ImageUtil.parseImage(f.target.result);
+      setPreviewImage(f.target.result);
+    } catch {
+      setChooseEmojiErrorMessage(messages.emojiInvalidImage);
+      cancelChooseFile();
     }
-  }
+  };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const updatedState = {};
+  const cancelChooseFile = () => {
+    setPreviewImage(undefined);
+  };
 
-    if (nextProps.errorMessage) {
-      updatedState.uploadStatus = UploadStatus.Error;
-    } else {
-      if (this.state.uploadStatus === UploadStatus.Error) {
-        updatedState.uploadStatus = UploadStatus.Waiting;
-      }
-    }
-
-    if (nextProps.initialUploadName) {
-      if (!this.state.name) {
-        updatedState.name = sanitizeName(nextProps.initialUploadName);
-      }
-    }
-
-    this.setState(updatedState);
-  }
+  const onChooseFile = event => {
+    const files = event.target.files;
 
-  render() {
-    const {
-      errorMessage,
-      onUploadCancelled,
-      intl
-    } = this.props;
-    const {
-      name,
-      previewImage,
-      uploadStatus,
-      chooseEmojiErrorMessage
-    } = this.state;
+    if (files.length) {
+      const reader = new FileReader();
+      const file = files[0];
 
-    const cancelUpload = () => {
-      this.clearUploadPicker();
-      onUploadCancelled();
-    };
+      if (ImageUtil.hasFileExceededSize(file)) {
+        setChooseEmojiErrorMessage(messages.emojiImageTooBig);
+        cancelChooseFile();
+        return;
+      }
 
-    if (name && previewImage) {
-      return jsx(EmojiUploadPreview, {
-        errorMessage: errorMessage,
-        name: name,
-        onAddEmoji: this.onAddEmoji,
-        onUploadCancelled: cancelUpload,
-        previewImage: previewImage,
-        uploadStatus: uploadStatus
-      });
+      reader.addEventListener('load', onFileLoad(file));
+      reader.addEventListener('abort', errorOnUpload);
+      reader.addEventListener('error', errorOnUpload);
+      reader.readAsDataURL(file);
+    } else {
+      cancelChooseFile();
     }
+  };
+
+  const clearUploadPicker = () => {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(UploadStatus.Waiting);
+  };
+
+  const cancelUpload = () => {
+    clearUploadPicker();
+    onUploadCancelled();
+  };
+
+  return jsx(React.Fragment, null, name && previewImage ? jsx(EmojiUploadPreview, {
+    errorMessage: errorMessage,
+    name: name,
+    onAddEmoji: onAddEmoji,
+    onUploadCancelled: cancelUpload,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus
+  }) : jsx(ChooseEmojiFile, {
+    name: name,
+    onChooseFile: onChooseFile,
+    onClick: onFileChooserClicked,
+    onNameChange: onNameChange,
+    onUploadCancelled: cancelUpload,
+    errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+    intl: intl
+  }));
+};
 
-    return jsx(ChooseEmojiFile, {
-      name: name,
-      onChooseFile: this.onChooseFile,
-      onClick: this.props.onFileChooserClicked,
-      onNameChange: this.onNameChange,
-      onUploadCancelled: cancelUpload,
-      errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
-      intl: intl
-    });
-  }
-
-}
-export default injectIntl(EmojiUploadPicker, {
-  forwardRef: true
-});
+export default injectIntl(EmojiUploadPicker);

package/dist/es2019/components/common/FileChooser.js

@@ -1,46 +1,43 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { useRef } from 'react';
 import AkButton from '@atlaskit/button/custom-theme-button';
-export default class FileChooser extends PureComponent {
-  constructor(...args) {
-    super(...args);
 
-    _defineProperty(this, "onChooseFile", () => {
-      if (this.props.onClick) {
-        this.props.onClick();
-      }
+const FileChooser = props => {
+  const {
+    accept,
+    ariaDescribedBy,
+    isDisabled,
+    label,
+    onChange,
+    onClick
+  } = props;
+  const filePickerRef = useRef(null);
 
-      const chooseFile = this.refs['chooseFile'];
+  const handleOnChooseFile = () => {
+    if (!filePickerRef.current) {
+      return;
+    }
 
-      if (chooseFile) {
-        chooseFile.click();
-      }
-    });
-  }
+    if (onClick) {
+      onClick();
+    }
 
-  render() {
-    const {
-      accept,
-      ariaDescribedBy,
-      isDisabled,
-      label,
-      onChange
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AkButton, {
-      onClick: this.onChooseFile,
-      isDisabled: isDisabled,
-      "aria-describedby": ariaDescribedBy
-    }, label), /*#__PURE__*/React.createElement("input", {
-      className: "emojiUploadFileInput",
-      ref: "chooseFile",
-      onChange: onChange,
-      type: "file",
-      accept: accept,
-      style: {
-        display: 'none'
-      }
-    }));
-  }
+    filePickerRef.current.click();
+  };
 
-}
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AkButton, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy
+  }, label), /*#__PURE__*/React.createElement("input", {
+    className: "emojiUploadFileInput",
+    ref: filePickerRef,
+    onChange: onChange,
+    type: "file",
+    accept: accept,
+    style: {
+      display: 'none'
+    }
+  }));
+};
+
+export default FileChooser;