<commit_before>/* @flow */
import React, { createFactory, createClass, DOM as e, PropTypes as t } from 'react'
import { calcBounds } from './utils'
import Debug from 'debug'
import addResizeListener from 'element-resize-event'



let log = Debug('react-popover')

let bodyStyle = {
  display: 'inline-flex',
  flexDirection: 'column',
  padding: '4rem'
}

let containerStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  display: 'flex',
  'WebkitTransitionProperty': 'top, left',
  'WebkitTransitionDuration': '200ms',
  'WebkitTransitionEasingFunction': 'ease-in'
}

let tipTranslateFuncDict = { row: 'translateY', column: 'translateX' }

let axes = {}

axes.row = {
  main: { start: 'x', end: 'x2', size: 'w' },
  cross: { start: 'y', end: 'y2', size: 'h' }
}

axes.column = {
  main: axes.row.cross,
  cross: axes.row.main
}



export default createClass({
  name: 'popover',
  propTypes: {
    lockPoint: t.string.isRequired,
    children: t.element.isRequired,
    tipSize: t.number.isOptional
  },
  getInitialState() {
    return {
      standing: 'above'
    }
  },
  getDefaultProps() {
    return {
      tipSize: 7,
      offset: 4
    }
  },
  checkForLockPositionChange() {
    if (this.measureLockBounds()) this.resolvePopoverLayout()
  },
  resolvePopoverLayout() {

    let pos = { }

    /* Find the optimal zone to position self. Measure the size of each zone and use the one with
    the greatest area. */

    let zone = resolveZoneChoice(this.p2, this.frameBounds)

    this.setState({
      standing: zone.standing
    })

    let flexFlow = zone.orientation === 'landscape' ? 'row' : 'column'
    let isBefore = zone.order === 'before'
    let dir = isBefore ? -1 : 1
    let axis = axes[flexFlow]

    log('zone', zone)
    log('axes', axis)

    let mainLength = this.size[axis.main.size]
    let lockMainStart = this.p2[axis.main.start]
    let lockMainEnd = this.p2[axis.main.end]

    /* When positioning self on the cross-axis do not exceed frame bounds. The strategy to achieve
    this is thus: First position cross-axis self to the cross-axis-center of the the lock. Then,
    offset self by the amount that self is past the boundaries of frame. */

    pos[axis.main.start] = (

      /* Unfortunately we cannot seem to get around the base fact that layout expands in a direction
      which happens to be leftward, and thus in the before-case requires an extra step of offsetting
      all the leftware-expansion (AKA the length of the element). TODO: We could potentially have
      helper functions like positionBefore / after etc. to abstract this complexity away. */
      (isBefore ? lockMainStart - mainLength : lockMainEnd)

      // offset allows users to control the distance betweent the tip and the lock.
      + (this.props.offset * dir)
    )
    pos[axis.cross.start] = center('cross', flexFlow, this.p2) - (this.size[axis.cross.size] / 2)
    pos.x2 = pos.x + this.size.w
    pos.y2 = pos.y + this.size.h

    /* Constrain containerEl Position */

    if (pos[axis.cross.start] < this.frameBounds[axis.cross.start]) {
      pos[axis.cross.start] = this.frameBounds[axis.cross.start]
    } else if (pos[axis.cross.end] > this.frameBounds[axis.cross.end]) {
      pos[axis.cross.start] = pos[axis.cross.start] - (pos[axis.cross.end] - this.frameBounds[axis.cross.end])
    }

    /* Apply Layout */

    this.containerEl.style.top = pos.y
    this.containerEl.style.left = pos.x

    this.bodyEl.style.order = isBefore ? 0 : 1
    this.containerEl.style.flexFlow = flexFlow

    /* Calculate Tip Center */

    let tipCrossPos = (
      center('cross', flexFlow, this.p2)

      /* We do not have to calcualte half-of-tip-size since tip-size specifies
      the length from base to tip which is half of total length already. */

      - this.props.tipSize

      /* Because tip is positioned by the browser relative containerEl but
      targeting absolute center of lock we need to cancel the containerEl
      positioning so as to hit our intended position. */

      - pos[axis.cross.start]
    )

    this.tipEl.style.transform = `${tipTranslateFuncDict[flexFlow]}(${tipCrossPos}px)`

    /* Record fact that repaint is synced. */

    this.p1 = this.p2
  },
  measurePopoverSize() {
    this.size = {
      w: this.containerEl.offsetWidth,<commit_msg>Fix setting of top/left styles<commit_after>/* @flow */
import React, { createFactory, createClass, DOM as e, PropTypes as t } from 'react'
import { calcBounds } from './utils'
import Debug from 'debug'
import addResizeListener from 'element-resize-event'



let log = Debug('react-popover')

let bodyStyle = {
  display: 'inline-flex',
  flexDirection: 'column',
  padding: '4rem'
}

let containerStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  display: 'flex',
  'WebkitTransitionProperty': 'top, left',
  'WebkitTransitionDuration': '200ms',
  'WebkitTransitionEasingFunction': 'ease-in'
}

let tipTranslateFuncDict = { row: 'translateY', column: 'translateX' }

let axes = {}

axes.row = {
  main: { start: 'x', end: 'x2', size: 'w' },
  cross: { start: 'y', end: 'y2', size: 'h' }
}

axes.column = {
  main: axes.row.cross,
  cross: axes.row.main
}



export default createClass({
  name: 'popover',
  propTypes: {
    lockPoint: t.string.isRequired,
    children: t.element.isRequired,
    tipSize: t.number.isOptional
  },
  getInitialState() {
    return {
      standing: 'above'
    }
  },
  getDefaultProps() {
    return {
      tipSize: 7,
      offset: 4
    }
  },
  checkForLockPositionChange() {
    if (this.measureLockBounds()) this.resolvePopoverLayout()
  },
  resolvePopoverLayout() {

    let pos = { }

    /* Find the optimal zone to position self. Measure the size of each zone and use the one with
    the greatest area. */

    let zone = resolveZoneChoice(this.p2, this.frameBounds)

    this.setState({
      standing: zone.standing
    })

    let flexFlow = zone.orientation === 'landscape' ? 'row' : 'column'
    let isBefore = zone.order === 'before'
    let dir = isBefore ? -1 : 1
    let axis = axes[flexFlow]

    log('zone', zone)
    log('axes', axis)

    let mainLength = this.size[axis.main.size]
    let lockMainStart = this.p2[axis.main.start]
    let lockMainEnd = this.p2[axis.main.end]

    /* When positioning self on the cross-axis do not exceed frame bounds. The strategy to achieve
    this is thus: First position cross-axis self to the cross-axis-center of the the lock. Then,
    offset self by the amount that self is past the boundaries of frame. */

    pos[axis.main.start] = (

      /* Unfortunately we cannot seem to get around the base fact that layout expands in a direction
      which happens to be leftward, and thus in the before-case requires an extra step of offsetting
      all the leftware-expansion (AKA the length of the element). TODO: We could potentially have
      helper functions like positionBefore / after etc. to abstract this complexity away. */
      (isBefore ? lockMainStart - mainLength : lockMainEnd)

      // offset allows users to control the distance betweent the tip and the lock.
      + (this.props.offset * dir)
    )
    pos[axis.cross.start] = center('cross', flexFlow, this.p2) - (this.size[axis.cross.size] / 2)
    pos.x2 = pos.x + this.size.w
    pos.y2 = pos.y + this.size.h

    /* Constrain containerEl Position */

    if (pos[axis.cross.start] < this.frameBounds[axis.cross.start]) {
      pos[axis.cross.start] = this.frameBounds[axis.cross.start]
    } else if (pos[axis.cross.end] > this.frameBounds[axis.cross.end]) {
      pos[axis.cross.start] = pos[axis.cross.start] - (pos[axis.cross.end] - this.frameBounds[axis.cross.end])
    }

    /* Apply Layout */

    log('pos', pos)
    this.containerEl.style.top = `${pos.y}px`
    this.containerEl.style.left = `${pos.x}px`
    this.bodyEl.style.order = isBefore ? 0 : 1
    this.containerEl.style.flexFlow = flexFlow

    /* Calculate Tip Center */

    let tipCrossPos = (
      center('cross', flexFlow, this.p2)

      /* We do not have to calcualte half-of-tip-size since tip-size specifies
      the length from base to tip which is half of total length already. */

      - this.props.tipSize

      /* Because tip is positioned by the browser relative containerEl but
      targeting absolute center of lock we need to cancel the containerEl
      positioning so as to hit our intended position. */

      - pos[axis.cross.start]
    )

    this.tipEl.style.transform = `${tipTranslateFuncDict[flexFlow]}(${tipCrossPos}px)`

    /* Record fact that repaint is synced. */

    this.p1 = this.p2
  },
  measurePopoverSize() {
    this.size = {
      w: this.containerEl.offsetWidth,
{'fraction_non_alphanumeric': 0.12067374250115367, 'fraction_numerical': 0.0055376095985233045, 'mean_word_length': 2.9494305239179957, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '6737281', 'n_tokens_mistral': 2794, 'n_tokens_neox': 2696, 'n_words': 819}