<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { forbidExtraProps } from 'airbnb-prop-types';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';

import { DayPickerNavigationPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';

import LeftArrow from './LeftArrow';
import RightArrow from './RightArrow';
import ChevronUp from './ChevronUp';
import ChevronDown from './ChevronDown';
import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';

import {
  HORIZONTAL_ORIENTATION,
  VERTICAL_SCROLLABLE,
} from '../constants';

const propTypes = forbidExtraProps({
  ...withStylesPropTypes,
  disablePrev: PropTypes.bool,
  disableNext: PropTypes.bool,
  navPrev: PropTypes.node,
  navNext: PropTypes.node,
  orientation: ScrollableOrientationShape,

  onPrevMonthClick: PropTypes.func,
  onNextMonthClick: PropTypes.func,

  // internationalization
  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),

  isRTL: PropTypes.bool,
});

const defaultProps = {
  disablePrev: false,
  disableNext: false,
  navPrev: null,
  navNext: null,
  orientation: HORIZONTAL_ORIENTATION,

  onPrevMonthClick() {},
  onNextMonthClick() {},

  // internationalization
  phrases: DayPickerNavigationPhrases,
  isRTL: false,
};

function DayPickerNavigation({
  disablePrev,
  disableNext,
  navPrev,
  navNext,
  onPrevMonthClick,
  onNextMonthClick,
  orientation,
  phrases,
  isRTL,
  styles,
}) {
  const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
  const isVertical = orientation !== HORIZONTAL_ORIENTATION;
  const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;

  let navPrevIcon = navPrev;
  let navNextIcon = navNext;
  let isDefaultNavPrev = false;
  let isDefaultNavNext = false;
  if (!navPrevIcon) {
    isDefaultNavPrev = true;
    let Icon = isVertical ? ChevronUp : LeftArrow;
    if (isRTL && !isVertical) {
      Icon = RightArrow;
    }
    navPrevIcon = (
      <Icon
        {...css(
          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
          isVertical && styles.DayPickerNavigation_svg__vertical,
          disablePrev && styles.DayPickerNavigation_svg__disabled,
        )}
      />
    );
  }

  if (!navNextIcon) {
    isDefaultNavNext = true;
    let Icon = isVertical ? ChevronDown : RightArrow;
    if (isRTL && !isVertical) {
      Icon = LeftArrow;
    }
    navNextIcon = (
      <Icon
        {...css(
          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
          isVertical && styles.DayPickerNavigation_svg__vertical,
          disableNext && styles.DayPickerNavigation_svg__disabled,
        )}
      />
    );
  }

  const isDefaultNav = isVerticalScrollable
    ? isDefaultNavNext
    : (isDefaultNavNext || isDefaultNavPrev);

  return (
    <div
      {...css(
        styles.DayPickerNavigation,
        isHorizontal && styles.DayPickerNavigation__horizontal,
        ...(isVertical ? [
          styles.DayPickerNavigation__vertical,
          isDefaultNav && styles.DayPickerNavigation__verticalDefault,
        ] : []),
        ...(isVerticalScrollable ? [
          styles.DayPickerNavigation__verticalScrollable,
          isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
        ] : []),
      )}
    >
      {!isVerticalScrollable && (
        <div
          role="button"
          tabIndex="0"
          {...css(
            styles.DayPickerNavigation_button,
            isDefaultNavPrev && styles.DayPickerNavigation_button__default,
            disablePrev && styles.DayPickerNavigation_button__disabled,
            ...(isHorizontal ? [
              styles.DayPickerNavigation_button__horizontal,
              ...(isDefaultNavPrev ? [
                styles.DayPickerNavigation_button__horizontalDefault,
                !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
                isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
              ] : []),
            ] : []),
            ...(isVertical ? [
              styles.DayPickerNavigation_button__vertical,
              ...(isDefaultNavPrev ? [
                styles.DayPickerNavigation_button__verticalDefault,
                styles.DayPickerNavigation_prevButton__verticalDefault,
              ] : []),
            ] : []),
          )}
          aria-disabled={disablePrev ? true : undefined}
          aria-label={phrases.jumpToPrevMonth}
          onClick={disablePrev ? undefined : onPrevMonthClick}
          onKeyUp={disablePrev ? undefined : (e) => {
            const { key } = e;
            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
          }}
          onMouseUp={(e) => {
            e.currentTarget.blur();
          }}
        >
          {navPrevIcon}
        </div>
      )}

      <div
        role="button"
        tabIndex="0"
        {...css(
          styles.DayPickerNavigation_button,
          isDefaultNavNext && styles.DayPickerNavigation_button__default,
          disableNext && styles.DayPickerNavigation_button__disabled,
          ...(isHorizontal ? [
            styles.DayPickerNavigation_button__horizontal,
            ...(isDefaultNavNext ? [
              styles.DayPickerNavigation_button__horizontalDefault,
              isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
              !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
            ] : []),
          ] : []),
          ...(isVertical ? [
            styles.DayPickerNavigation_button__vertical,
            styles.DayPickerNavigation_nextButton__vertical,
            ...(isDefaultNavNext ? [
              styles.DayPickerNavigation_button__verticalDefault,
              styles.DayPickerNavigation_nextButton__verticalDefault,
              isVerticalScrollable
                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
            ] : []),
          ] : []),
        )}
        aria-disabled={disableNext ? true : undefined}
        aria-label={phrases.jumpToNextMonth}
        onClick={disableNext ? undefined : onNextMonthClick}
        onKeyUp={disableNext ? undefined : (e) => {
          const { key } = e;
          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
        }}
        onMouseUp={(e) => {
          e.currentTarget.blur();
        }}
      >
        {navNextIcon}
      </div>
    </div>
  );
}

