CHOMPStation2/tgui/packages/tgui-panel/chat/ChatPanel.tsx

/**
 * @file
 * @copyright 2020 Aleksej Komarov
 * @license MIT
 */

import { Component, createRef, RefObject } from 'react';
import { Button } from 'tgui-core/components';
import { shallowDiffers } from 'tgui-core/react';

import { chatRenderer } from './renderer';

type ChatPanelTypes = {
  lineHeight?: number;
  fontSize?: number;
};

export class ChatPanel extends Component<ChatPanelTypes> {
  ref: RefObject<HTMLDivElement>;
  handleScrollTrackingChange: (value: any) => void;
  state: { scrollTracking: boolean };
  constructor(props) {
    super(props);
    this.ref = createRef();
    this.state = {
      scrollTracking: true,
    };
    this.handleScrollTrackingChange = (value) =>
      this.setState({
        scrollTracking: value,
      });
  }

  componentDidMount() {
    chatRenderer.mount(this.ref.current);
    chatRenderer.events.on(
      'scrollTrackingChanged',
      this.handleScrollTrackingChange,
    );
    this.componentDidUpdate();
  }

  componentWillUnmount() {
    chatRenderer.events.off(
      'scrollTrackingChanged',
      this.handleScrollTrackingChange,
    );
  }

  componentDidUpdate(prevProps?) {
    requestAnimationFrame(() => {
      chatRenderer.ensureScrollTracking();
    });
    const shouldUpdateStyle =
      !prevProps || shallowDiffers(this.props, prevProps);
    if (shouldUpdateStyle) {
      chatRenderer.assignStyle({
        width: '100%',
        'white-space': 'pre-wrap',
        'font-size': this.props.fontSize,
        'line-height': this.props.lineHeight,
      });
    }
  }

  render() {
    const { scrollTracking } = this.state;
    return (
      <>
        <div className="Chat" ref={this.ref} />
        {!scrollTracking && (
          <Button
            className="Chat__scrollButton"
            icon="arrow-down"
            onClick={() => chatRenderer.scrollToBottom()}
          >
            Scroll to bottom
          </Button>
        )}
      </>
    );
  }
}