emoji-picker-react 4.6.14 → 4.6.15

package/src/components/navigation/CategoryButton.tsx

@@ -0,0 +1,141 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
+import {
+  CategoryConfig,
+  categoryNameFromCategoryConfig
+} from '../../config/categoryConfig';
+import { Button } from '../atoms/Button';
+
+import SVGNavigation from './svg/CategoryNav.svg';
+
+type Props = {
+  isActiveCategory: boolean;
+  category: string;
+  allowNavigation: boolean;
+  onClick: () => void;
+  categoryConfig: CategoryConfig;
+};
+
+export function CategoryButton({
+  isActiveCategory,
+  category,
+  allowNavigation,
+  categoryConfig,
+  onClick
+}: Props) {
+  return (
+    <Button
+      tabIndex={allowNavigation ? 0 : -1}
+      className={cx(
+        styles.catBtn,
+        commonInteractionStyles.categoryBtn,
+        `epr-icn-${category}`,
+        {
+          [ClassNames.active]: isActiveCategory
+        }
+      )}
+      onClick={onClick}
+      aria-label={categoryNameFromCategoryConfig(categoryConfig)}
+      aria-selected={isActiveCategory}
+      role="tab"
+      aria-controls="epr-category-nav-id"
+    />
+  );
+}
+
+const DarkActivePositionY = {
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+};
+const DarkPositionY = {
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
+};
+
+const DarkInactivePosition = {
+  ':not(.epr-search-active)': {
+    catBtn: {
+      ':hover': DarkActivePositionY,
+      '&.epr-active': DarkActivePositionY
+    }
+  }
+};
+
+const styles = stylesheet.create({
+  catBtn: {
+    '.': 'epr-cat-btn',
+    display: 'inline-block',
+    transition: 'opacity 0.2s ease-in-out',
+    position: 'relative',
+    height: 'var(--epr-category-navigation-button-size)',
+    width: 'var(--epr-category-navigation-button-size)',
+    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
+    outline: 'none',
+    backgroundPosition: '0 0',
+    backgroundImage: `url(${SVGNavigation})`,
+    ':focus:before': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      bottom: '-2px',
+      border: '2px solid var(--epr-category-icon-active-color)',
+      borderRadius: '50%'
+    },
+    // @ts-ignore
+    '&.epr-icn-suggested': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -8)'
+    },
+    '&.epr-icn-custom': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -9)'
+    },
+    '&.epr-icn-activities': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -4)'
+    },
+    '&.epr-icn-animals_nature': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -1)'
+    },
+    '&.epr-icn-flags': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -7)'
+    },
+    '&.epr-icn-food_drink': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -2)'
+    },
+    '&.epr-icn-objects': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -5)'
+    },
+    '&.epr-icn-smileys_people': {
+      backgroundPositionX: '0px'
+    },
+    '&.epr-icn-symbols': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -6)'
+    },
+    '&.epr-icn-travel_places': {
+      backgroundPositionX:
+        'calc(var(--epr-category-navigation-button-size) * -3)'
+    }
+  },
+  '.epr-dark-theme': {
+    catBtn: DarkPositionY,
+    ...DarkInactivePosition
+  },
+  '.epr-auto-theme': {
+    catBtn: {
+      '@media (prefers-color-scheme: dark)': DarkPositionY
+    },
+    ...DarkInactivePosition
+  }
+});

package/src/components/navigation/CategoryNavigation.tsx

@@ -2,25 +2,17 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
-import {
-  commonInteractionStyles,
-  stylesheet
-} from '../../Stylesheet/stylesheet';
-import {
-  categoryFromCategoryConfig,
-  categoryNameFromCategoryConfig
-} from '../../config/categoryConfig';
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import { categoryFromCategoryConfig } from '../../config/categoryConfig';
 import { useCategoriesConfig } from '../../config/useConfig';
 import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView';
 import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
 import { isCustomCategory } from '../../typeRefinements/typeRefinements';
