<commit_before>import React, { Component, Children, createElement } from 'react'
import ReactDOM, { findDOMNode } from 'react-dom'
import PropTypes from 'prop-types'
import { VelocityTransitionGroup } from 'velocity-react'
import Transition from 'react-motion-ui-pack'
import { Manager, Target, Popper, Arrow } from '../src/react-popper'
import { placements } from 'popper.js'
import Portal from 'react-travel'
import outy from 'outy'

import './main.scss'

const modifiers = {
  customStyle: {
    enabled: true,
    fn: data => {
      data.styles = {
        ...data.styles,
        background: 'red',
      }
      return data
    },
  },
}

const CustomTarget = ({ innerRef, ...props }) =>
  <button
    ref={innerRef}
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 200,
      height: 200,
      padding: 24,
      fontSize: 32,
      lineHeight: '1',
      backgroundColor: 'rebeccapurple',
      color: 'rgba(255, 255, 255, 0.5)',
      userSelect: 'none',
    }}
    {...props}
  />

const CustomPopper = ({ innerRef, style, ...props }) =>
  <div
    ref={innerRef}
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 200,
      height: 100,
      fontSize: 16,
      backgroundColor: '#ff9121',
      color: 'rgba(255, 255, 255, 0.8)',
      ...style,
    }}
    {...props}
  />

class MultipleExample extends Component {
  state = {
    placement: 'bottom',
  }

  render() {
    const { placement } = this.state
    return (
      <div>
        <select
          value={placement}
          onChange={e => this.setState({ placement: e.target.value })}
        >
          {placements.map(placement =>
            <option key={placement} value={placement}>
              {placement}
            </option>
          )}
        </select>
        <Manager>
          <Target style={{ width: 120, height: 120, background: 'red' }}>
            Box
          </Target>
          <Popper placement="left">
            {({ popperProps }) =>
              <div {...popperProps} className="popper">
                Content Left
                <Arrow>
                  {({ arrowProps }) =>
                    <span {...arrowProps} className="popper__arrow" />}
                </Arrow>
              </div>}
          </Popper>
          <Popper className="popper" placement="right">
            Content Right
            <Arrow className="popper__arrow" />
          </Popper>
          <Portal>
            <Popper
              className="popper"
              placement={placement}
              modifiers={modifiers}
            >
              Dynamic Content in a Portal!
              <Arrow className="popper__arrow" />
            </Popper>
          </Portal>
        </Manager>
      </div>
    )
  }
}

class AnimatedExample extends Component {
  state = {
    isOpen: false,
  }

  componentDidMount() {
    this._setOusideTap()
  }

  componentDidUpdate(lastProps, lastState) {
    if (lastState.isOpen !== this.state.isOpen) {
      setTimeout(() => this._setOusideTap())
    }
  }

  componentWillUnmount() {
    this.outsideTap.remove()
  }

  _setOusideTap = () => {
    const elements = [this.target]

    if (this.popper) {<commit_msg>changing example to be a PureComponent<commit_after>import React, { Component, PureComponent, Children, createElement } from 'react'
import ReactDOM, { findDOMNode } from 'react-dom'
import PropTypes from 'prop-types'
import { VelocityTransitionGroup } from 'velocity-react'
import Transition from 'react-motion-ui-pack'
import { Manager, Target, Popper, Arrow } from '../src/react-popper'
import { placements } from 'popper.js'
import Portal from 'react-travel'
import outy from 'outy'

import './main.scss'

const modifiers = {
  customStyle: {
    enabled: true,
    fn: data => {
      data.styles = {
        ...data.styles,
        background: 'red',
      }
      return data
    },
  },
}

const CustomTarget = ({ innerRef, ...props }) =>
  <button
    ref={innerRef}
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 200,
      height: 200,
      padding: 24,
      fontSize: 32,
      lineHeight: '1',
      backgroundColor: 'rebeccapurple',
      color: 'rgba(255, 255, 255, 0.5)',
      userSelect: 'none',
    }}
    {...props}
  />

const CustomPopper = ({ innerRef, style, ...props }) =>
  <div
    ref={innerRef}
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 200,
      height: 100,
      fontSize: 16,
      backgroundColor: '#ff9121',
      color: 'rgba(255, 255, 255, 0.8)',
      ...style,
    }}
    {...props}
  />

class MultipleExample extends Component {
  state = {
    placement: 'bottom',
  }

  render() {
    const { placement } = this.state
    return (
      <div>
        <select
          value={placement}
          onChange={e => this.setState({ placement: e.target.value })}
        >
          {placements.map(placement =>
            <option key={placement} value={placement}>
              {placement}
            </option>
          )}
        </select>
        <Manager>
          <Target style={{ width: 120, height: 120, background: 'red' }}>
            Box
          </Target>
          <Popper placement="left">
            {({ popperProps }) =>
              <div {...popperProps} className="popper">
                Content Left
                <Arrow>
                  {({ arrowProps }) =>
                    <span {...arrowProps} className="popper__arrow" />}
                </Arrow>
              </div>}
          </Popper>
          <Popper className="popper" placement="right">
            Content Right
            <Arrow className="popper__arrow" />
          </Popper>
          <Portal>
            <Popper
              className="popper"
              placement={placement}
              modifiers={modifiers}
            >
              Dynamic Content in a Portal!
              <Arrow className="popper__arrow" />
            </Popper>
          </Portal>
        </Manager>
      </div>
    )
  }
}

class AnimatedExample extends PureComponent {
  state = {
    isOpen: false,
  }

  componentDidMount() {
    this._setOusideTap()
  }

  componentDidUpdate(lastProps, lastState) {
    if (lastState.isOpen !== this.state.isOpen) {
      setTimeout(() => this._setOusideTap())
    }
  }

  componentWillUnmount() {
    this.outsideTap.remove()
  }

  _setOusideTap = () => {
    const elements = [this.target]

    if (this.popper) {
{'fraction_non_alphanumeric': 0.13954545454545456, 'fraction_numerical': 0.015454545454545455, 'mean_word_length': 1.858813339107839, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 75, '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': '461530', 'n_tokens_mistral': 2066, 'n_tokens_neox': 1960, 'n_words': 448}