up release

README.md

@@ -14,6 +14,8 @@ react-jwchat 是一个简单的 web 聊天组件。
 
 ```bash
 npm install react-jwchat
+# or
+yarn add react-jwchat
 ```
 
 ## 组件

config/webpack.base.js

@@ -1,9 +1,16 @@
+const path = require('path')
+
 module.exports = {
   output: {
     clean: true,
   },
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader',
+        exclude: /(node_modules)/,
+      },
       {
         test: /\.(jsx|js)$/,
         exclude: /(node_modules|bower_components)/,
@@ -16,15 +23,22 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-modules-typescript-loader' },
+          { loader: 'css-loader' },
+        ],
       },
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [{ loader: 'url-loader' }],
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        type: 'asset/inline',
       },
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.css'],
+    alias: {
+      src: path.resolve(__dirname, '../src'),
+    },
   },
 }

config/webpack.dev.js

@@ -9,9 +9,6 @@ module.exports = merge(webpackBase, {
     path: path.resolve(__dirname, '../example/src'),
     filename: 'bundle.js',
   },
-  module: {
-    rules: [],
-  },
   devServer: {
     contentBase: path.resolve(__dirname, '../example/src'),
     open: true,

config/webpack.prod.js

@@ -4,7 +4,7 @@ const path = require('path')
 
 module.exports = merge(webpackBase, {
   mode: 'production',
-  entry: path.resolve(__dirname, '../src/index.js'),
+  entry: path.resolve(__dirname, '../src/components/index.ts'),
   output: {
     path: path.resolve(__dirname, '../lib'),
     filename: 'index.js',

example/src/fackData.js

@@ -166,33 +166,44 @@ export const messageList = [
     },
     message: { type: 'text', content: '敌我打野差距👎 ' },
   },
-  // {
-  //   _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
-  //   date: 1610016880,
-  //   user: {
-  //     id: 1234,
-  //     avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
-  //     nickname: 'sirosong',
-  //     desc: '这是我的第一条信息',
-  //   },
-  //   message: {
-  //     type: 'image',
-  //     content:
-  //       'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623381551&t=1ec0b6fdbfc4ba9f149281c1d5f8e370',
-  //   },
-  // },
-  // {
-  //   _id: '75b5bde8f3b9ef7aa904492cb28baf',
-  //   date: 1610016880,
-  //   user: {
-  //     id: 9527,
-  //     avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
-  //     nickname: '卡兹克',
-  //     desc: '这是我的第一条信息',
-  //   },
-  //   message: {
-  //     type: 'image',
-  //     content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
-  //   },
-  // },
+  {
+    _id: '75b5bde8f3b9ef7aa9b70449244444cb28baf',
+    date: 1610016880,
+    user: {
+      id: 1234,
+      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
+      nickname: 'sirosong',
+      desc: '这是我的第一条信息',
+    },
+    message: {
+      type: 'image',
+      content:
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623381551&t=1ec0b6fdbfc4ba9f149281c1d5f8e370',
+    },
+  },
+  {
+    _id: '75b5bde8f3b9ef7aa9b4492cb28baf',
+    date: 1610016580,
+    user: {
+      id: 1234,
+      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
+      nickname: 'sirosong',
+      desc: '这是我的第一条信息',
+    },
+    message: { type: 'text', content: '敌我打野差距👎 ' },
+  },
+  {
+    _id: '75b5bde8f3b9ef7aa904492cb28baf',
+    date: 1610016880,
+    user: {
+      id: 9527,
+      avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
+      nickname: '卡兹克',
+      desc: '这是我的第一条信息',
+    },
+    message: {
+      type: 'image',
+      content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
+    },
+  },
 ]

example/src/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { render } from 'react-dom'
-import { Chat, ContactItem, ContactList } from '../../src'
+import { Chat, ContactItem, ContactList } from '../../src/components'
 // import { Chat, ContactItem, ContactList } from 'react-jwchat'
 import { contact, contactList, messageList, my } from './fackData'
 
@@ -26,14 +26,14 @@ const App = () => {
         onClick={(contact) => console.log(contact)}
         border
       /> */}
-
       <ContactList
         data={contactList}
         style={{
           marginRight: 10,
           height: 500,
           borderRadius: 5,
           overflow: 'hidden',
+          width: 240,
         }}
       />
       <Chat

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "src/*": ["src/*"]
+    },
+    "jsx": "react-jsx"
+  },
+  "exclude": ["node_modules"]
+}

lib/types/src/components/Chat/Chat.d.ts

@@ -0,0 +1,42 @@
+import { Component, CSSProperties, MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+interface IProps {
+    onSend: Function;
+    me: IContact;
+    contact: IContact;
+    style: CSSProperties & {
+        height: number;
+    };
+    chatList: any[];
+    onImage?: Function;
+    onEarlier?: MouseEventHandler;
+}
+export interface IContact {
+    id: number | string;
+    avatar: string;
+    nickname: string;
+    message: string;
+    date: string;
+    desc: string;
+}
+export default class Chat extends Component<IProps, {}> {
+    static propTypes: {
+        onSend: PropTypes.Validator<(...args: any[]) => any>;
+        me: PropTypes.Validator<object>;
+        contact: PropTypes.Validator<object>;
+        style: PropTypes.Validator<object>;
+    };
+    static defaultProps: {
+        style: {
+            width: number;
+            height: number;
+        };
+        contact: {};
+        me: {};
+        chatList: never[];
+        onSend: (msg: any) => void;
+    };
+    sendHandle: (msgData: any) => void;
+    render(): JSX.Element;
+}
+export {};

lib/types/src/components/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IContact } from '../Chat/Chat';
+interface IProps {
+    data: IContact;
+}
+declare function ChatHeader(props: IProps): JSX.Element;
+declare namespace ChatHeader {
+    var propTypes: {};
+}
+export default ChatHeader;

