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

package/src/theme/DefaultTheme.js

@@ -0,0 +1,196 @@
+const core = {
+  white: '#fff',
+  gray: '#484848',
+  grayLight: '#82888a',
+  grayLighter: '#cacccd',
+  grayLightest: '#f2f2f2',
+
+  borderMedium: '#c4c4c4',
+  border: '#dbdbdb',
+  borderLight: '#e4e7e7',
+  borderLighter: '#eceeee',
+  borderBright: '#f4f5f5',
+
+  primary: '#00a699',
+  primaryShade_1: '#33dacd',
+  primaryShade_2: '#66e2da',
+  primaryShade_3: '#80e8e0',
+  primaryShade_4: '#b2f1ec',
+  primary_dark: '#008489',
+
+  secondary: '#007a87',
+
+  yellow: '#ffe8bc',
+  yellow_dark: '#ffce71',
+};
+
+export default {
+  reactDates: {
+    zIndex: 0,
+    border: {
+      input: {
+        border: 0,
+        borderTop: 0,
+        borderRight: 0,
+        borderBottom: '2px solid transparent',
+        borderLeft: 0,
+        outlineFocused: 0,
+        borderFocused: 0,
+        borderTopFocused: 0,
+        borderLeftFocused: 0,
+        borderBottomFocused: `2px solid ${core.primary_dark}`,
+        borderRightFocused: 0,
+        borderRadius: 0,
+      },
+      pickerInput: {
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderRadius: 2,
+      },
+    },
+
+    color: {
+      core,
+
+      disabled: core.grayLightest,
+
+      background: core.white,
+      backgroundDark: '#f2f2f2',
+      backgroundFocused: core.white,
+      border: 'rgb(219, 219, 219)',
+      text: core.gray,
+      textDisabled: core.border,
+      textFocused: '#007a87',
+      placeholderText: '#757575',
+
+      outside: {
+        backgroundColor: core.white,
+        backgroundColor_active: core.white,
+        backgroundColor_hover: core.white,
+        color: core.gray,
+        color_active: core.gray,
+        color_hover: core.gray,
+      },
+
+      highlighted: {
+        backgroundColor: core.yellow,
+        backgroundColor_active: core.yellow_dark,
+        backgroundColor_hover: core.yellow_dark,
+        color: core.gray,
+        color_active: core.gray,
+        color_hover: core.gray,
+      },
+
+      minimumNights: {
+        backgroundColor: core.white,
+        backgroundColor_active: core.white,
+        backgroundColor_hover: core.white,
+        borderColor: core.borderLighter,
+        color: core.grayLighter,
+        color_active: core.grayLighter,
+        color_hover: core.grayLighter,
+      },
+
+      hoveredSpan: {
+        backgroundColor: core.primaryShade_4,
+        backgroundColor_active: core.primaryShade_3,
+        backgroundColor_hover: core.primaryShade_4,
+        borderColor: core.primaryShade_3,
+        borderColor_active: core.primaryShade_3,
+        borderColor_hover: core.primaryShade_3,
+        color: core.secondary,
+        color_active: core.secondary,
+        color_hover: core.secondary,
+      },
+
+      selectedSpan: {
+        backgroundColor: core.primaryShade_2,
+        backgroundColor_active: core.primaryShade_1,
+        backgroundColor_hover: core.primaryShade_1,
+        borderColor: core.primaryShade_1,
+        borderColor_active: core.primary,
+        borderColor_hover: core.primary,
+        color: core.white,
+        color_active: core.white,
+        color_hover: core.white,
+      },
+
+      selected: {
+        backgroundColor: core.primary,
+        backgroundColor_active: core.primary,
+        backgroundColor_hover: core.primary,
+        borderColor: core.primary,
+        borderColor_active: core.primary,
+        borderColor_hover: core.primary,
+        color: core.white,
+        color_active: core.white,
+        color_hover: core.white,
+      },
+
+      blocked_calendar: {
+        backgroundColor: core.grayLighter,
+        backgroundColor_active: core.grayLighter,
+        backgroundColor_hover: core.grayLighter,
+        borderColor: core.grayLighter,
+        borderColor_active: core.grayLighter,
+        borderColor_hover: core.grayLighter,
+        color: core.grayLight,
+        color_active: core.grayLight,
+        color_hover: core.grayLight,
+      },
+
+      blocked_out_of_range: {
+        backgroundColor: core.white,
+        backgroundColor_active: core.white,
+        backgroundColor_hover: core.white,
+        borderColor: core.borderLight,
+        borderColor_active: core.borderLight,
+        borderColor_hover: core.borderLight,
+        color: core.grayLighter,
+        color_active: core.grayLighter,
+        color_hover: core.grayLighter,
+      },
+    },
+
+    spacing: {
+      dayPickerHorizontalPadding: 9,
+      captionPaddingTop: 22,
+      captionPaddingBottom: 37,
+      inputPadding: 0,
+      displayTextPaddingVertical: undefined,
+      displayTextPaddingTop: 11,
+      displayTextPaddingBottom: 9,
+      displayTextPaddingHorizontal: undefined,
+      displayTextPaddingLeft: 11,
+      displayTextPaddingRight: 11,
+      displayTextPaddingVertical_small: undefined,
+      displayTextPaddingTop_small: 7,
+      displayTextPaddingBottom_small: 5,
+      displayTextPaddingHorizontal_small: undefined,
+      displayTextPaddingLeft_small: 7,
+      displayTextPaddingRight_small: 7,
+    },
+
+    sizing: {
+      inputWidth: 130,
+      inputWidth_small: 97,
+      arrowWidth: 24,
+    },
+
+    noScrollBarOnVerticalScrollable: false,
+
+    font: {
+      size: 14,
+      captionSize: 18,
+      input: {
+        size: 19,
+        weight: 200,
+        lineHeight: '24px',
+        size_small: 15,
+        lineHeight_small: '18px',
+        letterSpacing_small: '0.2px',
+        styleDisabled: 'italic',
+      },
+    },
+  },
+};

