@webinex/chatify 2.0.1-alpha1 → 2.0.2-alpha2

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

@@ -1,36 +1,36 @@
-import { Button, Form } from 'antd';
-import { customize } from '../../customize';
-import { CreateChatNameInput } from './CreateChatNameInput';
-import { CreateChatMemberInput } from './CreateChatMemberInput';
-import { useLocalizer } from '../../localizer';
-
-export interface CreateChatFormValue {
-  name: string;
-  members: string[];
-}
-
-export interface CreateChatFormProps {
-  value?: CreateChatFormValue;
-  onSubmit: (value: CreateChatFormValue) => void;
-  busy?: boolean;
-}
-
-const INITIAL_VALUE: CreateChatFormValue = {
-  name: '',
-  members: [],
-};
-
-export const CreateChatForm = customize('CreateChatForm', (props: CreateChatFormProps) => {
-  const { value = INITIAL_VALUE, onSubmit, busy = false } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <Form onFinish={onSubmit} layout="vertical" disabled={busy} initialValues={value}>
-      <CreateChatNameInput name="name" />
-      <CreateChatMemberInput name="members" />
-      <Button loading={busy} type="primary" block htmlType="submit">
-        {localizer.addChat.submitBtn()}
-      </Button>
-    </Form>
-  );
-});
+import { Button, Form } from 'antd';
+import { customize } from '../../customize';
+import { CreateChatNameInput } from './CreateChatNameInput';
+import { CreateChatMemberInput } from './CreateChatMemberInput';
+import { useLocalizer } from '../../localizer';
+
+export interface CreateChatFormValue {
+  name: string;
+  members: string[];
+}
+
+export interface CreateChatFormProps {
+  value?: CreateChatFormValue;
+  onSubmit: (value: CreateChatFormValue) => void;
+  busy?: boolean;
+}
+
+const INITIAL_VALUE: CreateChatFormValue = {
+  name: '',
+  members: [],
+};
+
+export const CreateChatForm = customize('CreateChatForm', (props: CreateChatFormProps) => {
+  const { value = INITIAL_VALUE, onSubmit, busy = false } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form onFinish={onSubmit} layout="vertical" disabled={busy} initialValues={value}>
+      <CreateChatNameInput name="name" />
+      <CreateChatMemberInput name="members" />
+      <Button loading={busy} type="primary" block htmlType="submit">
+        {localizer.addChat.submitBtn()}
+      </Button>
+    </Form>
+  );
+});

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

