# @efox/message-middleware

> * yarn ``` yarn add @efox/message-middleware ``` * npm ``` npm install @efox/message-middleware ```

Latest version **1.5.5** (published 2020-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @efox/message-middleware
pnpm add @efox/message-middleware
yarn add @efox/message-middleware
bun add @efox/message-middleware
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.5 |
| Published | 2020-11-16 |
| First published | 2020-09-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 234.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhengyi |
| Maintainers | yellowbeee, bennyshi, zhengy1995, nijina, wu_wei, lucky-dog, yangshangzhi, linhaoran, hiitiger, ckken, doerme, hupp, magic_zhong, yz101x, wangcylive, tim2018 |

## Links

- npm: https://www.npmjs.com/package/@efox/message-middleware
- npm.io page: https://npm.io/package/@efox/message-middleware

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-jss](https://npm.io/package/react-jss.md) ^10.4.0
- [react-slick](https://npm.io/package/react-slick.md) ^0.27.11
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.49
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.22.2
- [@types/react-virtualized](https://npm.io/package/@types/react-virtualized.md) ^9.21.10

## Recent versions

- 1.5.5 (latest) — 2020-11-16
- 1.5.4 — 2020-11-02
- 1.5.3 — 2020-11-02
- 1.5.2 — 2020-11-02
- 1.5.1 — 2020-10-24
- 1.5.0 — 2020-10-23
- 1.4.9 — 2020-10-19
- 1.4.8 — 2020-10-12
- 1.4.7 — 2020-10-12
- 1.4.6 — 2020-10-12
- 1.4.5 — 2020-09-29
- 1.4.4 — 2020-09-29
- 1.4.3 — 2020-09-24
- 1.4.2 — 2020-09-24
- 1.4.1 — 2020-09-24
- … 29 more at https://npm.io/package/@efox/message-middleware/versions

## README

## 初始化
* yarn
```
yarn add @efox/message-middleware
```
* npm
```
npm install @efox/message-middleware
```

## API总览
* customHooks
* MessageList
* MobileInput

### customHooks
#### 1. useCollectMessage
存储接收的消息并以节流的方式响应至组件
##### 参数
  - 类型: Object
  - 内容

|  名称  |  解释  |  类型  |  默认值  |  单位  |  是否必填  |
|  ----  |  ----  |  ----  |  ----  |  ----  |  ----  |
|  maxCount  |  存储的最大容量，超过会清除之前的数据  |  number | 50 |  条  |  N  |
|  singleThreshold  |  单条消息响应至组件的延迟时间  |  number  |  200  |  ms  |  N  |
|  maxThreshold  |  最大必须响应至组件的延迟时间  |  number  |  600  |  ms  |  N  |
##### 返回值
  - 类型: Object
  - 内容

|  名称  |  解释  |  类型  |
|  ----  |  ----  |  ----  |
|  messageList  |  响应式数据结构  |  any[] |
|  clearMessageList  |  清除消息列表的句柄  |  Function  |
|  refresh  |  刷新消息列表的句柄  |  Function  |
|  pushInToMessageList  |  添加消息的句柄  |  (param: T\|T[]) => void  |
|  toggleRefusPush  |  开启/取消拒收消息功能  |  Function  |
##### 使用方式
```ts
declare type messageT = {message: string}
const { messageList, clearMessageList, refresh, pushInToMessageList, toggleRefusPush } = useCollectMessage<messageT>()
```
##### 使用示例
  ```tsx
  // MyComponent.tsx

  import { useCollectMessage } from '@efox/message-middleware'
    declare type messageT = {message: string}
    const MyComponent = () => {
      const {
        messageList,
        clearMessageList,
        refresh,
        pushInToMessageList,
        toggleRefusPush
      } = useCollectMessage<messageT>({
         maxCount: 100,
         singleThreshold: 150
      })
      pushInToMessageList({message: 'test'})
      clearMessageList()
      refresh()
      return <span>{messageList.map(({message}) => message)}</span>
    }
  ```
#### 2. useBeforeFirstRender
只在第一次渲染前执行的hook
##### 参数
  - 类型: 
  ```js
  () => (() => void | void)
  ```
##### 返回值: void
##### 使用方式
```ts
useBeforeFirstRender(() => {
  // do something here
})
```
##### 使用示例
  ```tsx
  // MyComponent.tsx

  import { useBeforeFirstRender } from '@efox/message-middleware'
    useBeforeFirstRender(() => {
      const num = setInterval(() => {
        console.log('do sth u want before render')
      }, 1000)
      // be called after the component destroyed
      return () => clearInterval(num)
    })
  ```
### MessageList
消息展示组件
#### props
|  名称  |  解释  |  类型  |  默认值  |  是否必填  |
|  ----  |  ----  |  ----  |  ----  |  ----  |
|  list  | 消息列表 |  any[]  |  -  |  Y  |
|  renderProps  | 渲染单行内容的函数 |  (messageObj: any, otherProps: any) => JSX.Element or string  |  -  |  Y  |
|  otherProps  | 会传入渲染函数的额外属性 |  any  |  {}  |  N  |
|  listStyle  |  整个列表的外层样式  |  React.CSSProperties  |  {}  |  N  |
|  singleRowStyle  |  列表内容单行外层样式  |  React.CSSProperties  |  {}  |  N  |
|  needClearCache  |  是否需要清除缓存，若无大小变化，则不需要考虑设置该参数  |  boolean  |  false  |  N  |
|  onScroll  |  列表滚动的回调  |  (param: ScrollParams) => void  |  function() {}  |  N  |
|  scrollToAlignment  |  滚动对齐方式  |  auto \| end \| start \| center  |  auto  |  N  |
#### 方法
* scrollToRow
  跳转至某一行，接收一个`index`参数,示例:
  ```tsx
  // MyComponent.tsx

  import type { listRefT } from '@efox/message-middleware'

  const MyComponent = () => {
    const listRef = useRef<listRefT>(null)
    listRef.current?.scrollToRow(0)
    return <MessageList ref={listRef} />
  }
  
  ```
#### 使用示例
```tsx
// MyComponent.tsx

import { MessageList } from '@efox/message-middleware'

// declare message type
declare type messageT = { message: string, style?: React.CSSProperties }

// define message list
const list: messageT[] = [
  {message: 'welcome to use @efox/message-middleware'},
  {message: "hello YY"}
]

// define other properties
const otherProps = {
  onClick: () => console.log('I love YY')
}

const MessageRender = (messageObj: messageT, otherProps) => {
  if (messageObj.style) {
      // return JSX.Element
      return <span style={messageObj.style} onClick={otherProps.onClick}>{messageObj.message}</span>
  }
  // return string
  return messageObj.message
}

const MyCompnent = () => {
  return <MessageList
            list={list}
            otherProps={otherProps}
            renderProps={MessageRender}
            listStyle={{ paddingRight: '50px' }}
            singleRowStyle={{ textAlign: 'left', padding: '0 5px' }}
          />
}

export default MyCompnent
```
### MobileInput
可插入表情的移动端组件
#### props
|  名称  |  解释  |  类型  |  默认值  |  是否必填  |
|  ----  |  ----  |  ----  |  ----  |  ----  |
|  emojiList  |  表情列表, 若设置了name,在onChange及onSend事件中返回的则是name的内容，反之则返回src  |  {name?: string, src: string}[]  |  []  |  N  |
|  emojiContainerHeight  |  表情容器高度,若表情分页，则该属性无效  |  number  |  135  |  N  |
|  paginationInfo  |  分页信息,若需要分页，则设置该属性即可  |  {rowCount: number, columnCount: number}  |  -  |  N  |
|  onChange  |  输入内容变化时回调的方法  |  (text: string) => void  |  () => {}  |  N  |
|  onSend  |  点击发送按钮后的回调  |  (text: string) => void  |  () => {}  |  N  |
|  placeHolder  |  输入框空白时显示的内容  |  string |  ''  |  N  |
|  smileBtn  |  自定义表情按钮组件(替换时无需在组件上另外实现点击事件)  |  ReactElement |  -  |  N  |
|  extraBtn  |  额外的自定义按钮组件(点击事件需额外实现)  |  ReactElement  |  -  |  N  |
|  sendBtn  |  自定义发送按钮组件(替换时无需在组件上另外实现点击事件)  |  ReactElement  |  _  |  N  |


#### 使用示例
```tsx
// MyComponent.tsx

import { MobileInput } from '@efox/message-middleware'
import {ReactComponent as Phone} from 'my/dir/phone.svg'
// MobileInput's style
import '@efox/message-middleware/lib/index.css'
const paginationInfo = {
  rowCount: 3,
  columnCount: 6,
}
const MyCompnent = () => {
  return <MobileInput
          paginationInfo={paginationInfo}
          extraBtn={<Phone onClick={() => alert('phone')} width={30} height={30} fill="#D0D2DA" />}
          placeHolder="参与互动..."
          onSend={text => {
            console.log(text)
          }}
        />
}

export default MyCompnent
```

---
_Source: https://npm.io/package/@efox/message-middleware · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._