<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Moment from 'moment';
import classnames from 'classnames';
import { extendMoment } from 'moment-range';
import { withStyles } from 'material-ui';
import DomainPropTypes from '../constants/prop-types';
import * as defaultUtils from '../utils/utils';

const moment = extendMoment(Moment);

export class YearSelection extends PureComponent {
  static propTypes = {
    date: PropTypes.shape({}).isRequired,
    minDate: DomainPropTypes.date.isRequired,
    maxDate: DomainPropTypes.date.isRequired,
    classes: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    disablePast: PropTypes.bool.isRequired,
    disableFuture: PropTypes.bool.isRequired,
    animateYearScrolling: PropTypes.bool,
    utils: PropTypes.object,
  }

  static defaultProps = {
    animateYearScrolling: false,
    utils: defaultUtils,
  }

  componentDidMount = () => {
    this.scrollToCurrentYear();
  }

  onYearSelect = (year) => {
    const { date, onChange, utils } = this.props;

    const newDate = utils.setYear(date, year);
    onChange(newDate);
  }

  scrollToCurrentYear = () => {
    const { animateYearScrolling, classes } = this.props;
    const currentYearElement = document.getElementsByClassName(classes.selectedYear)[0];

    if (currentYearElement) {
      currentYearElement.scrollIntoView({
        behavior: animateYearScrolling ? 'smooth' : 'auto',
      });
    }
  }

  render() {
    const {
      minDate, maxDate, date, classes, disablePast, disableFuture, utils,
    } = this.props;
    const currentYear = utils.getYear(date);

    return (
      <div className={classes.container}>
        {
          Array.from(moment.range(minDate, maxDate).by('year'))
            .map((year) => {
              const yearNumber = utils.getYear(year);
              const className = classnames(classes.yearItem, {
                [classes.selectedYear]: yearNumber === currentYear,
                [classes.disabled]: (
                  (disablePast && year.isBefore(moment(), 'year')) ||
                  (disableFuture && year.isAfter(moment(), 'year'))
                ),
              });

              return (
                <div
                  role="button"
                  key={utils.getYearText(year)}
                  className={className}
                  tabIndex={yearNumber}
                  onClick={() => this.onYearSelect(yearNumber)}
                  onKeyPress={() => this.onYearSelect(yearNumber)}
                >
                  {utils.getYearText(year)}
                </div>
              );
            })
        }
      </div>
    );
  }
}

const styles = theme => ({
  container: {
    maxHeight: 320,
    overflowY: 'auto',
    justifyContent: 'center',
  },
  yearItem: {
    height: 36,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    outline: 'none',
    color: theme.palette.text.primary,
  },
  selectedYear: {
    fontSize: 26,
    margin: '10px 0',
    color: theme.palette.primary[500],
  },
  disabled: {
    pointerEvents: 'none',
    color: theme.palette.text.hint,
  },
});

export default withStyles(styles, { name: 'MuiPickersYearSelection' })(YearSelection);<commit_msg>change height to avoid container jumping<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Moment from 'moment';
import classnames from 'classnames';
import { extendMoment } from 'moment-range';
import { withStyles } from 'material-ui';
import DomainPropTypes from '../constants/prop-types';
import * as defaultUtils from '../utils/utils';

const moment = extendMoment(Moment);

export class YearSelection extends PureComponent {
  static propTypes = {
    date: PropTypes.shape({}).isRequired,
    minDate: DomainPropTypes.date.isRequired,
    maxDate: DomainPropTypes.date.isRequired,
    classes: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    disablePast: PropTypes.bool.isRequired,
    disableFuture: PropTypes.bool.isRequired,
    animateYearScrolling: PropTypes.bool,
    utils: PropTypes.object,
  }

  static defaultProps = {
    animateYearScrolling: false,
    utils: defaultUtils,
  }

  componentDidMount = () => {
    this.scrollToCurrentYear();
  }

  onYearSelect = (year) => {
    const { date, onChange, utils } = this.props;

    const newDate = utils.setYear(date, year);
    onChange(newDate);
  }

  scrollToCurrentYear = () => {
    const { animateYearScrolling, classes } = this.props;
    const currentYearElement = document.getElementsByClassName(classes.selectedYear)[0];

    if (currentYearElement) {
      currentYearElement.scrollIntoView({
        behavior: animateYearScrolling ? 'smooth' : 'auto',
      });
    }
  }

  render() {
    const {
      minDate, maxDate, date, classes, disablePast, disableFuture, utils,
    } = this.props;
    const currentYear = utils.getYear(date);

    return (
      <div className={classes.container}>
        {
          Array.from(moment.range(minDate, maxDate).by('year'))
            .map((year) => {
              const yearNumber = utils.getYear(year);
              const className = classnames(classes.yearItem, {
                [classes.selectedYear]: yearNumber === currentYear,
                [classes.disabled]: (
                  (disablePast && year.isBefore(moment(), 'year')) ||
                  (disableFuture && year.isAfter(moment(), 'year'))
                ),
              });

              return (
                <div
                  role="button"
                  key={utils.getYearText(year)}
                  className={className}
                  tabIndex={yearNumber}
                  onClick={() => this.onYearSelect(yearNumber)}
                  onKeyPress={() => this.onYearSelect(yearNumber)}
                >
                  {utils.getYearText(year)}
                </div>
              );
            })
        }
      </div>
    );
  }
}

const styles = theme => ({
  container: {
    maxHeight: 300,
    overflowY: 'auto',
    justifyContent: 'center',
  },
  yearItem: {
    height: 36,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    outline: 'none',
    color: theme.palette.text.primary,
  },
  selectedYear: {
    fontSize: 26,
    margin: '10px 0',
    color: theme.palette.primary[500],
  },
  disabled: {
    pointerEvents: 'none',
    color: theme.palette.text.hint,
  },
});

export default withStyles(styles, { name: 'MuiPickersYearSelection' })(YearSelection);
{'fraction_non_alphanumeric': 0.12803133001958125, 'fraction_numerical': 0.004217502635939147, 'mean_word_length': 2.451143451143451, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 25, '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': '3381767', 'n_tokens_mistral': 1932, 'n_tokens_neox': 1881, 'n_words': 382}