@sendbird/uikit-react-native 1.0.0-rc.1

package/src/components/NewMessagesButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../hooks/useContext';
+
+type Props = {
+  newMessages: SendbirdMessage[];
+  visible: boolean;
+  onPress: () => void;
+};
+const NewMessagesButton: React.FC<Props> = ({ newMessages, visible, onPress }) => {
+  const { STRINGS } = useLocalization();
+  const { select, palette, colors } = useUIKitTheme();
+  if (newMessages.length === 0 || !visible) return null;
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={[
+        styles.container,
+        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },
+      ]}
+    >
+      <Text button color={colors.primary}>
+        {STRINGS.GROUP_CHANNEL.LIST_BUTTON_NEW_MSG(newMessages)}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 20,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+      },
+    }),
+  },
+});
+export default React.memo(NewMessagesButton);

package/src/components/ProviderLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+const ProviderLayout: React.FC = ({ children }) => {
+  const { colors } = useUIKitTheme();
+  return <View style={[styles.view, { backgroundColor: colors.background }]}>{children}</View>;
+};
+
+const styles = createStyleSheet({
+  view: {
+    flex: 1,
+  },
+});
+
+export default ProviderLayout;

package/src/components/ScrollToBottomButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+
+import { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+type Props = {
+  visible: boolean;
+  onPress: () => void;
+};
+const ScrollToBottomButton: React.FC<Props> = ({ visible, onPress }) => {
+  const { palette, select } = useUIKitTheme();
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.8}
+      disabled={!visible}
+      style={[
+        styles.container,
+        {
+          opacity: visible ? 1 : 0,
+          backgroundColor: select({ dark: palette.background400, light: palette.background50 }),
+        },
+      ]}
+    >
+      <Icon icon={'chevron-down'} size={22} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    padding: 8,
+    borderRadius: 24,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+      },
+    }),
+  },
+});
+
+export default React.memo(ScrollToBottomButton);

package/src/components/StatusComposition.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+  loading?: boolean;
+  LoadingComponent?: JSX.Element;
+  error?: boolean;
+  ErrorComponent?: JSX.Element;
+  children: React.ReactNode;
+};
+const StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {
+  if (loading && LoadingComponent) return <>{LoadingComponent}</>;
+  if (error && ErrorComponent) return <>{ErrorComponent}</>;
+  return <>{children}</>;
+};
+
+export default StatusComposition;

package/src/components/TypedPlaceholder.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Placeholder } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../hooks/useContext';
+
+type Props = {
+  type:
+    | 'no-banned-members'
+    | 'no-channels'
+    | 'no-messages'
+    | 'no-users'
+    | 'no-muted-members'
+    | 'no-results-found'
+    | 'error-wrong'
+    | 'loading';
+  onPressRetry?: () => void;
+};
+const TypedPlaceholder: React.FC<Props> = ({ type, onPressRetry }) => {
+  const { STRINGS } = useLocalization();
+  switch (type) {
+    case 'no-banned-members':
+      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_MEMBERS} />;
+    case 'no-channels':
+      return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;
+    case 'no-messages':
+      return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;
+    case 'no-muted-members':
+      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;
+    case 'no-results-found':
+      return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;
+    case 'no-users':
+      return <Placeholder icon={'members'} message={STRINGS.PLACEHOLDER.NO_USERS} />;
+    case 'error-wrong':
+      return (
+        <Placeholder
+          icon={'error'}
+          message={STRINGS.PLACEHOLDER.ERROR.MESSAGE}
+          errorRetryLabel={STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL}
+          onPressRetry={onPressRetry}
+        />
+      );
+    case 'loading':
+      return <Placeholder loading icon={'spinner'} />;
+  }
+};
+
+export default TypedPlaceholder;

