<commit_before>'use strict';
var React = require('react/addons');

var ScrollbarMixin = require('../mixins/scrollbar');
var Scrollbar = require('./scrollbar');

var ScrollbarWrapper = React.createClass({
  mixins: [ScrollbarMixin],

  componentDidMount: function() {
    window.addEventListener('message', this.handleReceive, false);
  },

  handleReceive: function(event) {
    var data = event.data;

    if (typeof(this[data.func]) === 'function') {
      this[data.func]();
    }
  },

  onResize: function() {
    this.handleContentResize();
  },

  render: function() {
    return (
      <div style={this.scrollbarContainerStyle()} className={this.containerClass()}>
        <div ref="scrollableContent" style={this.scrollbarContentStyle()} onScroll={this.handleScroll} className={this.props.className + ' ScrollbarContent'}>
          <div className="ScrollbarChildren" style={{position: 'relative'}}>
            {this.props.children}

            <iframe style={{width: '100%', height: '100%', position: 'absolute', top: '-100%', left: '-100%'}} frameBorder="0" src="javascript:window.onresize=function(){parent.postMessage({'func': 'onResize'}, '*')}" ></iframe>
          </div>

          <Scrollbar
            {... this.props}
            {... this.getScrollbarProps()} />
        </div><commit_msg>add a padding to the bottom of the ScrollChildren to make up for the negative margin used for hiding the native scrollbars<commit_after>'use strict';
var React = require('react/addons');

var ScrollbarMixin = require('../mixins/scrollbar');
var Scrollbar = require('./scrollbar');

var ScrollbarWrapper = React.createClass({
  mixins: [ScrollbarMixin],

  componentDidMount: function() {
    window.addEventListener('message', this.handleReceive, false);
  },

  handleReceive: function(event) {
    var data = event.data;

    if (typeof(this[data.func]) === 'function') {
      this[data.func]();
    }
  },

  onResize: function() {
    this.handleContentResize();
  },

  render: function() {
    return (
      <div style={this.scrollbarContainerStyle()} className={this.containerClass()}>
        <div ref="scrollableContent" style={this.scrollbarContentStyle()} onScroll={this.handleScroll} className={this.props.className + ' ScrollbarContent'}>
          <div className="ScrollbarChildren" style={{position: 'relative', paddingBottom: this.state.nativeScrollbarWidth}}>
            {this.props.children}

            <iframe style={{width: '100%', height: '100%', position: 'absolute', top: '-100%', left: '-100%'}} frameBorder="0" src="javascript:window.onresize=function(){parent.postMessage({'func': 'onResize'}, '*')}" ></iframe>
          </div>

          <Scrollbar
            {... this.props}
            {... this.getScrollbarProps()} />
        </div>
{'fraction_non_alphanumeric': 0.17163375224416516, 'fraction_numerical': 0.00933572710951526, 'mean_word_length': 3.6902356902356903, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, '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': '4135503', 'n_tokens_mistral': 835, 'n_tokens_neox': 803, 'n_words': 162}