DayPickerNavigation.propTypes = propTypes;
DayPickerNavigation.defaultProps = defaultProps;

export default withStyles(({ reactDates: { color, zIndex } }) => ({
  DayPickerNavigation: {
    position: 'relative',
    zIndex: zIndex + 2,
  },

  DayPickerNavigation__horizontal: {
    height: 0,
  },

  DayPickerNavigation__vertical: {},
  DayPickerNavigation__verticalScrollable: {},

  DayPickerNavigation__verticalDefault: {
    position: 'absolute',
    width: '100%',
    height: 52,<commit_msg>disable onMouseUp event by disable prop<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { forbidExtraProps } from 'airbnb-prop-types';
import { css, withStyles, withStylesPropTypes } from 'react-with-styles';

import { DayPickerNavigationPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';

import LeftArrow from './LeftArrow';
import RightArrow from './RightArrow';
import ChevronUp from './ChevronUp';
import ChevronDown from './ChevronDown';
import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';

import {
  HORIZONTAL_ORIENTATION,
  VERTICAL_SCROLLABLE,
} from '../constants';

const propTypes = forbidExtraProps({
  ...withStylesPropTypes,
  disablePrev: PropTypes.bool,
  disableNext: PropTypes.bool,
  navPrev: PropTypes.node,
  navNext: PropTypes.node,
  orientation: ScrollableOrientationShape,

  onPrevMonthClick: PropTypes.func,
  onNextMonthClick: PropTypes.func,

  // internationalization
  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),

  isRTL: PropTypes.bool,
});

const defaultProps = {
  disablePrev: false,
  disableNext: false,
  navPrev: null,
  navNext: null,
  orientation: HORIZONTAL_ORIENTATION,

  onPrevMonthClick() {},
  onNextMonthClick() {},

  // internationalization
  phrases: DayPickerNavigationPhrases,
  isRTL: false,
};

function DayPickerNavigation({
  disablePrev,
  disableNext,
  navPrev,
  navNext,
  onPrevMonthClick,
  onNextMonthClick,
  orientation,
  phrases,
  isRTL,
  styles,
}) {
  const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
  const isVertical = orientation !== HORIZONTAL_ORIENTATION;
  const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;

  let navPrevIcon = navPrev;
  let navNextIcon = navNext;
  let isDefaultNavPrev = false;
  let isDefaultNavNext = false;
  if (!navPrevIcon) {
    isDefaultNavPrev = true;
    let Icon = isVertical ? ChevronUp : LeftArrow;
    if (isRTL && !isVertical) {
      Icon = RightArrow;
    }
    navPrevIcon = (
      <Icon
        {...css(
          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
          isVertical && styles.DayPickerNavigation_svg__vertical,
          disablePrev && styles.DayPickerNavigation_svg__disabled,
        )}
      />
    );
  }

  if (!navNextIcon) {
    isDefaultNavNext = true;
    let Icon = isVertical ? ChevronDown : RightArrow;
    if (isRTL && !isVertical) {
      Icon = LeftArrow;
    }
    navNextIcon = (
      <Icon
        {...css(
          isHorizontal && styles.DayPickerNavigation_svg__horizontal,
          isVertical && styles.DayPickerNavigation_svg__vertical,
          disableNext && styles.DayPickerNavigation_svg__disabled,
        )}
      />
    );
  }

  const isDefaultNav = isVerticalScrollable
    ? isDefaultNavNext
    : (isDefaultNavNext || isDefaultNavPrev);

  return (
    <div
      {...css(
        styles.DayPickerNavigation,
        isHorizontal && styles.DayPickerNavigation__horizontal,
        ...(isVertical ? [
          styles.DayPickerNavigation__vertical,
          isDefaultNav && styles.DayPickerNavigation__verticalDefault,
        ] : []),
        ...(isVerticalScrollable ? [
          styles.DayPickerNavigation__verticalScrollable,
          isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault,
        ] : []),
      )}
    >
      {!isVerticalScrollable && (
        <div
          role="button"
          tabIndex="0"
          {...css(
            styles.DayPickerNavigation_button,
            isDefaultNavPrev && styles.DayPickerNavigation_button__default,
            disablePrev && styles.DayPickerNavigation_button__disabled,
            ...(isHorizontal ? [
              styles.DayPickerNavigation_button__horizontal,
              ...(isDefaultNavPrev ? [
                styles.DayPickerNavigation_button__horizontalDefault,
                !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
                isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
              ] : []),
            ] : []),
            ...(isVertical ? [
              styles.DayPickerNavigation_button__vertical,
              ...(isDefaultNavPrev ? [
                styles.DayPickerNavigation_button__verticalDefault,
                styles.DayPickerNavigation_prevButton__verticalDefault,
              ] : []),
            ] : []),
          )}
          aria-disabled={disablePrev ? true : undefined}
          aria-label={phrases.jumpToPrevMonth}
          onClick={disablePrev ? undefined : onPrevMonthClick}
          onKeyUp={disablePrev ? undefined : (e) => {
            const { key } = e;
            if (key === 'Enter' || key === ' ') onPrevMonthClick(e);
          }}
          onMouseUp={disablePrev ? undefined : (e) => {
            e.currentTarget.blur();
          }}
        >
          {navPrevIcon}
        </div>
      )}

      <div
        role="button"
        tabIndex="0"
        {...css(
          styles.DayPickerNavigation_button,
          isDefaultNavNext && styles.DayPickerNavigation_button__default,
          disableNext && styles.DayPickerNavigation_button__disabled,
          ...(isHorizontal ? [
            styles.DayPickerNavigation_button__horizontal,
            ...(isDefaultNavNext ? [
              styles.DayPickerNavigation_button__horizontalDefault,
              isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
              !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
            ] : []),
          ] : []),
          ...(isVertical ? [
            styles.DayPickerNavigation_button__vertical,
            styles.DayPickerNavigation_nextButton__vertical,
            ...(isDefaultNavNext ? [
              styles.DayPickerNavigation_button__verticalDefault,
              styles.DayPickerNavigation_nextButton__verticalDefault,
              isVerticalScrollable
                && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
            ] : []),
          ] : []),
        )}
        aria-disabled={disableNext ? true : undefined}
        aria-label={phrases.jumpToNextMonth}
        onClick={disableNext ? undefined : onNextMonthClick}
        onKeyUp={disableNext ? undefined : (e) => {
          const { key } = e;
          if (key === 'Enter' || key === ' ') onNextMonthClick(e);
        }}
        onMouseUp={disableNext ? undefined : (e) => {
          e.currentTarget.blur();
        }}
      >
        {navNextIcon}
      </div>
    </div>
  );
}

DayPickerNavigation.propTypes = propTypes;
DayPickerNavigation.defaultProps = defaultProps;

export default withStyles(({ reactDates: { color, zIndex } }) => ({
  DayPickerNavigation: {
    position: 'relative',
    zIndex: zIndex + 2,
  },

  DayPickerNavigation__horizontal: {
    height: 0,
  },

  DayPickerNavigation__vertical: {},
  DayPickerNavigation__verticalScrollable: {},

  DayPickerNavigation__verticalDefault: {
    position: 'absolute',
    width: '100%',
    height: 52,
{'fraction_non_alphanumeric': 0.10472396129766648, 'fraction_numerical': 0.0012805919180421173, 'mean_word_length': 2.613624678663239, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 29, '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': '1198868', 'n_tokens_mistral': 3898, 'n_tokens_neox': 3857, 'n_words': 640}