react komponent klasowy (to co jest teraz)

mail@pastecode.io avatar
unknown
javascript
2 years ago
1.8 kB
1
Indexable
Never
import React from 'react';
import PanelComponent from '../PanelComponent';
import Subscribers from '../services/Subscribers';

import './Footer.css';

class Footer extends PanelComponent {

    constructor (props) {
      super(props);

      this.state = {
        editor: {
          line: 1,
          column: 1,
          language: null,
        },
      };
      this.subscribers = [];
    }

    componentDidMount () {
      this.subscribers.push(Subscribers.subscribe('EDITOR_CURSOR_POSITION', (topic, data) => {
        this.setState((prevState) => {
          return {
            editor: {
              ...prevState.editor,
              line: data.line,
              column: data.column,
            },
          };
        });
      }));

      this.subscribers.push(Subscribers.subscribe('EDITOR_CHANGE_LANGUAGE', (topic, data) => {
        this.setState((prevState) => {
          return {
            editor: {
              ...prevState.editor,
              language: data.language,
            },
          };
        });
      }));
    }

    componentWillUnmount () {
      Subscribers.unsubscribe(this.subscribers);
      delete this.subscribers;
      this.subscribers = [];
    }

    render () {

      return (
        <div className="ide-footer d-flex">
          <div className="editor-information mr-auto">
            { 
              this.state.editor.line !== null && 
              this.state.editor.column !== null && 
              (<div>Ln {this.state.editor.line}, Col {this.state.editor.column}</div>)
            }
            { 
              this.state.editor.language !== null &&
              (<div>{this.state.editor.language}</div>)
            }
          </div>
        </div>
      );
    }
}

export default Footer;