@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

package/src/ui/common/ChatList/ChatListItemBox.tsx

@@ -1,32 +1,32 @@
-import { customize } from '../../customize';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-import { ChatListItemAvatar } from './ChatListItemAvatar';
-import { ChatListValue } from './ChatListValue';
-
-export interface ChatListItemBoxProps {
-  chat: ChatListValue;
-
-  /**
-   * If true, do not show read status.
-   */
-  noRead?: boolean;
-}
-
-export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
-  const { noRead = false } = props;
-  const { lastMessage, lastReadMessageId } = props.chat;
-  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(lastMessage.id) >= 0;
-
-  return (
-    <div className={'wxchtf-chat' + (!read && !noRead ? ' --unread' : '')}>
-      <ChatListItemAvatar {...props} />
-      <span className="wxchtf-chat-info">
-        <ChatListItemName {...props} />
-        <ChatListItemUnreadCount {...props} />
-        <ChatListItemLastMessage {...props} />
-      </span>
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListValue } from './ChatListValue';
+
+export interface ChatListItemBoxProps {
+  chat: ChatListValue;
+
+  /**
+   * If true, do not show read status.
+   */
+  noRead?: boolean;
+}
+
+export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
+  const { noRead = false } = props;
+  const { lastMessage, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(lastMessage.id) >= 0;
+
+  return (
+    <div className={'wxchtf-chat' + (!read && !noRead ? ' --unread' : '')}>
+      <ChatListItemAvatar {...props} />
+      <span className="wxchtf-chat-info">
+        <ChatListItemName {...props} />
+        <ChatListItemUnreadCount {...props} />
+        <ChatListItemLastMessage {...props} />
+      </span>
+    </div>
+  );
+});

package/src/ui/common/ChatList/ChatListItemLastMessage.tsx

@@ -1,15 +1,15 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-
-export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
-  return (
-    <div className="wxchtf-chat-last">
-      <ChatListItemLastMessageAuthor {...props} />
-      <ChatListItemLastMessageContent {...props} />
-      <ChatListItemLastMessageSentAt {...props} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+
+export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
+  return (
+    <div className="wxchtf-chat-last">
+      <ChatListItemLastMessageAuthor {...props} />
+      <ChatListItemLastMessageContent {...props} />
+      <ChatListItemLastMessageSentAt {...props} />
+    </div>
+  );
+});

package/src/ui/common/ChatList/ChatListItemLastMessageAuthor.tsx

@@ -1,15 +1,15 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageAuthor = customize(
-  'ChatListItemLastMessageAuthor',
-  (props: ChatListItemBoxProps) => {
-    const { lastMessage } = props.chat;
-
-    if (lastMessage.sentBy.id === 'chatify::system') {
-      return null;
-    }
-
-    return <div className="wxchtf-chat-last-author">{lastMessage.sentBy.name}</div>;
-  },
-);
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageAuthor = customize(
+  'ChatListItemLastMessageAuthor',
+  (props: ChatListItemBoxProps) => {
+    const { lastMessage } = props.chat;
+
+    if (lastMessage.sentBy.id === 'chatify::system') {
+      return null;
+    }
+
+    return <div className="wxchtf-chat-last-author">{lastMessage.sentBy.name}</div>;
+  },
+);

package/src/ui/common/ChatList/ChatListItemLastMessageContent.tsx

@@ -1,21 +1,21 @@
-import { useLocalizer } from '../../localizer';
-import { formatSystemMessage } from '../../Conversation/SystemMessage';
-import { FC } from 'react';
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
-  'ChatListItemLastMessageContent',
-  (props) => {
-    const { lastMessage } = props.chat;
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-message">
-        {lastMessage.sentBy.id === 'chatify::system'
-          ? lastMessage.text && formatSystemMessage(localizer, lastMessage.text)
-          : lastMessage.text}
-      </div>
-    );
-  },
-);
+import { useLocalizer } from '../../localizer';
+import { formatSystemMessage } from '../../Conversation/SystemMessage';
+import { FC } from 'react';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
+  'ChatListItemLastMessageContent',
+  (props) => {
+    const { lastMessage } = props.chat;
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-message">
+        {lastMessage.sentBy.id === 'chatify::system'
+          ? lastMessage.text && formatSystemMessage(localizer, lastMessage.text)
+          : lastMessage.text}
+      </div>
+    );
+  },
+);

package/src/ui/common/ChatList/ChatListItemLastMessageSentAt.tsx

@@ -1,22 +1,22 @@
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageSentAt = customize(
-  'ChatListItemLastMessageSentAt',
-  (props: ChatListItemBoxProps) => {
-    const {
-      chat: {
-        lastMessage: { sentAt },
-      },
-    } = props;
-
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-sent-at">
-        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
-      </div>
-    );
-  },
-);
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageSentAt = customize(
+  'ChatListItemLastMessageSentAt',
+  (props: ChatListItemBoxProps) => {
+    const {
+      chat: {
+        lastMessage: { sentAt },
+      },
+    } = props;
+
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-sent-at">
+        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
+      </div>
+    );
+  },
+);

