@atlaskit/emoji 65.0.0 → 65.2.0

package/dist/es2019/components/picker/EmojiPickerComponent.js

@@ -1,8 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
@@ -20,566 +19,487 @@ import EmojiPickerList from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
 import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
+import { useDidMount } from '../hooks';
 const FREQUENTLY_USED_MAX = 16;
-export default class EmojiPickerComponent extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "onEmojiActive", (_emojiId, emoji) => {
-      if (this.state.selectedEmoji !== emoji) {
-        this.setState({
-          selectedEmoji: emoji
-        });
-      }
-    });
 
-    _defineProperty(this, "onCategoryActivated", category => {
-      if (this.state.activeCategory !== category) {
-        this.setState({
-          activeCategory: category
-        });
-      }
+const EmojiPickerComponent = ({
+  emojiProvider,
+  onSelection,
+  onPickerRef,
+  hideToneSelector,
+  createAnalyticsEvent
+}) => {
+  const [filteredEmojis, setFilteredEmojis] = useState([]);
+  const [searchEmojis, setSearchEmojis] = useState([]);
+  const [frequentlyUsedEmojis, setFrequentlyUsedEmojis] = useState([]);
+  const [query, setQuery] = useState('');
+  const [dynamicCategories, setDynamicCategories] = useState([]);
+  const [selectedTone, setSelectedTone] = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined);
+  const [loading, setLoading] = useState(true);
+  const [uploadSupported, setUploadSupported] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [selectedEmoji, setSelectedEmoji] = useState();
+  const [activeCategory, setActiveCategory] = useState(null);
+  const [disableCategories, setDisableCategories] = useState(false);
+  const [uploadErrorMessage, setUploadErrorMessage] = useState();
+  const [emojiToDelete, setEmojiToDelete] = useState();
+  const [toneEmoji, setToneEmoji] = useState();
+  const emojiPickerList = useMemo(() => /*#__PURE__*/createRef(), []);
+  const openTime = useRef(0);
+  const isMounting = useRef(true);
+  const didMount = useDidMount();
+  const updateAfterDidMount = useRef(true);
+  const previousEmojiProvider = useRef(emojiProvider);
+  const currentUser = useMemo(() => {
+    return emojiProvider.getCurrentUser();
+  }, [emojiProvider]);
+  const fireAnalytics = useCallback(analyticsEvent => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
+    }
+  }, [createAnalyticsEvent]);
+  const onEmojiActive = useCallback((emojiId, emoji) => {
+    if (!selectedEmoji || selectedEmoji.id !== (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id)) {
+      setSelectedEmoji(emoji);
+    }
+  }, [selectedEmoji]);
+  const onCategoryActivated = useCallback(category => {
+    if (activeCategory !== category) {
+      setActiveCategory(category);
+    }
+  }, [activeCategory]);
+
+  const calculateElapsedTime = () => {
+    return Date.now() - openTime.current;
+  };
+
+  const onUploadSupported = useCallback(supported => {
+    setUploadSupported(supported);
+  }, []);
+  const onDynamicCategoryChange = useCallback(categories => {
+    setDynamicCategories(categories);
+  }, []);
+  const onUploadCancelled = useCallback(() => {
+    batchedUpdates(() => {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
     });
+    fireAnalytics(uploadCancelButton());
+  }, [fireAnalytics]);
+  const getDynamicCategories = useCallback(() => {
+    if (!emojiProvider.calculateDynamicCategories) {
+      return Promise.resolve([]);
+    }
 
-    _defineProperty(this, "onCategorySelected", categoryId => {
-      const {
-        emojiProvider
-      } = this.props;
-
-      if (!categoryId) {
-        return;
-      }
-
-      emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
-        const {
-          disableCategories
-        } = this.state;
-
-        if (!disableCategories) {
-          let selectedEmoji;
-
-          if (emojisInCategory && emojisInCategory.length > 0) {
-            selectedEmoji = getEmojiVariation(emojisInCategory[0], {
-              skinTone: this.state.selectedTone
-            });
-          }
-
-          const emojiPickerList = this.refs.emojiPickerList;
-
-          if (emojiPickerList) {
-            emojiPickerList.reveal(categoryId);
-          }
+    return emojiProvider.calculateDynamicCategories();
+  }, [emojiProvider]);
+  /**
+   * Calculate and set the new state of the component in response to the list of emoji changing for some reason (a search has returned
+   * or the frequently used emoji have updated.)
+   */
 
-          this.setState({
-            activeCategory: categoryId,
-            selectedEmoji
-          });
-          this.fireAnalytics(categoryClickedEvent({
-            category: categoryId
-          }));
-        }
+  const setStateAfterEmojiChange = useCallback(({
+    searchQuery,
+    emojiToRender,
+    searchEmoji,
+    frequentEmoji
+  }) => {
+    // Only enable categories for full emoji list (non-search)
+    const disableCategories = !!searchQuery;
+
+    if (!disableCategories && emojiToRender && emojiToRender.length !== filteredEmojis.length) {
+      getDynamicCategories().then(categories => {
+        onDynamicCategoryChange(categories);
       });
-    });
-
-    _defineProperty(this, "onFileChooserClicked", () => {
-      this.fireAnalytics(selectedFileEvent());
-    });
-
-    _defineProperty(this, "fireAnalytics", analyticsEvent => {
-      const {
-        createAnalyticsEvent
-      } = this.props;
-
-      if (createAnalyticsEvent) {
-        createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
-      }
-    });
+    }
 
-    _defineProperty(this, "calculateElapsedTime", () => {
-      return Date.now() - this.openTime;
-    });
+    if (emojiToRender && !containsEmojiId(emojiToRender, selectedEmoji)) {
+      batchedUpdates(() => {
+        setSelectedEmoji(undefined); // Only enable categories for full emoji list (non-search)
 
-    _defineProperty(this, "onUploadSupported", supported => {
-      this.setState({
-        uploadSupported: supported
+        setActiveCategory(null);
       });
-    });
-
-    _defineProperty(this, "onSearch", query => {
-      const options = {
-        skinTone: this.state.selectedTone
-      };
+    }
 
-      if (query !== this.state.query) {
-        ufoExperiences['emoji-searched'].start();
-        ufoExperiences['emoji-searched'].addMetadata({
-          queryLength: query.length,
-          source: 'picker'
-        });
+    batchedUpdates(() => {
+      if (emojiToRender) {
+        setFilteredEmojis(emojiToRender);
       }
 
-      this.updateEmojis(query, options);
-    });
-
-    _defineProperty(this, "onSearchResult", searchResults => {
-      const frequentlyUsedEmoji = this.state.frequentlyUsedEmojis || [];
-      const searchQuery = searchResults.query || '';
-      const emojiToRender = this.buildQuerySpecificEmojiList(searchQuery, searchResults.emojis, frequentlyUsedEmoji);
-
-      if (searchQuery !== this.state.query) {
-        this.fireAnalytics(pickerSearchedEvent({
-          queryLength: searchQuery.length,
-          numMatches: emojiToRender.length
-        }));
-        ufoExperiences['emoji-searched'].success({
-          metadata: {
-            emojisLength: emojiToRender.length
-          }
-        });
+      if (searchEmoji) {
+        setSearchEmojis(searchEmoji);
       }
 
-      this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
-    });
-
-    _defineProperty(this, "onFrequentEmojiResult", frequentEmoji => {
-      const {
-        query,
-        searchEmojis
-      } = this.state; // change the category of each of the featured emoji
-
-      const recategorised = frequentEmoji.map(emoji => {
-        const clone = JSON.parse(JSON.stringify(emoji));
-        clone.category = frequentCategory;
-        return clone;
-      });
-      const emojiToRender = this.buildQuerySpecificEmojiList(query, searchEmojis, recategorised);
-      this.setStateAfterEmojiChange(query, emojiToRender, searchEmojis, recategorised);
-    });
+      if (frequentEmoji) {
+        setFrequentlyUsedEmojis(frequentEmoji);
+      }
 
-    _defineProperty(this, "onDynamicCategoryChange", categories => {
-      this.setState({
-        dynamicCategories: categories
-      });
+      setLoading(false);
+      setDisableCategories(disableCategories);
     });
-
-    _defineProperty(this, "onProviderChange", {
-      result: this.onSearchResult
+  }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
+  const onFrequentEmojiResult = useCallback(frequentEmoji => {
+    // change the category of each of the featured emoji
+    const recategorised = frequentEmoji.map(emoji => {
+      const clone = JSON.parse(JSON.stringify(emoji));
+      clone.category = frequentCategory;
+      return clone;
     });
-
-    _defineProperty(this, "onToneSelected", toneValue => {
-      this.setState({
-        selectedTone: toneValue
-      });
-      this.props.emojiProvider.setSelectedTone(toneValue);
-      const {
-        query = ''
-      } = this.state;
-      this.updateEmojis(query, {
-        skinTone: toneValue
-      });
+    setStateAfterEmojiChange({
+      frequentEmoji: recategorised
     });
+  }, [setStateAfterEmojiChange]);
+  const onSearchResult = useCallback(searchResults => {
+    const frequentlyUsedEmoji = frequentlyUsedEmojis || [];
+    const searchQuery = searchResults.query || '';
+    /**
+     * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
+     * also include a special category of most frequently used emoji (if there are any). This method decides if we are in this 'no search'
+     * state and appends the frequent emoji if necessary.
+     */
+
+    let emojiToRender;
+
+    if (!frequentlyUsedEmoji.length || query) {
+      emojiToRender = searchResults.emojis;
+    } else {
+      emojiToRender = [...searchResults.emojis, ...frequentlyUsedEmoji];
+    }
 
-    _defineProperty(this, "onToneSelectorCancelled", () => {
-      this.fireAnalytics(toneSelectorClosedEvent());
+    setStateAfterEmojiChange({
+      searchQuery,
+      emojiToRender,
+      searchEmoji: searchResults.emojis
     });
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange]);
+  const onProviderChange = useMemo(() => {
+    return {
+      result: onSearchResult
+    };
+  }, [onSearchResult]);
+  /**
+   * Updates the emoji displayed by the picker. If there is no query specified then we expect to retrieve all emoji for display,
+   * by category, in the picker. This differs from when there is a query in which case we expect to receive a sorted result matching
+   * the search.
+   */
 
-    _defineProperty(this, "updateEmojis", (query, options) => {
-      // if the query is empty then we want the emoji to be in service defined order, unless specified otherwise
-      // and we want emoji for the 'frequently used' category to be refreshed as well.
-      if (!query) {
-        if (!options) {
-          options = {};
-        }
-
-        if (!options.sort) {
-          options.sort = SearchSort.None;
-        } // take a copy of search options so that the frequently used can be limited to 16 without affecting the full emoji query
-
-
-        const frequentOptions = { ...options,
-          sort: SearchSort.None,
-          limit: FREQUENTLY_USED_MAX
-        };
-        this.props.emojiProvider.getFrequentlyUsed(frequentOptions).then(this.onFrequentEmojiResult);
+  const updateEmojis = useCallback((query, options) => {
+    // if the query is empty then we want the emoji to be in service defined order, unless specified otherwise
+    // and we want emoji for the 'frequently used' category to be refreshed as well.
+    if (!query) {
+      if (!options) {
+        options = {};
       }
 
-      this.props.emojiProvider.filter(query, options);
-    });
+      if (!options.sort) {
+        options.sort = SearchSort.None;
+      } // take a copy of search options so that the frequently used can be limited to 16 without affecting the full emoji query
 
-    _defineProperty(this, "onOpenUpload", () => {
-      // Prime upload token so it's ready when the user adds
-      const {
-        emojiProvider
-      } = this.props;
 
-      if (supportsUploadFeature(emojiProvider)) {
-        emojiProvider.prepareForUpload();
-      }
+      const frequentOptions = { ...options,
+        sort: SearchSort.None,
+        limit: FREQUENTLY_USED_MAX
+      };
+      emojiProvider.getFrequentlyUsed(frequentOptions).then(onFrequentEmojiResult);
+    }
 
-      this.setState({
-        uploadErrorMessage: undefined,
-        uploading: true
-      });
-      this.fireAnalytics(uploadBeginButton());
+    emojiProvider.filter(query, options);
+  }, [emojiProvider, onFrequentEmojiResult]);
+  const onToneSelected = useCallback(toneValue => {
+    emojiProvider.setSelectedTone(toneValue);
+    updateEmojis(query, {
+      skinTone: toneValue
     });
-
-    _defineProperty(this, "onUploadEmoji", (upload, retry) => {
-      const {
-        emojiProvider
-      } = this.props;
-      this.fireAnalytics(uploadConfirmButton({
-        retry
+    setSelectedTone(toneValue);
+  }, [emojiProvider, query, updateEmojis]);
+  const onToneSelectorCancelled = useCallback(() => {
+    fireAnalytics(toneSelectorClosedEvent());
+  }, [fireAnalytics]);
+  const onSelectWrapper = useCallback((emojiId, emoji, event) => {
+    if (onSelection) {
+      onSelection(emojiId, emoji, event);
+      fireAnalytics(pickerClickedEvent({
+        duration: calculateElapsedTime(),
+        emojiId: (emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) || '',
+        category: emoji && emoji.category || '',
+        type: emoji && emoji.type || '',
+        queryLength: query && query.length || 0
       }));
+    }
+  }, [fireAnalytics, onSelection, query]);
+  const onCategorySelected = useCallback(categoryId => {
+    if (!categoryId) {
+      return;
+    }
 
-      const errorSetter = message => {
-        this.setState({
-          uploadErrorMessage: message
-        });
-      };
+    emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
+      if (!disableCategories) {
+        let newSelectedEmoji;
 
-      const onSuccess = emojiDescription => {
-        this.setState({
-          activeCategory: customCategory,
-          selectedEmoji: emojiDescription,
-          uploading: false
-        }); // this.loadEmoji(emojiProvider, emojiDescription);
+        if (emojisInCategory && emojisInCategory.length > 0) {
+          newSelectedEmoji = getEmojiVariation(emojisInCategory[0], {
+            skinTone: selectedTone
+          });
+        }
 
-        this.scrollToEndOfList();
-      };
+        if (emojiPickerList.current) {
+          emojiPickerList.current.reveal(categoryId);
+        }
 
-      uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, this.fireAnalytics, retry);
+        batchedUpdates(() => {
+          setActiveCategory(categoryId);
+          setSelectedEmoji(newSelectedEmoji);
+        });
+        fireAnalytics(categoryClickedEvent({
+          category: categoryId
+        }));
+      }
     });
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic('picker'))), [emojiProvider, fireAnalytics, onSelectWrapper]);
+  const formattedErrorMessage = useMemo(() => uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
+  const emojiContextValue = useMemo(() => ({
+    emoji: {
+      emojiProvider
+    }
+  }), [emojiProvider]);
+  const onFileChooserClicked = useCallback(() => {
+    fireAnalytics(selectedFileEvent());
+  }, [fireAnalytics]);
+  const onSearch = useCallback(searchQuery => {
+    const options = {
+      skinTone: selectedTone
+    };
 
-    _defineProperty(this, "onTriggerDelete", (_emojiId, emoji) => {
-      this.fireAnalytics(deleteBeginEvent({
-        emojiId: _emojiId.id
-      }));
-      this.setState({
-        emojiToDelete: emoji
+    if (query) {
+      ufoExperiences['emoji-searched'].start();
+      ufoExperiences['emoji-searched'].addMetadata({
+        queryLength: query.length,
+        source: 'picker'
       });
-    });
+    }
 
-    _defineProperty(this, "onCloseDelete", () => {
-      const {
-        emojiToDelete
-      } = this.state;
-      this.fireAnalytics(deleteCancelEvent({
-        emojiId: emojiToDelete && emojiToDelete.id
-      }));
-      this.setState({
-        emojiToDelete: undefined
-      });
-    });
+    if (searchQuery !== query) {
+      setQuery(searchQuery);
+    }
 
-    _defineProperty(this, "onDeleteEmoji", emoji => {
-      const {
-        emojiToDelete,
-        query,
-        selectedTone
-      } = this.state;
-      this.fireAnalytics(deleteConfirmEvent({
-        emojiId: emojiToDelete && emojiToDelete.id
-      }));
-      return this.props.emojiProvider.deleteSiteEmoji(emoji).then(success => {
-        if (success) {
-          this.updateEmojis(query, {
-            skinTone: selectedTone
-          });
-        }
+    updateEmojis(query, options);
+  }, [query, selectedTone, updateEmojis]);
+  const onOpenUpload = useCallback(() => {
+    // Prime upload token so it's ready when the user adds
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
 
-        return success;
-      });
+    batchedUpdates(() => {
+      setUploadErrorMessage(undefined);
+      setUploading(true);
     });
+    fireAnalytics(uploadBeginButton());
+  }, [emojiProvider, fireAnalytics]);
+  const scrollToEndOfList = useCallback(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-    _defineProperty(this, "scrollToEndOfList", () => {
-      const emojiPickerList = this.refs.emojiPickerList;
+    if (emojiPickerList.current) {
+      // Wait a tick to ensure repaint and updated height for picker list
+      window.setTimeout(() => {
+        var _emojiPickerList$curr;
 
-      if (typeof window === 'undefined') {
-        return;
-      }
+        (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
+      }, 0);
+    }
+  }, [emojiPickerList]);
+  const onUploadEmoji = useCallback((upload, retry) => {
+    fireAnalytics(uploadConfirmButton({
+      retry
+    }));
 
-      if (emojiPickerList) {
-        // Wait a tick to ensure repaint and updated height for picker list
-        window.setTimeout(() => {
-          emojiPickerList.scrollToBottom();
-        }, 0);
-      }
-    });
+    const errorSetter = message => {
+      setUploadErrorMessage(message);
+    };
 
-    _defineProperty(this, "onUploadCancelled", () => {
-      this.setState({
-        uploading: false,
-        uploadErrorMessage: undefined
+    const onSuccess = emojiDescription => {
+      batchedUpdates(() => {
+        setActiveCategory(customCategory);
+        setSelectedEmoji(emojiDescription);
+        setUploading(false);
       });
-      this.fireAnalytics(uploadCancelButton());
-    });
+      scrollToEndOfList();
+    };
 
-    _defineProperty(this, "handlePickerRef", ref => {
-      if (this.props.onPickerRef) {
-        this.props.onPickerRef(ref);
+    uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
+  }, [emojiProvider, fireAnalytics, scrollToEndOfList]);
+  const onTriggerDelete = useCallback((_emojiId, emoji) => {
+    if (_emojiId) {
+      fireAnalytics(deleteBeginEvent({
+        emojiId: _emojiId.id
+      }));
+      setEmojiToDelete(emoji);
+    }
+  }, [fireAnalytics]);
+  const onCloseDelete = useCallback(() => {
+    fireAnalytics(deleteCancelEvent({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    setEmojiToDelete(undefined);
+  }, [emojiToDelete, fireAnalytics]);
+  const onDeleteEmoji = useCallback(emoji => {
+    fireAnalytics(deleteConfirmEvent({
+      emojiId: emojiToDelete && emojiToDelete.id
+    }));
+    return emojiProvider.deleteSiteEmoji(emoji).then(success => {
+      if (success) {
+        updateEmojis(query, {
+          skinTone: selectedTone
+        });
       }
-    });
 
-    _defineProperty(this, "onSelectWrapper", (emojiId, emoji, event) => {
-      const {
-        onSelection
-      } = this.props;
-      const {
-        query
-      } = this.state;
-
-      if (onSelection) {
-        onSelection(emojiId, emoji, event);
-        this.fireAnalytics(pickerClickedEvent({
-          duration: this.calculateElapsedTime(),
-          emojiId: emojiId.id || '',
-          category: emoji && emoji.category || '',
-          type: emoji && emoji.type || '',
-          queryLength: query && query.length || 0
-        }));
-      }
+      return success;
     });
-
-    const {
-      emojiProvider: _emojiProvider,
-      hideToneSelector
-    } = props;
-    this.state = {
-      filteredEmojis: [],
-      searchEmojis: [],
-      frequentlyUsedEmojis: [],
-      query: '',
-      dynamicCategories: [],
-      selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
-      loading: true,
-      uploadSupported: false,
-      uploading: false
-    };
-    this.openTime = 0;
-  }
-
-  UNSAFE_componentWillMount() {
-    ufoExperiences['emoji-picker-opened'].success();
-    this.openTime = Date.now();
-    this.fireAnalytics(openedPickerEvent());
-  }
-
-  componentDidMount() {
-    const {
-      emojiProvider,
-      hideToneSelector
-    } = this.props;
-    emojiProvider.subscribe(this.onProviderChange);
-    this.onSearch(this.state.query);
+  }, [emojiProvider, emojiToDelete, fireAnalytics, query, selectedTone, updateEmojis]);
+  const onComponentDidMount = useCallback(() => {
+    emojiProvider.subscribe(onProviderChange);
+    onSearch(query);
 
     if (supportsUploadFeature(emojiProvider)) {
-      emojiProvider.isUploadSupported().then(this.onUploadSupported);
+      emojiProvider.isUploadSupported().then(onUploadSupported);
     }
 
     if (!hideToneSelector) {
       const toneEmoji = getToneEmoji(emojiProvider);
 
       if (isPromise(toneEmoji)) {
-        toneEmoji.then(emoji => this.setState({
-          toneEmoji: emoji
-        }));
+        toneEmoji.then(emoji => setToneEmoji(emoji));
       } else if (toneEmoji === undefined || isEmojiDescription(toneEmoji)) {
-        this.setState({
-          toneEmoji
-        });
+        setToneEmoji(toneEmoji);
       }
     }
-  }
+  }, [emojiProvider, hideToneSelector, onProviderChange, onSearch, onUploadSupported, query]);
 
-  componentWillUnmount() {
-    const {
-      emojiProvider
-    } = this.props;
-    emojiProvider.unsubscribe(this.onProviderChange);
-    this.fireAnalytics(closedPickerEvent({
-      duration: this.calculateElapsedTime()
-    }));
-    ufoExperiences['emoji-picker-opened'].abort({
-      metadata: {
-        source: 'EmojiPickerComponent',
-        reason: 'unmount'
-      }
-    });
-    ufoExperiences['emoji-searched'].abort({
-      metadata: {
-        source: 'EmojiPickerComponent',
-        reason: 'unmount'
-      }
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const prevEmojiProvider = this.props.emojiProvider;
-    const nextEmojiProvider = nextProps.emojiProvider;
-
-    if (prevEmojiProvider !== nextEmojiProvider) {
-      if (supportsUploadFeature(nextEmojiProvider)) {
-        nextEmojiProvider.isUploadSupported().then(this.onUploadSupported);
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const prevEmojiProvider = prevProps.emojiProvider;
-    const currentEmojiProvider = this.props.emojiProvider;
-
-    if (prevEmojiProvider !== currentEmojiProvider) {
-      prevEmojiProvider.unsubscribe(this.onProviderChange);
-      currentEmojiProvider.subscribe(this.onProviderChange); // We changed provider which means we subscribed to filter results for a new subscriber.
-      // So we refresh the emoji display with onSearch and we do it here, after the new props have
-      // been set since onSearch leads to filter being called on the current emojiProvider.
-      // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
-      // an emojiProvider we have already unsubscribed from)
-
-      this.onSearch(this.state.query);
-    }
+  if (isMounting.current) {
+    // componentWillMount equivalent
+    ufoExperiences['emoji-picker-opened'].success();
+    openTime.current = Date.now();
+    fireAnalytics(openedPickerEvent());
+    isMounting.current = false;
   }
 
-  /**
-   * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
-   * also include a special category of most frequently used emoji (if there are any). This method decides if we are in this 'no search'
-   * state and appends the frequent emoji if necessary.
-   *
-   * @param searchEmoji the emoji last received from the EmojiRepository after a search (may be empty)
-   * @param frequentEmoji the frequently used emoji last received from the EmojiRepository (may be empty)
-   */
-  buildQuerySpecificEmojiList(query, searchEmoji, frequentEmoji) {
-    // If there are no frequent emoji, or if there was a search query then we want to take the search result exactly as is.
-    if (!frequentEmoji.length || query) {
-      return searchEmoji;
+  useEffect(() => {
+    // componentDidMount logic
+    if (didMount && updateAfterDidMount.current) {
+      onComponentDidMount();
+      updateAfterDidMount.current = false;
     }
+  }, [didMount, onComponentDidMount]);
+  useEffect(() => {
+    previousEmojiProvider.current.unsubscribe(onProviderChange);
+    previousEmojiProvider.current = emojiProvider;
+    emojiProvider.subscribe(onProviderChange);
 
-    return [...searchEmoji, ...frequentEmoji];
-  }
-  /**
-   * Calculate and set the new state of the component in response to the list of emoji changing for some reason (a search has returned
-   * or the frequently used emoji have updated.)
-   */
-
-
-  setStateAfterEmojiChange(query, emojiToRender, searchEmoji, frequentEmoji) {
-    const {
-      filteredEmojis
-    } = this.state; // Only enable categories for full emoji list (non-search)
-
-    const disableCategories = !!query;
-
-    if (!disableCategories && emojiToRender.length !== filteredEmojis.length) {
-      this.getDynamicCategories().then(categories => {
-        this.onDynamicCategoryChange(categories);
-      });
-    }
-
-    let selectedEmoji;
-    let activeCategory;
-
-    if (containsEmojiId(emojiToRender, this.state.selectedEmoji)) {
-      // Keep existing emoji selected if still in results
-      selectedEmoji = this.state.selectedEmoji;
-      activeCategory = this.state.activeCategory;
-    } else {
-      selectedEmoji = undefined; // Only enable categories for full emoji list (non-search)
-
-      activeCategory = undefined;
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.isUploadSupported().then(onUploadSupported);
     }
 
-    this.setState({
-      filteredEmojis: emojiToRender,
-      searchEmojis: searchEmoji,
-      frequentlyUsedEmojis: frequentEmoji,
-      selectedEmoji,
-      activeCategory,
-      disableCategories,
-      query,
-      loading: false
+    return () => {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange, onUploadSupported]);
+  useEffect(() => {
+    // We changed provider which means we subscribed to filter results for a new subscriber.
+    // So we refresh the emoji display with onSearch and we do it here, after the new props have
+    // been set since onSearch leads to filter being called on the current emojiProvider.
+    // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
+    // an emojiProvider we have already unsubscribed from)
+    onSearch(query);
+  }, [emojiProvider, onSearch, query]);
+  useEffect(() => {
+    // Fire analytics event whenever query changes
+    fireAnalytics(pickerSearchedEvent({
+      queryLength: query.length,
+      numMatches: filteredEmojis.length
+    }));
+    ufoExperiences['emoji-searched'].success({
+      metadata: {
+        emojisLength: filteredEmojis.length
+      }
     });
-  }
-
-  getDynamicCategories() {
-    if (!this.props.emojiProvider.calculateDynamicCategories) {
-      return Promise.resolve([]);
+  }, [filteredEmojis.length, fireAnalytics, query]);
+  useEffect(() => {
+    if (!frequentlyUsedEmojis.length || query) {
+      setFilteredEmojis(searchEmojis);
+    } else {
+      setFilteredEmojis([...searchEmojis, ...frequentlyUsedEmojis]);
     }
-
-    return this.props.emojiProvider.calculateDynamicCategories();
-  }
-
-  render() {
-    const {
-      emojiProvider
-    } = this.props;
-    const {
-      activeCategory,
-      disableCategories,
-      dynamicCategories,
-      filteredEmojis,
-      loading,
-      query,
-      selectedEmoji,
-      selectedTone,
-      toneEmoji,
-      emojiToDelete,
-      uploading,
-      uploadErrorMessage,
-      uploadSupported
-    } = this.state;
-    const recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, analytic => this.fireAnalytics(analytic('picker')));
-    const formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
-    const emojiContextValue = {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
+  }, [frequentlyUsedEmojis, query, searchEmojis]);
+  useEffect(() => {
+    // Fire analytics on component unmount
+    return () => {
+      fireAnalytics(closedPickerEvent({
+        duration: calculateElapsedTime()
+      }));
+      ufoExperiences['emoji-picker-opened'].abort({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
+      ufoExperiences['emoji-searched'].abort({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
     };
-    const picker = jsx(LegacyEmojiContextProvider, {
-      emojiContextValue: emojiContextValue
-    }, jsx("div", {
-      css: emojiPicker,
-      ref: this.handlePickerRef,
-      "data-emoji-picker-container": true
-    }, jsx(CategorySelector, {
-      activeCategoryId: activeCategory,
-      dynamicCategories: dynamicCategories,
-      disableCategories: disableCategories,
-      onCategorySelected: this.onCategorySelected
-    }), jsx(EmojiPickerList, {
-      emojis: filteredEmojis,
-      currentUser: emojiProvider.getCurrentUser(),
-      onEmojiSelected: recordUsageOnSelection,
-      onEmojiActive: this.onEmojiActive,
-      onEmojiDelete: this.onTriggerDelete,
-      onCategoryActivated: this.onCategoryActivated,
-      onSearch: this.onSearch,
-      query: query,
-      selectedTone: selectedTone,
-      loading: loading,
-      ref: "emojiPickerList",
-      initialUploadName: query,
-      onToneSelected: this.onToneSelected,
-      onToneSelectorCancelled: this.onToneSelectorCancelled,
-      toneEmoji: toneEmoji,
-      uploading: uploading,
-      emojiToDelete: emojiToDelete,
-      uploadErrorMessage: formattedErrorMessage,
-      uploadEnabled: uploadSupported && !uploading,
-      onUploadEmoji: this.onUploadEmoji,
-      onUploadCancelled: this.onUploadCancelled,
-      onDeleteEmoji: this.onDeleteEmoji,
-      onCloseDelete: this.onCloseDelete,
-      onFileChooserClicked: this.onFileChooserClicked,
-      onOpenUpload: this.onOpenUpload
-    }), jsx(EmojiPickerFooter, {
-      selectedEmoji: selectedEmoji,
-      isUploading: uploading
-    })));
-    return picker;
-  }
-
-}
-
-_defineProperty(EmojiPickerComponent, "defaultProps", {
-  onSelection: () => {}
-});
+  }, [fireAnalytics]);
+  useEffect(() => {
+    // Unsubscribe emojiProvider on component unmount
+    return () => {
+      emojiProvider.unsubscribe(onProviderChange);
+    };
+  }, [emojiProvider, onProviderChange]);
+  const showPreview = selectedEmoji && !uploading;
+  return jsx(LegacyEmojiContextProvider, {
+    emojiContextValue: emojiContextValue
+  }, jsx("div", {
+    css: emojiPicker(showPreview),
+    ref: onPickerRef,
+    "data-emoji-picker-container": true
+  }, jsx(CategorySelector, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), jsx(EmojiPickerList, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: uploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload
+  }), showPreview && jsx(EmojiPickerFooter, {
+    selectedEmoji: selectedEmoji
+  })));
+};
+
+export default /*#__PURE__*/memo(EmojiPickerComponent);