-import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
-import SVGNavigation from './svg/CategoryNav.svg';
+import { CategoryButton } from './CategoryButton';
 
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
@@ -48,26 +40,19 @@ export function CategoryNavigation() {
           return null;
         }
 
+        const allowNavigation = !isSearchMode && !isActiveCategory;
+
         return (
-          <Button
-            tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
-            className={cx(
-              styles.catBtn,
-              commonInteractionStyles.categoryBtn,
-              `epr-icn-${category}`,
-              {
-                [ClassNames.active]: isActiveCategory
-              }
-            )}
+          <CategoryButton
             key={category}
+            category={category}
+            isActiveCategory={isActiveCategory}
+            allowNavigation={allowNavigation}
+            categoryConfig={categoryConfig}
             onClick={() => {
               setActiveCategory(category);
               scrollCategoryIntoView(category);
             }}
-            aria-label={categoryNameFromCategoryConfig(categoryConfig)}
-            aria-selected={isActiveCategory}
-            role="tab"
-            aria-controls="epr-category-nav-id"
           />
         );
       })}
@@ -96,109 +81,5 @@ const styles = stylesheet.create({
       cursor: 'default',
       pointerEvents: 'none'
     }
-  },
-  catBtn: {
-    '.': 'epr-cat-btn',
-    display: 'inline-block',
-    transition: 'opacity 0.2s ease-in-out',
-    position: 'relative',
-    height: 'var(--epr-category-navigation-button-size)',
-    width: 'var(--epr-category-navigation-button-size)',
-    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
-    outline: 'none',
-    backgroundPosition: '0 0',
-    backgroundImage: `url(${SVGNavigation})`,
-    ':focus:before': {
-      content: '',
-      position: 'absolute',
-      top: '-2px',
-      left: '-2px',
-      right: '-2px',
-      bottom: '-2px',
-      border: '2px solid var(--epr-category-icon-active-color)',
-      borderRadius: '50%'
-    },
-    // @ts-ignore
-    '&.epr-icn-suggested': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -8)'
-    },
-    '&.epr-icn-custom': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -9)'
-    },
-    '&.epr-icn-activities': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -4)'
-    },
-    '&.epr-icn-animals_nature': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -1)'
-    },
-    '&.epr-icn-flags': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -7)'
-    },
-    '&.epr-icn-food_drink': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -2)'
-    },
-    '&.epr-icn-objects': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -5)'
-    },
-    '&.epr-icn-smileys_people': {
-      backgroundPositionX: '0px'
-    },
-    '&.epr-icn-symbols': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -6)'
-    },
-    '&.epr-icn-travel_places': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -3)'
-    }
-  },
-  '.epr-dark-theme': {
-    catBtn: {
-      backgroundPositionY:
-        'calc(var(--epr-category-navigation-button-size) * 2)'
-    },
-    ':not(.epr-search-active)': {
-      // @ts-expect-error - need to fix this
-      catBtn: {
-        ':hover': {
-          backgroundPositionY:
-            'calc(var(--epr-category-navigation-button-size) * 3)'
-        },
-        '&.epr-active': {
-          backgroundPositionY:
-            'calc(var(--epr-category-navigation-button-size) * 3)'
-        }
-      }
-    }
-  },
-  '.epr-auto-theme': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY:
-          'calc(var(--epr-category-navigation-button-size) * 2)'
-      }
-    },
-    ':not(.epr-search-active)': {
-      catBtn: {
-        '@media (prefers-color-scheme: dark)': {
-          ':hover': {
-            backgroundPositionY:
-              'calc(var(--epr-category-navigation-button-size) * 3)'
-          },
-          // @ts-ignore
-          '&.epr-active': {
-            backgroundPositionY:
-              'calc(var(--epr-category-navigation-button-size) * 3)'
-          }
-        }
-      }
-    }
   }
 });