@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/src/ui/Chat/Members/ChatMembersPanel.tsx

@@ -1,112 +1,112 @@
-import { Button, List, Space, Tooltip } from 'antd';
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { useCallback, useMemo } from 'react';
-import { Icon } from '../../common/Icon';
-import { Avatar } from '../../common/Avatar';
-import { useChatContext } from '../ChatContext';
-
-interface ChatMemberListItemProps {
-  id: string;
-  chatId: string;
-}
-
-function useAdd(chatId: string, accountId: string, withHistory: boolean) {
-  const [add, state] = chatifyApi.useAddChatMemberMutation();
-  const onAdd = useCallback(
-    () => add({ chatId, accountId, withHistory }),
-    [add, chatId, accountId, withHistory],
-  );
-  return [onAdd, state] as const;
-}
-
-function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
-  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
-  const onRemove = useCallback(
-    () => remove({ chatId, accountId, deleteHistory }),
-    [remove, chatId, accountId, deleteHistory],
-  );
-  return [onRemove, state] as const;
-}
-
-const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
-  const { chatId } = props;
-  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
-  const account = accounts!.find((x) => x.id === props.id)!;
-  const isMember = chat!.members.some((x) => x.id === account.id);
-  const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
-  const [onAddWithHistory] = useAdd(chatId, account.id, true);
-  const [onRemoveKeepHistory] = useRemove(chatId, account.id, false);
-  const [onRemoveDeleteHistory] = useRemove(chatId, account.id, true);
-
-  return (
-    <List.Item
-      className="wxchtf-chat-members-list-item"
-      actions={
-        isMember
-          ? [
-              <Tooltip key="remove" title="Remove (keep history)">
-                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove-member" />} />
-              </Tooltip>,
-              <Tooltip key="remove_delete_history" title="Remove (delete history)">
-                <Button
-                  onClick={onRemoveDeleteHistory}
-                  type="link"
-                  icon={<Icon type="remove-member-delete-history" />}
-                />
-              </Tooltip>,
-            ]
-          : [
-              <Tooltip key="add_no_history" title="Add (no history)">
-                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add-member" />} />
-              </Tooltip>,
-              <Tooltip key="add" title="Add (share history)">
-                <Button
-                  onClick={onAddWithHistory}
-                  type="link"
-                  icon={<Icon type="add-member-with-history" />}
-                />
-              </Tooltip>,
-            ]
-      }
-    >
-      <Space>
-        <Avatar account={account} />
-        <span>{account.name}</span>
-      </Space>
-    </List.Item>
-  );
-});
-
-export const ChatMembersPanel = customize('ChatMembersPanel', () => {
-  const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
-  const ordered = useMemo(
-    () =>
-      accounts
-        ?.slice()
-        .sort(
-          (a, b) =>
-            (chat?.members.some((m) => m.id === a.id) ? -100 : 0) -
-            (chat?.members.some((m) => m.id === b.id) ? -100 : 0) +
-            a.name.localeCompare(b.name),
-        ),
-    [accounts, chat],
-  );
-
-  if (!chat?.members || !accounts) {
-    return null;
-  }
-
-  return (
-    <div className="wxchtf-chat-members-panel">
-      <List
-        className="wxchtf-chat-members-list"
-        dataSource={ordered}
-        renderItem={(item) => <ChatMemberListItem id={item.id} chatId={id} />}
-      />
-    </div>
-  );
-});
+import { Button, List, Space, Tooltip } from 'antd';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useCallback, useMemo } from 'react';
+import { Icon } from '../../common/Icon';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+interface ChatMemberListItemProps {
+  id: string;
+  chatId: string;
+}
+
+function useAdd(chatId: string, accountId: string, withHistory: boolean) {
+  const [add, state] = chatifyApi.useAddChatMemberMutation();
+  const onAdd = useCallback(
+    () => add({ chatId, accountId, withHistory }),
+    [add, chatId, accountId, withHistory],
+  );
+  return [onAdd, state] as const;
+}
+
+function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
+  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
+  const onRemove = useCallback(
+    () => remove({ chatId, accountId, deleteHistory }),
+    [remove, chatId, accountId, deleteHistory],
+  );
+  return [onRemove, state] as const;
+}
+
+const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
+  const { chatId } = props;
+  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const account = accounts!.find((x) => x.id === props.id)!;
+  const isMember = chat!.members.some((x) => x.id === account.id);
+  const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
+  const [onAddWithHistory] = useAdd(chatId, account.id, true);
+  const [onRemoveKeepHistory] = useRemove(chatId, account.id, false);
+  const [onRemoveDeleteHistory] = useRemove(chatId, account.id, true);
+
+  return (
+    <List.Item
+      className="wxchtf-chat-members-list-item"
+      actions={
+        isMember
+          ? [
+              <Tooltip key="remove" title="Remove (keep history)">
+                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove-member" />} />
+              </Tooltip>,
+              <Tooltip key="remove_delete_history" title="Remove (delete history)">
+                <Button
+                  onClick={onRemoveDeleteHistory}
+                  type="link"
+                  icon={<Icon type="remove-member-delete-history" />}
+                />
+              </Tooltip>,
+            ]
+          : [
+              <Tooltip key="add_no_history" title="Add (no history)">
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add-member" />} />
+              </Tooltip>,
+              <Tooltip key="add" title="Add (share history)">
+                <Button
+                  onClick={onAddWithHistory}
+                  type="link"
+                  icon={<Icon type="add-member-with-history" />}
+                />
+              </Tooltip>,
+            ]
+      }
+    >
+      <Space>
+        <Avatar account={account} />
+        <span>{account.name}</span>
+      </Space>
+    </List.Item>
+  );
+});
+
+export const ChatMembersPanel = customize('ChatMembersPanel', () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const ordered = useMemo(
+    () =>
+      accounts
+        ?.slice()
+        .sort(
+          (a, b) =>
+            (chat?.members.some((m) => m.id === a.id) ? -100 : 0) -
+            (chat?.members.some((m) => m.id === b.id) ? -100 : 0) +
+            a.name.localeCompare(b.name),
+        ),
+    [accounts, chat],
+  );
+
+  if (!chat?.members || !accounts) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat-members-panel">
+      <List
+        className="wxchtf-chat-members-list"
+        dataSource={ordered}
+        renderItem={(item) => <ChatMemberListItem id={item.id} chatId={id} />}
+      />
+    </div>
+  );
+});

