@efox/message-middleware v1.5.5

初始化

• yarn

yarn add @efox/message-middleware

• npm

npm install @efox/message-middleware

API总览

• customHooks
• MessageList
• MobileInput

customHooks

1. useCollectMessage

存储接收的消息并以节流的方式响应至组件

参数

• 类型: Object
• 内容

返回值

• 类型: Object
• 内容

使用方式

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

方法

• 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

使用示例

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