<commit_before>var React = require('react');
var cloneWithProps = require('react/lib/cloneWithProps');

var ActionSheet = React.createClass({
  getInitialState: function () {
    return {active: false};
  },
  setActiveState: function (active) {
    this.setState({active: active});
  },
  render: function () {
    var children = React.Children.map(this.props.children, function (child, index) {
      var extraProps = {active: this.state.active};
      if (child.type.displayName === 'ActionSheetButton') {
        extraProps.setActiveState = this.setActiveState;
      }
      return cloneWithProps(child, extraProps);
    }.bind(this));
    return (
      <div className='action-sheet-container'>
        {children}
      </div><commit_msg>Action Sheet closes itself when on outside click; also added ability to close it via trigger<commit_after>var React = require('react');
var cloneWithProps = require('react/lib/cloneWithProps');
var foundationApi = require('../utils/foundation-api');

var ActionSheet = React.createClass({
  getInitialState: function () {
    return {active: false};
  },
  setActiveState: function (active) {
    this.setState({active: active});
  },
  onBodyClick: function (e) {
    var el = e.target;
    var insideActionSheet = false;

    do {
      if(el.classList && el.classList.contains('action-sheet-container')) {
        insideActionSheet = true;
        break;
      }

    } while ((el = el.parentNode));

    if(!insideActionSheet) {
      this.setActiveState(false);
    }
  },
  componentDidMount: function () {
    if(this.props.id) {
      foundationApi.subscribe(this.props.id, function (name, msg) {
        if (msg === 'open') {
          this.setState({active: true});
        } else if (msg === 'close') {
          this.setState({active: false});
        } else if (msg === 'toggle') {
          this.setState({active: !this.state.active});
        }
      }.bind(this));
    }
    document.body.addEventListener('click', this.onBodyClick);
  },
  componentWillUnmount: function () {
    if(this.props.id) foundationApi.unsubscribe(this.props.id);
    document.body.removeEventListener('click', this.onBodyClick);
  },
  render: function () {
    var children = React.Children.map(this.props.children, function (child, index) {
      var extraProps = {active: this.state.active};
      if (child.type.displayName === 'ActionSheetButton') {
        extraProps.setActiveState = this.setActiveState;
      }
      return cloneWithProps(child, extraProps);
    }.bind(this));
    return (
      <div id={this.props.id} data-closable={true}  className='action-sheet-container'>
        {children}
      </div>
{'fraction_non_alphanumeric': 0.14602935641701167, 'fraction_numerical': 0.0, 'mean_word_length': 3.166144200626959, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, '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': '4008362', 'n_tokens_mistral': 778, 'n_tokens_neox': 777, 'n_words': 162}