@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/src/components/DayPickerNavigation.jsx

@@ -0,0 +1,445 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { forbidExtraProps } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+
+import { DayPickerNavigationPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import noflip from '../utils/noflip';
+
+import LeftArrow from './LeftArrow';
+import RightArrow from './RightArrow';
+import ChevronUp from './ChevronUp';
+import ChevronDown from './ChevronDown';
+import NavPositionShape from '../shapes/NavPositionShape';
+import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+
+import {
+  HORIZONTAL_ORIENTATION,
+  NAV_POSITION_BOTTOM,
+  NAV_POSITION_TOP,
+  VERTICAL_SCROLLABLE,
+} from '../constants';
+
+const propTypes = forbidExtraProps({
+  ...withStylesPropTypes,
+  disablePrev: PropTypes.bool,
+  disableNext: PropTypes.bool,
+  inlineStyles: PropTypes.object,
+  isRTL: PropTypes.bool,
+  navPosition: NavPositionShape,
+  navPrev: PropTypes.node,
+  navNext: PropTypes.node,
+  orientation: ScrollableOrientationShape,
+
+  onPrevMonthClick: PropTypes.func,
+  onNextMonthClick: PropTypes.func,
+
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
+
+  renderNavPrevButton: PropTypes.func,
+  renderNavNextButton: PropTypes.func,
+  showNavPrevButton: PropTypes.bool,
+  showNavNextButton: PropTypes.bool,
+});
+
+const defaultProps = {
+  disablePrev: false,
+  disableNext: false,
+  inlineStyles: null,
+  isRTL: false,
+  navPosition: NAV_POSITION_TOP,
+  navPrev: null,
+  navNext: null,
+  orientation: HORIZONTAL_ORIENTATION,
+
+  onPrevMonthClick() {},
+  onNextMonthClick() {},
+
+  // internationalization
+  phrases: DayPickerNavigationPhrases,
+
+  renderNavPrevButton: null,
+  renderNavNextButton: null,
+  showNavPrevButton: true,
+  showNavNextButton: true,
+};
+
+class DayPickerNavigation extends React.PureComponent {
+  render() {
+    const {
+      inlineStyles,
+      isRTL,
+      disablePrev,
+      disableNext,
+      navPosition,
+      navPrev,
+      navNext,
+      onPrevMonthClick,
+      onNextMonthClick,
+      orientation,
+      phrases,
+      renderNavPrevButton,
+      renderNavNextButton,
+      showNavPrevButton,
+      showNavNextButton,
+      css,
+      styles,
+    } = this.props;
+
+    if (!showNavNextButton && !showNavPrevButton) {
+      return null;
+    }
+
+    const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
+    const isVertical = orientation !== HORIZONTAL_ORIENTATION;
+    const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
+    const isBottomNavPosition = navPosition === NAV_POSITION_BOTTOM;
+    const hasInlineStyles = !!inlineStyles;
+
+    let navPrevIcon = navPrev;
+    let navNextIcon = navNext;
+    let isDefaultNavPrev = false;
+    let isDefaultNavNext = false;
+    let navPrevTabIndex = {};
+    let navNextTabIndex = {};
+
+    if (!navPrevIcon && !renderNavPrevButton && showNavPrevButton) {
+      navPrevTabIndex = { tabIndex: '0' };
+      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 && !renderNavNextButton && showNavNextButton) {
+      navNextTabIndex = { tabIndex: '0' };
+      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 = 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,
+            showNavPrevButton && styles.DayPickerNavigation__verticalScrollable_prevNav,
+          ] : []),
+          ...(isBottomNavPosition ? [
+            styles.DayPickerNavigation__bottom,
+            isDefaultNav && styles.DayPickerNavigation__bottomDefault,
+          ] : []),
+          hasInlineStyles && inlineStyles,
+        )}
+      >
+        {showNavPrevButton
+          && (renderNavPrevButton ? (
+            renderNavPrevButton({
+              ariaLabel: phrases.jumpToPrevMonth,
+              disabled: disablePrev,
+              onClick: disablePrev ? undefined : onPrevMonthClick,
+              onKeyUp: disablePrev ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onPrevMonthClick(e);
+                }
+              },
+              onMouseUp: disablePrev ? undefined : (e) => {
+                e.currentTarget.blur();
+              },
+            })
+          ) : (
+            <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+              role="button"
+              {...navPrevTabIndex}
+              {...css(
+                styles.DayPickerNavigation_button,
+                isDefaultNavPrev && styles.DayPickerNavigation_button__default,
+                disablePrev && styles.DayPickerNavigation_button__disabled,
+                ...(isHorizontal ? [
+                  styles.DayPickerNavigation_button__horizontal,
+                  ...(isDefaultNavPrev ? [
+                    styles.DayPickerNavigation_button__horizontalDefault,
+                    isBottomNavPosition
+                      && styles.DayPickerNavigation_bottomButton__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,
+                    isVerticalScrollable
+                      && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
+                  ] : []),
+                ] : []),
+              )}
+              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>
+          ))}
+
+        {showNavNextButton
+          && (renderNavNextButton ? (
+            renderNavNextButton({
+              ariaLabel: phrases.jumpToNextMonth,
+              disabled: disableNext,
+              onClick: disableNext ? undefined : onNextMonthClick,
+              onKeyUp: disableNext ? undefined : (e) => {
+                const { key } = e;
+                if (key === 'Enter' || key === ' ') {
+                  onNextMonthClick(e);
+                }
+              },
+              onMouseUp: disableNext ? undefined : (e) => {
+                e.currentTarget.blur();
+              },
+            })
+          ) : (
+            <div // eslint-disable-line jsx-a11y/interactive-supports-focus
+              role="button"
+              {...navNextTabIndex}
+              {...css(
+                styles.DayPickerNavigation_button,
+                isDefaultNavNext && styles.DayPickerNavigation_button__default,
+                disableNext && styles.DayPickerNavigation_button__disabled,
+                ...(isHorizontal ? [
+                  styles.DayPickerNavigation_button__horizontal,
+                  ...(isDefaultNavNext ? [
+                    styles.DayPickerNavigation_button__horizontalDefault,
+                    isBottomNavPosition
+                      && styles.DayPickerNavigation_bottomButton__horizontalDefault,
+                    isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault,
+                    !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault,
+                  ] : []),
+                ] : []),
+                ...(isVertical ? [
+                  styles.DayPickerNavigation_button__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__verticalScrollable_prevNav: {
+    zIndex: zIndex + 1, // zIndex + 2 causes the button to show on top of the day of week headers
+  },
+
+  DayPickerNavigation__verticalDefault: {
+    position: 'absolute',
+    width: '100%',
+    height: 52,
+    bottom: 0,
+    left: noflip(0),
+  },
+
+  DayPickerNavigation__verticalScrollableDefault: {
+    position: 'relative',
+  },
+
+  DayPickerNavigation__bottom: {
+    height: 'auto',
+  },
+
+  DayPickerNavigation__bottomDefault: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+
+  DayPickerNavigation_button: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    border: 0,
+    padding: 0,
+    margin: 0,
+  },
+
+  DayPickerNavigation_button__default: {
+    border: `1px solid ${color.core.borderLight}`,
+    backgroundColor: color.background,
+    color: color.placeholderText,
+
+    ':focus': {
+      border: `1px solid ${color.core.borderMedium}`,
+    },
+
+    ':hover': {
+      border: `1px solid ${color.core.borderMedium}`,
+    },
+
+    ':active': {
+      background: color.backgroundDark,
+    },
+  },
+
+  DayPickerNavigation_button__disabled: {
+    cursor: 'default',
+    border: `1px solid ${color.disabled}`,
+
+    ':focus': {
+      border: `1px solid ${color.disabled}`,
+    },
+
+    ':hover': {
+      border: `1px solid ${color.disabled}`,
+    },
+
+    ':active': {
+      background: 'none',
+    },
+  },
+
+  DayPickerNavigation_button__horizontal: {},
+
+  DayPickerNavigation_button__horizontalDefault: {
+    position: 'absolute',
+    top: 18,
+    lineHeight: 0.78,
+    borderRadius: 3,
+    padding: '6px 9px',
+  },
+
+  DayPickerNavigation_bottomButton__horizontalDefault: {
+    position: 'static',
+    marginLeft: 22,
+    marginRight: 22,
+    marginBottom: 30,
+    marginTop: -10,
+  },
+
+  DayPickerNavigation_leftButton__horizontalDefault: {
+    left: noflip(22),
+  },
+
+  DayPickerNavigation_rightButton__horizontalDefault: {
+    right: noflip(22),
+  },
+
+  DayPickerNavigation_button__vertical: {},
+
+  DayPickerNavigation_button__verticalDefault: {
+    padding: 5,
+    background: color.background,
+    boxShadow: noflip('0 0 5px 2px rgba(0, 0, 0, 0.1)'),
+    position: 'relative',
+    display: 'inline-block',
+    textAlign: 'center',
+    height: '100%',
+    width: '50%',
+  },
+
+  DayPickerNavigation_prevButton__verticalDefault: {},
+
+  DayPickerNavigation_nextButton__verticalDefault: {
+    borderLeft: noflip(0),
+  },
+
+  DayPickerNavigation_nextButton__verticalScrollableDefault: {
+    width: '100%',
+  },
+
+  DayPickerNavigation_prevButton__verticalScrollableDefault: {
+    width: '100%',
+  },
+
+  DayPickerNavigation_svg__horizontal: {
+    height: 19,
+    width: 19,
+    fill: color.core.grayLight,
+    display: 'block',
+  },
+
+  DayPickerNavigation_svg__vertical: {
+    height: 42,
+    width: 42,
+    fill: color.text,
+  },
+
+  DayPickerNavigation_svg__disabled: {
+    fill: color.disabled,
+  },
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(DayPickerNavigation);