Merge pull request #52 from sendbird/feat/reactions

[UIKIT-2585] Feat/reactions

Author: bang9

.github/workflows/ci.yml

@@ -17,11 +17,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -31,7 +31,7 @@ jobs:
 
       - name: Check cached node_modules
         id: check_cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
           key: ${{ steps.lockfile_hash.outputs.hash }}
@@ -47,16 +47,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Check cached node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
           key: ${{ needs.prepare.outputs.cache_node_modules_key }}
@@ -69,16 +69,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16, 18]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Check cached node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
           key: ${{ needs.prepare.outputs.cache_node_modules_key }}
@@ -91,16 +91,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Check cached node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
           key: ${{ needs.prepare.outputs.cache_node_modules_key }}
@@ -113,16 +113,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Check cached node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ env.CACHE_NODE_MODULES_PATH }}
           key: ${{ needs.prepare.outputs.cache_node_modules_key }}

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -219,8 +219,6 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     async (failedMessage) => {
       const message = await (() => {
         if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
-        // FIXME: v4 bugs
-        // @ts-ignore
         if (failedMessage.isFileMessage()) return channel.resendFileMessage(failedMessage);
         return null;
       })();

packages/uikit-chat-hooks/src/common/useTotalUnreadChannelCount.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedBadgeCount, useAsyncEffect } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect } from '@sendbird/uikit-utils';
 import { useUniqId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
@@ -24,5 +24,5 @@ export const useTotalUnreadChannelCount = (sdk: SendbirdChatSDK, params?: Params
     },
   });
 
-  return truncatedBadgeCount(unreadChannelCount, params?.maxCount);
+  return truncatedCount(unreadChannelCount, params?.maxCount);
 };

packages/uikit-chat-hooks/src/common/useTotalUnreadMessageCount.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { SuperChannelFilter, TotalUnreadMessageCountParams } from '@sendbird/chat/groupChannel';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedBadgeCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
 
@@ -28,5 +28,5 @@ export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, options?: Optio
     onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
   });
 
-  return truncatedBadgeCount(unreadMessageCount, options?.maxCount);
+  return truncatedCount(unreadMessageCount, options?.maxCount);
 };

packages/uikit-react-native-foundation/src/components/Modal/index.tsx

@@ -19,8 +19,9 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
+type ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';
 type Props = {
-  type?: 'slide' | 'fade';
+  type?: ModalAnimationType;
   onClose: () => void;
   backgroundStyle?: StyleProp<ViewStyle>;
   disableBackgroundClose?: boolean;
@@ -117,12 +118,12 @@ const isHideGesture = (distanceY: number, velocityY: number) => {
   return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);
 };
 const useModalPanResponder = (
-  type: 'slide' | 'fade',
+  type: ModalAnimationType,
   translateY: Animated.Value,
   show: () => void,
   hide: () => void,
 ) => {
-  if (type === 'fade') return { panHandlers: {} };
+  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };
   return React.useRef(
     PanResponder.create({
       onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,
@@ -137,15 +138,15 @@ const useModalPanResponder = (
   ).current;
 };
 
-const useModalAnimation = (type: 'slide' | 'fade') => {
-  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;
+const useModalAnimation = (type: ModalAnimationType) => {
+  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;
   const baseAnimBackground = useRef(new Animated.Value(0)).current;
   const baseAnimContent = useRef(new Animated.Value(initialY)).current;
 
   const content = {
     opacity: baseAnimBackground.interpolate({
       inputRange: [0, 1],
-      outputRange: [type === 'slide' ? 1 : 0, 1],
+      outputRange: [type === 'fade' ? 0 : 1, 1],
     }),
     translateY: baseAnimContent,
   };

packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts

@@ -12,7 +12,9 @@ const preProcessor: Partial<StylePreprocessor> = {
   'lineHeight': DEFAULT_SCALE_FACTOR,
   'borderRadius': DEFAULT_SCALE_FACTOR,
   'minWidth': SCALE_FACTOR_WITH_STR,
+  'maxWidth': SCALE_FACTOR_WITH_STR,
   'minHeight': SCALE_FACTOR_WITH_STR,
+  'maxHeight': SCALE_FACTOR_WITH_STR,
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,

packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts

@@ -179,6 +179,28 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundDark03,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.primary200,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background400,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts

@@ -179,6 +179,28 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundLight03,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.primary300,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background100,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

packages/uikit-react-native-foundation/src/types.ts

@@ -40,7 +40,8 @@ export type Component =
   | 'Message'
   | 'DateSeparator'
   | 'GroupChannelPreview'
-  | 'ProfileCard';
+  | 'ProfileCard'
+  | 'Reaction';
 
 export type GetColorTree<
   Tree extends {
@@ -68,6 +69,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
     ProfileCard: 'default';
+    Reaction: 'default' | 'rounded';
   };
   State: {
     Header: 'none';
@@ -80,6 +82,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
     ProfileCard: 'none';
+    Reaction: 'enabled' | 'selected';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -101,6 +104,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'bodyIconBackground'
       | 'separator';
     ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
+    Reaction: 'background' | 'highlight';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -145,6 +149,7 @@ export interface UIKitColors {
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
     profileCard: ComponentColors<'ProfileCard'>;
+    reaction: ComponentColors<'Reaction'>;
   };
 }
 

packages/uikit-react-native-foundation/src/ui/Badge/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
-import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+import { truncatedCount } from '@sendbird/uikit-utils';
 
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -29,7 +29,7 @@ const Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default'
       ]}
     >
       <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>
-        {truncatedBadgeCount(count, maxCount)}
+        {truncatedCount(count, maxCount)}
       </Text>
     </View>
   );