@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/ui/ChatPanel/ChatHeaderName.tsx

@@ -1,67 +1,67 @@
-import { Input, Tooltip } from 'antd';
-import { useSelect, useUpdateChatNameMutation } from '../../core';
-import { ChatName } from '../ChatName';
-import { customize } from '../customize';
-import { useEffect, useState } from 'react';
-import isHotkey from 'is-hotkey';
-
-export interface ChatHeaderNameProps {
-  id: string;
-}
-
-const isEscape = isHotkey('escape');
-const isEnter = isHotkey('enter');
-
-function useUpdateChatName(id: string, value: string) {
-  const [updateChatName] = useUpdateChatNameMutation();
-  return () => updateChatName({ id, name: value });
-}
-
-export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const name = chat.name;
-  const [editNameValue, setEditNameValue] = useState('');
-  const [edit, setEdit] = useState(false);
-  const updateChatName = useUpdateChatName(id, editNameValue);
-
-  useEffect(() => {
-    if (edit) {
-      setEditNameValue(name);
-    }
-  }, [edit, name]);
-
-  if (!chat.active) {
-    return <span className="wxchtf-chat-name">{name}</span>;
-  }
-
-  if (edit) {
-    return (
-      <Input
-        value={editNameValue}
-        onChange={(e) => setEditNameValue(e.target.value)}
-        onBlur={() => setEdit(false)}
-        onKeyDown={(e) => {
-          if (isEscape(e)) {
-            setEdit(false);
-          } else if (isEnter(e)) {
-            setEdit(false);
-
-            if (editNameValue !== name) {
-              updateChatName();
-            }
-          }
-        }}
-        autoFocus
-      />
-    );
-  }
-
-  return (
-    <Tooltip title="Click to edit name...">
-      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
-        <ChatName name={name} />
-      </span>
-    </Tooltip>
-  );
-});
+import { Input, Tooltip } from 'antd';
+import { useSelect, useUpdateChatNameMutation } from '../../core';
+import { ChatName } from '../ChatName';
+import { customize } from '../customize';
+import { useEffect, useState } from 'react';
+import isHotkey from 'is-hotkey';
+
+export interface ChatHeaderNameProps {
+  id: string;
+}
+
+const isEscape = isHotkey('escape');
+const isEnter = isHotkey('enter');
+
+function useUpdateChatName(id: string, value: string) {
+  const [updateChatName] = useUpdateChatNameMutation();
+  return () => updateChatName({ id, name: value });
+}
+
+export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const name = chat.name;
+  const [editNameValue, setEditNameValue] = useState('');
+  const [edit, setEdit] = useState(false);
+  const updateChatName = useUpdateChatName(id, editNameValue);
+
+  useEffect(() => {
+    if (edit) {
+      setEditNameValue(name);
+    }
+  }, [edit, name]);
+
+  if (!chat.active) {
+    return <span className="wxchtf-chat-name">{name}</span>;
+  }
+
+  if (edit) {
+    return (
+      <Input
+        value={editNameValue}
+        onChange={(e) => setEditNameValue(e.target.value)}
+        onBlur={() => setEdit(false)}
+        onKeyDown={(e) => {
+          if (isEscape(e)) {
+            setEdit(false);
+          } else if (isEnter(e)) {
+            setEdit(false);
+
+            if (editNameValue !== name) {
+              updateChatName();
+            }
+          }
+        }}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <Tooltip title="Click to edit name...">
+      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
+        <ChatName name={name} />
+      </span>
+    </Tooltip>
+  );
+});

package/src/ui/ChatPanel/ChatMembersButton.tsx

