refactor: Migrate reaction button component to type script (#266)

Author: HoonBaek

exports.js

@@ -136,7 +136,7 @@ export default {
   'ui/QuoteMessage': 'src/ui/QuoteMessage/index.tsx',
   'ui/QuoteMessageInput': 'src/ui/QuoteMessageInput/index.tsx',
   'ui/ReactionBadge': 'src/ui/ReactionBadge/index.tsx',
-  'ui/ReactionButton': 'src/ui/ReactionButton/index.jsx',
+  'ui/ReactionButton': 'src/ui/ReactionButton/index.tsx',
   'ui/SortByRow': 'src/ui/SortByRow/index.tsx',
   'ui/TextButton': 'src/ui/TextButton/index.jsx',
   'ui/TextMessageItemBody': 'src/ui/TextMessageItemBody/index.tsx',

src/ui/ReactionButton/__tests__/__snapshots__/ReactionButton.spec.js.snap

@@ -8,8 +8,8 @@ exports[`ReactionButton should do a snapshot test of the ReactionButton DOM 1`]
   role="button"
   style={
     Object {
-      "height": "34px",
-      "width": "34px",
+      "height": "36px",
+      "width": "36px",
     }
   }
   tabIndex={0}

src/ui/ReactionButton/index.jsx

@@ -4,6 +4,7 @@
   border-radius: 8px;
   display: inline-block;
   border: solid 1px transparent;
+  box-sizing: border-box;
   cursor: pointer;
 
   &:hover {
@@ -22,6 +23,7 @@
   cursor: pointer;
   border-radius: 8px;
   display: inline-block;
+  box-sizing: border-box;
   @include themed() {
     border: solid 1px t(primary--1-4);
     background-color: t(primary--1-4);

src/ui/ReactionButton/index.scss

@@ -0,0 +1,43 @@
+import React, { KeyboardEvent, MouseEvent, ReactElement, RefObject } from 'react';
+
+import './index.scss';
+
+export interface ReactionButtonProps {
+  children: ReactElement;
+  className?: string | Array<string>;
+  width?: string | number;
+  height?: string | number;
+  selected?: boolean;
+  onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+}
+const ReactionButton = React.forwardRef((props: ReactionButtonProps, ref: RefObject<HTMLDivElement>): ReactElement => {
+  const {
+    className,
+    width,
+    height,
+    selected,
+    onClick,
+    children,
+  } = props;
+
+  return (
+    <div
+      className={[
+        ...(Array.isArray(className) ? className : [className]),
+        `sendbird-reaction-button${selected ? '--selected' : ''}`,
+      ].join(' ')}
+      ref={ref}
+      role="button"
+      style={{ width, height }}
+      onClick={(e) => onClick(e)}
+      onKeyDown={(e) => onClick(e)}
+      tabIndex={0}
+    >
+      <div className="sendbird-reaction-button__inner">
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export default ReactionButton;

src/ui/ReactionButton/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactionButton from '../index.jsx';
+import ReactionButton from '../index';
 import Icon, { IconTypes } from '../../Icon';
 
 const description = `