emoji-picker-react 4.14.0-rc.1 → 4.14.0

package/dist/emoji-picker-react.cjs.development.js

@@ -18695,22 +18695,44 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
+// eslint-disable-next-line max-params
+function preloaEmojidIfNeeded(emoji, emojiStyles, scrollTop, clientHeight, topOffset, style, dimensions, getEmojiUrl) {
   if (!emoji) {
     return;
   }
-  if (emojiStyle === exports.EmojiStyle.NATIVE) {
+  if (emojiStyles === exports.EmojiStyle.NATIVE) {
+    return;
+  }
+  var unified = emojiUnified(emoji);
+  if (preloadedEmojs.has(unified)) {
+    return;
+  }
+  // preload only if the emoji is a few rows below the viewport
+  if (!style || !dimensions) {
+    return;
+  }
+  setTimeout(function () {
+    var emojiTop = topOffset + style.top;
+    var viewportBottom = scrollTop + clientHeight;
+    var isJustBelowViewport = emojiTop >= viewportBottom && emojiTop < viewportBottom + dimensions.emojiSize * 2;
+    if (isJustBelowViewport) {
+      preloadEmoji(getEmojiUrl, emoji, emojiStyles);
+    }
+  });
+}
+function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
+  if (!emoji) {
     return;
   }
   var unified = emojiUnified(emoji);
   if (preloadedEmojs.has(unified)) {
     return;
   }
-  emojiVariations(emoji).forEach(function (variation) {
+  preloadedEmojs.add(unified);
+  emojiVariations(emoji).concat(unified).forEach(function (variation) {
     var emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
   });
-  preloadedEmojs.add(unified);
 }
 var preloadedEmojs = /*#__PURE__*/new Set();
 function preloadImage(url) {
@@ -19706,6 +19728,27 @@ function useOnScroll(BodyRef) {
   return scrollTop;
 }
 
+function shouldVirtualize(_ref) {
+  var scrollTop = _ref.scrollTop,
+    clientHeight = _ref.clientHeight,
+    topOffset = _ref.topOffset,
+    style = _ref.style,
+    dimensions = _ref.dimensions;
+  if (!style || !dimensions) {
+    return false;
+  }
+  var emojiTop = topOffset + style.top;
+  var emojiBottom = emojiTop + dimensions.emojiSize;
+  var isVisible = emojiBottom + dimensions.emojiSize * 2 >= scrollTop && emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
+  return !isVisible;
+}
+function getEmojiPositionStyle(dimensions, index) {
+  return dimensions ? {
+    top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
+    left: index % dimensions.emojisPerRow * dimensions.emojiSize
+  } : undefined;
+}
+
 var EMOJI_SIZE_DEFAULT = 32;
 function useCategoryHeight(emojiCount) {
   var EmojiListRef = useEmojiListRef();
@@ -19785,6 +19828,72 @@ function useIsEmojiHidden() {
   };
 }
 
+function useEmojiVirtualization(_ref) {
+  var categoryEmojis = _ref.categoryEmojis,
+    topOffset = _ref.topOffset,
+    onHeightReady = _ref.onHeightReady,
+    scrollTop = _ref.scrollTop;
+  var isEmojiHidden = useIsEmojiHidden();
+  var lazyLoadEmojis = useLazyLoadEmojisConfig();
+  var emojiStyle = useEmojiStyleConfig();
+  var _useActiveSkinToneSta = useActiveSkinToneState(),
+    activeSkinTone = _useActiveSkinToneSta[0];
+  var isEmojiDisallowed = useIsEmojiDisallowed();
+  var getEmojiUrl = useGetEmojiUrlConfig();
+  var showVariations = !useSkinTonesDisabledConfig();
+  var BodyRef = useBodyRef();
+  var virtualizedCounter = 0;
+  var emojisToPush = categoryEmojis.filter(function (emoji) {
+    var isDisallowed = isEmojiDisallowed(emoji);
+    var _isEmojiHidden = isEmojiHidden(emoji),
+      failedToLoad = _isEmojiHidden.failedToLoad,
+      filteredOut = _isEmojiHidden.filteredOut,
+      hidden = _isEmojiHidden.hidden;
+    return !failedToLoad && !filteredOut && !hidden && !isDisallowed;
+  });
+  var dimensions = useCategoryHeight(emojisToPush.length);
+  React.useEffect(function () {
+    if (dimensions) {
+      onHeightReady(dimensions.categoryHeight);
+    }
+  }, [dimensions, onHeightReady, emojisToPush.length]);
+  var emojis = emojisToPush.reduce(function (accumulator, emoji, index) {
+    var _BodyRef$current$clie, _BodyRef$current;
+    var unified = emojiUnified(emoji, activeSkinTone);
+    var style = getEmojiPositionStyle(dimensions, index);
+    if (dimensions && BodyRef.current && shouldVirtualize({
+      scrollTop: scrollTop,
+      clientHeight: (_BodyRef$current$clie = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.clientHeight) != null ? _BodyRef$current$clie : 0,
+      topOffset: topOffset,
+      style: style,
+      dimensions: dimensions
+    })) {
+      var _BodyRef$current$clie2, _BodyRef$current2;
+      virtualizedCounter++;
+      preloaEmojidIfNeeded(emoji, emojiStyle, scrollTop, (_BodyRef$current$clie2 = (_BodyRef$current2 = BodyRef.current) == null ? void 0 : _BodyRef$current2.clientHeight) != null ? _BodyRef$current$clie2 : 0, topOffset, style, dimensions, getEmojiUrl);
+      return accumulator;
+    }
+    accumulator.push(React.createElement(ClickableEmoji, {
+      showVariations: showVariations,
+      key: unified,
+      emoji: emoji,
+      unified: unified,
+      emojiStyle: emojiStyle,
+      lazyLoad: lazyLoadEmojis,
+      getEmojiUrl: getEmojiUrl,
+      style: _extends({}, style, {
+        position: 'absolute'
+      })
+    }));
+    return accumulator;
+  }, []);
+  return {
+    virtualizedCounter: virtualizedCounter,
+    emojis: emojis,
+    dimensions: dimensions
+  };
+}
+
 function EmojiCategory(_ref) {
   var categoryConfig = _ref.categoryConfig,
     children = _ref.children,
@@ -19885,77 +19994,21 @@ function RenderCategory(_ref2) {
     topOffset = _ref2.topOffset,
     onHeightReady = _ref2.onHeightReady,
     scrollTop = _ref2.scrollTop;
-  var isEmojiHidden = useIsEmojiHidden();
-  var lazyLoadEmojis = useLazyLoadEmojisConfig();
-  var emojiStyle = useEmojiStyleConfig();
-  var _useActiveSkinToneSta = useActiveSkinToneState(),
-    activeSkinTone = _useActiveSkinToneSta[0];
-  var isEmojiDisallowed = useIsEmojiDisallowed();
-  var getEmojiUrl = useGetEmojiUrlConfig();
-  var showVariations = !useSkinTonesDisabledConfig();
-  var BodyRef = useBodyRef();
-  var hiddenCounter = 0;
-  var virtualizedCounter = 0;
-  var emojisToPush = categoryEmojis.filter(function (emoji) {
-    var _isEmojiHidden = isEmojiHidden(emoji),
-      failedToLoad = _isEmojiHidden.failedToLoad,
-      filteredOut = _isEmojiHidden.filteredOut,
-      hidden = _isEmojiHidden.hidden;
-    return !failedToLoad && !filteredOut && !hidden;
-  });
-  var dimensions = useCategoryHeight(emojisToPush.length);
-  React.useEffect(function () {
-    if (dimensions) {
-      onHeightReady(dimensions.categoryHeight);
-    }
-  }, [dimensions, onHeightReady, emojisToPush.length]);
-  var emojis = emojisToPush.reduce(function (accumulator, emoji, index) {
-    var _BodyRef$current$clie, _BodyRef$current;
-    var unified = emojiUnified(emoji, activeSkinTone);
-    var _isEmojiHidden2 = isEmojiHidden(emoji),
-      failedToLoad = _isEmojiHidden2.failedToLoad,
-      filteredOut = _isEmojiHidden2.filteredOut,
-      hidden = _isEmojiHidden2.hidden;
-    var isDisallowed = isEmojiDisallowed(emoji);
-    if (hidden || isDisallowed) {
-      hiddenCounter++;
-    }
-    if (isDisallowed || failedToLoad || filteredOut) {
-      return accumulator;
-    }
-    var style = getEmojiPositionStyle(dimensions, index - hiddenCounter);
-    if (shouldVirtualize({
-      scrollTop: scrollTop,
-      clientHeight: (_BodyRef$current$clie = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.clientHeight) != null ? _BodyRef$current$clie : 0,
+  var _useEmojiVirtualizati = useEmojiVirtualization({
+      categoryEmojis: categoryEmojis,
       topOffset: topOffset,
-      style: style,
-      dimensions: dimensions
-    })) {
-      virtualizedCounter++;
-      return accumulator;
-    }
-    accumulator.push(React.createElement(ClickableEmoji, {
-      showVariations: showVariations,
-      key: unified,
-      emoji: emoji,
-      unified: unified,
-      hidden: failedToLoad,
-      hiddenOnSearch: filteredOut,
-      emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis,
-      getEmojiUrl: getEmojiUrl,
-      style: _extends({}, style, {
-        position: 'absolute'
-      })
-    }));
-    return accumulator;
-  }, []);
+      onHeightReady: onHeightReady,
+      scrollTop: scrollTop
+    }),
+    virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
+    emojis = _useEmojiVirtualizati.emojis,
+    dimensions = _useEmojiVirtualizati.dimensions;
   return React.createElement(EmojiCategory, {
     categoryConfig: categoryConfig,
     height: dimensions == null ? void 0 : dimensions.categoryHeight,
     // Indicates that there are no visible emojis
     // Hence, the category should be hidden
-    hidden: hiddenCounter === emojis.length && virtualizedCounter === 0
+    hidden: !emojis.length && virtualizedCounter === 0
   }, emojis);
 }
 var styles$8 = /*#__PURE__*/stylesheet.create({
@@ -19966,26 +20019,6 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
     padding: '0'
   }
 });
-function getEmojiPositionStyle(dimensions, index) {
-  return dimensions ? {
-    top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
-    left: index % dimensions.emojisPerRow * dimensions.emojiSize
-  } : undefined;
-}
-function shouldVirtualize(_ref3) {
-  var scrollTop = _ref3.scrollTop,
-    clientHeight = _ref3.clientHeight,
-    topOffset = _ref3.topOffset,
-    style = _ref3.style,
-    dimensions = _ref3.dimensions;
-  if (!style || !dimensions) {
-    return false;
-  }
-  var emojiTop = topOffset + style.top;
-  var emojiBottom = emojiTop + dimensions.emojiSize;
-  var isVisible = emojiBottom + dimensions.emojiSize * 2 >= scrollTop && emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
-  return !isVisible;
-}
 
 var SVGTriangle = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MHB4IgoJIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDUwIDE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xIj4KPC9nPgo8ZyBpZD0iTGF5ZXJfMiI+Cgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNFOEU3RTciIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEuODYtMC40M2w5LjgzLDExLjUzYzAuNTksMC42OSwxLjU2LDAuNjksMi4xNCwwbDkuODMtMTEuNTMiLz4KCTxwYXRoIGZpbGw9IiMwMTAyMDIiIHN0cm9rZT0iIzE1MTYxNyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjYuODYtMC40M2w5LjgzLDExLjUzYzAuNTksMC42OSwxLjU2LDAuNjksMi4xNCwwbDkuODMtMTEuNTMiLz4KPC9nPgo8L3N2Zz4=';