package/src/utils/calculateDimension.js

@@ -0,0 +1,32 @@
+export default function calculateDimension(el, axis, borderBox = false, withMargin = false) {
+  if (!el) {
+    return 0;
+  }
+
+  const axisStart = axis === 'width' ? 'Left' : 'Top';
+  const axisEnd = axis === 'width' ? 'Right' : 'Bottom';
+
+  // Only read styles if we need to
+  const style = (!borderBox || withMargin) ? window.getComputedStyle(el) : null;
+
+  // Offset includes border and padding
+  const { offsetWidth, offsetHeight } = el;
+  let size = axis === 'width' ? offsetWidth : offsetHeight;
+
+  // Get the inner size
+  if (!borderBox) {
+    size -= (
+      parseFloat(style[`padding${axisStart}`])
+      + parseFloat(style[`padding${axisEnd}`])
+      + parseFloat(style[`border${axisStart}Width`])
+      + parseFloat(style[`border${axisEnd}Width`])
+    );
+  }
+
+  // Apply margin
+  if (withMargin) {
+    size += (parseFloat(style[`margin${axisStart}`]) + parseFloat(style[`margin${axisEnd}`]));
+  }
+
+  return size;
+}

package/src/utils/disableScroll.js

@@ -0,0 +1,65 @@
+const getScrollingRoot = () => document.scrollingElement || document.documentElement;
+
+/**
+ * Recursively finds the scroll parent of a node. The scroll parrent of a node
+ * is the closest node that is scrollable. A node is scrollable if:
+ *  - it is allowed to scroll via CSS ('overflow-y' not visible or hidden);
+ *  - and its children/content are "bigger" than the node's box height.
+ *
+ * The root of the document always scrolls by default.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ * @return {HTMLElement} The scroll parent element.
+ */
+export function getScrollParent(node) {
+  const parent = node.parentElement;
+
+  if (parent == null) return getScrollingRoot();
+
+  const { overflowY } = window.getComputedStyle(parent);
+  const canScroll = overflowY !== 'visible' && overflowY !== 'hidden';
+
+  if (canScroll && parent.scrollHeight > parent.clientHeight) {
+    return parent;
+  }
+
+  return getScrollParent(parent);
+}
+
+/**
+ * Recursively traverses the tree upwards from the given node, capturing all
+ * ancestor nodes that scroll along with their current 'overflow-y' CSS
+ * property.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ * @param {Map<HTMLElement,string>} [acc] Accumulator map.
+ * @return {Map<HTMLElement,string>} Map of ancestors with their 'overflow-y' value.
+ */
+export function getScrollAncestorsOverflowY(node, acc = new Map()) {
+  const scrollingRoot = getScrollingRoot();
+  const scrollParent = getScrollParent(node);
+  acc.set(scrollParent, scrollParent.style.overflowY);
+
+  if (scrollParent === scrollingRoot) return acc;
+  return getScrollAncestorsOverflowY(scrollParent, acc);
+}
+
+/**
+ * Disabling the scroll on a node involves finding all the scrollable ancestors
+ * and set their 'overflow-y' CSS property to 'hidden'. When all ancestors have
+ * 'overflow-y: hidden' (up to the document element) there is no scroll
+ * container, thus all the scroll outside of the node is disabled. In order to
+ * enable scroll again, we store the previous value of the 'overflow-y' for
+ * every ancestor in a closure and reset it back.
+ *
+ * @param {HTMLElement} node Any DOM element.
+ */
+export default function disableScroll(node) {
+  const scrollAncestorsOverflowY = getScrollAncestorsOverflowY(node);
+  const toggle = (on) => scrollAncestorsOverflowY.forEach((overflowY, ancestor) => {
+    ancestor.style.setProperty('overflow-y', on ? 'hidden' : overflowY);
+  });
+
+  toggle(true);
+  return () => toggle(false);
+}

