Add support for selected Emojis

src/DomUtils/classNames.ts

@@ -4,6 +4,7 @@ export enum ClassNames {
   hidden = 'epr-hidden',
   visible = 'epr-visible',
   active = 'epr-active',
+  selected = 'epr-selected',
   emoji = 'epr-emoji',
   category = 'epr-emoji-category',
   label = 'epr-emoji-category-label',

src/Stylesheet/stylesheet.tsx

@@ -13,11 +13,19 @@ const hidden = {
   overflow: 'hidden'
 };
 
+const selected = {
+  backgroundColor: 'var(--epr-emoji-select-color)'
+};
+
 export const commonStyles = stylesheet.create({
   hidden: {
     '.': ClassNames.hidden,
     ...hidden
-  }
+  },
+  selected: {
+    '.': ClassNames.selected,
+    ...selected
+  },
 });
 
 export const PickerStyleTag = React.memo(function PickerStyleTag() {

src/components/Reactions/Reactions.tsx

@@ -7,7 +7,8 @@ import {
   useEmojiStyleConfig,
   useReactionsConfig,
   useAllowExpandReactions,
-  useGetEmojiUrlConfig
+  useGetEmojiUrlConfig,
+  useGetIsSelectedEmojis,
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
@@ -26,6 +27,7 @@ export function Reactions() {
   const emojiStyle = useEmojiStyleConfig();
   const allowExpandReactions = useAllowExpandReactions();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const getIsSelectedEmojis = useGetIsSelectedEmojis();
 
   if (!reactionsOpen) {
     return null;
@@ -46,6 +48,7 @@ export function Reactions() {
             className={cx(styles.emojiButton)}
             noBackground
             getEmojiUrl={getEmojiUrl}
+            selected={getIsSelectedEmojis(reaction)}
           />
         </li>
       ))}

src/components/body/EmojiList.tsx

@@ -12,6 +12,7 @@ import {
   useCategoriesConfig,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
+  useGetIsSelectedEmojis,
   useLazyLoadEmojisConfig,
   useSkinTonesDisabledConfig
 } from '../../config/useConfig';
@@ -71,6 +72,7 @@ function RenderCategory({
   const isEmojiDisallowed = useIsEmojiDisallowed();
   const getEmojiUrl = useGetEmojiUrlConfig();
   const showVariations = !useSkinTonesDisabledConfig();
+  const getIsSelectedEmojis = useGetIsSelectedEmojis();
 
   // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
@@ -110,6 +112,7 @@ function RenderCategory({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoadEmojis}
         getEmojiUrl={getEmojiUrl}
+        selected={getIsSelectedEmojis(unified)}
       />
     );
   });

src/components/body/EmojiVariationPicker.tsx

@@ -13,7 +13,8 @@ import {
 import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
-  useGetEmojiUrlConfig
+  useGetEmojiUrlConfig,
+  useGetIsSelectedEmojis
 } from '../../config/useConfig';
 import {
   emojiHasVariations,
@@ -49,6 +50,7 @@ export function EmojiVariationPicker() {
   const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   const getPointerStyle = usePointerStyle(VariationPickerRef);
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const getIsSelectedEmojis = useGetIsSelectedEmojis();
 
   const button = buttonFromTarget(AnchoredEmojiRef.current);
 
@@ -98,6 +100,7 @@ export function EmojiVariationPicker() {
                 emojiStyle={emojiStyle}
                 showVariations={false}
                 getEmojiUrl={getEmojiUrl}
+                selected={getIsSelectedEmojis(unified)}
               />
             ))
         : null}

src/components/body/Suggested.tsx

@@ -4,6 +4,7 @@ import { CategoryConfig } from '../../config/categoryConfig';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
+  useGetIsSelectedEmojis,
   useSuggestedEmojisModeConfig
 } from '../../config/useConfig';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
@@ -29,6 +30,7 @@ export function Suggested({ categoryConfig }: Props) {
     [suggestedUpdated, suggestedEmojisModeConfig]
   );
   const emojiStyle = useEmojiStyleConfig();
+  const getIsSelectedEmojis = useGetIsSelectedEmojis();
 
   if (!isMounted) {
     return null;
@@ -55,6 +57,7 @@ export function Suggested({ categoryConfig }: Props) {
             emoji={emoji}
             key={suggestedItem.unified}
             getEmojiUrl={getEmojiUrl}
+            selected={getIsSelectedEmojis(suggestedItem.unified)}
           />
         );
       })}

src/components/context/PickerConfigContext.tsx

@@ -58,7 +58,8 @@ export function useSetConfig(config: PickerConfig) {
     config.width,
     config.searchDisabled,
     config.skinTonePickerLocation,
-    config.allowExpandReactions
+    config.allowExpandReactions,
+    config.selectedEmojis
   ]);
 
   return mergedConfig;

src/components/emoji/ClickableEmojiButton.tsx