@@ -1,65 +1,65 @@
-import { useMemo } from 'react';
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { Checkbox, Form, List } from 'antd';
-import { useLocalizer } from '../../localizer';
-import { Avatar } from '../../common/Avatar';
-
-export interface CreateChatMemberInputProps {
-  name: string;
-}
-
-interface CheckboxListProps {
-  value?: string[];
-  onChange?: (value: string[]) => void;
-}
-
-function CheckboxList(props: CheckboxListProps) {
-  const { value, onChange } = props;
-  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery();
-  const me = chatifyApi.settings.me();
-  const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
-
-  return (
-    <List
-      rowKey="id"
-      className="wxchtf-create-chat-member-input-list"
-      loading={isFetching}
-      dataSource={dataSource}
-      renderItem={(x) => {
-        const checked = value!.includes(x.id);
-
-        return (
-          <List.Item className={checked ? '--selected' : ''}>
-            <Checkbox
-              checked={checked}
-              onChange={() =>
-                onChange!(value!.includes(x.id) ? value!.filter((y) => y !== x.id) : [...value!, x.id])
-              }
-            >
-              <List.Item.Meta avatar={<Avatar account={x} />} title={x.name} />
-            </Checkbox>
-          </List.Item>
-        );
-      }}
-    />
-  );
-}
-
-export const CreateChatMemberInput = customize(
-  'CreateChatMemberInput',
-  (props: CreateChatMemberInputProps) => {
-    const { name } = props;
-    const localizer = useLocalizer();
-
-    return (
-      <Form.Item
-        label={localizer.addChat.members.label()}
-        rules={[{ required: true, message: localizer.addChat.members.required() }]}
-        name={name}
-      >
-        <CheckboxList />
-      </Form.Item>
-    );
-  },
-);
+import { useMemo } from 'react';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { Checkbox, Form, List } from 'antd';
+import { useLocalizer } from '../../localizer';
+import { Avatar } from '../../common/Avatar';
+
+export interface CreateChatMemberInputProps {
+  name: string;
+}
+
+interface CheckboxListProps {
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}
+
+function CheckboxList(props: CheckboxListProps) {
+  const { value, onChange } = props;
+  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery();
+  const me = chatifyApi.settings.me();
+  const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
+
+  return (
+    <List
+      rowKey="id"
+      className="wxchtf-create-chat-member-input-list"
+      loading={isFetching}
+      dataSource={dataSource}
+      renderItem={(x) => {
+        const checked = value!.includes(x.id);
+
+        return (
+          <List.Item className={checked ? '--selected' : ''}>
+            <Checkbox
+              checked={checked}
+              onChange={() =>
+                onChange!(value!.includes(x.id) ? value!.filter((y) => y !== x.id) : [...value!, x.id])
+              }
+            >
+              <List.Item.Meta avatar={<Avatar account={x} />} title={x.name} />
+            </Checkbox>
+          </List.Item>
+        );
+      }}
+    />
+  );
+}
+
+export const CreateChatMemberInput = customize(
+  'CreateChatMemberInput',
+  (props: CreateChatMemberInputProps) => {
+    const { name } = props;
+    const localizer = useLocalizer();
+
+    return (
+      <Form.Item
+        label={localizer.addChat.members.label()}
+        rules={[{ required: true, message: localizer.addChat.members.required() }]}
+        name={name}
+      >
+        <CheckboxList />
+      </Form.Item>
+    );
+  },
+);

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

@@ -1,25 +1,25 @@
-import { Form, Input } from 'antd';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-
-export interface CreateChatNameInputProps {
-  name: string;
-}
-
-export const CreateChatNameInput = customize('CreateChatNameInput', (props: CreateChatNameInputProps) => {
-  const { name } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <Form.Item
-      name={name}
-      label={localizer.addChat.name.label()}
-      rules={[
-        { required: true, message: localizer.addChat.name.required() },
-        { max: 250, message: localizer.addChat.name.max250() },
-      ]}
-    >
-      <Input />
-    </Form.Item>
-  );
-});
+import { Form, Input } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface CreateChatNameInputProps {
+  name: string;
+}
+
+export const CreateChatNameInput = customize('CreateChatNameInput', (props: CreateChatNameInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      name={name}
+      label={localizer.addChat.name.label()}
+      rules={[
+        { required: true, message: localizer.addChat.name.required() },
+        { max: 250, message: localizer.addChat.name.max250() },
+      ]}
+    >
+      <Input />
+    </Form.Item>
+  );
+});

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