@@ -1,21 +1,21 @@
-import { useDispatch } from '../../core';
-import { Button } from 'antd';
-import { useCallback } from 'react';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export interface ChatMembersButtonProps {
-  id: string;
-}
-
-export const ChatMembersButton = customize('ChatMembersButton', (_: ChatMembersButtonProps) => {
-  const dispatch = useDispatch();
-  const onSettingsClick = useCallback(
-    () => dispatch({ type: 'toggle_members_view', data: void 0 }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch],
-  );
-
-  return <Button onClick={onSettingsClick} type="link" icon={<Icon type="team" />} />;
-});
+import { useDispatch } from '../../core';
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export interface ChatMembersButtonProps {
+  id: string;
+}
+
+export const ChatMembersButton = customize('ChatMembersButton', (_: ChatMembersButtonProps) => {
+  const dispatch = useDispatch();
+  const onSettingsClick = useCallback(
+    () => dispatch({ type: 'toggle_members_view', data: void 0 }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return <Button onClick={onSettingsClick} type="link" icon={<Icon type="team" />} />;
+});

package/src/ui/ChatPanel/ChatMembersPanel.tsx

@@ -1,117 +1,117 @@
-import { Button, List, Space, Tooltip } from 'antd';
-import {
-  useAddMemberMutation,
-  useGetAccountsQuery,
-  useGetChatQuery,
-  useRemoveMemberMutation,
-} from '../../core';
-import { customize } from '../customize';
-import { useCallback, useMemo } from 'react';
-import { Icon } from '../Icon';
-import { Avatar } from '../Avatar';
-
-export interface ChatMembersPanelProps {
-  id: string;
-}
-
-interface ChatMemberListItemProps {
-  id: string;
-  chatId: string;
-}
-
-function useAdd(chatId: string, accountId: string, withHistory: boolean) {
-  const [add, state] = useAddMemberMutation();
-  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] = useRemoveMemberMutation();
-  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 } = useGetChatQuery({ chatId });
-  const { data: accounts } = useGetAccountsQuery();
-  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" />} />
-              </Tooltip>,
-              <Tooltip key="remove_delete_history" title="Remove (delete history)">
-                <Button
-                  onClick={onRemoveDeleteHistory}
-                  type="link"
-                  icon={<Icon type="remove_delete_history" />}
-                />
-              </Tooltip>,
-            ]
-          : [
-              <Tooltip key="add_no_history" title="Add (no history)">
-                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add" />} />
-              </Tooltip>,
-              <Tooltip key="add" title="Add (share history)">
-                <Button onClick={onAddWithHistory} type="link" icon={<Icon type="add_with_history" />} />
-              </Tooltip>,
-            ]
-      }
-    >
-      <Space>
-        <Avatar account={account} />
-        <span>{account.name}</span>
-      </Space>
-    </List.Item>
-  );
-});
-
-export const ChatMembersPanel = customize('ChatMembersPanel', (props: ChatMembersPanelProps) => {
-  const { id } = props;
-
-  const { data: chat } = useGetChatQuery({ chatId: id });
-  const { data: accounts } = useGetAccountsQuery();
-  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 {
+  useAddMemberMutation,
+  useGetAccountsQuery,
+  useGetChatQuery,
+  useRemoveMemberMutation,
+} from '../../core';
+import { customize } from '../customize';
+import { useCallback, useMemo } from 'react';
+import { Icon } from '../Icon';
+import { Avatar } from '../Avatar';
+
+export interface ChatMembersPanelProps {
+  id: string;
+}
+
+interface ChatMemberListItemProps {
+  id: string;
+  chatId: string;
+}
+
+function useAdd(chatId: string, accountId: string, withHistory: boolean) {
+  const [add, state] = useAddMemberMutation();
+  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] = useRemoveMemberMutation();
+  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 } = useGetChatQuery({ chatId });
+  const { data: accounts } = useGetAccountsQuery();
+  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" />} />
+              </Tooltip>,
+              <Tooltip key="remove_delete_history" title="Remove (delete history)">
+                <Button
+                  onClick={onRemoveDeleteHistory}
+                  type="link"
+                  icon={<Icon type="remove_delete_history" />}
+                />
+              </Tooltip>,
+            ]
+          : [
+              <Tooltip key="add_no_history" title="Add (no history)">
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add" />} />
+              </Tooltip>,
+              <Tooltip key="add" title="Add (share history)">
+                <Button onClick={onAddWithHistory} type="link" icon={<Icon type="add_with_history" />} />
+              </Tooltip>,
+            ]
+      }
+    >
+      <Space>
+        <Avatar account={account} />
+        <span>{account.name}</span>
+      </Space>
+    </List.Item>
+  );
+});
+
+export const ChatMembersPanel = customize('ChatMembersPanel', (props: ChatMembersPanelProps) => {
+  const { id } = props;
+
+  const { data: chat } = useGetChatQuery({ chatId: id });
+  const { data: accounts } = useGetAccountsQuery();
+  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/ChatPanel/ChatPanel.tsx

@@ -1,27 +1,27 @@
-import { ChatHeader } from './ChatHeader';
-import { ChatBody } from './ChatBody';
-import { InputBox } from '../InputBox/InputBox';
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { ChatMembersPanel } from './ChatMembersPanel';
-
-export interface ChatPanelProps {
-  id: string;
-}
-
-export const ChatPanel = customize('ChatPanel', (props: ChatPanelProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const chatMembersOpen = useSelect((x) => x.ui.showMembers, []);
-
-  return (
-    <div className="wxchtf-chat-panel">
-      <div className="wxchtf-chat-main">
-        <ChatHeader id={id} />
-        <ChatBody id={id} />
-        {chat.active && <InputBox />}
-      </div>
-      {chatMembersOpen && <ChatMembersPanel id={id} />}
-    </div>
-  );
-});
+import { ChatHeader } from './ChatHeader';
+import { ChatBody } from './ChatBody';
+import { InputBox } from '../InputBox/InputBox';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { ChatMembersPanel } from './ChatMembersPanel';
+
+export interface ChatPanelProps {
+  id: string;
+}
+
+export const ChatPanel = customize('ChatPanel', (props: ChatPanelProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const chatMembersOpen = useSelect((x) => x.ui.showMembers, []);
+
+  return (
+    <div className="wxchtf-chat-panel">
+      <div className="wxchtf-chat-main">
+        <ChatHeader id={id} />
+        <ChatBody id={id} />
+        {chat.active && <InputBox />}
+      </div>
+      {chatMembersOpen && <ChatMembersPanel id={id} />}
+    </div>
+  );
+});

package/src/ui/ChatPanel/index.ts

@@ -1,6 +1,6 @@
-export * from './ChatBody';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatHeaderName';
-export * from './ChatPanel';
-export * from './ChatMembersButton';
+export * from './ChatBody';
+export * from './ChatHeader';
+export * from './ChatHeaderMembers';
+export * from './ChatHeaderName';
+export * from './ChatPanel';
+export * from './ChatMembersButton';