Disable skin tones for reaction emoji

ts/components/emoji/EmojiPicker.tsx

@@ -24,10 +24,11 @@ export type EmojiPickDataType = { skinTone?: number; shortName: string };
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
+  readonly disableSkinTones?: boolean;
   readonly onPickEmoji: (o: EmojiPickDataType) => unknown;
   readonly doSend?: () => unknown;
-  readonly skinTone: number;
-  readonly onSetSkinTone: (tone: number) => unknown;
+  readonly skinTone?: number;
+  readonly onSetSkinTone?: (tone: number) => unknown;
   readonly recentEmojis?: Array<string>;
   readonly onClose?: () => unknown;
 };
@@ -63,6 +64,7 @@ export const EmojiPicker = React.memo(
         doSend,
         onPickEmoji,
         skinTone = 0,
+        disableSkinTones = false,
         onSetSkinTone,
         recentEmojis = [],
         style,
@@ -81,7 +83,9 @@ export const EmojiPicker = React.memo(
       const [searchMode, setSearchMode] = React.useState(false);
       const [searchText, setSearchText] = React.useState('');
       const [scrollToRow, setScrollToRow] = React.useState(0);
-      const [selectedTone, setSelectedTone] = React.useState(skinTone);
+      const [selectedTone, setSelectedTone] = React.useState(
+        disableSkinTones ? 0 : skinTone
+      );
 
       const handleToggleSearch = React.useCallback(
         (e: React.MouseEvent) => {
@@ -114,9 +118,11 @@ export const EmojiPicker = React.memo(
           const { tone = '0' } = e.currentTarget.dataset;
           const parsedTone = parseInt(tone, 10);
           setSelectedTone(parsedTone);
-          onSetSkinTone(parsedTone);
+          if (onSetSkinTone) {
+            onSetSkinTone(parsedTone);
+          }
         },
-        []
+        [onSetSkinTone]
       );
 
       const handlePickEmoji = React.useCallback(
@@ -376,25 +382,27 @@ export const EmojiPicker = React.memo(
               />
             </div>
           )}
-          <footer className="module-emoji-picker__footer">
-            {[0, 1, 2, 3, 4, 5].map(tone => (
-              <button
-                key={tone}
-                data-tone={tone}
-                onClick={handlePickTone}
-                title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
-                className={classNames(
-                  'module-emoji-picker__button',
-                  'module-emoji-picker__button--footer',
-                  selectedTone === tone
-                    ? 'module-emoji-picker__button--selected'
-                    : null
-                )}
-              >
-                <Emoji shortName="hand" skinTone={tone} size={20} />
-              </button>
-            ))}
-          </footer>
+          {!disableSkinTones ? (
+            <footer className="module-emoji-picker__footer">
+              {[0, 1, 2, 3, 4, 5].map(tone => (
+                <button
+                  key={tone}
+                  data-tone={tone}
+                  onClick={handlePickTone}
+                  title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
+                  className={classNames(
+                    'module-emoji-picker__button',
+                    'module-emoji-picker__button--footer',
+                    selectedTone === tone
+                      ? 'module-emoji-picker__button--selected'
+                      : null
+                  )}
+                >
+                  <Emoji shortName="hand" skinTone={tone} size={20} />
+                </button>
+              ))}
+            </footer>
+          ) : null}
         </div>
       );
     }

ts/state/smart/EmojiPicker.tsx

@@ -14,8 +14,11 @@ import { LocalizerType } from '../../types/Util';
 
 export const SmartEmojiPicker = React.forwardRef<
   HTMLDivElement,
-  Pick<EmojiPickerProps, 'onPickEmoji' | 'onClose' | 'style'>
->(({ onPickEmoji, onClose, style }, ref) => {
+  Pick<
+    EmojiPickerProps,
+    'onPickEmoji' | 'onClose' | 'style' | 'disableSkinTones'
+  >
+>(({ onPickEmoji, onClose, style, disableSkinTones }, ref) => {
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const skinTone = useSelector<StateType, number>(state =>
     get(state, ['items', 'skinTone'], 0)
@@ -52,6 +55,7 @@ export const SmartEmojiPicker = React.forwardRef<
       recentEmojis={recentEmojis}
       onClose={onClose}
       style={style}
+      disableSkinTones={disableSkinTones}
     />
   );
 });

ts/state/smart/Timeline.tsx

@@ -59,6 +59,7 @@ function renderEmojiPicker({
       onPickEmoji={onPickEmoji}
       onClose={onClose}
       style={style}
+      disableSkinTones={true}
     />
   );
 }