<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { isFunction, get, findIndex } from 'lodash';
import Dropdown from 'antd/lib/dropdown';
import Icon from 'antd/lib/icon';
import Menu from 'antd/lib/menu';
import Typography from 'antd/lib/typography';

import './DynamicButton.less';

const { Text } = Typography;

function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
  const menu = (
    <Menu
      className="dynamic-menu"
      onClick={({ key }) => onSelect(get(options, key, 'static'))}
      selectedKeys={[`${findIndex(options, { value: selectedDynamicValue })}`]}
      data-test="DynamicButtonMenu"
    >
      {options.map((option, index) => (
        // eslint-disable-next-line react/no-array-index-key
        <Menu.Item key={index}>
          {option.name} {option.label && (
            <em>{isFunction(option.label) ? option.label() : option.label}</em>
          )}
        </Menu.Item>
      ))}
      {enabled && <Menu.Divider />}
      {enabled && (
        <Menu.Item>
          <Icon type="arrow-left" /><Text type="secondary">Back to Static Value</Text>
        </Menu.Item>
      )}
    </Menu>
  );

  return (
    <a onClick={e => e.stopPropagation()}>
      <Dropdown.Button
        overlay={menu}
        className="dynamic-button"
        placement="bottomRight"
        trigger={['click']}
        icon={(
          <Icon
            type="thunderbolt"
            theme={enabled ? 'twoTone' : 'outlined'}
            className="dynamic-icon"
          />
        )}
        data-test="DynamicButton"
      />
    </a>
  );
}

DynamicButton.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
  selectedDynamicValue: PropTypes.string,
  onSelect: PropTypes.func,
  enabled: PropTypes.bool,
};<commit_msg>Allow dynamic values dropdown to scroll with the page (#4040)<commit_after>import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { isFunction, get, findIndex } from 'lodash';
import Dropdown from 'antd/lib/dropdown';
import Icon from 'antd/lib/icon';
import Menu from 'antd/lib/menu';
import Typography from 'antd/lib/typography';

import './DynamicButton.less';

const { Text } = Typography;

function DynamicButton({ options, selectedDynamicValue, onSelect, enabled }) {
  const menu = (
    <Menu
      className="dynamic-menu"
      onClick={({ key }) => onSelect(get(options, key, 'static'))}
      selectedKeys={[`${findIndex(options, { value: selectedDynamicValue })}`]}
      data-test="DynamicButtonMenu"
    >
      {options.map((option, index) => (
        // eslint-disable-next-line react/no-array-index-key
        <Menu.Item key={index}>
          {option.name} {option.label && (
            <em>{isFunction(option.label) ? option.label() : option.label}</em>
          )}
        </Menu.Item>
      ))}
      {enabled && <Menu.Divider />}
      {enabled && (
        <Menu.Item>
          <Icon type="arrow-left" /><Text type="secondary">Back to Static Value</Text>
        </Menu.Item>
      )}
    </Menu>
  );

  const containerRef = useRef(null);

  return (
    <div ref={containerRef}>
      <a onClick={e => e.stopPropagation()}>
        <Dropdown.Button
          overlay={menu}
          className="dynamic-button"
          placement="bottomRight"
          trigger={['click']}
          icon={(
            <Icon
              type="thunderbolt"
              theme={enabled ? 'twoTone' : 'outlined'}
              className="dynamic-icon"
            />
            )}
          getPopupContainer={() => containerRef.current}
          data-test="DynamicButton"
        />
      </a>
    </div>
  );
}

DynamicButton.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
  selectedDynamicValue: PropTypes.string,
  onSelect: PropTypes.func,
  enabled: PropTypes.bool,
};
{'fraction_non_alphanumeric': 0.15451080050825922, 'fraction_numerical': 0.0010165184243964421, 'mean_word_length': 2.5587703435804703, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 44, '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': '4041276', 'n_tokens_mistral': 1186, 'n_tokens_neox': 1175, 'n_words': 234}