@sendbird/uikit-utils 2.1.0 → 2.3.0

package/src/index.ts

@@ -1,7 +1,6 @@
 export { Logger } from './shared/logger';
 export { default as arrayToMap, arrayToMapWithGetter } from './shared/arrayToMap';
 export { createPubSub } from './shared/pubsub';
-export { default as conditionChaining } from './shared/conditionChaining';
 export {
   urlRegexStrict,
   urlRegexRough,
@@ -15,10 +14,15 @@ export {
   normalizeFileName,
   emailRegex,
   phoneRegex,
+  replaceWithRegex,
+  createMentionTemplateRegex,
 } from './shared/regex';
 export { BufferedRequest } from './shared/bufferedRequest';
 
+export * from './shared';
+
 export * from './hooks';
+export * from './hooks/react-native';
 export * from './ui-format/groupChannel';
 export * from './ui-format/common';
 export * from './sendbird/channel';
@@ -43,6 +47,7 @@ export const SBErrorMessage = {
 };
 
 export type {
+  UserStruct,
   FilterByValueType,
   UnionToIntersection,
   OmittedValues,
@@ -80,4 +85,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/index.ts

@@ -0,0 +1,56 @@
+import { getFileExtension, getFileType } from './regex';
+
+/**
+ * Converts a given string to a hashed string.
+ * */
+export function hash(str: string) {
+  return String(Math.abs(str.split('').reduce((a, c) => ((a << 5) - a + c.charCodeAt(0)) | 0, 0)));
+}
+
+/**
+ * Replace a specific range of text in the string with another text.
+ * */
+export function replace(str: string, start: number, end: number, text: string) {
+  return str.slice(0, start) + text + str.slice(end);
+}
+
+/**
+ * Returns the value corresponding to the first true index of a given condition array.
+ * */
+export function conditionChaining<T, V>(conditions: T[], values: V[]) {
+  const idx = conditions.findIndex((state) => Boolean(state));
+  return idx > -1 ? values[idx] : values[values.length - 1];
+}
+
+/**
+ * Calculates the downscale size.
+ * */
+type Size = { width: number; height: number };
+export function getDownscaleSize(origin: Size, resizing: Partial<Size>) {
+  let ratio;
+
+  const maxWidth = resizing.width || origin.width,
+    maxHeight = resizing.height || origin.height;
+
+  if (origin.width <= maxWidth && origin.height <= maxHeight) {
+    ratio = 1;
+  } else if (origin.width > maxWidth && origin.height <= maxHeight) {
+    ratio = maxWidth / origin.width;
+  } else if (origin.width <= maxWidth && origin.height > maxHeight) {
+    ratio = maxHeight / origin.height;
+  } else {
+    ratio = Math.max(maxWidth / origin.width, maxHeight / origin.height);
+  }
+
+  return { width: origin.width * ratio, height: origin.height * ratio };
+}
+
+export function isImage(filePath: string, mimeType?: string) {
+  const type = getFileType(mimeType || getFileExtension(filePath));
+  return type === 'image';
+}
+
+export function shouldCompressImage(filePath: string, compressionEnabled = true) {
+  const extension = getFileExtension(filePath);
+  return Boolean(extension.match(/jpg|jpeg|png/i) && compressionEnabled);
+}

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/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) => {

package/lib/commonjs/shared/conditionChaining.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-const conditionChaining = (conditions, values) => {
-  const idx = conditions.findIndex(state => Boolean(state));
-  return idx > -1 ? values[idx] : values[values.length - 1];
-};
-
-var _default = conditionChaining;
-exports.default = _default;
-//# sourceMappingURL=conditionChaining.js.map

package/lib/commonjs/shared/conditionChaining.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["conditionChaining","conditions","values","idx","findIndex","state","Boolean","length"],"sources":["conditionChaining.ts"],"sourcesContent":["const conditionChaining = <T, V>(conditions: T[], values: V[]) => {\n  const idx = conditions.findIndex((state) => Boolean(state));\n  return idx > -1 ? values[idx] : values[values.length - 1];\n};\n\nexport default conditionChaining;\n"],"mappings":";;;;;;;AAAA,MAAMA,iBAAiB,GAAG,CAAOC,UAAP,EAAwBC,MAAxB,KAAwC;EAChE,MAAMC,GAAG,GAAGF,UAAU,CAACG,SAAX,CAAsBC,KAAD,IAAWC,OAAO,CAACD,KAAD,CAAvC,CAAZ;EACA,OAAOF,GAAG,GAAG,CAAC,CAAP,GAAWD,MAAM,CAACC,GAAD,CAAjB,GAAyBD,MAAM,CAACA,MAAM,CAACK,MAAP,GAAgB,CAAjB,CAAtC;AACD,CAHD;;eAKeP,iB"}

package/lib/module/shared/conditionChaining.js

@@ -1,7 +0,0 @@
-const conditionChaining = (conditions, values) => {
-  const idx = conditions.findIndex(state => Boolean(state));
-  return idx > -1 ? values[idx] : values[values.length - 1];
-};
-
-export default conditionChaining;
-//# sourceMappingURL=conditionChaining.js.map

package/lib/module/shared/conditionChaining.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["conditionChaining","conditions","values","idx","findIndex","state","Boolean","length"],"sources":["conditionChaining.ts"],"sourcesContent":["const conditionChaining = <T, V>(conditions: T[], values: V[]) => {\n  const idx = conditions.findIndex((state) => Boolean(state));\n  return idx > -1 ? values[idx] : values[values.length - 1];\n};\n\nexport default conditionChaining;\n"],"mappings":"AAAA,MAAMA,iBAAiB,GAAG,CAAOC,UAAP,EAAwBC,MAAxB,KAAwC;EAChE,MAAMC,GAAG,GAAGF,UAAU,CAACG,SAAX,CAAsBC,KAAD,IAAWC,OAAO,CAACD,KAAD,CAAvC,CAAZ;EACA,OAAOF,GAAG,GAAG,CAAC,CAAP,GAAWD,MAAM,CAACC,GAAD,CAAjB,GAAyBD,MAAM,CAACA,MAAM,CAACK,MAAP,GAAgB,CAAjB,CAAtC;AACD,CAHD;;AAKA,eAAeP,iBAAf"}

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

@@ -1,2 +0,0 @@
-declare const conditionChaining: <T, V>(conditions: T[], values: V[]) => V;
-export default conditionChaining;

package/src/shared/conditionChaining.ts

@@ -1,6 +0,0 @@
-const conditionChaining = <T, V>(conditions: T[], values: V[]) => {
-  const idx = conditions.findIndex((state) => Boolean(state));
-  return idx > -1 ? values[idx] : values[values.length - 1];
-};
-
-export default conditionChaining;