@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/ui/Message/index.ts

@@ -1,6 +1,6 @@
-export * from './MessageAuthor';
-export * from './MessageBox';
-export * from './MessageContent';
-export * from './MessageInfoBox';
-export * from './MessageRow';
-export * from './MessageText';
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';

package/src/ui/MessageReadObserver.tsx

@@ -1,45 +1,45 @@
-import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelect } from '../core';
-import { customize } from './customize';
-import { MessageBoxProps } from './Message/MessageBox';
-
-export interface MessageReadObserverProps extends MessageBoxProps {
-  messageRef: RefObject<HTMLDivElement | null>;
-}
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
-  const { message, messageRef } = props;
-  const dispatch = useDispatch();
-  const isRead = useSelect((x) => {
-    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
-    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
-  }, []);
-
-  const readRef = useRef(isRead);
-
-  useEffect(() => {
-    readRef.current = readRef.current || isRead;
-  }, [isRead]);
-
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting && !readRef.current) {
-          readRef.current = true;
-          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
-        }
-      }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  useEffect(() => {
-    observer.observe(messageRef.current!);
-    return () => observer.disconnect();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observer]);
-
-  return <></>;
-});
+import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelect } from '../core';
+import { customize } from './customize';
+import { MessageBoxProps } from './Message/MessageBox';
+
+export interface MessageReadObserverProps extends MessageBoxProps {
+  messageRef: RefObject<HTMLDivElement | null>;
+}
+
+export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
+  const { message, messageRef } = props;
+  const dispatch = useDispatch();
+  const isRead = useSelect((x) => {
+    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
+    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
+  }, []);
+
+  const readRef = useRef(isRead);
+
+  useEffect(() => {
+    readRef.current = readRef.current || isRead;
+  }, [isRead]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && !readRef.current) {
+          readRef.current = true;
+          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+        }
+      }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(messageRef.current!);
+    return () => observer.disconnect();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observer]);
+
+  return <></>;
+});

package/src/ui/MessageSkeleton.tsx

@@ -1,19 +1,19 @@
-import { Skeleton } from 'antd';
-
-export interface MessageSkeletonProps {
-  count?: number;
-}
-
-export function 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';
+
+export interface MessageSkeletonProps {
+  count?: number;
+}
+
+export function 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/Next.tsx

@@ -1,48 +1,48 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFetchNextMutation } from '../core';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export interface NextProps {
-  chatId: string;
-}
-
-export function Next(props: NextProps) {
-  const { chatId } = props;
-  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
-  const [intersecting, setIntersecting] = useState(false);
-  const ref = useRef<HTMLDivElement | null>(null);
-  const timerRef = useRef<NodeJS.Timer>();
-
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting) {
-          timerRef.current = setTimeout(() => setIntersecting(true), 200);
-        } else {
-          clearTimeout(timerRef.current!);
-        }
-      }),
-    [],
-  );
-
-  useEffect(() => {
-    observer.observe(ref.current!);
-    return () => observer.disconnect();
-  }, [observer]);
-
-  useEffect(() => {
-    if (!intersecting) {
-      return;
-    }
-
-    fetchNext();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intersecting]);
-
-  if (isFetching || intersecting) {
-    return <MessageSkeleton count={4} />;
-  }
-
-  return <div className="wxchtf-next" ref={ref}></div>;
-}
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useFetchNextMutation } from '../core';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export interface NextProps {
+  chatId: string;
+}
+
+export function Next(props: NextProps) {
+  const { chatId } = props;
+  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
+  const [intersecting, setIntersecting] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timer>();
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          timerRef.current = setTimeout(() => setIntersecting(true), 200);
+        } else {
+          clearTimeout(timerRef.current!);
+        }
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(ref.current!);
+    return () => observer.disconnect();
+  }, [observer]);
+
+  useEffect(() => {
+    if (!intersecting) {
+      return;
+    }
+
+    fetchNext();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intersecting]);
+
+  if (isFetching || intersecting) {
+    return <MessageSkeleton count={4} />;
+  }
+
+  return <div className="wxchtf-next" ref={ref}></div>;
+}

package/src/ui/SendingMessage/SendingMessageBox.tsx

@@ -1,16 +1,16 @@
-import { File } from '../../core';
-import { customize } from '../customize';
-import { SendingMessageContent } from './SendingMessageContent';
-
-export interface SendingMessageBoxProps {
-  text: string;
-  files: File[];
-}
-
-export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
-  return (
-    <div className="wxchtf-sending-message">
-      <SendingMessageContent {...props} />
-    </div>
-  );
-});
+import { File } from '../../core';
+import { customize } from '../customize';
+import { SendingMessageContent } from './SendingMessageContent';
+
+export interface SendingMessageBoxProps {
+  text: string;
+  files: File[];
+}
+
+export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message">
+      <SendingMessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageContent.tsx

@@ -1,13 +1,13 @@
-import { customize } from '../customize';
-import { SendingMessageText } from './SendingMessageText';
-import { SendingMessageInfoBox } from './SendingMessageInfoBox';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
-  return (
-    <div className="wxchtf-sending-message-content">
-      <SendingMessageText {...props} />
-      <SendingMessageInfoBox {...props} />
-    </div>
-  );
-});
+import { customize } from '../customize';
+import { SendingMessageText } from './SendingMessageText';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message-content">
+      <SendingMessageText {...props} />
+      <SendingMessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageInfoBox.tsx

