fix: resolved comments

GowthamTG · GowthamTG · commit f28cfcabb42f · 2025-01-10T10:34:22.000+05:30
diff --git a/src/DomUtils/keyboardNavigation.ts b/src/DomUtils/keyboardNavigation.ts
@@ -141,9 +141,11 @@ function visibleEmojiOneRowDown(element: HTMLElement) {
   const indexInRow = elementIndexInRow(categoryContent, element);
   const row = rowNumber(categoryContent, element);
   const countInRow = elementCountInRow(categoryContent, element);
+
   if (!hasNextRow(categoryContent, element)) {
     const nextVisibleCategory = nextCategory(category);
 
+
     if (!nextVisibleCategory) {
       return null;
     }
diff --git a/src/DomUtils/selectors.ts b/src/DomUtils/selectors.ts
@@ -1,3 +1,4 @@
+import { VIRTUALIZE_CLASS_NAMES } from '../components/Layout/Virtualise';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   emojiByUnified,
@@ -267,7 +268,37 @@ export function firstVisibleEmoji(parent: NullableElement) {
   return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 
+
+const getNameBasedPrevCategory = (element: HTMLElement): HTMLElement | null => {
+  const emojiList = document.querySelector<HTMLElement>(asSelectors(ClassNames.emojiList));
+  if (!emojiList) return null;
+
+  const currentName = element?.getAttribute('data-name');
+  const categories = Array.from(emojiList.children);
+  const currentIndex = categories.findIndex(
+    child => child.firstElementChild?.getAttribute('data-name') === currentName
+  );
+
+  const prevIndex = Math.max(currentIndex - 1, 0);
+  const prevName = categories[prevIndex]?.firstElementChild?.getAttribute('data-name');
+
+  return prevName
+    ? emojiList.querySelector(`[data-name="${prevName}"]`) as HTMLElement
+    : null;
+};
+
+
 export function prevCategory(element: NullableElement): NullableElement {
+  if (!element) {
+    return null;
+  }
+
+  const currentPrevCategory = getNameBasedPrevCategory(element);
+
+  if(currentPrevCategory){
+    return currentPrevCategory;
+  }
+
   const category = closestCategory(element);
 
   if (!category) {
@@ -287,7 +318,36 @@ export function prevCategory(element: NullableElement): NullableElement {
   return prev;
 }
 
+const getNameBasedNextCategory = (element: HTMLElement): HTMLElement | null => {
+  const emojiList = document.querySelector<HTMLElement>(asSelectors(ClassNames.emojiList));
+  if (!emojiList) return null;
+
+  const currentName = element?.getAttribute('data-name');
+  const categories = Array.from(emojiList.children);
+  const currentIndex = categories.findIndex(
+    child => child.firstElementChild?.getAttribute('data-name') === currentName
+  );
+
+  const nextIndex = Math.min(currentIndex + 1, categories.length - 1);
+  const nextName = categories[nextIndex]?.firstElementChild?.getAttribute('data-name');
+
+  return nextName
+    ? emojiList.querySelector(`[data-name="${nextName}"]`)
+    : null;
+};
+
+
 export function nextCategory(element: NullableElement): NullableElement {
+  if (!element) {
+    return null;
+  }
+
+  const currentNextCategory = getNameBasedNextCategory(element);
+
+  if(currentNextCategory){
+    return currentNextCategory;
+  }
+
   const category = closestCategory(element);
 
   if (!category) {
diff --git a/src/components/Layout/Virtualise.tsx b/src/components/Layout/Virtualise.tsx
@@ -1,18 +1,20 @@
 import { cx } from 'flairup';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import useMeasure from '../../hooks/useMeasure';
+import { useActiveCategoryState } from '../context/PickerContext';
 
 const sum = (arr: number[]) => arr.reduce((a, b) => a + b, 0);
 
 const Virtualise = React.memo(({ children, itemHeights, overscan = 0, className }: {
-    children: React.ReactNode[];
+    children: React.ReactElement[];
     itemHeights: number[];
     overscan?: number;
     className?: string;
 }) => {
-    const [containerMeasure, { height: containerHeight }] = useMeasure<HTMLDivElement>();
+    const [_,setActiveCategory] = useActiveCategoryState();
+    const [containerMeasure, { height: containerHeight, width }] = useMeasure<HTMLDivElement>();
     const [scrollOffset, setScrollOffset] = useState(0);
     const totalHeight = useMemo(() => sum(itemHeights), [itemHeights]);
 
@@ -64,6 +66,15 @@ const Virtualise = React.memo(({ children, itemHeights, overscan = 0, className
         setScrollOffset(e.currentTarget.scrollTop);
     }, []);
 
+    useEffect(() => {
+        if(!visibleItems.length) return;
+        const lastItem = visibleItems[visibleItems.length - 1];
+        const key = lastItem.element.key;
+        if(typeof key === 'string') {
+            setActiveCategory(key);
+        }
+    }, [setActiveCategory, visibleItems]);
+
     return (
         <div
             ref={containerMeasure}
diff --git a/src/components/Layout/helpers/get-scrollbar-width.ts b/src/components/Layout/helpers/get-scrollbar-width.ts
@@ -0,0 +1,26 @@
+let cachedScrollWidth: number | null = null;
+
+export function getScrollbarWidth() {
+    if (cachedScrollWidth !== null) {
+        return cachedScrollWidth;
+    }
+
+    // Create a temporary div to measure
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll';
+    document.body.appendChild(outer);
+
+    // Create inner div
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+
+    // Calculate the width difference
+    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+    // Clean up
+    outer.parentNode?.removeChild(outer);
+
+    cachedScrollWidth = scrollbarWidth;
+    return scrollbarWidth;
+}
diff --git a/src/components/body/Body.tsx b/src/components/body/Body.tsx
@@ -36,7 +36,7 @@ const styles = stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
     flex: '1',
-    overflowY: 'scroll',
+    overflowY: 'hidden',
     overflowX: 'hidden',
     position: 'relative'
   }
diff --git a/src/components/body/EmojiList.tsx b/src/components/body/EmojiList.tsx
@@ -19,8 +19,10 @@ import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
+import { useEmojiPreload } from '../../hooks/usePreloadEmoji';
 import Virtualise from '../Layout/Virtualise';
 import { getCategoriesHeight } from '../Layout/helpers';
+import { getScrollbarWidth } from '../Layout/helpers/get-scrollbar-width';
 import { useBodyRef } from '../context/ElementRefContext';
 import {
   useActiveSkinToneState,
@@ -43,6 +45,8 @@ export function EmojiList() {
   const categoriesHeightRef = useCategoriesHeightRef();
   const [searchTerm] = useSearchTermState();
 
+  const scrollbarWidth = useMemo(() => getScrollbarWidth(), []);
+
 
   const categoriesMap = useMemo(() => {
     return categories.reduce((acc, category) => {
@@ -59,15 +63,17 @@ export function EmojiList() {
 
       if (totalEmojis.length > 0) {
         acc.push({
-          height: getCategoriesHeight(totalEmojis.length, bodyWidth),
+          height: getCategoriesHeight(totalEmojis.length, bodyWidth - scrollbarWidth),
           emojis: totalEmojis,
           category
         });
       }
 
       return acc;
     }, [] as {height: number; emojis: DataEmoji[]; category: CategoryConfig }[]);
-  }, [bodyWidth, categories, isEmojiDisallowed, isEmojiHidden]);
+  }, [bodyWidth, categories, isEmojiDisallowed, isEmojiHidden, scrollbarWidth]);
+
+  useEmojiPreload(categoriesMap);
 
   useEffect(() => {
     if(!bodyWidth || searchTerm) return;
diff --git a/src/components/context/PickerContext.tsx b/src/components/context/PickerContext.tsx
@@ -189,6 +189,14 @@ export function useUpdateSuggested(): [number, () => void] {
   ];
 }
 
+export function useActiveCategoryState(): [
+  string | null,
+  (category: string) => void
+] {
+  const { activeCategoryState } = React.useContext(PickerContext);
+  return activeCategoryState;
+}
+
 export type FilterState = Record<string, FilterDict>;
 
 type ActiveCategoryState = null | string;
diff --git a/src/components/navigation/CategoryNavigation.tsx b/src/components/navigation/CategoryNavigation.tsx
@@ -1,6 +1,5 @@
 import { cx } from 'flairup';
 import * as React from 'react';
-import { useState } from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import { categoryFromCategoryConfig } from '../../config/categoryConfig';
@@ -11,11 +10,12 @@ import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView
 import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
 import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
+import { useActiveCategoryState } from '../context/PickerContext';
 
 import { CategoryButton } from './CategoryButton';
 
 export function CategoryNavigation() {
-  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [activeCategory, setActiveCategory] = useActiveCategoryState();
   const scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection(setActiveCategory);
   const isSearchMode = useIsSearchMode();
diff --git a/src/hooks/useEmojiSearch.ts b/src/hooks/useEmojiSearch.ts
@@ -14,7 +14,7 @@ import { emojiClickOutput } from "./useMouseDownHandlers";
 
 const categoryArray = Object.values(baseCategoriesConfig());
 
-export const useEmojiSearch = ({ activeSkinTone = SkinTones.NEUTRAL, activeEmojiStyle= EmojiStyle.NATIVE, limit = 10, getEmojiUrl = emojiUrlByUnified }: {activeSkinTone?: SkinTones, activeEmojiStyle?: EmojiStyle,limit?:number, getEmojiUrl?: GetEmojiUrl}) => {
+export const useEmojiSearch = ({ activeSkinTone = SkinTones.NEUTRAL, activeEmojiStyle= EmojiStyle.NATIVE, getEmojiUrl = emojiUrlByUnified }: {activeSkinTone?: SkinTones, activeEmojiStyle?: EmojiStyle,limit?:number, getEmojiUrl?: GetEmojiUrl}) => {
     const filterRef = useRef<FilterState>(alphaNumericEmojiIndex);
 
     return useCallback((searchTerm: string) => {
@@ -30,21 +30,12 @@ export const useEmojiSearch = ({ activeSkinTone = SkinTones.NEUTRAL, activeEmoji
             const categoryEmojis = emojisByCategory(category.category).reduce((emojiAcc, emoji) => {
                 const filteredOut = isEmojiFilteredBySearchTerm(emoji[EmojiProperties.unified], filterRef.current, searchTerm);
                 if (!filteredOut) {
-                    if(emojiAcc.length >= limit) {
-                        return emojiAcc;
-                    }
                     emojiAcc.push(emojiClickOutput(emoji,activeSkinTone,activeEmojiStyle,getEmojiUrl));
                 }
-
                 return emojiAcc;
           }, [] as EmojiClickData[]);
 
-          if(emojisArray.length >= limit) {
-                return emojisArray;
-           }
-
-
           return [...emojisArray, ...categoryEmojis];
        }, [] as EmojiClickData[]);
-    },[activeEmojiStyle, activeSkinTone, getEmojiUrl, limit]);
+    },[activeEmojiStyle, activeSkinTone, getEmojiUrl]);
 }
diff --git a/src/hooks/usePreloadEmoji.ts b/src/hooks/usePreloadEmoji.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+import { CategoryConfig } from '../config/categoryConfig';
+import { useEmojiStyleConfig, useGetEmojiUrlConfig, useLazyLoadEmojisConfig } from '../config/useConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+
+import { preloadEmoji } from './preloadEmoji';
+
+export function useEmojiPreload(categoriesMap: { emojis: DataEmoji[]; category: CategoryConfig }[], preloadRange: number = 20) {
+  const emojiStyle = useEmojiStyleConfig();
+  const getEmojiUrl = useGetEmojiUrlConfig();
+  const lazyLoadEmojis = useLazyLoadEmojisConfig();
+
+  useEffect(() => {
+    if(!lazyLoadEmojis) return;
+
+    // Preload next batch of images
+    categoriesMap.forEach(category => {
+      category.emojis.forEach(emoji => {
+        preloadEmoji(getEmojiUrl, emoji, emojiStyle);
+      });
+    });
+  }, [emojiStyle, getEmojiUrl, preloadRange, lazyLoadEmojis, categoriesMap]);
+}

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const styles = stylesheet.create({`
`36`	`36`	`body: {`
`37`	`37`	`'.': ClassNames.scrollBody,`
`38`	`38`	`flex: '1',`
`39`		`- overflowY: 'scroll',`
	`39`	`+ overflowY: 'hidden',`
`40`	`40`	`overflowX: 'hidden',`
`41`	`41`	`position: 'relative'`
`42`	`42`	`}`