package/src/ui/common/ChatList/ChatListItemName.tsx

@@ -1,8 +1,8 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
-  const { chat } = props;
-
-  return <div className="wxchtf-chat-name">{chat.name}</div>;
-});
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
+  const { chat } = props;
+
+  return <div className="wxchtf-chat-name">{chat.name}</div>;
+});

package/src/ui/common/ChatList/ChatListItemUnreadCount.tsx

@@ -1,12 +1,12 @@
-import { customize } from '../../customize';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
-  const { totalUnreadCount: unreadCount } = props.chat;
-
-  if (unreadCount == null || unreadCount <= 0) {
-    return null;
-  }
-
-  return <div className="wxchtf-unread-count">{unreadCount}</div>;
-});
+import { customize } from '../../customize';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
+  const { totalUnreadCount: unreadCount } = props.chat;
+
+  if (unreadCount == null || unreadCount <= 0) {
+    return null;
+  }
+
+  return <div className="wxchtf-unread-count">{unreadCount}</div>;
+});

package/src/ui/common/ChatList/ChatListValue.ts

@@ -1,9 +1,9 @@
-import { MessageBase } from '../../../core';
-
-export interface ChatListValue {
-  id: string;
-  name: string;
-  lastMessage: MessageBase;
-  totalUnreadCount?: number;
-  lastReadMessageId?: string | null;
-}
+import { MessageBase } from '../../../core';
+
+export interface ChatListValue {
+  id: string;
+  name: string;
+  lastMessage: MessageBase;
+  totalUnreadCount?: number;
+  lastReadMessageId?: string | null;
+}

package/src/ui/common/ChatList/index.ts

@@ -1,32 +1,32 @@
-import { ChatList } from './ChatList';
-import { ChatListItemAvatar } from './ChatListItemAvatar';
-import { ChatListItemBox } from './ChatListItemBox';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
-
-export * from './ChatList';
-export * from './ChatListItemAvatar';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemLastMessageSentAt';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';
-export * from './ChatListValue';
-
-export interface ChatListCustomizeValue {
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-}
+import { ChatList } from './ChatList';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListItemBox } from './ChatListItemBox';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+
+export * from './ChatList';
+export * from './ChatListItemAvatar';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemLastMessageSentAt';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';
+export * from './ChatListValue';
+
+export interface ChatListCustomizeValue {
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+}

package/src/ui/common/Icon.tsx

@@ -1,48 +1,48 @@
-import { FC } from 'react';
-import { customize } from '../customize';
-import {
-  SendOutlined,
-  PaperClipOutlined,
-  UserAddOutlined,
-  UsergroupAddOutlined,
-  UserDeleteOutlined,
-  UsergroupDeleteOutlined,
-  TeamOutlined,
-  EditOutlined,
-  CloseOutlined,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-  DeleteOutlined,
-  DownloadOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-export type IconType = keyof typeof ICONS;
-
-export interface IconProps {
-  type: IconType;
-}
-
-export const ICONS = {
-  attach: PaperClipOutlined,
-  send: SendOutlined,
-  'remove-member': UserDeleteOutlined,
-  'remove-member-delete-history': UsergroupDeleteOutlined,
-  'add-member': UserAddOutlined,
-  'add-member-with-history': UsergroupAddOutlined,
-  members: TeamOutlined,
-  edit: EditOutlined,
-  close: CloseOutlined,
-  chat: TeamOutlined,
-  watch: EyeOutlined,
-  unwatch: EyeInvisibleOutlined,
-  'delete-file': DeleteOutlined,
-  'open-file': DownloadOutlined,
-  settings: SettingOutlined,
-};
-
-export const Icon = customize<FC<IconProps>>('Icon', (props) => {
-  const { type } = props;
-  const IconComponent = ICONS[type];
-  return IconComponent ? <IconComponent /> : null;
-});
+import { FC } from 'react';
+import { customize } from '../customize';
+import {
+  SendOutlined,
+  PaperClipOutlined,
+  UserAddOutlined,
+  UsergroupAddOutlined,
+  UserDeleteOutlined,
+  UsergroupDeleteOutlined,
+  TeamOutlined,
+  EditOutlined,
+  CloseOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+
+export type IconType = keyof typeof ICONS;
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS = {
+  attach: PaperClipOutlined,
+  send: SendOutlined,
+  'remove-member': UserDeleteOutlined,
+  'remove-member-delete-history': UsergroupDeleteOutlined,
+  'add-member': UserAddOutlined,
+  'add-member-with-history': UsergroupAddOutlined,
+  members: TeamOutlined,
+  edit: EditOutlined,
+  close: CloseOutlined,
+  chat: TeamOutlined,
+  watch: EyeOutlined,
+  unwatch: EyeInvisibleOutlined,
+  'delete-file': DeleteOutlined,
+  'open-file': DownloadOutlined,
+  settings: SettingOutlined,
+};
+
+export const Icon = customize<FC<IconProps>>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/common/MessageSkeleton.tsx

@@ -1,20 +1,20 @@
-import { Skeleton } from 'antd';
-import { customize } from '../customize';
-
-export interface MessageSkeletonProps {
-  count?: number;
-}
-
-export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
-  const { count = 1 } = props;
-  return (
-    <>
-      {Array.from(Array(count)).map((_, index) => (
-        <div className="wxchtf-message-skeleton" key={index}>
-          <Skeleton.Avatar className="wxchtf-avatar" active />
-          <Skeleton.Button active className="wxchtf-content" />
-        </div>
-      ))}
-    </>
-  );
-});
+import { Skeleton } from 'antd';
+import { customize } from '../customize';
+
+export interface MessageSkeletonProps {
+  count?: number;
+}
+
+export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
+  const { count = 1 } = props;
+  return (
+    <>
+      {Array.from(Array(count)).map((_, index) => (
+        <div className="wxchtf-message-skeleton" key={index}>
+          <Skeleton.Avatar className="wxchtf-avatar" active />
+          <Skeleton.Button active className="wxchtf-content" />
+        </div>
+      ))}
+    </>
+  );
+});

