名称	解释	类型	默认值	单位	是否必填
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

使用方式

declare type messageT = {message: string}
const { messageList, clearMessageList, refresh, pushInToMessageList, toggleRefusPush } = useCollectMessage<messageT>()

使用示例

// 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

参数

类型:

() => (() => void | void)

返回值: void

使用方式

useBeforeFirstRender(() => {
  // do something here
})

使用示例

// 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参数,示例:

// MyComponent.tsx

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

const MyComponent = () => {
  const listRef = useRef<listRefT>(null)
  listRef.current?.scrollToRow(0)
  return <MessageList ref={listRef} />
}

使用示例

// 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

使用示例

// 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