@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/ui/Chatify.tsx

@@ -1,148 +1,148 @@
-import { CSSProperties, FC } from 'react';
-import { useReadMonitor } from '../core';
-import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-import { CustomizeProvider } from './customize';
-import { ChatHeaderMembers } from './ChatPanel/ChatHeaderMembers';
-import { ChatMembersButton } from './ChatPanel/ChatMembersButton';
-import { AddChatButton } from './AddChatButton';
-import { ChatName } from './ChatName';
-
-import { Aside, Main, Body, Footer, Header } from './Layout';
-
-import {
-  ChatListItemBox,
-  ChatListItemLastMessageContent,
-  ChatListItemLastMessageAuthor,
-  ChatListItemLastMessage,
-  ChatListItemUnreadCount,
-  ChatListItemName,
-} from './ChatList';
-
-import {
-  SendingMessageBox,
-  SendingMessageContent,
-  SendingMessageInfoBox,
-  SendingMessageText,
-} from './SendingMessage';
-
-import {
-  MessageBox,
-  MessageRow,
-  MessageContent,
-  MessageText,
-  MessageAuthor,
-  MessageInfoBox,
-} from './Message';
-
-import { MessageReadObserver } from './MessageReadObserver';
-import { Icon } from './Icon';
-import { SystemMessageRow } from './SystemMessage/SystemMessageRow';
-import { ChatList } from './ChatList';
-import { ChatBody, ChatHeader, ChatHeaderName, ChatPanel } from './ChatPanel';
-import { InputBox, InputFilesBox, InputSubmitButtonBox, InputTextBox } from './InputBox';
-import { SystemMessageBox } from './SystemMessage';
-import {
-  CreateChatForm,
-  CreateChatMemberInput,
-  CreateChatNameInput,
-  CreateChatPanel,
-} from './CreateChatPanel';
-
-export interface ChatifyCustomizeValue {
-  // ./ChatList
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-
-  // ./Layout
-  Header?: typeof Header.Component | null;
-  Footer?: typeof Footer.Component | null;
-  Body?: typeof Body.Component | null;
-  Main?: typeof Main.Component | null;
-  Aside?: typeof Aside.Component | null;
-
-  // ./Message
-  MessageAuthor?: typeof MessageAuthor.Component | null;
-  MessageBox?: typeof MessageBox.Component | null;
-  MessageContent?: typeof MessageContent.Component | null;
-  MessageInfoBox?: typeof MessageInfoBox.Component | null;
-  MessageRow?: typeof MessageRow.Component | null;
-  MessageText?: typeof MessageText.Component | null;
-
-  // ./SendingMessage
-  SendingMessageBox?: typeof SendingMessageBox.Component | null;
-  SendingMessageContent?: typeof SendingMessageContent.Component | null;
-  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
-  SendingMessageText?: typeof SendingMessageText.Component | null;
-
-  // ./ChatPanel
-  ChatBody?: typeof ChatBody.Component | null;
-  ChatHeader?: typeof ChatHeader.Component | null;
-  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
-  ChatHeaderName?: typeof ChatHeaderName.Component | null;
-  ChatPanel?: typeof ChatPanel.Component | null;
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-
-  // ./InputBox
-  InputBox?: typeof InputBox.Component | null;
-  InputFilesBox?: typeof InputFilesBox.Component | null;
-  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
-  InputTextBox?: typeof InputTextBox.Component | null;
-
-  // ./SystemMessage
-  SystemMessageBox?: typeof SystemMessageBox.Component | null;
-  SystemMessageRow?: typeof SystemMessageRow.Component | null;
-
-  // ./CreateChatPanel
-  CreateChatForm?: typeof CreateChatForm.Component | null;
-  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
-  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
-  CreateChatPanel?: typeof CreateChatPanel.Component | null;
-
-  MessageReadObserver?: typeof MessageReadObserver.Component | null;
-  Avatar?: typeof Avatar.Component | null;
-  AddChatButton?: typeof AddChatButton.Component | null;
-  ChatName?: typeof ChatName.Component | null;
-  Icon?: typeof Icon.Component | null;
-}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatifyCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  useReadMonitor();
-
-  return (
-    <div className={className + ' wxchtf-chatify'} style={style}>
-      <Header />
-      <Body />
-      <Footer />
-    </div>
-  );
-}
-
-const EMPTY_CUSTOMIZE = {};
-
-export const Chatify: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = EMPTY_CUSTOMIZE } = props;
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeProvider value={customize}>
-        <Content {...props} />
-      </CustomizeProvider>
-    </LocalizerContext.Provider>
-  );
-};
-
-Chatify.displayName = 'Chatify';
+import { CSSProperties, FC } from 'react';
+import { useReadMonitor } from '../core';
+import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
+import { Avatar } from './Avatar';
+import { CustomizeProvider } from './customize';
+import { ChatHeaderMembers } from './ChatPanel/ChatHeaderMembers';
+import { ChatMembersButton } from './ChatPanel/ChatMembersButton';
+import { AddChatButton } from './AddChatButton';
+import { ChatName } from './ChatName';
+
+import { Aside, Main, Body, Footer, Header } from './Layout';
+
+import {
+  ChatListItemBox,
+  ChatListItemLastMessageContent,
+  ChatListItemLastMessageAuthor,
+  ChatListItemLastMessage,
+  ChatListItemUnreadCount,
+  ChatListItemName,
+} from './ChatList';
+
+import {
+  SendingMessageBox,
+  SendingMessageContent,
+  SendingMessageInfoBox,
+  SendingMessageText,
+} from './SendingMessage';
+
+import {
+  MessageBox,
+  MessageRow,
+  MessageContent,
+  MessageText,
+  MessageAuthor,
+  MessageInfoBox,
+} from './Message';
+
+import { MessageReadObserver } from './MessageReadObserver';
+import { Icon } from './Icon';
+import { SystemMessageRow } from './SystemMessage/SystemMessageRow';
+import { ChatList } from './ChatList';
+import { ChatBody, ChatHeader, ChatHeaderName, ChatPanel } from './ChatPanel';
+import { InputBox, InputFilesBox, InputSubmitButtonBox, InputTextBox } from './InputBox';
+import { SystemMessageBox } from './SystemMessage';
+import {
+  CreateChatForm,
+  CreateChatMemberInput,
+  CreateChatNameInput,
+  CreateChatPanel,
+} from './CreateChatPanel';
+
+export interface ChatifyCustomizeValue {
+  // ./ChatList
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+
+  // ./Layout
+  Header?: typeof Header.Component | null;
+  Footer?: typeof Footer.Component | null;
+  Body?: typeof Body.Component | null;
+  Main?: typeof Main.Component | null;
+  Aside?: typeof Aside.Component | null;
+
+  // ./Message
+  MessageAuthor?: typeof MessageAuthor.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+
+  // ./SendingMessage
+  SendingMessageBox?: typeof SendingMessageBox.Component | null;
+  SendingMessageContent?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+
+  // ./ChatPanel
+  ChatBody?: typeof ChatBody.Component | null;
+  ChatHeader?: typeof ChatHeader.Component | null;
+  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
+  ChatHeaderName?: typeof ChatHeaderName.Component | null;
+  ChatPanel?: typeof ChatPanel.Component | null;
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+
+  // ./InputBox
+  InputBox?: typeof InputBox.Component | null;
+  InputFilesBox?: typeof InputFilesBox.Component | null;
+  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
+  InputTextBox?: typeof InputTextBox.Component | null;
+
+  // ./SystemMessage
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+
+  // ./CreateChatPanel
+  CreateChatForm?: typeof CreateChatForm.Component | null;
+  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
+  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
+  CreateChatPanel?: typeof CreateChatPanel.Component | null;
+
+  MessageReadObserver?: typeof MessageReadObserver.Component | null;
+  Avatar?: typeof Avatar.Component | null;
+  AddChatButton?: typeof AddChatButton.Component | null;
+  ChatName?: typeof ChatName.Component | null;
+  Icon?: typeof Icon.Component | null;
+}
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatifyCustomizeValue;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  useReadMonitor();
+
+  return (
+    <div className={className + ' wxchtf-chatify'} style={style}>
+      <Header />
+      <Body />
+      <Footer />
+    </div>
+  );
+}
+
+const EMPTY_CUSTOMIZE = {};
+
+export const Chatify: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = EMPTY_CUSTOMIZE } = props;
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <CustomizeProvider value={customize}>
+        <Content {...props} />
+      </CustomizeProvider>
+    </LocalizerContext.Provider>
+  );
+};
+
+Chatify.displayName = 'Chatify';

