lost-sia/src/InfoBoxes/InfoBox.jsx

Single Image Annotation Tool

import React, { Component } from 'react'
import { Header, Message } from 'semantic-ui-react'
import Draggable from 'react-draggable'

class InfoBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      style: {
        position: 'fixed',
        top: 200,
        left: 200,
        width: 250,
      },
    }
  }

  componentDidMount() {
    this.updateStyle()
  }

  componentDidUpdate(prevProps) {
    if (this.props.defaultPos !== prevProps.defaultPos) {
      this.updateStyle()
    }
  }

  handleOnStop(e) {
    if (this.props.onStop) {
      this.props.onStop(e)
    }
  }

  updateStyle() {
    this.setState({
      style: { ...this.state.style, ...this.props.defaultPos },
    })
  }

  onDismiss(e) {
    if (this.props.onDismiss) {
      this.props.onDismiss(e)
    }
  }

  render() {
    if (!this.props.visible) return null
    return (
      <Draggable handle=".handle" onStop={(e) => this.handleOnStop(e)}>
        <div style={this.state.style}>
          <Message
            style={{ opacity: 0.98 }}
            onDismiss={(e) => {
              this.onDismiss(e)
            }}
            size="small"
          >
            <Header
              textAlign="center"
              as="h5"
              className="handle"
              style={{ cursor: 'grab' }}
            >
              {this.props.header}
            </Header>
            {/* <Message.Header textAlign='center' className="handle" style={{cursor: 'grab'}}>{this.props.header}</Message.Header> */}
            <hr />
            <Message.Content>{this.props.content}</Message.Content>
          </Message>
        </div>
      </Draggable>
    )
  }
}

export default InfoBox