<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DismissButtonLGReverse } from '../components/buttons/Buttons'
import CommentContainer from './CommentContainer'
import { css, media, parent, select } from '../styles/jss'
import * as s from '../styles/jso'
import { SHORTCUT_KEYS } from '../constants/application_types'

const lightBoxImageStyle = css(
  s.block,
  s.relative,
  s.bgcF2,
  { margin: '0 auto' },
  select(
    '> .LightBoxMask',
    s.fullscreen,
    s.fullWidth,
    s.fullHeight,
    s.bgcModal,
    s.zModal,
    { transition: `background-color 0.4s ${s.ease}` },
    select(
      '> .LightBox',
      s.relative,
      s.containedAlignMiddle,
      s.center,
      select(
        '> .Comment',
        { padding: 0 },
        select(
          '> .CommentBody',
          { padding: 0,
            margin: 0,
            border: 'none',
          },
        ),
      ),
      select(
        '> .ImageAttachment',
        { width: '200px', backgroundColor: 'red' },
      ),
    ),
  ),
)

// Wraps LightBox controls/state around a component
// This function takes a component
export default function (WrappedComponent) {
  return class extends Component {
    static propTypes = {
      commentIds: PropTypes.object,
    }

    static defaultProps = {
      commentIds: null,
    }

    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }

      this.handleToggle = this.handleToggle.bind(this)
      this.closeLightBox = this.closeLightBox.bind(this)
    }

    componentDidMount() {
      console.log('$$$ hi')
      console.log(this.props.commentIds)
    }

    componentWillUnmount() {
      console.log('$$$ goodbye')

      const releaseKeys = true
      this.bindKeys(releaseKeys)
    }

    componentDidUpdate() {
      console.log(this.props.commentIds)
    }

    bindKeys(unbind) {
      Mousetrap.unbind(SHORTCUT_KEYS.ESC)
      // Mousetrap.unbind(SHORTCUT_KEYS.PREV)
      // Mousetrap.unbind(SHORTCUT_KEYS.NEXT)

      if (!unbind) {
        Mousetrap.bind(SHORTCUT_KEYS.ESC, () => { this.closeLightBox() })

        // if (lightBox && assetId) {
        //   Mousetrap.bind(SHORTCUT_KEYS.ESC, () => { this.setLightBox(lightBox, assetId) })
        //   Mousetrap.bind(SHORTCUT_KEYS.PREV, () => { this.advanceLightBox('prev') })
        //   Mousetrap.bind(SHORTCUT_KEYS.NEXT, () => { this.advanceLightBox('next') })
        // }
      }
    }

    handleToggle() {
      console.log('show/hide lightbox')

      this.bindKeys()
      return this.setState({
        open: true,
      })
    }

    closeLightBox() {
      console.log('close me')

      const releaseKeys = true
      this.bindKeys(releaseKeys)

      return this.setState({
        open: false,
      })
    }

    render() {
      const { commentIds } = this.props

      return (
        <div className="with-lightbox">
          {this.state.open &&
            <div className={lightBoxImageStyle}>
              <div className="LightBoxMask">
                <DismissButtonLGReverse
                  onClick={this.closeLightBox}
                />
                <div className="LightBox">
                  <p className="ImageAttachment">lol</p>
                  {commentIds.map(id =>
                    (<CommentContainer
                      toggleLightBox={this.handleToggle}
                      isLightBox
                      commentId={id}
                      key={`commentContainer_${id}`}
                    />),
                  )}
                </div>
              </div>
            </div>
          }
          <WrappedComponent
            toggleLightBox={this.handleToggle}
            {...this.props}
          />
        </div>
      )
    }
  }
}<commit_msg>light box - click on anything except images/buttons should close modal<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DismissButtonLGReverse } from '../components/buttons/Buttons'
import CommentContainer from './CommentContainer'
import { css, media, parent, select } from '../styles/jss'
import * as s from '../styles/jso'
import { SHORTCUT_KEYS } from '../constants/application_types'

