Function MessageList

src/MessageList/MessageList.tsx:10–183

({
  referance = null,
  lockable = false,
  toBottomHeight = 300,
  downButton,
  ...props
})

import { IMessageListProps, MessageListEvent } from '../type'

const MessageList: FC<IMessageListProps> = ({
  referance = null,
  lockable = false,
  toBottomHeight = 300,
  downButton,
  ...props
}) => {
  const [scrollBottom, setScrollBottom] = useState(0)
  const [_downButton, setDownButton] = useState(false)
  const prevProps = useRef(props)

  const checkScroll = () => {
    var e = referance
    if (!e || !e.current) return

    if (toBottomHeight === '100%' || (toBottomHeight && scrollBottom < toBottomHeight)) {
      e.current.scrollTop = e.current.scrollHeight // scroll to bottom
    } else {
      if (lockable === true) {
        e.current.scrollTop = e.current.scrollHeight - e.current.offsetHeight - scrollBottom
      }
    }
  }

  useEffect(() => {
    if (!referance) return

    if (prevProps.current.dataSource.length !== props.dataSource.length) {
      setScrollBottom(getBottom(referance))
      checkScroll()
    }

    prevProps.current = props
  }, [prevProps, props])

  const getBottom = (e: any) => {
    if (e.current) return e.current.scrollHeight - e.current.scrollTop - e.current.offsetHeight
    return e.scrollHeight - e.scrollTop - e.offsetHeight
  }

  const onOpen: MessageListEvent = (item, index, event) => {
    if (props.onOpen instanceof Function) props.onOpen(item, index, event)
  }

  const onDownload: MessageListEvent = (item, index, event) => {
    if (props.onDownload instanceof Function) props.onDownload(item, index, event)
  }

  const onPhotoError: MessageListEvent = (item, index, event) => {
    if (props.onPhotoError instanceof Function) props.onPhotoError(item, index, event)
  }

  const onClick: MessageListEvent = (item, index, event) => {
    if (props.onClick instanceof Function) props.onClick(item, index, event)
  }

  const onTitleClick: MessageListEvent = (item, index, event) => {
    if (props.onTitleClick instanceof Function) props.onTitleClick(item, index, event)