feat: added virualization and added search hook

Author: GowthamTG

README.md

@@ -38,6 +38,23 @@ function App() {
 }
 ```
 
+### `useEmojiSearch`
+This will allow the user to search on top of the native emojis avaiable ( this will not return custom emojis )
+
+```jsx
+const SearchBox = () => {
+  const emojiSearch = useEmojiSearch({});
+  return  <div>
+            <h1>Search</h1>
+            <input onChange={event => {
+              const filteredEmojis = emojiSearch(event.target.value)
+              console.log(filteredEmojis);
+              }} 
+            />
+          </div>;
+}
+```
+
 ## Shout Outs
 
 |                                                                                                 Component Design 🎨                                                                                                 |

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.11.1",
+  "version": "4.11.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Layout/Virtualise.tsx

@@ -0,0 +1,105 @@
+import { cx } from 'flairup';
+import React, { useState, useCallback, useMemo } from 'react';
+
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import useMeasure from '../../hooks/useMeasure';
+
+const sum = (arr: number[]) => arr.reduce((a, b) => a + b, 0);
+
+const Virtualise = React.memo(({ children, itemHeights, overscan = 0, className }: {
+    children: React.ReactNode[];
+    itemHeights: number[];
+    overscan?: number;
+    className?: string;
+}) => {
+    const [containerMeasure, { height: containerHeight }] = useMeasure<HTMLDivElement>();
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const totalHeight = useMemo(() => sum(itemHeights), [itemHeights]);
+
+    const calculateVisibleItems = useCallback(() => {
+        let start = 0;
+        let currentHeight = 0;
+
+        // Find the first item in the viewport
+        for (let i = 0; i < itemHeights.length; i++) {
+            if (currentHeight + itemHeights[i] > scrollOffset) {
+                start = Math.max(i - overscan, 0);
+                break;
+            }
+            currentHeight += itemHeights[i];
+        }
+
+        let end = start;
+        currentHeight = sum(itemHeights.slice(0, start));
+
+        // Find the last item in the viewport
+        for (let i = start; i < itemHeights.length; i++) {
+            currentHeight += itemHeights[i];
+            if (currentHeight > scrollOffset + containerHeight || i === itemHeights.length - 1) {
+                end = Math.min(i + overscan + 1, itemHeights.length);
+                break;
+            }
+        }
+
+        // Adjust end to include the last element if we're near the bottom
+        if (scrollOffset + containerHeight >= totalHeight) {
+            end = itemHeights.length;
+        }
+
+        return itemHeights.slice(start, end).map((_, index) => {
+            const itemIndex = start + index;
+            const top = sum(itemHeights.slice(0, itemIndex));
+            return {
+                index: itemIndex,
+                top,
+                height: itemHeights[itemIndex],
+                element: children[itemIndex],
+            };
+        });
+    }, [scrollOffset, containerHeight, itemHeights, overscan, children, totalHeight]);
+
+    const visibleItems = useMemo(() => calculateVisibleItems(), [calculateVisibleItems]);
+
+    const handleScroll: React.UIEventHandler<HTMLDivElement> = useCallback((e) => {
+        setScrollOffset(e.currentTarget.scrollTop);
+    }, []);
+
+    return (
+        <div
+            ref={containerMeasure}
+            onScroll={handleScroll}
+            style={{ position: 'relative', height: '100%', overflowY: 'auto' }}
+            className={cx(styles.virtualizeWrapper)}
+        >
+            <div className={cx(styles.virtualise)} style={{ height: totalHeight, position: 'relative' }}>
+               <ul className={className} style={{ margin: 0, padding: 0 }}>
+                  {visibleItems.map(({ index, top, height, element }) => (
+                    <div
+                        key={index}
+                        style={{
+                            position: 'absolute',
+                            top: `${top}px`,
+                            height: `${height}px`,
+                            width: '100%',
+                        }}
+                    >
+                        {element}
+                    </div>
+                ))}
+               </ul>
+            </div>
+        </div>
+    );
+});
+
+const styles = stylesheet.create({
+    virtualizeWrapper: {
+        '.': 'epr-virutalise-wrapper',
+    },
+    virtualise: {
+        '.': 'epr-virtualise',
+    },
+});
+
+Virtualise.displayName = 'Virtualise';
+export default Virtualise;

src/components/Layout/helpers/convert-value-to-pixel.ts

@@ -0,0 +1,14 @@
+export const convertToPixel = (value: number, unit: string, fontSize: number, rootFontSize: number) => {
+    switch (unit) {
+        case 'px':
+            return value; // already in pixels
+        case 'rem':
+            return value * rootFontSize; // root font size is default 16px
+        case 'em':
+            return value * fontSize; // font size of the element
+        default:
+            return value; // assuming value is in pixels if unit is unknown
+    }
+}
+
+

src/components/Layout/helpers/get-category-height.ts

@@ -0,0 +1,20 @@
+import { parsePadding } from "./parse-padding";
+
+export const getCategoriesHeight = (totalEmojis: number, width?: number) => {
+    const mainContent = document.querySelector('.epr-main')
+    if (!width || !mainContent) return 0;
+
+    const categoryPadding = parsePadding(getComputedStyle(mainContent).getPropertyValue("--epr-category-padding"))
+    const emojiSize = parsePadding(getComputedStyle(mainContent).getPropertyValue("--epr-emoji-size"))
+    const emojiPadding = parsePadding(getComputedStyle(mainContent).getPropertyValue("--epr-emoji-padding"))
+    const categoryLabelHeight = parsePadding(getComputedStyle(mainContent).getPropertyValue("--epr-category-label-height"))
+    const totalEmojiWidth = emojiSize.left + emojiPadding.left + emojiPadding.right;
+    const totalEmojiHeight = emojiSize.top + emojiPadding.top + emojiPadding.bottom;
+
+    if (!totalEmojis) return 0;
+
+    const noOfEmojisInARow = Math.floor((width - categoryPadding.left - categoryPadding.right) / totalEmojiWidth);
+    const noOfRows = Math.ceil(totalEmojis / noOfEmojisInARow);
+    return (noOfRows * totalEmojiHeight) + categoryLabelHeight.left;
+};
+

src/components/Layout/helpers/index.ts

@@ -0,0 +1 @@
+export { getCategoriesHeight } from "./get-category-height";

src/components/Layout/helpers/parse-padding.ts

@@ -0,0 +1,47 @@
+import { convertToPixel } from "./convert-value-to-pixel";
+
+type PaddingValue = {
+    value: number;
+    unit: string;
+};
+
+type Padding = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+
+// Function to extract value and unit
+export const parseValue = (value: string) => {
+    const match = value.match(/^([\d.]+)(\D+)$/);
+    return match ? { value: parseFloat(match[1]), unit: match[2] } : { value: parseFloat(value), unit: '' };
+}
+
+export const parsePadding = (paddingString: string, fontSize: number = 16, rootFontSize: number = 16): Padding => {
+    const values: PaddingValue[] = paddingString.split(' ').map(value => parseValue(value));
+
+    let top: number, right: number, bottom: number, left: number;
+
+    if (values.length === 1) {
+        // If only one value is provided, it applies to all sides
+        top = right = bottom = left = convertToPixel(values[0].value, values[0].unit, fontSize, rootFontSize);
+    } else if (values.length === 2) {
+        // If two values are provided: [top-bottom, left-right]
+        top = bottom = convertToPixel(values[0].value, values[0].unit, fontSize, rootFontSize);
+        right = left = convertToPixel(values[1].value, values[1].unit, fontSize, rootFontSize);
+    } else if (values.length === 3) {
+        // If three values are provided: [top, left-right, bottom]
+        top = convertToPixel(values[0].value, values[0].unit, fontSize, rootFontSize);
+        right = left = convertToPixel(values[1].value, values[1].unit, fontSize, rootFontSize);
+        bottom = convertToPixel(values[2].value, values[2].unit, fontSize, rootFontSize);
+    } else if (values.length === 4) {
+        // If four values are provided: [top, right, bottom, left]
+        [top, right, bottom, left] = values.map(v => convertToPixel(v.value, v.unit, fontSize, rootFontSize));
+    } else {
+        // Handle unexpected cases
+        top = right = bottom = left = 0;
+    }
+
+    return { top, right, bottom, left };
+}

src/components/body/EmojiCategory.tsx

@@ -15,7 +15,7 @@ import {
 
 type Props = Readonly<{
   categoryConfig: CategoryConfig;
-  children?: React.ReactNode;
+  children: React.ReactNode;
   hidden?: boolean;
   hiddenOnSearch?: boolean;
 }>;
@@ -26,6 +26,7 @@ export function EmojiCategory({
   hidden,
   hiddenOnSearch
 }: Props) {
+
   const category = categoryFromCategoryConfig(categoryConfig);
   const categoryName = categoryNameFromCategoryConfig(categoryConfig);