package/src/components/UserActionBar.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+type Props = {
+  uri: string;
+  name: string;
+  label?: string;
+  muted: boolean;
+  disabled: boolean;
+  onPressActionMenu?: () => void;
+};
+const UserActionBar: React.FC<Props> = ({ muted, uri, name, disabled, onPressActionMenu, label }) => {
+  const { colors } = useUIKitTheme();
+
+  const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);
+
+  return (
+    <View style={styles.container}>
+      <Avatar muted={muted} size={36} uri={uri} containerStyle={styles.avatar} />
+      <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
+        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
+          {name}
+        </Text>
+        {Boolean(label) && (
+          <Text body2 color={colors.onBackground02} style={styles.label}>
+            {label}
+          </Text>
+        )}
+        {Boolean(onPressActionMenu) && (
+          <TouchableOpacity onPress={onPressActionMenu} disabled={disabled}>
+            <Icon color={iconColor} size={24} icon={'more'} containerStyle={styles.iconContainer} />
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    height: 56,
+  },
+  avatar: {
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  label: {
+    marginRight: 4,
+  },
+  infoContainer: {
+    height: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingRight: 12,
+    borderBottomWidth: 1,
+  },
+  iconContainer: {
+    padding: 4,
+  },
+  name: {
+    flex: 1,
+    marginRight: 8,
+  },
+});
+
+export default React.memo(UserActionBar);

package/src/components/UserSelectableBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+type Props = {
+  uri: string;
+  name: string;
+  selected: boolean;
+  disabled: boolean;
+};
+const UserSelectableBar: React.FC<Props> = ({ uri, name, selected, disabled }) => {
+  const { colors } = useUIKitTheme();
+
+  const iconColor = conditionChaining(
+    [disabled, selected],
+    [colors.onBackground04, colors.primary, colors.onBackground03],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Avatar size={36} uri={uri} containerStyle={styles.avatar} />
+      <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
+        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
+          {name}
+        </Text>
+        <Icon color={iconColor} size={24} icon={selected ? 'checkbox-on' : 'checkbox-off'} />
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    height: 56,
+    paddingHorizontal: 16,
+  },
+  avatar: {
+    marginRight: 16,
+  },
+  infoContainer: {
+    height: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
+  name: {
+    flex: 1,
+    marginRight: 8,
+  },
+});
+
+export default React.memo(UserSelectableBar);

package/src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LONG_PRESS_DELAY = 350;

package/src/contexts/Localization.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { StringSet } from '../localization/StringSet.type';
+
+type Props = {
+  stringSet: StringSet;
+  children?: React.ReactNode;
+};
+
+export type LocalizationContextType = {
+  STRINGS: StringSet;
+};
+
+export const LocalizationContext = React.createContext<LocalizationContextType | null>(null);
+export const LocalizationProvider = ({ children, stringSet }: Props) => {
+  return <LocalizationContext.Provider value={{ STRINGS: stringSet }}>{children}</LocalizationContext.Provider>;
+};

package/src/contexts/PlatformService.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from '../platform/types';
+
+type Props = {
+  fileService: FileServiceInterface;
+  clipboardService: ClipboardServiceInterface;
+  notificationService: NotificationServiceInterface;
+};
+
+export const PlatformServiceContext = React.createContext<Props | null>(null);
+export const PlatformServiceProvider: React.FC<Props> = ({
+  children,
+  fileService,
+  clipboardService,
+  notificationService,
+}) => {
+  return (
+    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService }}>
+      {children}
+    </PlatformServiceContext.Provider>
+  );
+};

package/src/contexts/SendbirdChat.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+
+import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
+import { useForceUpdate } from '@sendbird/uikit-utils';
+
+import type { FileType } from '../platform/types';
+
+type Props = {
+  sdkInstance: SendbirdChatSDK;
+
+  enableAutoPushTokenRegistration: boolean;
+  // enableChannelListTypingIndicator: boolean;
+  // enableChannelListMessageReceiptStatus: boolean;
+};
+
+type Context = {
+  sdk: SendbirdChatSDK;
+  currentUser?: SendbirdUser;
+  setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
+
+  // helper functions
+  updateCurrentUserInfo: (nickname: string, profile?: string | FileType) => Promise<SendbirdUser>;
+  markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
+
+  features: {
+    // UIKit features
+    autoPushTokenRegistrationEnabled: boolean;
+    // channelListTypingIndicatorEnabled: boolean;
+    // channelListMessageReceiptStateEnabled: boolean;
+
+    // Sendbird application features
+    deliveryReceiptEnabled: boolean;
+    broadcastChannelEnabled: boolean;
+    superGroupChannelEnabled: boolean;
+    reactionEnabled: boolean;
+  };
+};
+
+export const SendbirdChatContext = React.createContext<Context | null>(null);
+export const SendbirdChatProvider: React.FC<Props> = ({ children, sdkInstance, enableAutoPushTokenRegistration }) => {
+  const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
+  const forceUpdate = useForceUpdate();
+  const appFeatures = useAppFeatures(sdkInstance);
+
+  const setCurrentUser: Context['setCurrentUser'] = useCallback((user) => {
+    // NOTE: Sendbird SDK handle User object is always same object, so force update after setCurrentUser
+    _setCurrentUser(user);
+    forceUpdate();
+  }, []);
+
+  const updateCurrentUserInfo: Context['updateCurrentUserInfo'] = useCallback(
+    async (nickname, profile) => {
+      let user = currentUser;
+
+      if (!user) throw new Error('Current user is not defined, please connect using `useConnection()` hook first');
+
+      if (typeof profile === 'undefined') {
+        user = await sdkInstance.updateCurrentUserInfo(nickname, sdkInstance.currentUser.profileUrl);
+      } else if (typeof profile === 'string') {
+        user = await sdkInstance.updateCurrentUserInfo(nickname, profile);
+      } else if (typeof profile === 'object') {
+        user = await sdkInstance.updateCurrentUserInfoWithProfileImage(nickname, profile);
+      } else {
+        throw new Error(`Cannot update profile, not supported profile type(${typeof profile})`);
+      }
+
+      setCurrentUser(user);
+      return user;
+    },
+    [sdkInstance, currentUser, setCurrentUser],
+  );
+
+  const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
+    (channel: SendbirdGroupChannel) => {
+      if (appFeatures.deliveryReceiptEnabled && channel.unreadMessageCount > 0) {
+        sdkInstance.markAsDelivered(channel.url);
+      }
+    },
+    [sdkInstance, appFeatures.deliveryReceiptEnabled],
+  );
+
+  useEffect(() => {
+    const listener = (status: AppStateStatus) => {
+      // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
+      if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
+      else sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
+    };
+
+    const subscriber = AppState.addEventListener('change', listener);
+    return () => subscriber.remove();
+  }, [sdkInstance]);
+
+  const value: Context = {
+    sdk: sdkInstance,
+    currentUser,
+    setCurrentUser,
+
+    updateCurrentUserInfo,
+    markAsDeliveredWithChannel,
+
+    features: {
+      ...appFeatures,
+      autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
+    },
+  };
+
+  return <SendbirdChatContext.Provider value={value}>{children}</SendbirdChatContext.Provider>;
+};