package/src/ui/Chat/Members/ChatMembersPreview.tsx

@@ -1,25 +1,25 @@
-import { chatifyApi } from '../../../core';
-import { Tooltip } from 'antd';
-import { customize } from '../../customize';
-import { Avatar as AntdAvatar } from 'antd';
-import { Avatar } from '../../common/Avatar';
-import { useChatContext } from '../ChatContext';
-
-export const ChatMembersPreview = customize('ChatMembersPreview', () => {
-  const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <AntdAvatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar account={x} />
-        </Tooltip>
-      ))}
-    </AntdAvatar.Group>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { Tooltip } from 'antd';
+import { customize } from '../../customize';
+import { Avatar as AntdAvatar } from 'antd';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersPreview = customize('ChatMembersPreview', () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <AntdAvatar.Group max={{ count: 5 }}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar account={x} />
+        </Tooltip>
+      ))}
+    </AntdAvatar.Group>
+  );
+});

package/src/ui/Chat/Members/index.ts

@@ -1,13 +1,13 @@
-import { ChatMembersButton } from './ChatMembersButton';
-import { ChatMembersPanel } from './ChatMembersPanel';
-import { ChatMembersPreview } from './ChatMembersPreview';
-
-export * from './ChatMembersButton';
-export * from './ChatMembersPanel';
-export * from './ChatMembersPreview';
-
-export interface ChatMembersCustomizeValue {
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
-  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
-}
+import { ChatMembersButton } from './ChatMembersButton';
+import { ChatMembersPanel } from './ChatMembersPanel';
+import { ChatMembersPreview } from './ChatMembersPreview';
+
+export * from './ChatMembersButton';
+export * from './ChatMembersPanel';
+export * from './ChatMembersPreview';
+
+export interface ChatMembersCustomizeValue {
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
+  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
+}

