Emoji refactor

microsoft · Jul 20, 2020 · b96bc6d · b96bc6d
1 parent fe797c2
commit b96bc6d
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 61 deletions.
diff --git a/__tests__/html/emoji.enabledCustomMapDefaultRegExp.html b/__tests__/html/emoji.enabledCustomMapDefaultRegExp.html
@@ -15,8 +15,7 @@
             directLine: window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() }),
             store: createStore(),
             styleOptions: {
-              emojiAutocorrect: true,
-              emojiList: {
+              emojiSet: {
                 ':)': '😊'
               }
             }

diff --git a/packages/component/src/BasicTranscript.js b/packages/component/src/BasicTranscript.js
@@ -1,7 +1,7 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1] }] */
 
 import { css } from 'glamor';
-import { Panel as ScrollToBottomPanel, useAnimating, useSticky } from 'react-scroll-to-bottom';
+import { Panel as ScrollToBottomPanel, useAnimatingToEnd, useSticky } from 'react-scroll-to-bottom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -97,7 +97,7 @@ const BasicTranscript = ({ className }) => {
   const [{ activities: activitiesStyleSet, activity: activityStyleSet }] = useStyleSet();
   const [{ hideScrollToEndButton }] = useStyleOptions();
   const [activities] = useActivities();
-  const [animatingToEnd] = useAnimating();
+  const [animatingToEnd] = useAnimatingToEnd();
   const [direction] = useDirection();
   const [sticky] = useSticky();
   const focus = useFocus();

diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js
@@ -190,8 +190,7 @@ const DEFAULT_OPTIONS = {
   toastWarnColor: '#3B3A39',
 
   // Emoji
-  emojiAutocorrect: false,
-  emojiList: undefined
+  emojiSet: false // true || false || { ':)' : '😊'}
 };
 
 export default DEFAULT_OPTIONS;
diff --git a/packages/component/src/hooks/useEmojiFromStyles.js b/packages/component/src/hooks/useEmojiFromStyles.js
@@ -1,56 +1,42 @@
 /*eslint require-unicode-regexp: "off" */
 
-import { useMemo } from 'react';
-
 import useStyleOptions from './useStyleOptions';
 
-function escapeRegexp(emoticon) {
-  return emoticon.replace(/[\\^$*+?.()|[\]{}]/gu, '\\$&');
-}
-
 export default function useEmojiFromStyles() {
-  const [{ emojiAutocorrect: autocorrect, emojiList: customEmojiList }] = useStyleOptions();
-
-  const emojiAutocorrect = autocorrect || false;
-
-  const emojiUnicodeMap = customEmojiList || {
-    ':)': '😊',
-    ':-)': '😊',
-    '(:': '😊',
-    '(-:': '😊',
-    ':-|': '😐',
-    ':|': '😐',
-    ':-(': '☹️',
-    ':(': '☹️',
-    ':-D': '😀',
-    ':D': '😀',
-    ':-p': '😛',
-    ':p': '😛',
-    ':-P': '😛',
-    ':P': '😛',
-    ':-o': '😲',
-    ':o': '😲',
-    ':O': '😲',
-    ':-O': '😲',
-    ':-0': '😲',
-    ':0': '😲',
-    ';-)': '😉',
-    ';)': '😉',
-    '<3': '❤️',
-    '</3': '💔',
-    '<\\3': '💔'
-  };
-
-  const escapedString =
-    customEmojiList &&
-    Object.keys(customEmojiList)
-      .map(escapeRegexp)
-      .join('|');
-
-  const emojiRegExp = useMemo(
-    () => (customEmojiList ? new RegExp(escapedString, 'gmu') : new RegExp(/([:<()\\|/3DPpoO0-]{2,3})/gmu)),
-    [customEmojiList, escapedString]
-  );
-
-  return [{ emojiAutocorrect, emojiUnicodeMap, emojiRegExp }];
+  const [{ emojiSet }] = useStyleOptions();
+
+  const emojiUnicodeMap =
+    typeof emojiSet === 'object'
+      ? emojiSet
+      : emojiSet === true
+      ? {
+          ':)': '😊',
+          ':-)': '😊',
+          '(:': '😊',
+          '(-:': '😊',
+          ':-|': '😐',
+          ':|': '😐',
+          ':-(': '☹️',
+          ':(': '☹️',
+          ':-D': '😀',
+          ':D': '😀',
+          ':-p': '😛',
+          ':p': '😛',
+          ':-P': '😛',
+          ':P': '😛',
+          ':-o': '😲',
+          ':o': '😲',
+          ':O': '😲',
+          ':-O': '😲',
+          ':-0': '😲',
+          ':0': '😲',
+          ';-)': '😉',
+          ';)': '😉',
+          '<3': '❤️',
+          '</3': '💔',
+          '<\\3': '💔'
+        }
+      : false;
+
+  return [{ emojiUnicodeMap }];
 }
diff --git a/packages/component/src/hooks/useReplaceEmoticon.js b/packages/component/src/hooks/useReplaceEmoticon.js
@@ -1,21 +1,47 @@
-import useEmojiFromStyles from './useEmojiFromStyles';
+/*eslint require-unicode-regexp: "off" */
+
+import { useCallback, useMemo } from 'react';
+
 import { useTextBoxValue } from '../SendBox/TextBox';
-import { useCallback } from 'react';
+import useStyleOptions from './useStyleOptions';
+import useEmojiFromStyles from './useEmojiFromStyles';
+
+function escapeRegexp(emoticon) {
+  return emoticon.replace(/[\\^$*+?.()|[\]{}]/gu, '\\$&');
+}
 
 export default function useReplaceEmoticon() {
-  const [{ emojiAutocorrect, emojiUnicodeMap, emojiRegExp }] = useEmojiFromStyles();
+  const [{ emojiUnicodeMap }] = useEmojiFromStyles();
+
+  const escapedString = useMemo(
+    () =>
+      typeof emojiUnicodeMap === 'object' &&
+      Object.keys(emojiUnicodeMap)
+        .map(escapeRegexp)
+        .join('|'),
+    [emojiUnicodeMap]
+  );
+
+  const emojiRegExp = useMemo(
+    () =>
+      typeof emojiUnicodeMap === 'object'
+        ? new RegExp(escapedString, 'gmu')
+        : new RegExp(/([:<()\\|/3DPpoO0-]{2,3})/gmu),
+    [emojiUnicodeMap, escapedString]
+  );
+
   const [value] = useTextBoxValue();
   const setEmoji = useCallback(
     value => {
       const emoticon = value.match(emojiRegExp);
 
-      if (emojiAutocorrect && emoticon && emojiUnicodeMap[emoticon]) {
+      if (!!emojiUnicodeMap && emoticon && emojiUnicodeMap[emoticon]) {
         value = value.replace(emoticon, emojiUnicodeMap[emoticon]);
       }
 
       return value;
     },
-    [emojiAutocorrect, emojiUnicodeMap, emojiRegExp]
+    [emojiUnicodeMap, emojiRegExp]
   );
 
   return [value, setEmoji];