@@ -1,45 +1,45 @@
-import { chatifyApi } from '../../../core';
-import { useCallback } from 'react';
-import { useLocalizer } from '../../localizer';
-import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
-import { customize } from '../../customize';
-import { Button } from 'antd';
-import { Icon } from '../../common/Icon';
-import { useChatGroupContext } from '../ChatGroupContext';
-
-function useSubmit() {
-  const [add, { isLoading }] = chatifyApi.useAddChatMutation();
-  const { openChat } = useChatGroupContext();
-
-  const onSubmit = useCallback(
-    (value: CreateChatFormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-      })
-        .unwrap()
-        .then((id) => openChat(id)),
-    [add, openChat],
-  );
-
-  return [onSubmit, isLoading] as const;
-}
-
-export const CreateChatPanel = customize('CreateChatPanel', () => {
-  const localizer = useLocalizer();
-  const [onSubmit, submitting] = useSubmit();
-  const { toggleNewChat } = useChatGroupContext();
-
-  return (
-    <div className="wxchtf-create-chat-panel">
-      <Button
-        onClick={() => toggleNewChat()}
-        className="wxchtf-create-chat-panel-close"
-        type="link"
-        icon={<Icon type="close" />}
-      />
-      <h3>{localizer.addChat.title()}</h3>
-      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
-    </div>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { useCallback } from 'react';
+import { useLocalizer } from '../../localizer';
+import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
+import { customize } from '../../customize';
+import { Button } from 'antd';
+import { Icon } from '../../common/Icon';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+function useSubmit() {
+  const [add, { isLoading }] = chatifyApi.useAddChatMutation();
+  const { openChat } = useChatGroupContext();
+
+  const onSubmit = useCallback(
+    (value: CreateChatFormValue) =>
+      add({
+        name: value.name,
+        members: value.members,
+      })
+        .unwrap()
+        .then((id) => openChat(id)),
+    [add, openChat],
+  );
+
+  return [onSubmit, isLoading] as const;
+}
+
+export const CreateChatPanel = customize('CreateChatPanel', () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <div className="wxchtf-create-chat-panel">
+      <Button
+        onClick={() => toggleNewChat()}
+        className="wxchtf-create-chat-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
+      <h3>{localizer.addChat.title()}</h3>
+      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Create/index.ts

@@ -1,19 +1,19 @@
-import { CreateChatForm } from './CreateChatForm';
-import { CreateChatMemberInput } from './CreateChatMemberInput';
-import { CreateChatNameInput } from './CreateChatNameInput';
-import { CreateChatPanel } from './CreateChatPanel';
-import { CreateChatButton } from './CreateChatButton';
-
-export * from './CreateChatForm';
-export * from './CreateChatMemberInput';
-export * from './CreateChatNameInput';
-export * from './CreateChatPanel';
-export * from './CreateChatButton';
-
-export interface CreateChatPanelCustomizeValue {
-  CreateChatForm?: typeof CreateChatForm.Component | null;
-  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
-  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
-  CreateChatPanel?: typeof CreateChatPanel.Component | null;
-  CreateChatButton?: typeof CreateChatButton.Component | null;
-}
+import { CreateChatForm } from './CreateChatForm';
+import { CreateChatMemberInput } from './CreateChatMemberInput';
+import { CreateChatNameInput } from './CreateChatNameInput';
+import { CreateChatPanel } from './CreateChatPanel';
+import { CreateChatButton } from './CreateChatButton';
+
+export * from './CreateChatForm';
+export * from './CreateChatMemberInput';
+export * from './CreateChatNameInput';
+export * from './CreateChatPanel';
+export * from './CreateChatButton';
+
+export interface CreateChatPanelCustomizeValue {
+  CreateChatForm?: typeof CreateChatForm.Component | null;
+  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
+  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
+  CreateChatPanel?: typeof CreateChatPanel.Component | null;
+  CreateChatButton?: typeof CreateChatButton.Component | null;
+}

package/src/ui/ChatGroup/Layout/ChatGroupAside.tsx

@@ -1,12 +1,12 @@
-import { customize } from '../../customize';
-import { ChatList } from '../List';
-import { CreateChatButton } from '../Create/CreateChatButton';
-
-export const ChatGroupAside = customize('ChatGroupAside', () => {
-  return (
-    <div className="wxchtf-aside">
-      <CreateChatButton />
-      <ChatList />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { ChatList } from '../List';
+import { CreateChatButton } from '../Create/CreateChatButton';
+
+export const ChatGroupAside = customize('ChatGroupAside', () => {
+  return (
+    <div className="wxchtf-aside">
+      <CreateChatButton />
+      <ChatList />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/ChatGroupBody.tsx

@@ -1,10 +1,10 @@
-import { customize } from '../../customize';
-import { ChatGroupAside } from './ChatGroupAside';
-import { ChatGroupMain } from './ChatGroupMain';
-
-export const ChatGroupBody = customize('ChatGroupBody', () => (
-  <div className="wxchtf-body">
-    <ChatGroupAside />
-    <ChatGroupMain />
-  </div>
-));
+import { customize } from '../../customize';
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupMain } from './ChatGroupMain';
+
+export const ChatGroupBody = customize('ChatGroupBody', () => (
+  <div className="wxchtf-body">
+    <ChatGroupAside />
+    <ChatGroupMain />
+  </div>
+));

package/src/ui/ChatGroup/Layout/ChatGroupFooter.tsx

@@ -1,3 +1,3 @@
-import { customize } from '../../customize';
-
-export const ChatGroupFooter = customize('ChatGroupFooter', () => <div className="wxchtf-footer"></div>);
+import { customize } from '../../customize';
+
+export const ChatGroupFooter = customize('ChatGroupFooter', () => <div className="wxchtf-footer"></div>);

package/src/ui/ChatGroup/Layout/ChatGroupHeader.tsx

@@ -1,5 +1,5 @@
-import { customize } from '../../customize';
-
-export const ChatGroupHeader = customize('ChatGroupHeader', () => {
-  return <div className="wxchtf-header"></div>;
-});
+import { customize } from '../../customize';
+
+export const ChatGroupHeader = customize('ChatGroupHeader', () => {
+  return <div className="wxchtf-header"></div>;
+});

package/src/ui/ChatGroup/Layout/ChatGroupMain.tsx

@@ -1,17 +1,17 @@
-import { customize } from '../../customize';
-import { CreateChatPanel } from '../Create';
-import { ChatView } from '../../Chat';
-import { useChatGroupContext } from '../ChatGroupContext';
-import { chatifyApi } from '../../../core';
-
-export const ChatGroupMain = customize('ChatGroupMain', () => {
-  const { chatId, view } = useChatGroupContext();
-  const chat = chatifyApi.useChatListItem(chatId);
-
-  return (
-    <div className="wxchtf-main">
-      {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
-      {view === 'new-chat' && <CreateChatPanel />}
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { CreateChatPanel } from '../Create';
+import { ChatView } from '../../Chat';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { chatifyApi } from '../../../core';
+
+export const ChatGroupMain = customize('ChatGroupMain', () => {
+  const { chatId, view } = useChatGroupContext();
+  const chat = chatifyApi.useChatListItem(chatId);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
+      {view === 'new-chat' && <CreateChatPanel />}
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/index.ts

@@ -1,19 +1,19 @@
-import { ChatGroupAside } from './ChatGroupAside';
-import { ChatGroupHeader } from './ChatGroupHeader';
-import { ChatGroupFooter } from './ChatGroupFooter';
-import { ChatGroupMain } from './ChatGroupMain';
-import { ChatGroupBody } from './ChatGroupBody';
-
-export * from './ChatGroupAside';
-export * from './ChatGroupHeader';
-export * from './ChatGroupFooter';
-export * from './ChatGroupMain';
-export * from './ChatGroupBody';
-
-export interface ChatGroupLayoutCustomizeValue {
-  ChatGroupAside?: typeof ChatGroupAside.Component | null;
-  ChatGroupHeader?: typeof ChatGroupHeader.Component | null;
-  ChatGroupFooter?: typeof ChatGroupFooter.Component | null;
-  ChatGroupMain?: typeof ChatGroupMain.Component | null;
-  ChatGroupBody?: typeof ChatGroupBody.Component | null;
-}
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupHeader } from './ChatGroupHeader';
+import { ChatGroupFooter } from './ChatGroupFooter';
+import { ChatGroupMain } from './ChatGroupMain';
+import { ChatGroupBody } from './ChatGroupBody';
+
+export * from './ChatGroupAside';
+export * from './ChatGroupHeader';
+export * from './ChatGroupFooter';
+export * from './ChatGroupMain';
+export * from './ChatGroupBody';
+
+export interface ChatGroupLayoutCustomizeValue {
+  ChatGroupAside?: typeof ChatGroupAside.Component | null;
+  ChatGroupHeader?: typeof ChatGroupHeader.Component | null;
+  ChatGroupFooter?: typeof ChatGroupFooter.Component | null;
+  ChatGroupMain?: typeof ChatGroupMain.Component | null;
+  ChatGroupBody?: typeof ChatGroupBody.Component | null;
+}

package/src/ui/ChatGroup/List/ChatList.tsx

@@ -1,41 +1,41 @@
-import { Menu, MenuProps } from 'antd';
-import { useCallback, useMemo } from 'react';
-import { chatifyApi } from '../../../core';
-import { ChatListItemBox } from './ChatListItemBox';
-import { customize } from '../../customize';
-import { useChatGroupContext } from '../ChatGroupContext';
-
-function useOnSelect() {
-  const { openChat } = useChatGroupContext();
-
-  return useCallback(
-    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) => openChat(info.key as string),
-    [openChat],
-  );
-}
-
-function useMenuItems() {
-  const { data: chats } = chatifyApi.useGetChatListQuery();
-
-  return useMemo<MenuProps['items']>(() => {
-    return chats
-      ?.slice()
-      .sort((a, b) => -a.message.id.substring(47).localeCompare(b.message.id.substring(47)))
-      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
-  }, [chats]);
-}
-
-export const ChatList = customize('ChatList', () => {
-  const { chatId } = useChatGroupContext();
-  const selected = useMemo(() => (chatId ? [chatId] : []), [chatId]);
-  const onSelect = useOnSelect();
-  const items = useMenuItems();
-
-  return (
-    <>
-      {items && (
-        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
-      )}
-    </>
-  );
-});
+import { Menu, MenuProps } from 'antd';
+import { useCallback, useMemo } from 'react';
+import { chatifyApi } from '../../../core';
+import { ChatListItemBox } from './ChatListItemBox';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+function useOnSelect() {
+  const { openChat } = useChatGroupContext();
+
+  return useCallback(
+    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) => openChat(info.key as string),
+    [openChat],
+  );
+}
+
+function useMenuItems() {
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+
+  return useMemo<MenuProps['items']>(() => {
+    return chats
+      ?.slice()
+      .sort((a, b) => -a.message.id.substring(47).localeCompare(b.message.id.substring(47)))
+      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
+  }, [chats]);
+}
+
+export const ChatList = customize('ChatList', () => {
+  const { chatId } = useChatGroupContext();
+  const selected = useMemo(() => (chatId ? [chatId] : []), [chatId]);
+  const onSelect = useOnSelect();
+  const items = useMenuItems();
+
+  return (
+    <>
+      {items && (
+        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
+      )}
+    </>
+  );
+});

package/src/ui/ChatGroup/List/ChatListItemAvatar.tsx

@@ -1,22 +1,22 @@
-import { color } from '../../color';
-import { Icon } from '../../common/Icon';
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
-  const { id } = props.chat;
-
-  return (
-    <div
-      className="wxchtf-chat-avatar"
-      style={
-        {
-          '--background-color': color(id, { lightness: 90 }),
-          '--color': color(id, { saturation: 60, lightness: 65 }),
-        } as any
-      }
-    >
-      <Icon type="chat" />
-    </div>
-  );
-});
+import { color } from '../../color';
+import { Icon } from '../../common/Icon';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
+  const { id } = props.chat;
+
+  return (
+    <div
+      className="wxchtf-chat-avatar"
+      style={
+        {
+          '--background-color': color(id, { lightness: 90 }),
+          '--color': color(id, { saturation: 60, lightness: 65 }),
+        } as any
+      }
+    >
+      <Icon type="chat" />
+    </div>
+  );
+});