package/src/utils/getActiveElement.js

@@ -0,0 +1,3 @@
+export default function getActiveElement() {
+  return typeof document !== 'undefined' && document.activeElement;
+}

package/src/utils/getCalendarDaySettings.js

@@ -0,0 +1,61 @@
+import getPhrase from './getPhrase';
+import { BLOCKED_MODIFIER } from '../constants';
+
+function isSelected(modifiers) {
+  return modifiers.has('selected')
+  || modifiers.has('selected-span')
+  || modifiers.has('selected-start')
+  || modifiers.has('selected-end');
+}
+
+function shouldUseDefaultCursor(modifiers) {
+  return modifiers.has('blocked-minimum-nights')
+  || modifiers.has('blocked-calendar')
+  || modifiers.has('blocked-out-of-range');
+}
+
+function isHoveredSpan(modifiers) {
+  if (isSelected(modifiers)) return false;
+  return modifiers.has('hovered-span') || modifiers.has('after-hovered-start') || modifiers.has('before-hovered-end');
+}
+
+function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
+  const {
+    chooseAvailableDate,
+    dateIsUnavailable,
+    dateIsSelected,
+    dateIsSelectedAsStartDate,
+    dateIsSelectedAsEndDate,
+  } = phrases;
+
+  const formattedDate = {
+    date: day.format(ariaLabelFormat),
+  };
+
+  if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
+    return getPhrase(dateIsSelectedAsStartDate, formattedDate);
+  } if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
+    return getPhrase(dateIsSelectedAsEndDate, formattedDate);
+  } if (isSelected(modifiers) && dateIsSelected) {
+    return getPhrase(dateIsSelected, formattedDate);
+  } if (modifiers.has(BLOCKED_MODIFIER)) {
+    return getPhrase(dateIsUnavailable, formattedDate);
+  }
+
+  return getPhrase(chooseAvailableDate, formattedDate);
+}
+
+export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
+  return {
+    ariaLabel: getAriaLabel(phrases, modifiers, day, ariaLabelFormat),
+    hoveredSpan: isHoveredSpan(modifiers),
+    isOutsideRange: modifiers.has('blocked-out-of-range'),
+    selected: isSelected(modifiers),
+    useDefaultCursor: shouldUseDefaultCursor(modifiers),
+
+    daySizeStyles: {
+      width: daySize,
+      height: daySize - 1,
+    },
+  };
+}

