scrm.antd/src/pages/ChatLogsPhone/components/LogsContent.tsx

import { ChatBar } from '@/pages/ChatLogs/components/ChatBar';
import { ChatTime } from '@/pages/ChatLogs/components/ChatTime';
import { Spin } from 'antd';
import React, { useEffect, useRef } from 'react';
import styles from '../index.module.scss';

type IProps = {
  tabKeyRef: any;
  selectInnerStaffRef: any;
  selectCustFollowRef: any;
  chatLogLoading: any;
  page: any;
  isAllChatRef: any;
  curr_page: any;
  chatLogs: any;
  selectStaff: any;
  groupMembersObjRef: any;
  chatLogLoadingRef: any;
};

export const LogsContent: React.FC<IProps> = (props) => {
  const {
    tabKeyRef,
    selectInnerStaffRef,
    selectCustFollowRef,
    chatLogLoading,
    page,
    isAllChatRef,
    curr_page,
    chatLogs,
    selectStaff,
    groupMembersObjRef,
    chatLogLoadingRef,
  } = props;

  const chatBoxRef = useRef<any>();

  // 监听DOM变动
  const callback = function () {
    // Use traditional 'for loops' for IE 11
    document.querySelector('.curr_page' + curr_page)?.scrollIntoView(true);
  };
  const observer = new MutationObserver(callback);

  useEffect(() => {
    observer.observe(chatBoxRef.current, { childList: true });

    return () => {
      observer.disconnect();
    };
  }, [props.curr_page]);

  return (
    <Spin spinning={chatLogLoading} style={{ display: 'block' }} size="large">
      <div
        className={styles.chatLogBox}
        ref={chatBoxRef}
        onScroll={(e: any) => {
          if (e.target?.scrollTop == 0 && !isAllChatRef.current && !chatLogLoadingRef.current) {
            page(curr_page + 1);
          }
        }}
      >
        {isAllChatRef.current ? (
          <div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>
            没有更多聊天记录了
          </div>
        ) : null}
        {chatLogs.map((item: any) => {
          if (item.curr_page) {
            return (
              <div key={item.curr_page} className={`curr_page${curr_page}`} style={{ height: 0 }} />
            );
          } else {
            return (
              <div key={item.seq}>
                {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
                <ChatTime msgtime={item.msg_time} />
                {tabKeyRef.current == '2' ? (
                  <ChatBar
                    from={selectStaff}
                    to={groupMembersObjRef.current[item.msg_from]}
                    chat={item}
                  />
                ) : (
                  <ChatBar
                    from={selectStaff}
                    to={
                      tabKeyRef.current == '0'
                        ? selectInnerStaffRef.current
                        : selectCustFollowRef.current
                    }
                    chat={item}
                  />
                )}
              </div>
            );
          }
        })}
      </div>
    </Spin>
  );
};