@sendbird/uikit-utils 2.1.0 → 2.2.0

package/lib/typescript/src/shared/bufferedRequest.d.ts

@@ -1,4 +1,4 @@
-declare type Func = (...args: unknown[]) => Promise<unknown>;
+type Func = (...args: unknown[]) => Promise<unknown>;
 export declare class BufferedRequest {
     static markAsRead: {
         push(func: Func, lane?: string): void;

package/lib/typescript/src/shared/logger.d.ts

@@ -6,7 +6,7 @@ declare const LogLevelEnum: {
     info: number;
     debug: number;
 };
-declare type LogLevel = keyof typeof LogLevelEnum;
+type LogLevel = keyof typeof LogLevelEnum;
 export declare const Logger: {
     LogLevelEnum: {
         none: number;

package/lib/typescript/src/shared/pubsub.d.ts

@@ -1,7 +1,7 @@
-export declare type SubscribeListener = ((...args: unknown[]) => void) & {
+export type SubscribeListener = ((...args: unknown[]) => void) & {
     onError?: (error: unknown) => void;
 };
-export declare type SubscribeListenerPool = Record<symbol, SubscribeListener>;
+export type SubscribeListenerPool = Record<symbol, SubscribeListener>;
 export declare const createPubSub: (label?: string) => {
     subscribe: (event: string, listener: SubscribeListener, subscriber?: string) => () => void;
     publish: (event: string, ...args: unknown[]) => void;

package/lib/typescript/src/shared/regex.d.ts

@@ -3,6 +3,14 @@ export declare const urlRegexRough: RegExp;
 export declare const phoneRegex: RegExp;
 export declare const emailRegex: RegExp;
 export declare const newLineRegex: RegExp;
+export declare const createMentionTemplateRegex: (trigger: string) => RegExp;
+export declare const replaceWithRegex: <T>(text: string, regex: RegExp, replacer: (params: {
+    match: string;
+    groups: string[];
+    matchIndex: number | undefined;
+    index: number;
+    keyPrefix: string;
+}) => T, keyPrefix: string) => (string | T)[];
 export declare const replaceUrlAsComponents: <T>(originText: string, replacer: (url: string) => T, strict?: boolean) => (string | T)[];
 export declare const imageExtRegex: RegExp;
 export declare const audioExtRegex: RegExp;

package/lib/typescript/src/shared/replace.d.ts

@@ -0,0 +1,2 @@
+declare const replace: (original: string, start: number, end: number, str: string) => string;
+export default replace;

package/lib/typescript/src/types.d.ts

@@ -1,50 +1,56 @@
 import type React from 'react';
 import type SendbirdChat from '@sendbird/chat';
-import type { BaseChannel, RestrictedUser, SendbirdError as SBError, User, UserUpdateParams } from '@sendbird/chat';
+import type { BaseChannel, Emoji, EmojiCategory, EmojiContainer, RestrictedUser, SendbirdError as SBError, User, UserUpdateParams } from '@sendbird/chat';
 import type { GroupChannel, GroupChannelCollection, GroupChannelCreateParams, GroupChannelListQuery, GroupChannelModule, GroupChannelUpdateParams, Member, MessageCollection } from '@sendbird/chat/groupChannel';
 import type { ModuleNamespaces, SendableMessage } from '@sendbird/chat/lib/__definition';
-import type { AdminMessage, BaseMessage, FileMessage, FileMessageCreateParams, FileMessageUpdateParams, PreviousMessageListQuery, UserMessage, UserMessageCreateParams, UserMessageUpdateParams } from '@sendbird/chat/message';
+import type { AdminMessage, BaseMessage, FileMessage, FileMessageCreateParams, FileMessageUpdateParams, PreviousMessageListQuery, Reaction, UserMessage, UserMessageCreateParams, UserMessageUpdateParams } from '@sendbird/chat/message';
 import type { OpenChannel, OpenChannelModule } from '@sendbird/chat/openChannel';
-import './';
-export declare type FilterByValueType<T extends object, Type> = {
+export type FilterByValueType<T extends object, Type> = {
     [K in keyof T as T[K] extends Type ? K : never]: T[K];
 };
-export declare type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-export declare type OmittedValues<T, K extends keyof T> = Omit<T, K>[keyof Omit<T, K>];
-export declare type PartialDeep<T> = T extends object ? T extends Function ? T : {
+export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export type OmittedValues<T, K extends keyof T> = Omit<T, K>[keyof Omit<T, K>];
+export type PartialDeep<T> = T extends object ? T extends Function ? T : {
     [P in keyof T]?: PartialDeep<T[P]>;
 } : T;
-export declare type PartialNullable<T> = {
+export type PartialNullable<T> = {
     [P in keyof T]?: T[P] | null;
 };
-export declare type Optional<T> = T | undefined;
-export declare type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
-export declare type SendbirdChatSDK = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]>;
-export declare type SendbirdMessage = BaseMessage | FileMessage | UserMessage | AdminMessage | SendableMessage;
-export declare type SendbirdChannel = BaseChannel | GroupChannel | OpenChannel;
-export declare type SendbirdUserMessage = UserMessage;
-export declare type SendbirdFileMessage = FileMessage;
-export declare type SendbirdAdminMessage = AdminMessage;
-export declare type SendbirdBaseMessage = BaseMessage;
-export declare type SendbirdSendableMessage = SendableMessage;
-export declare type SendbirdFileMessageCreateParams = FileMessageCreateParams;
-export declare type SendbirdFileMessageUpdateParams = FileMessageUpdateParams;
-export declare type SendbirdUserMessageCreateParams = UserMessageCreateParams;
-export declare type SendbirdUserMessageUpdateParams = UserMessageUpdateParams;
-export declare type SendbirdGroupChannelCreateParams = GroupChannelCreateParams;
-export declare type SendbirdGroupChannelUpdateParams = GroupChannelUpdateParams;
-export declare type SendbirdUserUpdateParams = UserUpdateParams;
-export declare type SendbirdUser = User;
-export declare type SendbirdRestrictedUser = RestrictedUser;
-export declare type SendbirdMember = Member;
-export declare type SendbirdGroupChannel = GroupChannel;
-export declare type SendbirdBaseChannel = BaseChannel;
-export declare type SendbirdOpenChannel = OpenChannel;
-export declare type SendbirdGroupChannelCollection = GroupChannelCollection;
-export declare type SendbirdGroupChannelListQuery = GroupChannelListQuery;
-export declare type SendbirdMessageCollection = MessageCollection;
-export declare type SendbirdPreviousMessageListQuery = PreviousMessageListQuery;
-export declare type SendbirdError = SBError;
+export type Optional<T> = T | undefined;
+export type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
+export interface UserStruct {
+    userId: string;
+}
+export type SendbirdChatSDK = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]>;
+export type SendbirdMessage = BaseMessage | FileMessage | UserMessage | AdminMessage | SendableMessage;
+export type SendbirdChannel = BaseChannel | GroupChannel | OpenChannel;
+export type SendbirdUserMessage = UserMessage;
+export type SendbirdFileMessage = FileMessage;
+export type SendbirdAdminMessage = AdminMessage;
+export type SendbirdBaseMessage = BaseMessage;
+export type SendbirdSendableMessage = SendableMessage;
+export type SendbirdFileMessageCreateParams = FileMessageCreateParams;
+export type SendbirdFileMessageUpdateParams = FileMessageUpdateParams;
+export type SendbirdUserMessageCreateParams = UserMessageCreateParams;
+export type SendbirdUserMessageUpdateParams = UserMessageUpdateParams;
+export type SendbirdGroupChannelCreateParams = GroupChannelCreateParams;
+export type SendbirdGroupChannelUpdateParams = GroupChannelUpdateParams;
+export type SendbirdUserUpdateParams = UserUpdateParams;
+export type SendbirdUser = User;
+export type SendbirdRestrictedUser = RestrictedUser;
+export type SendbirdMember = Member;
+export type SendbirdGroupChannel = GroupChannel;
+export type SendbirdBaseChannel = BaseChannel;
+export type SendbirdOpenChannel = OpenChannel;
+export type SendbirdReaction = Reaction;
+export type SendbirdEmoji = Emoji;
+export type SendbirdEmojiCategory = EmojiCategory;
+export type SendbirdEmojiContainer = EmojiContainer;
+export type SendbirdGroupChannelCollection = GroupChannelCollection;
+export type SendbirdGroupChannelListQuery = GroupChannelListQuery;
+export type SendbirdMessageCollection = MessageCollection;
+export type SendbirdPreviousMessageListQuery = PreviousMessageListQuery;
+export type SendbirdError = SBError;
 export interface SendbirdDataPayload {
     app_id: string;
     audience_type: string;

package/lib/typescript/src/ui-format/common.d.ts

@@ -1,6 +1,6 @@
 import type { Locale } from 'date-fns';
-declare type TruncateMode = 'head' | 'mid' | 'tail';
-declare type TruncateOption = {
+type TruncateMode = 'head' | 'mid' | 'tail';
+type TruncateOption = {
     mode: TruncateMode;
     maxLen: number;
     separator: string;
@@ -16,14 +16,15 @@ declare type TruncateOption = {
  * */
 export declare const truncate: (str: string, opts?: Partial<TruncateOption>) => string;
 /**
- * Badge count truncate util
+ * Count truncate util
  * If count exceed the limit, it comes in the form of "MAX+"
  *
  * @param {number} count
  * @param {number} MAX default 99
+ * @param {string} MAX_SUFFIX default +
  * @returns {string}
  * */
-export declare const truncatedBadgeCount: (count: number, MAX?: number) => string;
+export declare const truncatedCount: (count: number, MAX?: number, MAX_SUFFIX?: string) => string;
 /**
  * Messages date separator format
  *
@@ -31,7 +32,7 @@ export declare const truncatedBadgeCount: (count: number, MAX?: number) => strin
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export declare const dateSeparator: (date: Date, locale?: Locale) => string;
+export declare const getDateSeparatorFormat: (date: Date, locale?: Locale) => string;
 /**
  * Message time format
  *
@@ -39,5 +40,5 @@ export declare const dateSeparator: (date: Date, locale?: Locale) => string;
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export declare const messageTime: (date: Date, locale?: Locale) => string;
+export declare const getMessageTimeFormat: (date: Date, locale?: Locale) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-utils",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "UIKit utilities",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -46,7 +46,7 @@
     "react": "17.0.2",
     "react-native": "0.67.4",
     "react-native-builder-bob": "^0.18.0",
-    "typescript": "^4.1.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
     "@sendbird/chat": "^4.0.13",
@@ -76,5 +76,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-utils"
   },
-  "gitHead": "c778a84a632487047fe532db188b32dfa6e93a7f"
+  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
 }

package/src/hooks/index.ts

@@ -56,6 +56,17 @@ export const useIsMountedRef = () => {
   return isMounted;
 };
 
+export const useIsFirstMount = () => {
+  const isFirstMount = useRef(true);
+
+  if (isFirstMount.current) {
+    isFirstMount.current = false;
+    return true;
+  }
+
+  return isFirstMount.current;
+};
+
 export const useFreshCallback = <T extends (...args: any[]) => any>(callback: T): T => {
   const ref = useRef<T>(callback);
   ref.current = callback;

package/src/index.ts

@@ -15,8 +15,11 @@ export {
   normalizeFileName,
   emailRegex,
   phoneRegex,
+  replaceWithRegex,
+  createMentionTemplateRegex,
 } from './shared/regex';
 export { BufferedRequest } from './shared/bufferedRequest';
+export { default as replace } from './shared/replace';
 
 export * from './hooks';
 export * from './ui-format/groupChannel';
@@ -43,6 +46,7 @@ export const SBErrorMessage = {
 };
 
 export type {
+  UserStruct,
   FilterByValueType,
   UnionToIntersection,
   OmittedValues,
@@ -80,4 +84,8 @@ export type {
   SendbirdFileMessageUpdateParams,
   SendbirdUserUpdateParams,
   SendbirdRestrictedUser,
+  SendbirdReaction,
+  SendbirdEmojiContainer,
+  SendbirdEmoji,
+  SendbirdEmojiCategory,
 } from './types';

package/src/sendbird/channel.ts

@@ -46,3 +46,7 @@ export function getGroupChannels(channels: SendbirdChannel[]): SendbirdGroupChan
 export function getOpenChannels(channels: SendbirdChannel[]): SendbirdOpenChannel[] {
   return channels.filter((c): c is SendbirdOpenChannel => c.isOpenChannel());
 }
+
+export function getChannelUniqId(channel: SendbirdChannel) {
+  return channel.url;
+}

package/src/sendbird/message.ts

@@ -1,11 +1,13 @@
 import type {
+  SendbirdBaseChannel,
   SendbirdBaseMessage,
   SendbirdDataPayload,
   SendbirdFileMessage,
   SendbirdMessage,
+  SendbirdReaction,
   SendbirdSendableMessage,
 } from '../types';
-import { messageTime } from '../ui-format/common';
+import { getMessageTimeFormat } from '../ui-format/common';
 
 export function isNewMessage(msg: SendbirdMessage, currentUserId?: string) {
   const myMessage = isMyMessage(msg, currentUserId);
@@ -67,7 +69,7 @@ export function calcMessageGrouping(
     if (!prev) return false;
     if (curr.isAdminMessage()) return false;
     if (!hasSameSender(curr, prev)) return false;
-    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(prev.createdAt))) return false;
+    if (getMessageTimeFormat(new Date(curr.createdAt)) !== getMessageTimeFormat(new Date(prev.createdAt))) return false;
     return true;
   };
 
@@ -76,7 +78,7 @@ export function calcMessageGrouping(
     if (!next) return false;
     if (curr.isAdminMessage()) return false;
     if (!hasSameSender(curr, next)) return false;
-    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(next.createdAt))) return false;
+    if (getMessageTimeFormat(new Date(curr.createdAt)) !== getMessageTimeFormat(new Date(next.createdAt))) return false;
     return true;
   };
 
@@ -110,3 +112,11 @@ export function isSendbirdNotification(dataPayload?: {
 export function parseSendbirdNotification(dataPayload: RawSendbirdDataPayload): SendbirdDataPayload {
   return typeof dataPayload.sendbird === 'string' ? JSON.parse(dataPayload.sendbird) : dataPayload.sendbird;
 }
+
+export function shouldRenderReaction(channel: SendbirdBaseChannel, reactionEnabled: boolean) {
+  return channel.isGroupChannel() && !channel.isBroadcast && !channel.isSuper && reactionEnabled;
+}
+
+export function getReactionCount(reaction: SendbirdReaction) {
+  return reaction.userIds.length;
+}

package/src/sendbird/user.ts

@@ -1,5 +1,7 @@
 import type { Role } from '@sendbird/chat';
 
+import type { UserStruct } from '../types';
+
 export function ifOperator<T>(role: Role, then: T): T | undefined;
 export function ifOperator<T, V>(role: Role, then: T, or: V): T | V;
 export function ifOperator(role: Role, then: unknown, or?: unknown) {
@@ -13,3 +15,7 @@ export function ifMuted(muted: boolean, then: unknown, or?: unknown) {
   if (muted) return then;
   return or;
 }
+
+export function getUserUniqId<T extends UserStruct>(user: T) {
+  return user.userId;
+}

package/src/shared/regex.ts

@@ -9,6 +9,8 @@ export const phoneRegex = /[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}/
 export const emailRegex = /\S+@\S+\.\S+/;
 export const newLineRegex = /\r\n|\r|\n/g;
 
+export const createMentionTemplateRegex = (trigger: string) => new RegExp(`(${trigger}[{])(.*?)([}])`, 'g');
+
 // const cases = [
 //   {
 //     type: 'urlStrict',
@@ -28,6 +30,39 @@ export const newLineRegex = /\r\n|\r|\n/g;
 //   },
 // ];
 
+export const replaceWithRegex = <T>(
+  text: string,
+  regex: RegExp,
+  replacer: (params: {
+    match: string;
+    groups: string[];
+    matchIndex: number | undefined;
+    index: number;
+    keyPrefix: string;
+  }) => T,
+  keyPrefix: string,
+) => {
+  const matches = [...text.matchAll(regex)];
+  const founds = matches.map((value) => {
+    const text = value[0];
+    const start = value.index ?? 0;
+    const end = start + text.length;
+    return { text, start, end, groups: value, matchIndex: value.index };
+  });
+
+  const items: Array<T | string> = [text];
+  let cursor = 0;
+  founds.forEach(({ text, start, end, groups, matchIndex }, index) => {
+    const restText = items.pop() as string;
+    const head = restText.slice(0, start - cursor);
+    const mid = replacer({ match: text, groups, matchIndex, index, keyPrefix });
+    const tail = restText.slice(end - cursor);
+    items.push(head, mid, tail);
+    cursor = end;
+  });
+  return items;
+};
+
 export const replaceUrlAsComponents = <T>(originText: string, replacer: (url: string) => T, strict?: boolean) => {
   const matches = [...originText.matchAll(strict ? urlRegexStrict : urlRegexRough)];
   const founds = matches.map((value) => {

package/src/shared/replace.ts

@@ -0,0 +1,5 @@
+const replace = (original: string, start: number, end: number, str: string) => {
+  return original.slice(0, start) + str + original.slice(end);
+};
+
+export default replace;

package/src/types.ts

@@ -4,7 +4,16 @@
 import type React from 'react';
 
 import type SendbirdChat from '@sendbird/chat';
-import type { BaseChannel, RestrictedUser, SendbirdError as SBError, User, UserUpdateParams } from '@sendbird/chat';
+import type {
+  BaseChannel,
+  Emoji,
+  EmojiCategory,
+  EmojiContainer,
+  RestrictedUser,
+  SendbirdError as SBError,
+  User,
+  UserUpdateParams,
+} from '@sendbird/chat';
 import type {
   GroupChannel,
   GroupChannelCollection,
@@ -23,14 +32,13 @@ import type {
   FileMessageCreateParams,
   FileMessageUpdateParams,
   PreviousMessageListQuery,
+  Reaction,
   UserMessage,
   UserMessageCreateParams,
   UserMessageUpdateParams,
 } from '@sendbird/chat/message';
 import type { OpenChannel, OpenChannelModule } from '@sendbird/chat/openChannel';
 
-import './';
-
 export type FilterByValueType<T extends object, Type> = {
   [K in keyof T as T[K] extends Type ? K : never]: T[K];
 };
@@ -57,6 +65,10 @@ export type Optional<T> = T | undefined;
 
 export type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
 
+export interface UserStruct {
+  userId: string;
+}
+
 export type SendbirdChatSDK = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]>;
 export type SendbirdMessage = BaseMessage | FileMessage | UserMessage | AdminMessage | SendableMessage;
 export type SendbirdChannel = BaseChannel | GroupChannel | OpenChannel;
@@ -79,6 +91,11 @@ export type SendbirdGroupChannel = GroupChannel;
 export type SendbirdBaseChannel = BaseChannel;
 export type SendbirdOpenChannel = OpenChannel;
 
+export type SendbirdReaction = Reaction;
+export type SendbirdEmoji = Emoji;
+export type SendbirdEmojiCategory = EmojiCategory;
+export type SendbirdEmojiContainer = EmojiContainer;
+
 export type SendbirdGroupChannelCollection = GroupChannelCollection;
 export type SendbirdGroupChannelListQuery = GroupChannelListQuery;
 export type SendbirdMessageCollection = MessageCollection;

package/src/ui-format/common.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import format from 'date-fns/format';
+import { format, isThisYear } from 'date-fns';
 
 type TruncateMode = 'head' | 'mid' | 'tail';
 type TruncateOption = { mode: TruncateMode; maxLen: number; separator: string };
@@ -38,15 +38,16 @@ export const truncate = (str: string, opts: Partial<TruncateOption> = defaultOpt
 };
 
 /**
- * Badge count truncate util
+ * Count truncate util
  * If count exceed the limit, it comes in the form of "MAX+"
  *
  * @param {number} count
  * @param {number} MAX default 99
+ * @param {string} MAX_SUFFIX default +
  * @returns {string}
  * */
-export const truncatedBadgeCount = (count: number, MAX = 99) => {
-  if (count >= MAX) return `${MAX}+`;
+export const truncatedCount = (count: number, MAX = 99, MAX_SUFFIX = '+') => {
+  if (count >= MAX) return `${MAX}${MAX_SUFFIX}`;
   return `${count}`;
 };
 
@@ -57,8 +58,9 @@ export const truncatedBadgeCount = (count: number, MAX = 99) => {
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export const dateSeparator = (date: Date, locale?: Locale): string => {
-  return format(date, 'E, LLL dd', { locale });
+export const getDateSeparatorFormat = (date: Date, locale?: Locale): string => {
+  if (isThisYear(date)) return format(date, 'MMM dd, yyyy', { locale });
+  return format(date, 'E, MMM dd', { locale });
 };
 
 /**
@@ -68,6 +70,6 @@ export const dateSeparator = (date: Date, locale?: Locale): string => {
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export const messageTime = (date: Date, locale?: Locale): string => {
+export const getMessageTimeFormat = (date: Date, locale?: Locale): string => {
   return format(date, 'p', { locale });
 };

package/src/ui-format/groupChannel.ts

@@ -1,7 +1,5 @@
 import type { Locale } from 'date-fns';
-import format from 'date-fns/format';
-import isToday from 'date-fns/isToday';
-import isYesterday from 'date-fns/isYesterday';
+import { format, isThisYear, isToday, isYesterday } from 'date-fns';
 
 import type { SendbirdGroupChannel } from '../types';
 import { truncate } from './common';
@@ -23,9 +21,12 @@ export const getGroupChannelTitle = (
 
 export const getGroupChannelPreviewTime = (channel: SendbirdGroupChannel, locale?: Locale) => {
   const timestamp = channel.lastMessage?.createdAt || channel.joinedAt * 1000 || channel.createdAt;
+
   if (isToday(timestamp)) return format(timestamp, 'p', { locale });
   if (isYesterday(timestamp)) return 'Yesterday';
-  return format(timestamp, 'MMM dd', { locale });
+  if (isThisYear(timestamp)) return format(timestamp, 'MMM dd', { locale });
+
+  return format(timestamp, 'yyyy/MM/dd', { locale });
 };
 
 export const getGroupChannelLastMessage = (channel: SendbirdGroupChannel, EMPTY_MESSAGE = '', MAX_LEN = 15) => {