package/src/ui/Chat/index.ts

@@ -1,6 +1,6 @@
-export * from './Members';
-export * from './ChatView';
-export * from './ChatContext';
-export * from './ChatEditableHeaderName';
-export * from './ChatHeaderActions';
-export * from './ChatPanel';
+export * from './Members';
+export * from './ChatView';
+export * from './ChatContext';
+export * from './ChatEditableHeaderName';
+export * from './ChatHeaderActions';
+export * from './ChatPanel';

package/src/ui/ChatGroup/ChatGroupContext.tsx

@@ -1,50 +1,50 @@
-import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
-
-export interface ChatGroupContext {
-  view: 'chat' | 'new-chat' | null;
-  chatId: string | null;
-  showMembers: boolean;
-
-  none(): void;
-  openChat(chatId: string): void;
-  toggleNewChat(): void;
-  toggleMembers(): void;
-}
-
-const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
-
-export function useChatGroupContext() {
-  return useContext(ChatGroupReactContext);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export function ChatGroupContext(props: PropsWithChildren<{}>) {
-  const { children } = props;
-  const [state, setState] = useState<Pick<ChatGroupContext, 'view' | 'chatId' | 'showMembers'>>({
-    chatId: null,
-    view: null,
-    showMembers: false,
-  });
-
-  const value = useMemo<ChatGroupContext>(
-    () => ({
-      ...state,
-      openChat: (chatId: string) => setState((prev) => ({ ...prev, view: 'chat', chatId })),
-      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
-      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
-      toggleNewChat: () =>
-        setState((prev) => {
-          if (prev.view === 'new-chat' && !prev.chatId) {
-            return { ...prev, view: null };
-          } else if (prev.view === 'new-chat' && prev.chatId) {
-            return { ...prev, view: 'chat' };
-          } else {
-            return { ...prev, view: 'new-chat' };
-          }
-        }),
-    }),
-    [state],
-  );
-
-  return <ChatGroupReactContext.Provider value={value}>{children}</ChatGroupReactContext.Provider>;
-}
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+export interface ChatGroupContext {
+  view: 'chat' | 'new-chat' | null;
+  chatId: string | null;
+  showMembers: boolean;
+
+  none(): void;
+  openChat(chatId: string): void;
+  toggleNewChat(): void;
+  toggleMembers(): void;
+}
+
+const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
+
+export function useChatGroupContext() {
+  return useContext(ChatGroupReactContext);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function ChatGroupContext(props: PropsWithChildren<{}>) {
+  const { children } = props;
+  const [state, setState] = useState<Pick<ChatGroupContext, 'view' | 'chatId' | 'showMembers'>>({
+    chatId: null,
+    view: null,
+    showMembers: false,
+  });
+
+  const value = useMemo<ChatGroupContext>(
+    () => ({
+      ...state,
+      openChat: (chatId: string) => setState((prev) => ({ ...prev, view: 'chat', chatId })),
+      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
+      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
+      toggleNewChat: () =>
+        setState((prev) => {
+          if (prev.view === 'new-chat' && !prev.chatId) {
+            return { ...prev, view: null };
+          } else if (prev.view === 'new-chat' && prev.chatId) {
+            return { ...prev, view: 'chat' };
+          } else {
+            return { ...prev, view: 'new-chat' };
+          }
+        }),
+    }),
+    [state],
+  );
+
+  return <ChatGroupReactContext.Provider value={value}>{children}</ChatGroupReactContext.Provider>;
+}

package/src/ui/ChatGroup/ChatGroupPanel.tsx

@@ -1,73 +1,73 @@
-import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
-import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
-import { CreateChatPanelCustomizeValue } from './Create';
-import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
-import { ChatListCustomizeValue } from './List';
-import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
-import { chatifyApi } from '../../core';
-import { CustomizeContext } from '../customize';
-import { ChatViewCustomizeValue } from '../Chat';
-
-export interface ChatGroupCustomizeValue
-  extends ChatViewCustomizeValue,
-    CreateChatPanelCustomizeValue,
-    ChatListCustomizeValue,
-    ChatGroupLayoutCustomizeValue {}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatGroupCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  const { data: chats } = chatifyApi.useGetChatListQuery();
-  const { openChat, none, chatId } = useChatGroupContext();
-  const openFirstChatRef = useRef(false);
-
-  useEffect(() => {
-    if (chats && !chats.some((x) => x.id === chatId)) {
-      chats.length ? openChat(chats[0].id) : none();
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats, chatId]);
-
-  useEffect(() => {
-    if (chats && !openFirstChatRef.current) {
-      openFirstChatRef.current = true;
-      chats.length && openChat(chats[0].id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats]);
-
-  return (
-    <div className={className + ' wxchtf-chatify wxchtf-chat-group'} style={style}>
-      <ChatGroupHeader />
-      <ChatGroupBody />
-      <ChatGroupFooter />
-    </div>
-  );
-}
-
-const DEFAULT_CUSTOMIZE: ChatGroupCustomizeValue = {
-  ChatGroupHeader: null,
-  ChatGroupFooter: null,
-};
-
-export const ChatGroupPanel: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
-  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeContext.Provider value={customizeValue as any}>
-        <ChatGroupContext>
-          <Content {...props} />
-        </ChatGroupContext>
-      </CustomizeContext.Provider>
-    </LocalizerContext.Provider>
-  );
-};
+import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CreateChatPanelCustomizeValue } from './Create';
+import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
+import { ChatListPanelCustomizeValue } from './List';
+import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
+import { chatifyApi } from '../../core';
+import { CustomizeContext } from '../customize';
+import { ChatViewCustomizeValue } from '../Chat';
+
+export interface ChatGroupCustomizeValue
+  extends ChatViewCustomizeValue,
+    CreateChatPanelCustomizeValue,
+    ChatListPanelCustomizeValue,
+    ChatGroupLayoutCustomizeValue {}
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatGroupCustomizeValue;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  const { openChat, none, chatId } = useChatGroupContext();
+  const openFirstChatRef = useRef(false);
+
+  useEffect(() => {
+    if (chats && !chats.some((x) => x.id === chatId)) {
+      chats.length ? openChat(chats[0].id) : none();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats, chatId]);
+
+  useEffect(() => {
+    if (chats && !openFirstChatRef.current) {
+      openFirstChatRef.current = true;
+      chats.length && openChat(chats[0].id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats]);
+
+  return (
+    <div className={className + ' wxchtf-chatify wxchtf-chat-group'} style={style}>
+      <ChatGroupHeader />
+      <ChatGroupBody />
+      <ChatGroupFooter />
+    </div>
+  );
+}
+
+const DEFAULT_CUSTOMIZE: ChatGroupCustomizeValue = {
+  ChatGroupHeader: null,
+  ChatGroupFooter: null,
+};
+
+export const ChatGroupPanel: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
+  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <CustomizeContext.Provider value={customizeValue as any}>
+        <ChatGroupContext>
+          <Content {...props} />
+        </ChatGroupContext>
+      </CustomizeContext.Provider>
+    </LocalizerContext.Provider>
+  );
+};

package/src/ui/ChatGroup/Create/CreateChatButton.tsx

@@ -1,15 +1,15 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { useChatGroupContext } from '../ChatGroupContext';
-
-export const CreateChatButton = customize('CreateChatButton', () => {
-  const { toggleNewChat } = useChatGroupContext();
-
-  return (
-    <span className="wxchtf-add-btn-wrapper">
-      <Button className="wxchtf-add-btn" onClick={toggleNewChat} icon="+">
-        Add chat
-      </Button>
-    </span>
-  );
-});
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+export const CreateChatButton = customize('CreateChatButton', () => {
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <span className="wxchtf-add-btn-wrapper">
+      <Button className="wxchtf-add-btn" onClick={toggleNewChat} icon="+">
+        Add chat
+      </Button>
+    </span>
+  );
+});