package/src/ui/CreateChatPanel/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/CreateChatPanel/CreateChatMemberInput.tsx

@@ -1,66 +1,66 @@
-import { useMemo } from 'react';
-import { useGetAccountsQuery } from '../../core';
-import { customize } from '../customize';
-import { Checkbox, Form, List } from 'antd';
-import { useLocalizer } from '../localizer';
-import { useMe } from '../../ChatifyContext';
-import { Avatar } from '../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 } = useGetAccountsQuery();
-  const me = useMe();
-  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 { useGetAccountsQuery } from '../../core';
+import { customize } from '../customize';
+import { Checkbox, Form, List } from 'antd';
+import { useLocalizer } from '../localizer';
+import { useMe } from '../../ChatifyContext';
+import { Avatar } from '../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 } = useGetAccountsQuery();
+  const me = useMe();
+  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/CreateChatPanel/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/CreateChatPanel/CreateChatPanel.tsx

@@ -1,33 +1,33 @@
-import { useAddChatMutation } from '../../core';
-import { useCallback } from 'react';
-import { uniqId } from '../../util';
-import { useLocalizer } from '../localizer';
-import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
-import { customize } from '../customize';
-
-function useSubmit() {
-  const [add, { isFetching }] = useAddChatMutation();
-  const onSubmit = useCallback(
-    (value: CreateChatFormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-        requestId: uniqId(),
-      }),
-    [add],
-  );
-
-  return [onSubmit, isFetching] as const;
-}
-
-export const CreateChatPanel = customize('CreateChatPanel', () => {
-  const localizer = useLocalizer();
-  const [onSubmit, submitting] = useSubmit();
-
-  return (
-    <div className="wxchtf-create-chat">
-      <h3>{localizer.addChat.title()}</h3>
-      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
-    </div>
-  );
-});
+import { useAddChatMutation } from '../../core';
+import { useCallback } from 'react';
+import { uniqId } from '../../util';
+import { useLocalizer } from '../localizer';
+import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
+import { customize } from '../customize';
+
+function useSubmit() {
+  const [add, { isFetching }] = useAddChatMutation();
+  const onSubmit = useCallback(
+    (value: CreateChatFormValue) =>
+      add({
+        name: value.name,
+        members: value.members,
+        requestId: uniqId(),
+      }),
+    [add],
+  );
+
+  return [onSubmit, isFetching] as const;
+}
+
+export const CreateChatPanel = customize('CreateChatPanel', () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+
+  return (
+    <div className="wxchtf-create-chat">
+      <h3>{localizer.addChat.title()}</h3>
+      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/CreateChatPanel/index.ts

@@ -1,4 +1,4 @@
-export * from './CreateChatForm';
-export * from './CreateChatMemberInput';
-export * from './CreateChatNameInput';
-export * from './CreateChatPanel';
+export * from './CreateChatForm';
+export * from './CreateChatMemberInput';
+export * from './CreateChatNameInput';
+export * from './CreateChatPanel';