package/src/domain/groupChannel/component/GroupChannelHeader.tsx

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+
+import { Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import ChannelCover from '../../../components/ChannelCover';
+import { useLocalization } from '../../../hooks/useContext';
+import { GroupChannelContexts } from '../module/moduleContext';
+import type { GroupChannelProps } from '../types';
+
+const GroupChannelHeader: React.FC<GroupChannelProps['Header']> = ({ onPressHeaderLeft, onPressHeaderRight }) => {
+  const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
+  const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
+  const { STRINGS } = useLocalization();
+  const { HeaderComponent } = useHeaderStyle();
+  const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+  return (
+    <HeaderComponent
+      clearTitleMargin
+      title={
+        <View style={styles.titleContainer}>
+          <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
+          <View style={{ flexShrink: 1 }}>
+            <Header.Title h2>{headerTitle}</Header.Title>
+            {Boolean(subtitle) && subtitle && <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>}
+          </View>
+        </View>
+      }
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={<Icon icon={'info'} />}
+      onPressRight={onPressHeaderRight}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  titleContainer: {
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarGroup: {
+    marginRight: 8,
+  },
+  subtitle: {
+    marginTop: 2,
+  },
+});
+
+export default GroupChannelHeader;

package/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react';
+import { Platform, TextInput as RNTextInput, View } from 'react-native';
+
+import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../../../hooks/useContext';
+import type { GroupChannelProps } from '../../types';
+
+type EditInputProps = GroupChannelProps['Input'] & {
+  text: string;
+  setText: (val: string) => void;
+  editMessage: SendbirdUserMessage | SendbirdFileMessage;
+  setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+};
+
+const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
+const EditInput: React.FC<EditInputProps> = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }) => {
+  const { STRINGS } = useLocalization();
+  const inputRef = useRef<RNTextInput>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (editMessage.isUserMessage()) {
+      setText(editMessage.message ?? '');
+
+      if (!AUTO_FOCUS) setTimeout(() => inputRef.current?.focus(), 500);
+    }
+  }, [editMessage]);
+
+  const onPressCancel = () => {
+    setEditMessage();
+    setText('');
+  };
+
+  const onPressSave = () => {
+    if (editMessage.isUserMessage()) {
+      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+    }
+    setEditMessage();
+    setText('');
+  };
+
+  return (
+    <View style={styles.editInputContainer}>
+      <View style={styles.inputWrapper}>
+        <TextInput
+          autoFocus={AUTO_FOCUS}
+          ref={inputRef}
+          multiline
+          value={text}
+          onChangeText={setText}
+          style={styles.input}
+          placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
+        />
+      </View>
+      <View style={{ marginTop: 8, flexDirection: 'row' }}>
+        <Button variant={'text'} onPress={onPressCancel}>
+          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}
+        </Button>
+        <View style={styles.space} />
+        <Button variant={'contained'} onPress={onPressSave}>
+          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  editInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
+    borderRadius: 20,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+  },
+  space: {
+    flex: 1,
+  },
+});
+
+export default EditInput;