@webinex/chatify 1.0.0-alpha00 → 1.0.0-alpha02

package/src/ui/Aside.tsx

@@ -1,9 +1,10 @@
-import { Avatar, Menu, MenuProps } from 'antd';
+import { Menu, MenuProps } from 'antd';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import { useChatList, useDispatch, useSelect, ChatListItem } from '../core';
 import { useLocalizer } from './localizer';
 import { formatSystemMessage } from './SystemMessage';
+import { Avatar } from './Avatar';
 
 function Chat(props: { chat: ChatListItem }) {
   const { chat } = props;
@@ -17,7 +18,7 @@ function Chat(props: { chat: ChatListItem }) {
       <div className="wxchtf-chat-last">
         {message.sentBy.id !== 'chatify::system' && (
           <div className="wxchtf-chat-last-author">
-            <Avatar src={message.sentBy.avatar} /> {message.sentBy.name}
+            <Avatar account={message.sentBy} /> {message.sentBy.name}
           </div>
         )}
         <div className="wxchtf-chat-last-message">

package/src/ui/Avatar.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Account } from '../core';
+import { Avatar as AntdAvatar } from 'antd';
+import { customize } from '../util';
+
+export interface AvatarProps {
+  account: Account;
+}
+
+const _Avatar: FC<AvatarProps> = (props: AvatarProps) => {
+  const { account } = props;
+
+  return <AntdAvatar src={account.avatar} />;
+};
+
+_Avatar.displayName = 'Avatar';
+
+export const Avatar = customize('Avatar', _Avatar);

package/src/ui/ChatHeader.tsx

@@ -1,7 +1,7 @@
-import { useChat, useSelect, ChatListItem, useDispatch } from '../core';
-import { Avatar, Button, Col, Row, Space, Tooltip } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-import { useCallback } from 'react';
+import { useChat, useSelect, ChatListItem } from '../core';
+import { Col, Row, Space } from 'antd';
+import { ChatHeaderMembers } from './ChatHeaderMembers';
+import { ChatSettingsButton } from './ChatHeaderSettingsButton';
 
 export interface ChatHeaderProps {
   id: string;
@@ -15,30 +15,14 @@ export function ChatHeader(props: ChatHeaderProps) {
     [id],
   );
 
-  const dispatch = useDispatch();
-  const onSettingsClick = useCallback(
-    () => dispatch({ type: 'chat_settings_open', data: { chatId: id } }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch],
-  );
-
   return (
     <div className="wxchtf-chat-header">
       <Row justify="space-between" align="middle">
         <Col className="wxchtf-chat-name">{chat?.name ?? chatListItem?.name}</Col>
         <Col className="wxchtf-chat-members">
           <Space align="center">
-            {chat?.members && (
-              <Avatar.Group maxCount={5}>
-                {chat.members.map((x) => (
-                  <Tooltip key={x.id} title={x.name}>
-                    <Avatar src={x.avatar}>{x.name}</Avatar>
-                  </Tooltip>
-                ))}
-              </Avatar.Group>
-            )}
-            <Button onClick={onSettingsClick} type="link" icon={<SettingOutlined />} />
+            <ChatHeaderMembers id={id} />
+            <ChatSettingsButton id={id} />
           </Space>
         </Col>
       </Row>

package/src/ui/ChatHeaderMembers.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { useChat } from '../core';
+import { Avatar, Tooltip } from 'antd';
+import { customize } from '../util';
+
+export interface ChatHeaderMembersProps {
+  id: string;
+}
+
+const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
+  const { id } = props;
+  const { data: chat } = useChat({ chatId: id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <Avatar.Group maxCount={5}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar src={x.avatar}>{x.name}</Avatar>
+        </Tooltip>
+      ))}
+    </Avatar.Group>
+  );
+};
+
+_ChatHeaderMembers.displayName = 'ChatHeaderMembers';
+export const ChatHeaderMembers = customize('ChatHeaderMembers', _ChatHeaderMembers);

package/src/ui/ChatHeaderSettingsButton.tsx