package/src/utils/getCalendarMonthWeeks.js

@@ -0,0 +1,49 @@
+import moment from 'moment';
+
+import { WEEKDAYS } from '../constants';
+
+export default function getCalendarMonthWeeks(
+  month,
+  enableOutsideDays,
+  firstDayOfWeek = moment.localeData().firstDayOfWeek(),
+) {
+  if (!moment.isMoment(month) || !month.isValid()) {
+    throw new TypeError('`month` must be a valid moment object');
+  }
+  if (WEEKDAYS.indexOf(firstDayOfWeek) === -1) {
+    throw new TypeError('`firstDayOfWeek` must be an integer between 0 and 6');
+  }
+
+  // set utc offset to get correct dates in future (when timezone changes)
+  const firstOfMonth = month.clone().startOf('month').hour(12);
+  const lastOfMonth = month.clone().endOf('month').hour(12);
+
+  // calculate the exact first and last days to fill the entire matrix
+  // (considering days outside month)
+  const prevDays = ((firstOfMonth.day() + 7 - firstDayOfWeek) % 7);
+  const nextDays = ((firstDayOfWeek + 6 - lastOfMonth.day()) % 7);
+  const firstDay = firstOfMonth.clone().subtract(prevDays, 'day');
+  const lastDay = lastOfMonth.clone().add(nextDays, 'day');
+
+  const totalDays = lastDay.diff(firstDay, 'days') + 1;
+
+  const currentDay = firstDay.clone();
+  const weeksInMonth = [];
+
+  for (let i = 0; i < totalDays; i += 1) {
+    if (i % 7 === 0) {
+      weeksInMonth.push([]);
+    }
+
+    let day = null;
+    if ((i >= prevDays && i < (totalDays - nextDays)) || enableOutsideDays) {
+      day = currentDay.clone();
+    }
+
+    weeksInMonth[weeksInMonth.length - 1].push(day);
+
+    currentDay.add(1, 'day');
+  }
+
+  return weeksInMonth;
+}

package/src/utils/getCalendarMonthWidth.js

@@ -0,0 +1,3 @@
+export default function getCalendarMonthWidth(daySize, calendarMonthPadding = 0) {
+  return (7 * daySize) + (2 * calendarMonthPadding) + 1;
+}

package/src/utils/getDetachedContainerStyles.js

@@ -0,0 +1,39 @@
+import { OPEN_UP, ANCHOR_RIGHT } from '../constants';
+
+/**
+ * Calculate and return a CSS transform style to position a detached element
+ * next to a reference element. The open and anchor direction indicate wether
+ * it should be positioned above/below and/or to the left/right of the
+ * reference element.
+ *
+ * Assuming r(0,0), r(1,1), d(0,0), d(1,1) for the bottom-left and top-right
+ * corners of the reference and detached elements, respectively:
+ *  - openDirection = DOWN, anchorDirection = LEFT => d(0,1) == r(0,1)
+ *  - openDirection = UP, anchorDirection = LEFT => d(0,0) == r(0,0)
+ *  - openDirection = DOWN, anchorDirection = RIGHT => d(1,1) == r(1,1)
+ *  - openDirection = UP, anchorDirection = RIGHT => d(1,0) == r(1,0)
+ *
+ * By using a CSS transform, we allow to further position it using
+ * top/bottom CSS properties for the anchor gutter.
+ *
+ * @param {string} openDirection The vertical positioning of the popup
+ * @param {string} anchorDirection The horizontal position of the popup
+ * @param {HTMLElement} referenceEl The reference element
+ */
+export default function getDetachedContainerStyles(openDirection, anchorDirection, referenceEl) {
+  const referenceRect = referenceEl.getBoundingClientRect();
+  let offsetX = referenceRect.left;
+  let offsetY = referenceRect.top;
+
+  if (openDirection === OPEN_UP) {
+    offsetY = -(window.innerHeight - referenceRect.bottom);
+  }
+
+  if (anchorDirection === ANCHOR_RIGHT) {
+    offsetX = -(window.innerWidth - referenceRect.right);
+  }
+
+  return {
+    transform: `translate3d(${Math.round(offsetX)}px, ${Math.round(offsetY)}px, 0)`,
+  };
+}