lib/types/src/components/ChatInput/ChatInput.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { IContact } from '../Chat/Chat';
+interface IProps {
+    me: IContact;
+    onSend: Function;
+    onImage?: Function;
+    height: number;
+}
+declare type MessageType = 'text' | 'image';
+export declare type TPureMsg = {
+    type: MessageType;
+    content: string;
+};
+export declare type TMessage = {
+    _id: string;
+    date: number;
+    user: IContact;
+    message: TPureMsg;
+};
+export default function ChatInput({ me, onSend, onImage, height, }: IProps): JSX.Element;
+export {};

lib/types/src/components/ChatRecordList/ChatRecordList.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, MouseEventHandler } from 'react';
+import { IContact } from '../Chat/Chat';
+interface IProps {
+    onEarlier?: MouseEventHandler;
+    data: any[];
+    me: IContact;
+    style?: CSSProperties;
+}
+declare const ChatRecordList: (props: IProps) => JSX.Element;
+export default ChatRecordList;

lib/types/src/components/ChatToolsBar/ChatToolBar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface IProps {
+    tools?: any[];
+    onEmojiSelect?: Function;
+    onImage?: Function;
+}
+declare function ChatToolBar({ tools, onEmojiSelect, onImage, }: IProps): JSX.Element;
+declare namespace ChatToolBar {
+    var propTypes: {
+        tools: PropTypes.Requireable<any[]>;
+        onEmojiSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onImage: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default ChatToolBar;

lib/types/src/components/ContactItem/ContactItem.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+interface IProps {
+    styles?: CSSProperties;
+    selected: boolean;
+    border: boolean;
+    contact: any;
+    onClick: Function;
+}
+declare function ContactItem({ styles, selected, border, contact, onClick, }: IProps): JSX.Element;
+declare namespace ContactItem {
+    var propTypes: {
+        contact: PropTypes.Validator<object>;
+        className: PropTypes.Requireable<any>;
+        style: PropTypes.Requireable<object>;
+    };
+    var defaultProps: {
+        onClick: () => void;
+    };
+}
+export default ContactItem;

lib/types/src/components/ContactList/ContactList.d.ts

@@ -0,0 +1,14 @@
+import React, { UIEventHandler } from 'react';
+import { IContact } from '../Chat/Chat';
+interface IProps {
+    onSelect?: Function;
+    data: IContact[];
+    onScroll: UIEventHandler<HTMLDivElement>;
+}
+declare const _default: React.ComponentType<IProps & {
+    data: Object[];
+    style?: React.CSSProperties | undefined;
+    scrollToBottom?: boolean | undefined;
+    children?: React.ReactNode;
+}>;
+export default _default;

lib/types/src/components/EmojiPopover/EmojiPopover.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface IProps {
+    onSelect: Function;
+}
+declare function EmojiPopover({ onSelect }: IProps): JSX.Element;
+declare namespace EmojiPopover {
+    var propTypes: {
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default EmojiPopover;

lib/types/src/components/ImgPopover/ImgPopover.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface IProps {
+    onImage: Function;
+}
+declare function ImgPopover({ onImage }: IProps): JSX.Element;
+declare namespace ImgPopover {
+    var propTypes: {
+        onImage: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default ImgPopover;

lib/types/src/components/MsgBubble/MsgBubble.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { TPureMsg } from '../ChatInput/ChatInput';
+interface IProps {
+    data: TPureMsg;
+    isMe: boolean;
+}
+declare function MsgBubble({ data, isMe }: IProps): JSX.Element;
+declare namespace MsgBubble {
+    var propTypes: {
+        data: PropTypes.Validator<object>;
+        isMe: PropTypes.Validator<boolean>;
+    };
+}
+export default MsgBubble;

lib/types/src/components/MsgItem/MsgItem.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { TMessage } from '../ChatInput/ChatInput';
+import { IContact } from '../Chat/Chat';
+interface IProps {
+    data: TMessage;
+    me: IContact;
+}
+declare function MsgItem({ data, me }: IProps): JSX.Element;
+declare namespace MsgItem {
+    var propTypes: {
+        data: PropTypes.Validator<object>;
+        me: PropTypes.Validator<object>;
+    };
+}
+export default MsgItem;

lib/types/src/components/ScrollWrapper/ScrollWrapper.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties, ReactNode } from 'react';
+declare type IProps = {
+    data: Object[];
+    style?: CSSProperties;
+    scrollToBottom?: boolean;
+    children?: ReactNode;
+};
+declare type HOC<InjectedProps, OwnProps> = <P>(Component: React.ComponentType<P & InjectedProps>) => React.ComponentType<P & OwnProps>;
+declare const ScrollWrapper: HOC<{}, IProps>;
+export default ScrollWrapper;

lib/types/src/components/index.d.ts

@@ -0,0 +1,4 @@
+import Chat from './Chat/Chat';
+import ContactItem from './ContactItem/ContactItem';
+import ContactList from './ContactList/ContactList';
+export { ContactItem, Chat, ContactList };