@@ -0,0 +1,26 @@
+import { useDispatch } from '../core';
+import { Button } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { FC, useCallback } from 'react';
+import { customize } from '../util';
+
+export interface ChatSettingsButtonProps {
+  id: string;
+}
+
+const _ChatSettingsButton: FC<ChatSettingsButtonProps> = (props) => {
+  const { id } = props;
+  const dispatch = useDispatch();
+  const onSettingsClick = useCallback(
+    () => dispatch({ type: 'chat_settings_open', data: { chatId: id } }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return <Button onClick={onSettingsClick} type="link" icon={<SettingOutlined />} />;
+};
+
+_ChatSettingsButton.displayName = 'ChatSettingsButton';
+
+export const ChatSettingsButton = customize('ChatSettingsButton', _ChatSettingsButton);

package/src/ui/Chatify.tsx

@@ -1,47 +1,61 @@
-import { CSSProperties, useCallback } from 'react';
-import { useSignalR, ReducerProvider, useDispatch, useReadMonitor } from '../core';
+import { CSSProperties, FC } from 'react';
+import { useSignalR, useReadMonitor } from '../core';
 import { Aside } from './Aside';
 import { Main } from './Main';
-import { Button } from 'antd';
 import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
+import { Avatar } from './Avatar';
+import { CustomizeProvider } from '../util';
+import { ChatHeaderMembers } from './ChatHeaderMembers';
+import { ChatSettingsButton } from './ChatHeaderSettingsButton';
+import { Header } from './Header';
+import { AddChatButton } from './AddChatButton';
+import { Footer } from './Footer';
+
+export interface ChatifyCustomizeValue {
+  Avatar?: typeof Avatar.Component | null;
+  Header?: typeof Header.Component | null;
+  Footer?: typeof Footer.Component | null;
+  AddChatButton?: typeof AddChatButton.Component | null;
+  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
+  ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
+}
 
 export interface ChatifyProps {
   className?: string;
   style?: CSSProperties;
   localizer?: Localizer;
+  customize?: ChatifyCustomizeValue;
 }
 
 function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
   const { className = '', style } = props;
   useSignalR();
   useReadMonitor();
-  const dispatch = useDispatch();
-  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
 
   return (
     <div className={className + ' wxchtf-chatify'} style={style}>
-      <div className="wxchtf-header">
-        <Button onClick={onAddChat} icon={'+'} type="link">
-          Add chat
-        </Button>
-      </div>
+      <Header />
       <div className="wxchtf-body">
         <Aside />
         <Main />
       </div>
-      <div className="wxchtf-footer"></div>
+      <Footer />
     </div>
   );
 }
 
-export function Chatify(props: ChatifyProps) {
-  const { localizer = defaultLocalizer } = props;
+const EMPTY_CUSTOMIZE = {};
+
+export const Chatify: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = EMPTY_CUSTOMIZE } = props;
 
   return (
     <LocalizerContext.Provider value={localizer}>
-      <ReducerProvider>
+      <CustomizeProvider value={customize}>
         <Content {...props} />
-      </ReducerProvider>
+      </CustomizeProvider>
     </LocalizerContext.Provider>
   );
-}
+};
+
+Chatify.displayName = 'Chatify';

package/src/ui/Footer.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { customize } from '../util';
+
+const _Footer: FC = () => <div className="wxchtf-footer"></div>;
+_Footer.displayName = 'Footer';
+
+export const Footer = customize('Footer', _Footer);

package/src/ui/Header.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { AddChatButton } from './AddChatButton';
+import { customize } from '../util';
+
+const _Header: FC = () => {
+  return (
+    <div className="wxchtf-header">
+      <AddChatButton />
+    </div>
+  );
+};
+
+_Header.displayName = 'Header';
+export const Header = customize('Header', _Header);

package/src/ui/MessageMd.tsx

@@ -1,5 +1,5 @@
-import { Avatar } from 'antd';
 import { Account, File } from '../core';
+import { Avatar } from './Avatar';
 import { useLocalizer } from './localizer';
 import React from 'react';
 
@@ -26,7 +26,7 @@ export const MessageMd = React.forwardRef(
       >
         {author && (
           <div className="wxchtf-message-author">
-            <Avatar src={author.avatar} />
+            <Avatar account={author} />
           </div>
         )}
         <div className="wxchtf-message-body">

package/src/ui/index.ts

@@ -1,2 +1,7 @@
 export * from './Chatify';
+export * from './Avatar';
 export * from './localizer';
+export * from './AddChatButton';
+export * from './Header';
+export * from './ChatHeader';
+export * from './ChatHeaderMembers';

package/src/ui/styles/index.scss

@@ -162,7 +162,7 @@
       .wxchtf-message-skeleton {
         display: flex;
         flex-flow: row nowrap;
-        align-items: end;
+        align-items: flex-end;
 
         .wxchtf-avatar {
           margin-right: 15px;
@@ -201,7 +201,7 @@
         flex: none;
         display: flex;
         padding: 0 1rem;
-        align-items: end;
+        align-items: flex-end;
 
         .ant-btn.ant-btn-icon-only .anticon {
           font-size: 1.5rem;

package/src/util/customize.tsx

@@ -0,0 +1,45 @@
+import React, { FC, PropsWithChildren, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>, TKey extends string> = TComponent & {
+  Component: TComponent;
+  key: TKey;
+};
+
+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>, TKey extends string>(
+  key: TKey,
+  Component: TComponent,
+): Customizable<TComponent, TKey> {
+  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} />;
+  });
+
+  Result.displayName = 'Customizable.' + Component.displayName;
+
+  return Object.assign(Result, { key, Component }) as any;
+}

package/src/util/index.ts

@@ -1,2 +1,3 @@
 export * from './uniqBy';
 export * from './uniqId';
+export * from './customize';