package/src/utils/getInputHeight.js

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+
+function getPadding(vertical, top, bottom) {
+  const isTopDefined = typeof top === 'number';
+  const isBottomDefined = typeof bottom === 'number';
+  const isVerticalDefined = typeof vertical === 'number';
+
+  if (isTopDefined && isBottomDefined) {
+    return top + bottom;
+  }
+
+  if (isTopDefined && isVerticalDefined) {
+    return top + vertical;
+  }
+
+  if (isTopDefined) {
+    return top;
+  }
+
+  if (isBottomDefined && isVerticalDefined) {
+    return bottom + vertical;
+  }
+
+  if (isBottomDefined) {
+    return bottom;
+  }
+
+  if (isVerticalDefined) {
+    return 2 * vertical;
+  }
+
+  return 0;
+}
+
+export default function getInputHeight({
+  font: {
+    input: {
+      lineHeight,
+      lineHeight_small,
+    },
+  },
+  spacing: {
+    inputPadding,
+    displayTextPaddingVertical,
+    displayTextPaddingTop,
+    displayTextPaddingBottom,
+    displayTextPaddingVertical_small,
+    displayTextPaddingTop_small,
+    displayTextPaddingBottom_small,
+  },
+}, small) {
+  const calcLineHeight = small ? lineHeight_small : lineHeight;
+
+  const padding = small
+    ? getPadding(
+      displayTextPaddingVertical_small,
+      displayTextPaddingTop_small,
+      displayTextPaddingBottom_small,
+    )
+    : getPadding(
+      displayTextPaddingVertical,
+      displayTextPaddingTop,
+      displayTextPaddingBottom,
+    );
+
+  return parseInt(calcLineHeight, 10) + (2 * inputPadding) + padding;
+}

package/src/utils/getNumberOfCalendarMonthWeeks.js

@@ -0,0 +1,15 @@
+import moment from 'moment';
+
+function getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek) {
+  const weekDayDiff = firstDayOfMonth.day() - firstDayOfWeek;
+  return (weekDayDiff + 7) % 7;
+}
+
+export default function getNumberOfCalendarMonthWeeks(
+  month,
+  firstDayOfWeek = moment.localeData().firstDayOfWeek(),
+) {
+  const firstDayOfMonth = month.clone().startOf('month').hour(12);
+  const numBlankDays = getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek);
+  return Math.ceil((numBlankDays + month.daysInMonth()) / 7);
+}

package/src/utils/getPhrase.jsx

@@ -0,0 +1,9 @@
+export default function getPhrase(phrase, args) {
+  if (typeof phrase === 'string') return phrase;
+
+  if (typeof phrase === 'function') {
+    return phrase(args);
+  }
+
+  return '';
+}

package/src/utils/getPhrasePropTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export default function getPhrasePropTypes(defaultPhrases) {
+  return Object.keys(defaultPhrases)
+    .reduce((phrases, key) => ({
+      ...phrases,
+      [key]: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
+    }), {});
+}

package/src/utils/getPooledMoment.js

@@ -0,0 +1,10 @@
+import moment from 'moment';
+
+const momentPool = new Map();
+export default function getPooledMoment(dayString) {
+  if (!momentPool.has(dayString)) {
+    momentPool.set(dayString, moment(dayString));
+  }
+
+  return momentPool.get(dayString);
+}

package/src/utils/getPreviousMonthMemoLast.js

