Allow duplicates in reaction palette

ts/components/ReactionPickerPicker.tsx

@@ -0,0 +1,91 @@
+// Copyright 2020-2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { CSSProperties, ReactNode, forwardRef } from 'react';
+import classNames from 'classnames';
+
+import { Emoji } from './emoji/Emoji';
+import type { LocalizerType } from '../types/Util';
+
+export enum ReactionPickerPickerStyle {
+  Picker,
+  Menu,
+}
+
+export const ReactionPickerPickerEmojiButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    emoji: string;
+    isSelected: boolean;
+    onClick: () => unknown;
+    title?: string;
+  }
+>(({ emoji, onClick, isSelected, title }, ref) => (
+  <button
+    type="button"
+    ref={ref}
+    tabIndex={0}
+    className={classNames(
+      'module-ReactionPickerPicker__button',
+      'module-ReactionPickerPicker__button--emoji',
+      isSelected && 'module-ReactionPickerPicker__button--selected'
+    )}
+    onClick={event => {
+      event.stopPropagation();
+      onClick();
+    }}
+  >
+    <Emoji size={48} emoji={emoji} title={title} />
+  </button>
+));
+
+export const ReactionPickerPickerMoreButton = ({
+  i18n,
+  onClick,
+}: Readonly<{
+  i18n: LocalizerType;
+  onClick: () => unknown;
+}>): JSX.Element => (
+  <button
+    aria-label={i18n('Reactions--more')}
+    className="module-ReactionPickerPicker__button module-ReactionPickerPicker__button--more"
+    onClick={event => {
+      event.stopPropagation();
+      onClick();
+    }}
+    tabIndex={0}
+    title={i18n('Reactions--more')}
+    type="button"
+  >
+    <div className="module-ReactionPickerPicker__button--more__dot" />
+    <div className="module-ReactionPickerPicker__button--more__dot" />
+    <div className="module-ReactionPickerPicker__button--more__dot" />
+  </button>
+);
+
+export const ReactionPickerPicker = forwardRef<
+  HTMLDivElement,
+  {
+    children: ReactNode;
+    isSomethingSelected: boolean;
+    pickerStyle: ReactionPickerPickerStyle;
+    style?: CSSProperties;
+  }
+>(({ children, isSomethingSelected, pickerStyle, style }, ref) => (
+  <div
+    className={classNames(
+      'module-ReactionPickerPicker',
+      isSomethingSelected && 'module-ReactionPickerPicker--something-selected',
+      {
+        'module-ReactionPickerPicker--picker-style':
+          pickerStyle === ReactionPickerPickerStyle.Picker,
+        'module-ReactionPickerPicker--menu-style':
+          pickerStyle === ReactionPickerPickerStyle.Menu,
+      }
+    )}
+    ref={ref}
+    style={style}
+  >
+    {children}
+  </div>
+));