<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './DropdownButton.scss';

/**
 * Component for creating a button that when clicked shows a menu based in the provided options.
 * @memberof widget-components
 */
class DropdownButton extends Component {

   constructor(props) {
      super(props);

      this.state = {
         selected: this.props.selected,
         dropDown: false
      };

      this.buttonElement = null;

      this.onBackgroundClick = this.onBackgroundClick.bind(this);
      this.onButtonClick = this.onButtonClick.bind(this);
   }

   /*
    * called on background click when drop down window is open
    * @param {SyntheticEvent} event Click event
    */
   onBackgroundClick(ev) {
      // setState prevents event from being processed by onOptionClick handler
      // so it is moved to the next cycle
      this.setState({ dropDown: false });
      window.document.documentElement.removeEventListener('click', this.onBackgroundClick, true);
      let btnIndex = ev.target.getAttribute('data-kw-dropdown-button-index');
      if (btnIndex == null) {
         return;
      }
      btnIndex = parseInt(btnIndex, 10);
      if (this.state.selected === btnIndex) {
         return;
      }
      this.setState({ selected: btnIndex });
      this.props.onChange(btnIndex);
   }

   /*
    * Shows drop down box with available options.
    * @param {SyntheticEvent} event Click event
    */
   onButtonClick(event) {
      event.stopPropagation();
      this.setState({
         dropDown: true,
      });
      window.document.documentElement.addEventListener('click', this.onBackgroundClick, true); // add event to the capture phase instead of bubble phase
   }

   /*
    * Renders button
    * @returns {XML}
    */
   render() {
      // calculating position of dropdown while in mobile mode
      let dropdownMobileStyling = {};
      if (this.state.dropDown && this.buttonElement) {
         const { top, bottom } = this.buttonElement.getBoundingClientRect();
         dropdownMobileStyling = {
            top: top,
            bottom: 'auto'
         };
         if (this.props.verticalAlignment === 'bottom') {
            dropdownMobileStyling = {
               top: 'auto',
               bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - bottom
            };
         }
      }

      let cssHAlignClass = styles.leftAlign;
      if (this.props.horizontalAlignment === 'right') {
         cssHAlignClass = styles.rightAlign;
      }

      let cssVAlignClass = styles.topAlign;
      if (this.props.verticalAlignment === 'bottom') {
         cssVAlignClass = styles.bottomAlign;
      }

      return (
         <div className={styles.general}>
            <button
               ref={(node) => { this.buttonElement = node }}
               className={'KambiWidget-card-support-text-color ' + styles.button} onClick={this.onButtonClick}
            >
               {this.props.options[this.state.selected]}
               <i />
            </button>
            {
               this.state.dropDown &&
                  <ul
                     style={dropdownMobileStyling}
                     className={`${styles.dropDown}  ${cssHAlignClass} ${cssVAlignClass}`}
                  >
                     {this.props.options.map((option, i) => {
                        const classNames = [
                           'KambiWidget-card-background-color',
                           'KambiWidget-card-background-color--hoverable',
                           'KambiWidget-card-background-color--clickable'<commit_msg>Added Kambi classnames<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './DropdownButton.scss';

/**
 * Component for creating a button that when clicked shows a menu based in the provided options.
 * @memberof widget-components
 */
class DropdownButton extends Component {

   constructor(props) {
      super(props);

      this.state = {
         selected: this.props.selected,
         dropDown: false
      };

      this.buttonElement = null;

      this.onBackgroundClick = this.onBackgroundClick.bind(this);
      this.onButtonClick = this.onButtonClick.bind(this);
   }

   /*
    * called on background click when drop down window is open
    * @param {SyntheticEvent} event Click event
    */
   onBackgroundClick(ev) {
      // setState prevents event from being processed by onOptionClick handler
      // so it is moved to the next cycle
      this.setState({ dropDown: false });
      window.document.documentElement.removeEventListener('click', this.onBackgroundClick, true);
      let btnIndex = ev.target.getAttribute('data-kw-dropdown-button-index');
      if (btnIndex == null) {
         return;
      }
      btnIndex = parseInt(btnIndex, 10);
      if (this.state.selected === btnIndex) {
         return;
      }
      this.setState({ selected: btnIndex });
      this.props.onChange(btnIndex);
   }

   /*
    * Shows drop down box with available options.
    * @param {SyntheticEvent} event Click event
    */
   onButtonClick(event) {
      event.stopPropagation();
      this.setState({
         dropDown: true,
      });
      window.document.documentElement.addEventListener('click', this.onBackgroundClick, true); // add event to the capture phase instead of bubble phase
   }

   /*
    * Renders button
    * @returns {XML}
    */
   render() {
      // calculating position of dropdown while in mobile mode
      let dropdownMobileStyling = {};
      if (this.state.dropDown && this.buttonElement) {
         const { top, bottom } = this.buttonElement.getBoundingClientRect();
         dropdownMobileStyling = {
            top: top,
            bottom: 'auto'
         };
         if (this.props.verticalAlignment === 'bottom') {
            dropdownMobileStyling = {
               top: 'auto',
               bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - bottom
            };
         }
      }

      let cssHAlignClass = styles.leftAlign;
      if (this.props.horizontalAlignment === 'right') {
         cssHAlignClass = styles.rightAlign;
      }

      let cssVAlignClass = styles.topAlign;
      if (this.props.verticalAlignment === 'bottom') {
         cssVAlignClass = styles.bottomAlign;
      }

      return (
         <div className={styles.general}>
            <button
               ref={(node) => { this.buttonElement = node }}
               className={'KambiWidget-league-table-selection-label KambiWidget-card-support-text-color ' + styles.button} onClick={this.onButtonClick}
            >
               {this.props.options[this.state.selected]}
               <i />
            </button>
            {
               this.state.dropDown &&
                  <ul
                     style={dropdownMobileStyling}
                     className={`${styles.dropDown}  ${cssHAlignClass} ${cssVAlignClass}`}
                  >
                     {this.props.options.map((option, i) => {
                        const classNames = [
                           'KambiWidget-card-background-color',
                           'KambiWidget-card-background-color--hoverable',
                           'KambiWidget-card-background-color--clickable',
                           'KambiWidget-league-table-header-text'
{'fraction_non_alphanumeric': 0.10958350181965225, 'fraction_numerical': 0.0008087343307723412, 'mean_word_length': 2.0040485829959516, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 17, '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': '6630527', 'n_tokens_mistral': 1975, 'n_tokens_neox': 1930, 'n_words': 433}