@@ -1,13 +1,13 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
-  const localizer = useLocalizer();
-
-  return (
-    <div className="wxchtf-sending-message-info-box">
-      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
-    </div>
-  );
-});
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
+  const localizer = useLocalizer();
+
+  return (
+    <div className="wxchtf-sending-message-info-box">
+      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageText.tsx

@@ -1,7 +1,7 @@
-import { customize } from '../customize';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
-  const { text } = props;
-  return <div className="wxchtf-sending-message-text">{text}</div>;
-});
+import { customize } from '../customize';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
+  const { text } = props;
+  return <div className="wxchtf-sending-message-text">{text}</div>;
+});

package/src/ui/SendingMessage/index.ts

@@ -1,4 +1,4 @@
-export * from './SendingMessageBox';
-export * from './SendingMessageContent';
-export * from './SendingMessageInfoBox';
-export * from './SendingMessageText';
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';

package/src/ui/SystemMessage/SystemMessageBox.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react';
-import { customize } from '../customize';
-import { Message } from '../../core';
-import { MessageReadObserver } from '../MessageReadObserver';
-import { SystemMessageRow } from './SystemMessageRow';
-
-export interface SystemMessageBoxProps {
-  message: Message;
-}
-
-export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  return (
-    <>
-      <MessageReadObserver messageRef={ref} {...props} />
-      <SystemMessageRow containerRef={ref} {...props} />
-    </>
-  );
-});
+import { useRef } from 'react';
+import { customize } from '../customize';
+import { Message } from '../../core';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export interface SystemMessageBoxProps {
+  message: Message;
+}
+
+export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <SystemMessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/SystemMessage/SystemMessageRow.tsx

@@ -1,43 +1,43 @@
-import { Ref } from 'react';
-import { customize } from '../customize';
-import { Localizer, useLocalizer } from '../localizer';
-import { Message } from '../../core';
-
-export interface SystemMessageRowProps {
-  message: Message;
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
-  if (text === 'chatify://chat-created') {
-    return localizer.system.chatCreated();
-  }
-
-  if (text.startsWith('chatify://member-added')) {
-    return localizer.system.memberAdded();
-  }
-
-  if (text.startsWith('chatify://member-removed')) {
-    return localizer.system.memberRemoved();
-  }
-
-  if (text.startsWith('chatify://chat-name-changed::')) {
-    const data = JSON.parse(text.substring('chatify://chat-name-changed::'.length));
-    return localizer.system.chatNameChanged(data.newName);
-  }
-
-  return text;
-}
-
-export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
-  const { message, containerRef } = props;
-  const { text, sentAt } = message;
-  const localizer = useLocalizer();
-
-  return (
-    <div ref={containerRef} className="wxchtf-system-message">
-      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
-      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
-    </div>
-  );
-});
+import { Ref } from 'react';
+import { customize } from '../customize';
+import { Localizer, useLocalizer } from '../localizer';
+import { Message } from '../../core';
+
+export interface SystemMessageRowProps {
+  message: Message;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  if (text === 'chatify://chat-created') {
+    return localizer.system.chatCreated();
+  }
+
+  if (text.startsWith('chatify://member-added')) {
+    return localizer.system.memberAdded();
+  }
+
+  if (text.startsWith('chatify://member-removed')) {
+    return localizer.system.memberRemoved();
+  }
+
+  if (text.startsWith('chatify://chat-name-changed::')) {
+    const data = JSON.parse(text.substring('chatify://chat-name-changed::'.length));
+    return localizer.system.chatNameChanged(data.newName);
+  }
+
+  return text;
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/SystemMessage/index.ts

@@ -1,2 +1,2 @@
-export * from './SystemMessageBox';
-export * from './SystemMessageRow';
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';

package/src/ui/customize.tsx

@@ -1,45 +1,45 @@
-import React, { FC, PropsWithChildren, useContext } from 'react';
-
-export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
-  Component: TComponent;
-};
-
-const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
-
-export interface CustomizeProviderValue {
-  [key: string]: React.ComponentType<any> | null;
-}
-
-export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
-  const { children, value } = props;
-  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
-}
-
-function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
-  const value = useContext(CustomizeContext);
-  return value[key] as TComponent | null | undefined;
-}
-
-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, PropsWithChildren, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
+  Component: TComponent;
+};
+
+const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
+
+export interface CustomizeProviderValue {
+  [key: string]: React.ComponentType<any> | null;
+}
+
+export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
+  const { children, value } = props;
+  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
+}
+
+function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
+  const value = useContext(CustomizeContext);
+  return value[key] as TComponent | null | undefined;
+}
+
+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 @@
-export * from './Chatify';
-export * from './Avatar';
-export * from './localizer';
-export * from './AddChatButton';
-export * from './Layout/Header';
-export * from './ChatPanel/ChatHeader';
-export * from './ChatPanel/ChatHeaderMembers';
-export * from './ChatList/ChatListItemBox';
-export * from './Message/MessageBox';
-export * from './SystemMessage/SystemMessageBox';
-export * from './Icon';
+export * from './Chatify';
+export * from './Avatar';
+export * from './localizer';
+export * from './AddChatButton';
+export * from './Layout/Header';
+export * from './ChatPanel/ChatHeader';
+export * from './ChatPanel/ChatHeaderMembers';
+export * from './ChatList/ChatListItemBox';
+export * from './Message/MessageBox';
+export * from './SystemMessage/SystemMessageBox';
+export * from './Icon';