wf-react-day-picker 0.0.1-security → 2.653.0

package/src/Helpers.js

@@ -0,0 +1,145 @@
+import {clone} from './DateUtils';
+import {getFirstDayOfWeek} from './LocaleUtils';
+import defaultClassNames from './classNames';
+
+export function cancelEvent(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+export function getFirstDayOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+export function getDaysInMonth(d) {
+  const resultDate = getFirstDayOfMonth(d);
+
+  resultDate.setMonth(resultDate.getMonth() + 1);
+  resultDate.setDate(resultDate.getDate() - 1);
+
+  return resultDate.getDate();
+}
+
+export function getModifiersFromProps(props) {
+  const modifiers = {...props.modifiers};
+  if (props.selectedDays) {
+    modifiers[props.classNames.selected] = props.selectedDays;
+  }
+  if (props.disabledDays) {
+    modifiers[props.classNames.disabled] = props.disabledDays;
+  }
+  return modifiers;
+}
+
+export function getFirstDayOfWeekFromProps(props) {
+  const {firstDayOfWeek, locale = 'en', localeUtils = {}} = props;
+  if (!isNaN(firstDayOfWeek)) {
+    return firstDayOfWeek;
+  }
+  if (localeUtils.getFirstDayOfWeek) {
+    return localeUtils.getFirstDayOfWeek(locale);
+  }
+  return 0;
+}
+
+export function isRangeOfDates(value) {
+  return !!(value && value.from && value.to);
+}
+
+export function getMonthsDiff(d1, d2) {
+  return (
+    d2.getMonth() - d1.getMonth() + 12 * (d2.getFullYear() - d1.getFullYear())
+  );
+}
+
+export function getWeekArray(
+  d,
+  firstDayOfWeek = getFirstDayOfWeek(),
+  fixedWeeks
+) {
+  const daysInMonth = getDaysInMonth(d);
+  const dayArray = [];
+
+  let week = [];
+  const weekArray = [];
+
+  for (let i = 1; i <= daysInMonth; i += 1) {
+    dayArray.push(new Date(d.getFullYear(), d.getMonth(), i));
+  }
+
+  dayArray.forEach((day) => {
+    if (week.length > 0 && day.getDay() === firstDayOfWeek) {
+      weekArray.push(week);
+      week = [];
+    }
+    week.push(day);
+    if (dayArray.indexOf(day) === dayArray.length - 1) {
+      weekArray.push(week);
+    }
+  });
+
+  // unshift days to start the first week
+  const firstWeek = weekArray[0];
+  for (let i = 7 - firstWeek.length; i > 0; i -= 1) {
+    const outsideDate = clone(firstWeek[0]);
+    outsideDate.setDate(firstWeek[0].getDate() - 1);
+    firstWeek.unshift(outsideDate);
+  }
+
+  // push days until the end of the last week
+  const lastWeek = weekArray[weekArray.length - 1];
+  for (let i = lastWeek.length; i < 7; i += 1) {
+    const outsideDate = clone(lastWeek[lastWeek.length - 1]);
+    outsideDate.setDate(lastWeek[lastWeek.length - 1].getDate() + 1);
+    lastWeek.push(outsideDate);
+  }
+
+  // add extra weeks to reach 6 weeks
+  if (fixedWeeks && weekArray.length < 6) {
+    let lastExtraWeek;
+
+    for (let i = weekArray.length; i < 6; i += 1) {
+      lastExtraWeek = weekArray[weekArray.length - 1];
+      const lastDay = lastExtraWeek[lastExtraWeek.length - 1];
+      const extraWeek = [];
+
+      for (let j = 0; j < 7; j += 1) {
+        const outsideDate = clone(lastDay);
+        outsideDate.setDate(lastDay.getDate() + j + 1);
+        extraWeek.push(outsideDate);
+      }
+
+      weekArray.push(extraWeek);
+    }
+  }
+
+  return weekArray;
+}
+
+export function startOfMonth(d) {
+  const newDate = clone(d);
+  newDate.setDate(1);
+  return newDate;
+}
+
+export function getDayNodes(node, classNames) {
+  let outsideClassName;
+  if (classNames === defaultClassNames) {
+    // When using CSS modules prefix the modifier as required by the BEM syntax
+    outsideClassName = `${classNames.day}--${classNames.outside}`;
+  } else {
+    outsideClassName = `${classNames.outside}`;
+  }
+  const dayQuery = classNames.day.replace(/ /g, '.');
+  const outsideDayQuery = outsideClassName.replace(/ /g, '.');
+  const selector = `.${dayQuery}:not(.${outsideDayQuery})`;
+  return node.querySelectorAll(selector);
+}
+
+export function nodeListToArray(nodeList) {
+  return Array.prototype.slice.call(nodeList, 0);
+}
+
+export function hasOwnProp(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}

package/src/LocaleUtils.js

@@ -0,0 +1,59 @@
+const WEEKDAYS_LONG = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+
+const WEEKDAYS_SHORT = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export function formatDay(day) {
+  return day.toDateString();
+}
+
+export function formatMonthTitle(d) {
+  return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+}
+
+export function formatWeekdayShort(i) {
+  return WEEKDAYS_SHORT[i];
+}
+
+export function formatWeekdayLong(i) {
+  return WEEKDAYS_LONG[i];
+}
+
+export function getFirstDayOfWeek() {
+  return 0;
+}
+
+export function getMonths() {
+  return MONTHS;
+}
+
+export default {
+  formatDay,
+  formatMonthTitle,
+  formatWeekdayShort,
+  formatWeekdayLong,
+  getFirstDayOfWeek,
+  getMonths,
+};

package/src/ModifiersUtils.js

@@ -0,0 +1,72 @@
+import {isDayAfter, isDayBefore, isDayInRange, isSameDay} from './DateUtils';
+import {isRangeOfDates} from './Helpers';
+
+/**
+ * Return `true` if a date matches the specified modifier.
+ *
+ * @export
+ * @param {Date} day
+ * @param {Any} modifier
+ * @return {Boolean}
+ */
+export function dayMatchesModifier(day, modifier) {
+  if (!modifier) {
+    return false;
+  }
+  const arr = Array.isArray(modifier) ? modifier : [modifier];
+  return arr.some((mod) => {
+    if (!mod) {
+      return false;
+    }
+    if (mod instanceof Date) {
+      return isSameDay(day, mod);
+    }
+    if (isRangeOfDates(mod)) {
+      return isDayInRange(day, mod);
+    }
+    if (mod.after && mod.before && isDayAfter(mod.before, mod.after)) {
+      return isDayAfter(day, mod.after) && isDayBefore(day, mod.before);
+    }
+    if (
+      mod.after &&
+      mod.before &&
+      (isDayAfter(mod.after, mod.before) || isSameDay(mod.after, mod.before))
+    ) {
+      return isDayAfter(day, mod.after) || isDayBefore(day, mod.before);
+    }
+    if (mod.after) {
+      return isDayAfter(day, mod.after);
+    }
+    if (mod.before) {
+      return isDayBefore(day, mod.before);
+    }
+    if (mod.daysOfWeek) {
+      return mod.daysOfWeek.some((dayOfWeek) => day.getDay() === dayOfWeek);
+    }
+    if (typeof mod === 'function') {
+      return mod(day);
+    }
+    return false;
+  });
+}
+
+/**
+ * Return the modifiers matching the given day for the given
+ * object of modifiers.
+ *
+ * @export
+ * @param {Date} day
+ * @param {Object} [modifiersObj={}]
+ * @return {Array}
+ */
+export function getModifiersForDay(day, modifiersObj = {}) {
+  return Object.keys(modifiersObj).reduce((modifiers, modifierName) => {
+    const value = modifiersObj[modifierName];
+    if (dayMatchesModifier(day, value)) {
+      modifiers.push(modifierName);
+    }
+    return modifiers;
+  }, []);
+}
+
+export default {dayMatchesModifier, getModifiersForDay};

package/src/Month.js

@@ -0,0 +1,218 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import Weekdays from './Weekdays';
+import Day from './Day';
+import {ENTER} from './keys';
+
+import * as ModifiersUtils from './ModifiersUtils';
+import * as Helpers from './Helpers';
+import * as DateUtils from './DateUtils';
+
+export default class Month extends Component {
+  static propTypes = {
+    classNames: PropTypes.shape({
+      body: PropTypes.string.isRequired,
+      month: PropTypes.string.isRequired,
+      outside: PropTypes.string.isRequired,
+      today: PropTypes.string.isRequired,
+      week: PropTypes.string.isRequired,
+    }).isRequired,
+    tabIndex: PropTypes.number,
+
+    month: PropTypes.instanceOf(Date).isRequired,
+    months: PropTypes.arrayOf(PropTypes.node),
+
+    modifiersStyles: PropTypes.object,
+
+    showWeekDays: PropTypes.bool,
+    showOutsideDays: PropTypes.bool,
+
+    renderDay: PropTypes.func.isRequired,
+    renderWeek: PropTypes.func.isRequired,
+
+    captionElement: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.func,
+      PropTypes.instanceOf(React.Component),
+    ]).isRequired,
+    weekdayElement: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.func,
+      PropTypes.instanceOf(React.Component),
+    ]),
+
+    fixedWeeks: PropTypes.bool,
+    showWeekNumbers: PropTypes.bool,
+
+    locale: PropTypes.string.isRequired,
+    localeUtils: PropTypes.object.isRequired,
+    weekdaysLong: PropTypes.arrayOf(PropTypes.node),
+    weekdaysShort: PropTypes.arrayOf(PropTypes.node),
+    firstDayOfWeek: PropTypes.number.isRequired,
+
+    onCaptionClick: PropTypes.func,
+    onDayClick: PropTypes.func,
+    onDayFocus: PropTypes.func,
+    onDayKeyDown: PropTypes.func,
+    onDayMouseEnter: PropTypes.func,
+    onDayMouseLeave: PropTypes.func,
+    onDayMouseDown: PropTypes.func,
+    onDayMouseUp: PropTypes.func,
+    onDayTouchEnd: PropTypes.func,
+    onDayTouchStart: PropTypes.func,
+    onWeekClick: PropTypes.func,
+  };
+
+  renderDay = (day) => {
+    const monthNumber = this.props.month.getMonth();
+    const propModifiers = Helpers.getModifiersFromProps(this.props);
+    const dayModifiers = ModifiersUtils.getModifiersForDay(day, propModifiers);
+    if (
+      DateUtils.isSameDay(day, new Date()) &&
+      !Object.prototype.hasOwnProperty.call(
+        propModifiers,
+        this.props.classNames.today
+      )
+    ) {
+      dayModifiers.push(this.props.classNames.today);
+    }
+    if (day.getMonth() !== monthNumber) {
+      dayModifiers.push(this.props.classNames.outside);
+    }
+
+    const isOutside = day.getMonth() !== monthNumber;
+    let tabIndex = -1;
+    // Focus on the first day of the month
+    if (this.props.onDayClick && !isOutside && day.getDate() === 1) {
+      tabIndex = this.props.tabIndex; // eslint-disable-line prefer-destructuring
+    }
+    const key = `${day.getFullYear()}${day.getMonth()}${day.getDate()}`;
+    const modifiers = {};
+    dayModifiers.forEach((modifier) => {
+      modifiers[modifier] = true;
+    });
+
+    return (
+      <Day
+        key={`${isOutside ? 'outside-' : ''}${key}`}
+        classNames={this.props.classNames}
+        day={day}
+        modifiers={modifiers}
+        modifiersStyles={this.props.modifiersStyles}
+        empty={
+          isOutside && !this.props.showOutsideDays && !this.props.fixedWeeks
+        }
+        tabIndex={tabIndex}
+        ariaLabel={this.props.localeUtils.formatDay(day, this.props.locale)}
+        ariaDisabled={isOutside || dayModifiers.indexOf('disabled') > -1}
+        ariaSelected={dayModifiers.indexOf('selected') > -1}
+        onClick={this.props.onDayClick}
+        onFocus={this.props.onDayFocus}
+        onKeyDown={this.props.onDayKeyDown}
+        onMouseEnter={this.props.onDayMouseEnter}
+        onMouseLeave={this.props.onDayMouseLeave}
+        onMouseDown={this.props.onDayMouseDown}
+        onMouseUp={this.props.onDayMouseUp}
+        onTouchEnd={this.props.onDayTouchEnd}
+        onTouchStart={this.props.onDayTouchStart}
+      >
+        {this.props.renderDay(day, modifiers)}
+      </Day>
+    );
+  };
+
+  render() {
+    const {
+      classNames,
+
+      month,
+      months,
+
+      fixedWeeks,
+      captionElement,
+      weekdayElement,
+
+      locale,
+      localeUtils,
+      weekdaysLong,
+      weekdaysShort,
+      firstDayOfWeek,
+
+      onCaptionClick,
+
+      showWeekNumbers,
+      showWeekDays,
+      onWeekClick,
+    } = this.props;
+
+    const captionProps = {
+      date: month,
+      classNames,
+      months,
+      localeUtils,
+      locale,
+      onClick: onCaptionClick ? (e) => onCaptionClick(month, e) : undefined,
+    };
+    const caption = React.isValidElement(captionElement)
+      ? React.cloneElement(captionElement, captionProps)
+      : React.createElement(captionElement, captionProps);
+
+    const weeks = Helpers.getWeekArray(month, firstDayOfWeek, fixedWeeks);
+    return (
+      <div className={classNames.month} role="grid">
+        {caption}
+        {showWeekDays && (
+          <Weekdays
+            classNames={classNames}
+            weekdaysShort={weekdaysShort}
+            weekdaysLong={weekdaysLong}
+            firstDayOfWeek={firstDayOfWeek}
+            showWeekNumbers={showWeekNumbers}
+            locale={locale}
+            localeUtils={localeUtils}
+            weekdayElement={weekdayElement}
+          />
+        )}
+        <div className={classNames.body} role="rowgroup">
+          {weeks.map((week) => {
+            let weekNumber;
+            if (showWeekNumbers) {
+              weekNumber = DateUtils.getWeekNumber(week[6]);
+            }
+            return (
+              <div
+                key={week[0].getTime()}
+                className={classNames.week}
+                role="row"
+              >
+                {showWeekNumbers && (
+                  <div
+                    className={classNames.weekNumber}
+                    tabIndex={0}
+                    role="gridcell"
+                    onClick={
+                      onWeekClick
+                        ? (e) => onWeekClick(weekNumber, week, e)
+                        : undefined
+                    }
+                    onKeyUp={
+                      onWeekClick
+                        ? (e) =>
+                            e.keyCode === ENTER &&
+                            onWeekClick(weekNumber, week, e)
+                        : undefined
+                    }
+                  >
+                    {this.props.renderWeek(weekNumber, week, month)}
+                  </div>
+                )}
+                {week.map(this.renderDay)}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}

package/src/Navbar.js

@@ -0,0 +1,147 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+import defaultClassNames from './classNames';
+import {SPACE, ENTER} from './keys';
+
+export default class Navbar extends Component {
+  static defaultProps = {
+    classNames: defaultClassNames,
+    dir: 'ltr',
+    labels: {
+      previousMonth: 'Previous Month',
+      nextMonth: 'Next Month',
+    },
+    showPreviousButton: true,
+    showNextButton: true,
+  };
+
+  static propTypes = {
+    classNames: PropTypes.shape({
+      navBar: PropTypes.string.isRequired,
+      navButtonPrev: PropTypes.string.isRequired,
+      navButtonNext: PropTypes.string.isRequired,
+    }),
+    className: PropTypes.string,
+    showPreviousButton: PropTypes.bool,
+    showNextButton: PropTypes.bool,
+    onPreviousClick: PropTypes.func,
+    onNextClick: PropTypes.func,
+    dir: PropTypes.string,
+    labels: PropTypes.shape({
+      previousMonth: PropTypes.string.isRequired,
+      nextMonth: PropTypes.string.isRequired,
+    }),
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.labels !== this.props.labels ||
+      nextProps.dir !== this.props.dir ||
+      this.props.showPreviousButton !== nextProps.showPreviousButton ||
+      this.props.showNextButton !== nextProps.showNextButton
+    );
+  }
+
+  handleNextClick = () => {
+    if (this.props.onNextClick) {
+      this.props.onNextClick();
+    }
+  };
+
+  handlePreviousClick = () => {
+    if (this.props.onPreviousClick) {
+      this.props.onPreviousClick();
+    }
+  };
+
+  handleNextKeyDown = (e) => {
+    if (e.keyCode !== ENTER && e.keyCode !== SPACE) {
+      return;
+    }
+    e.preventDefault();
+    this.handleNextClick();
+  };
+
+  handlePreviousKeyDown = (e) => {
+    if (e.keyCode !== ENTER && e.keyCode !== SPACE) {
+      return;
+    }
+    e.preventDefault();
+    this.handlePreviousClick();
+  };
+
+  render() {
+    const {
+      classNames,
+      className,
+      showPreviousButton,
+      showNextButton,
+      labels,
+      dir,
+    } = this.props;
+
+    let previousClickHandler;
+    let nextClickHandler;
+    let previousKeyDownHandler;
+    let nextKeyDownHandler;
+    let shouldShowPrevious;
+    let shouldShowNext;
+
+    if (dir === 'rtl') {
+      previousClickHandler = this.handleNextClick;
+      nextClickHandler = this.handlePreviousClick;
+      previousKeyDownHandler = this.handleNextKeyDown;
+      nextKeyDownHandler = this.handlePreviousKeyDown;
+      shouldShowNext = showPreviousButton;
+      shouldShowPrevious = showNextButton;
+    } else {
+      previousClickHandler = this.handlePreviousClick;
+      nextClickHandler = this.handleNextClick;
+      previousKeyDownHandler = this.handlePreviousKeyDown;
+      nextKeyDownHandler = this.handleNextKeyDown;
+      shouldShowNext = showNextButton;
+      shouldShowPrevious = showPreviousButton;
+    }
+
+    const previousClassName = shouldShowPrevious
+      ? classNames.navButtonPrev
+      : `${classNames.navButtonPrev} ${classNames.navButtonInteractionDisabled}`;
+
+    const nextClassName = shouldShowNext
+      ? classNames.navButtonNext
+      : `${classNames.navButtonNext} ${classNames.navButtonInteractionDisabled}`;
+
+    const previousButton = (
+      <span
+        tabIndex="0"
+        role="button"
+        aria-label={labels.previousMonth}
+        key="previous"
+        className={previousClassName}
+        onKeyDown={shouldShowPrevious ? previousKeyDownHandler : undefined}
+        onClick={shouldShowPrevious ? previousClickHandler : undefined}
+      />
+    );
+
+    const nextButton = (
+      <span
+        tabIndex="0"
+        role="button"
+        aria-label={labels.nextMonth}
+        key="right"
+        className={nextClassName}
+        onKeyDown={shouldShowNext ? nextKeyDownHandler : undefined}
+        onClick={shouldShowNext ? nextClickHandler : undefined}
+      />
+    );
+
+    return (
+      <div className={className || classNames.navBar}>
+        {dir === 'rtl'
+          ? [nextButton, previousButton]
+          : [previousButton, nextButton]}
+      </div>
+    );
+  }
+}

package/src/Weekday.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class Weekday extends Component {
+  static propTypes = {
+    weekday: PropTypes.number,
+    className: PropTypes.string,
+    locale: PropTypes.string,
+    localeUtils: PropTypes.object,
+
+    weekdaysLong: PropTypes.arrayOf(PropTypes.string),
+    weekdaysShort: PropTypes.arrayOf(PropTypes.string),
+  };
+  shouldComponentUpdate(nextProps) {
+    return this.props !== nextProps;
+  }
+  render() {
+    const {
+      weekday,
+      className,
+      weekdaysLong,
+      weekdaysShort,
+      localeUtils,
+      locale,
+    } = this.props;
+    let title;
+    if (weekdaysLong) {
+      title = weekdaysLong[weekday];
+    } else {
+      title = localeUtils.formatWeekdayLong(weekday, locale);
+    }
+    let content;
+    if (weekdaysShort) {
+      content = weekdaysShort[weekday];
+    } else {
+      content = localeUtils.formatWeekdayShort(weekday, locale);
+    }
+
+    return (
+      <div className={className} role="columnheader">
+        <abbr title={title}>{content}</abbr>
+      </div>
+    );
+  }
+}