初始化

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

使用方式

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