@@ -11,6 +11,7 @@ import { Button } from '../atoms/Button';
 
 type ClickableEmojiButtonProps = Readonly<{
   hidden?: boolean;
+  selected?: boolean;
   showVariations?: boolean;
   hiddenOnSearch?: boolean;
   emojiNames: string[];
@@ -25,6 +26,7 @@ export function ClickableEmojiButton({
   emojiNames,
   unified,
   hidden,
+  selected,
   hiddenOnSearch,
   showVariations = true,
   hasVariations,
@@ -37,6 +39,7 @@ export function ClickableEmojiButton({
       className={cx(
         styles.emoji,
         hidden && commonStyles.hidden,
+        selected && commonStyles.selected,
         hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
         {
           [ClassNames.visible]: !hidden && !hiddenOnSearch
@@ -80,7 +83,13 @@ const styles = stylesheet.create({
     },
     ':focus': {
       backgroundColor: 'var(--epr-focus-bg-color)'
-    }
+    },
+    [`&.${ClassNames.selected}`]: {
+      backgroundColor: 'var(--epr-selected-bg-color)',
+      ':focus': {
+        backgroundColor: 'var(--epr-selected-bg-color)'
+      },
+    },
   },
   noBackground: {
     background: 'none',
@@ -91,7 +100,7 @@ const styles = stylesheet.create({
     ':focus': {
       backgroundColor: 'transparent',
       background: 'none'
-    }
+    },
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,

src/components/emoji/Emoji.tsx

@@ -10,6 +10,7 @@ import { ViewOnlyEmoji } from './ViewOnlyEmoji';
 type ClickableEmojiProps = Readonly<
   BaseEmojiProps & {
     hidden?: boolean;
+    selected?: boolean;
     showVariations?: boolean;
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
@@ -22,6 +23,7 @@ export function ClickableEmoji({
   emoji,
   unified,
   hidden,
+  selected,
   hiddenOnSearch,
   emojiStyle,
   showVariations = true,
@@ -38,6 +40,7 @@ export function ClickableEmoji({
       hasVariations={hasVariations}
       showVariations={showVariations}
       hidden={hidden}
+      selected={selected}
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}

src/components/main/PickerMain.tsx

@@ -123,6 +123,7 @@ const styles = stylesheet.create({
       '--epr-hover-bg-color': '#f1f8ff',
       '--epr-hover-bg-color-reduced-opacity': '#f1f8ff80',
       '--epr-focus-bg-color': '#e0f0ff',
+      '--epr-selected-bg-color': '#6aa8de',
       '--epr-text-color': '#858585',
       '--epr-search-input-bg-color': '#f6f6f6',
       '--epr-picker-border-color': '#e7e7e7',

src/config/compareConfig.ts

@@ -23,6 +23,7 @@ export function compareConfig(prev: PickerConfig, next: PickerConfig) {
     prev.style === next.style &&
     prev.searchDisabled === next.searchDisabled &&
     prev.skinTonePickerLocation === next.skinTonePickerLocation &&
+    prev.selectedEmojis === next.selectedEmojis &&
     prevCustomEmojis.length === nextCustomEmojis.length
   );
 }

src/config/config.ts

@@ -95,7 +95,8 @@ export function basePickerConfig(): PickerConfigInternal {
     reactions: DEFAULT_REACTIONS,
     open: true,
     allowExpandReactions: true,
-    hiddenEmojis: []
+    hiddenEmojis: [],
+    selectedEmojis: []
   };
 }
 
@@ -126,6 +127,7 @@ export type PickerConfigInternal = {
   open: boolean;
   allowExpandReactions: boolean;
   hiddenEmojis: string[];
+  selectedEmojis: string[];
 };
 
 export type PreviewConfig = {

src/config/useConfig.ts

@@ -186,3 +186,8 @@ export function useSearchResultsConfig(searchResultsCount: number): string {
 
   return SEARCH_RESULTS_NO_RESULTS_FOUND;
 }
+
+export function useGetIsSelectedEmojis(): (emoji: string) => boolean {
+  const { selectedEmojis } = usePickerConfig();
+  return (emoji) => selectedEmojis.includes(emoji);
+}

stories/picker.stories.tsx

@@ -289,6 +289,24 @@ export const HideEmojisByUnicode = (args: Props) => (
   <Template {...args} emojiStyle={EmojiStyle.NATIVE} />
 );
 
+export const SelectedEmojis = () => {
+  const [selectedEmojis, setSelectedEmojis] = useState<string[]>([]);
+
+  return (
+    <EmojiPicker
+      selectedEmojis={selectedEmojis}
+      reactionsDefaultOpen
+      onEmojiClick={({ unified }) =>
+        setSelectedEmojis(
+          selectedEmojis.includes(unified)
+            ? selectedEmojis.filter((emoji) => emoji !== unified)
+            : [...selectedEmojis, unified],
+        )
+      }
+    />
+  );
+};
+
 function TemplateDark(args) {
   const [open, setOpen] = useState(true);
   const [hasBg, setHasBg] = useState(false);