const lightBoxImageStyle = css(
  s.block,
  s.relative,
  s.bgcF2,
  { margin: '0 auto' },
  select(
    '> .LightBoxMask',
    s.fullscreen,
    s.fullWidth,
    s.fullHeight,
    s.bgcModal,
    s.zModal,
    { transition: `background-color 0.4s ${s.ease}` },
    select(
      '> .LightBox',
      s.relative,
      s.containedAlignMiddle,
      s.center,
      select(
        '> .Comment',
        { padding: 0 },
        select(
          '> .CommentBody',
          { padding: 0,
            margin: 0,
            border: 'none',
          },
        ),
      ),
      select(
        '> .ImageAttachment',
        { width: '200px', backgroundColor: 'red' },
      ),
    ),
  ),
)

// Wraps LightBox controls/state around a component
// This function takes a component
export default function (WrappedComponent) {
  return class extends Component {
    static propTypes = {
      commentIds: PropTypes.object,
    }

    static defaultProps = {
      commentIds: null,
    }

    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }

      this.handleToggle = this.handleToggle.bind(this)
      this.closeLightBox = this.closeLightBox.bind(this)
    }

    componentDidMount() {
      console.log('$$$ hi')
      console.log(this.props.commentIds)
    }

    componentWillUnmount() {
      console.log('$$$ goodbye')

      const releaseKeys = true
      this.bindKeys(releaseKeys)
    }

    componentDidUpdate() {
      console.log(this.props.commentIds)
    }

    bindKeys(unbind) {
      Mousetrap.unbind(SHORTCUT_KEYS.ESC)
      // Mousetrap.unbind(SHORTCUT_KEYS.PREV)
      // Mousetrap.unbind(SHORTCUT_KEYS.NEXT)

      if (!unbind) {
        Mousetrap.bind(SHORTCUT_KEYS.ESC, () => { this.closeLightBox() })

        // if (lightBox && assetId) {
        //   Mousetrap.bind(SHORTCUT_KEYS.ESC, () => { this.setLightBox(lightBox, assetId) })
        //   Mousetrap.bind(SHORTCUT_KEYS.PREV, () => { this.advanceLightBox('prev') })
        //   Mousetrap.bind(SHORTCUT_KEYS.NEXT, () => { this.advanceLightBox('next') })
        // }
      }
    }

    handleToggle() {
      console.log('show/hide lightbox')

      this.bindKeys()
      return this.setState({
        open: true,
      })
    }

    closeLightBox() {
      console.log('close me')

      const releaseKeys = true
      this.bindKeys(releaseKeys)

      return this.setState({
        open: false,
      })
    }

    handleMaskClick(e) {
      if (e.target.nodeName !== 'IMG' && e.target.nodeName !== 'BUTTON') {
        return this.closeLightBox()
      }
      return null
    }

    render() {
      const { commentIds } = this.props

      return (
        <div className="with-lightbox">
          {this.state.open &&
            <div className={lightBoxImageStyle}>
              <div className="LightBoxMask" onClick={(e) => this.handleMaskClick(e)}>
                <DismissButtonLGReverse
                  onClick={this.closeLightBox}
                />
                <div className="LightBox">
                  <p className="ImageAttachment">lol</p>
                  {commentIds.map(id =>
                    (<CommentContainer
                      toggleLightBox={this.handleToggle}
                      isLightBox
                      commentId={id}
                      key={`commentContainer_${id}`}
                    />),
                  )}
                </div>
              </div>
            </div>
          }
          <WrappedComponent
            toggleLightBox={this.handleToggle}
            {...this.props}
          />
        </div>
      )
    }
  }
}
{'fraction_non_alphanumeric': 0.13072312205075884, 'fraction_numerical': 0.0025506950644050503, 'mean_word_length': 1.7769121813031161, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 50, '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': '7571072', 'n_tokens_mistral': 2448, 'n_tokens_neox': 2368, 'n_words': 407}