@@ -0,0 +1,11 @@
+let getPreviousMonthMemoKey;
+let getPreviousMonthMemoValue;
+
+export default function getPreviousMonthMemoLast(month) {
+  if (month !== getPreviousMonthMemoKey) {
+    getPreviousMonthMemoKey = month;
+    getPreviousMonthMemoValue = month.clone().subtract(1, 'month');
+  }
+
+  return getPreviousMonthMemoValue;
+}

package/src/utils/getResponsiveContainerStyles.js

@@ -0,0 +1,18 @@
+import { ANCHOR_LEFT } from '../constants';
+
+export default function getResponsiveContainerStyles(
+  anchorDirection,
+  currentOffset,
+  containerEdge,
+  margin,
+) {
+  const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
+  const calculatedOffset = anchorDirection === ANCHOR_LEFT
+    ? windowWidth - containerEdge
+    : containerEdge;
+  const calculatedMargin = margin || 0;
+
+  return {
+    [anchorDirection]: Math.min(currentOffset + calculatedOffset - calculatedMargin, 0),
+  };
+}

package/src/utils/getSelectedDateOffset.js

@@ -0,0 +1,6 @@
+const defaultModifier = (day) => day;
+
+export default function getSelectedDateOffset(fn, day, modifier = defaultModifier) {
+  if (!fn) return day;
+  return modifier(fn(day.clone()));
+}

package/src/utils/getTransformStyles.js

@@ -0,0 +1,8 @@
+export default function getTransformStyles(transformValue) {
+  return {
+    transform: transformValue,
+    msTransform: transformValue,
+    MozTransform: transformValue,
+    WebkitTransform: transformValue,
+  };
+}

package/src/utils/getVisibleDays.js

@@ -0,0 +1,54 @@
+import moment from 'moment';
+import toISOMonthString from './toISOMonthString';
+
+export default function getVisibleDays(
+  month,
+  numberOfMonths,
+  enableOutsideDays,
+  withoutTransitionMonths,
+) {
+  if (!moment.isMoment(month)) return {};
+
+  const visibleDaysByMonth = {};
+  let currentMonth = withoutTransitionMonths ? month.clone() : month.clone().subtract(1, 'month');
+  for (let i = 0; i < (withoutTransitionMonths ? numberOfMonths : numberOfMonths + 2); i += 1) {
+    const visibleDays = [];
+
+    // set utc offset to get correct dates in future (when timezone changes)
+    const baseDate = currentMonth.clone();
+    const firstOfMonth = baseDate.clone().startOf('month').hour(12);
+    const lastOfMonth = baseDate.clone().endOf('month').hour(12);
+
+    const currentDay = firstOfMonth.clone();
+
+    // days belonging to the previous month
+    if (enableOutsideDays) {
+      for (let j = 0; j < currentDay.weekday(); j += 1) {
+        const prevDay = currentDay.clone().subtract(j + 1, 'day');
+        visibleDays.unshift(prevDay);
+      }
+    }
+
+    while (currentDay < lastOfMonth) {
+      visibleDays.push(currentDay.clone());
+      currentDay.add(1, 'day');
+    }
+
+    if (enableOutsideDays) {
+      // weekday() returns the index of the day of the week according to the locale
+      // this means if the week starts on Monday, weekday() will return 0 for a Monday date, not 1
+      if (currentDay.weekday() !== 0) {
+        // days belonging to the next month
+        for (let k = currentDay.weekday(), count = 0; k < 7; k += 1, count += 1) {
+          const nextDay = currentDay.clone().add(count, 'day');
+          visibleDays.push(nextDay);
+        }
+      }
+    }
+
+    visibleDaysByMonth[toISOMonthString(currentMonth)] = visibleDays;
+    currentMonth = currentMonth.clone().add(1, 'month');
+  }
+
+  return visibleDaysByMonth;
+}

package/src/utils/isAfterDay.js

@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+import isBeforeDay from './isBeforeDay';
+import isSameDay from './isSameDay';
+
+export default function isAfterDay(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return !isBeforeDay(a, b) && !isSameDay(a, b);
+}