package/src/ui/common/index.ts

@@ -1,14 +1,14 @@
-import { Avatar } from './Avatar';
-import { Icon } from './Icon';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export * from './Avatar';
-export * from './Icon';
-export * from './MessageSkeleton';
-export * from './ChatList';
-
-export interface CommonCustomizeValue {
-  Avatar?: typeof Avatar.Component | null;
-  Icon?: typeof Icon.Component | null;
-  MessageSkeleton?: typeof MessageSkeleton.Component | null;
-}
+import { Avatar } from './Avatar';
+import { Icon } from './Icon';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export * from './Avatar';
+export * from './Icon';
+export * from './MessageSkeleton';
+export * from './ChatList';
+
+export interface CommonCustomizeValue {
+  Avatar?: typeof Avatar.Component | null;
+  Icon?: typeof Icon.Component | null;
+  MessageSkeleton?: typeof MessageSkeleton.Component | null;
+}

package/src/ui/customize.tsx

@@ -1,51 +1,51 @@
-import React, { FC, useContext } from 'react';
-
-export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
-  Component: TComponent;
-  key: string;
-};
-
-export const CustomizeContext = React.createContext<Record<string, any>>(null!);
-
-export function useCustomizeContext<TValue>() {
-  return useContext(CustomizeContext) as TValue;
-}
-
-function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
-  const value = useContext(CustomizeContext);
-  return value ? (value[key] as TComponent | null | undefined) : undefined;
-}
-
-export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
-  const Custom = useCustom<TCustom['Component']>(custom.key);
-
-  if (Custom == null) {
-    return null;
-  }
-
-  return Custom ?? custom.Component;
-}
-
-export function customize<TComponent extends React.ComponentType<any>>(
-  key: string,
-  Component: TComponent,
-): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
-  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
-    const Custom = useCustom(key);
-
-    if (Custom === null) {
-      return null;
-    }
-
-    if (Custom) {
-      return <Custom {...props} ref={forwardRef} />;
-    }
-
-    return <Component {...props} ref={forwardRef} />;
-  });
-
-  Component.displayName = Component.displayName || key;
-  Result.displayName = 'Customizable.' + Component.displayName;
-
-  return Object.assign(Result, { key, Component }) as any;
-}
+import React, { FC, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
+  Component: TComponent;
+  key: string;
+};
+
+export const CustomizeContext = React.createContext<Record<string, any>>(null!);
+
+export function useCustomizeContext<TValue>() {
+  return useContext(CustomizeContext) as TValue;
+}
+
+function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
+  const value = useContext(CustomizeContext);
+  return value ? (value[key] as TComponent | null | undefined) : undefined;
+}
+
+export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
+  const Custom = useCustom<TCustom['Component']>(custom.key);
+
+  if (Custom == null) {
+    return null;
+  }
+
+  return Custom ?? custom.Component;
+}
+
+export function customize<TComponent extends React.ComponentType<any>>(
+  key: string,
+  Component: TComponent,
+): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
+  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
+    const Custom = useCustom(key);
+
+    if (Custom === null) {
+      return null;
+    }
+
+    if (Custom) {
+      return <Custom {...props} ref={forwardRef} />;
+    }
+
+    return <Component {...props} ref={forwardRef} />;
+  });
+
+  Component.displayName = Component.displayName || key;
+  Result.displayName = 'Customizable.' + Component.displayName;
+
+  return Object.assign(Result, { key, Component }) as any;
+}

package/src/ui/index.ts

@@ -1,11 +1,11 @@
-import '../styles/index.scss';
-
-export * from './color';
-export * from './customize';
-export * from './Chatify';
-export * from './localizer';
-export * from './Chat';
-export * from './ChatGroup';
-export * from './Conversation';
-export * from './Thread';
-export * from './common';
+import '../styles/index.scss';
+
+export * from './color';
+export * from './customize';
+export * from './Chatify';
+export * from './localizer';
+export * from './Chat';
+export * from './ChatGroup';
+export * from './Conversation';
+export * from './Thread';
+export * from './common';