<commit_before>import React, { Component } from 'react';

// import TabContainer from './TabContainer';
// import DropdownContainer from './DropdownContainer';
import './App.css';

class App extends Component {
  render() {
    return (
      // <div>
      //   <div
      //     style={{
      //       display: 'flex',
      //       position: 'relative'
      //     }}
      //     id="app"
      //   >
      //     <TabContainer />
      //     <DropdownContainer />
      //   </div>
      <div>
        <PopoverContainer
          id="1"
          buttonMarginTop={30}
          buttonMarginLeft={20}
          direction="RIGHT"
        />
        <PopoverContainer
          id="2"
          buttonMarginTop={130}
          buttonMarginLeft={120}
          direction="RIGHT"
        />
        {/* <PopoverContainer buttonPosLeft={300} direction="LEFT" /> */}
      </div>
      // </div>
    );
  }
}

class PopoverContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popVisible: false,
      buttonWidth: null,
      buttonHeight: null
    };
  }

  componentDidMount() {
    let btnEle = document.getElementById('pop-btn');
    let position = btnEle.getBoundingClientRect();

    this.setState({
      buttonWidth: position.width,
      buttonHeight: position.height
    });
  }

  render() {
    const popContainerStyle = {
      margin: '50px',
      position: 'relative'
    };

    const triggerStyle = {
      zIndex: '1',
      marginTop: this.props.buttonMarginTop,
      marginLeft: this.props.buttonMarginLeft
    };

    const content =
      'Building a popover on right in React.React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.';

    return (
      <div style={popContainerStyle}>
        <button
          id="pop-btn"
          onClick={() => this.setState({ popVisible: !this.state.popVisible })}
          style={triggerStyle}
        >
          Popover on {this.props.direction}
        </button>
        <PopoverContent
          id={this.props.id}
          direction={this.props.direction}
          buttonMarginLeft={this.props.buttonMarginLeft}
          buttonMarginTop={this.props.buttonMarginTop}
          buttonWidth={this.state.buttonWidth}
          buttonHeight={this.state.buttonHeight}
          contentHeight={this.state.contentHeight}
          content={content}
          popVisible={this.state.popVisible}
        />

      </div>
    );
  }
}

class PopoverContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contentHeight: 0
    };<commit_msg>user content can be added<commit_after>import React, { Component } from 'react';

// import TabContainer from './TabContainer';
// import DropdownContainer from './DropdownContainer';
import './App.css';

class App extends Component {
  render() {
    return (
      // <div>
      //   <div
      //     style={{
      //       display: 'flex',
      //       position: 'relative'
      //     }}
      //     id="app"
      //   >
      //     <TabContainer />
      //     <DropdownContainer />
      //   </div>
      <div>
        <PopoverContainer
          id="1"
          content="If only Bradley's arm was longer. Best photo ever. #oscars pic.twitter.com/C9U5NOtGap"
          buttonMarginTop={30}
          buttonMarginLeft={20}
          direction="RIGHT"
        />
        <PopoverContainer
          id="2"
          content="To all the little girls watching...never doubt that you are valuable and powerful & deserving of every chance & opportunity in the world."
          buttonMarginTop={130}
          buttonMarginLeft={120}
          direction="RIGHT"
        />
        {/* <PopoverContainer buttonPosLeft={300} direction="LEFT" /> */}
      </div>
      // </div>
    );
  }
}

class PopoverContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popVisible: false,
      buttonWidth: null,
      buttonHeight: null
    };
  }

  componentDidMount() {
    let btnEle = document.getElementById('pop-btn');
    let position = btnEle.getBoundingClientRect();

    this.setState({
      buttonWidth: position.width,
      buttonHeight: position.height
    });
  }

  render() {
    const popContainerStyle = {
      margin: '50px',
      position: 'relative'
    };

    const triggerStyle = {
      zIndex: '1',
      marginTop: this.props.buttonMarginTop,
      marginLeft: this.props.buttonMarginLeft
    };

    return (
      <div style={popContainerStyle}>
        <button
          id="pop-btn"
          onClick={() => this.setState({ popVisible: !this.state.popVisible })}
          style={triggerStyle}
        >
          Popover on {this.props.direction}
        </button>
        <PopoverContent
          id={this.props.id}
          direction={this.props.direction}
          buttonMarginLeft={this.props.buttonMarginLeft}
          buttonMarginTop={this.props.buttonMarginTop}
          buttonWidth={this.state.buttonWidth}
          buttonHeight={this.state.buttonHeight}
          contentHeight={this.state.contentHeight}
          content={this.props.content}
          popVisible={this.state.popVisible}
        />

      </div>
    );
  }
}

class PopoverContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contentHeight: 0
    };
{'fraction_non_alphanumeric': 0.12267590229675537, 'fraction_numerical': 0.007291286912139993, 'mean_word_length': 1.990190735694823, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3685709', 'n_tokens_mistral': 1549, 'n_tokens_neox': 1539, 'n_words': 320}