@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/date-picker/day.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { addDays } from 'date-fns/addDays';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { getDate } from 'date-fns/getDate';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isToday } from 'date-fns/isToday';
+import { startOfDay } from 'date-fns/startOfDay';
+import { dateType, weekdays } from './consts';
+import styles from './date-picker.css';
+let hoverTO;
+export default class Day extends Component {
+    static propTypes = {
+        day: dateType,
+        from: dateType,
+        currentRange: PropTypes.arrayOf(dateType),
+        activeRange: PropTypes.arrayOf(dateType),
+        empty: PropTypes.bool,
+        onSelect: PropTypes.func,
+        parseDateInput: PropTypes.func,
+        onHover: PropTypes.func,
+        minDate: dateType,
+        maxDate: dateType
+    };
+    handleClick = () => this.props.onSelect(this.props.day);
+    handleMouseOver = () => {
+        if (hoverTO) {
+            window.clearTimeout(hoverTO);
+            hoverTO = null;
+        }
+        this.props.onHover(this.props.day);
+    };
+    handleMouseOut = () => {
+        hoverTO = window.setTimeout(this.props.onHover, 0);
+    };
+    isDay = (date) => isSameDay(this.props.day, date);
+    is = (name) => {
+        const value = this.props[name];
+        return value != null && this.isDay(value);
+    };
+    inRange = (range) => range &&
+        isAfter(startOfDay(this.props.day), startOfDay(range[0])) &&
+        isBefore(startOfDay(this.props.day), startOfDay(range[1]));
+    isDisabled = (date) => {
+        const min = this.parse(this.props.minDate);
+        const max = this.parse(this.props.maxDate);
+        return (min != null && isBefore(startOfDay(date), startOfDay(min))) ||
+            (max != null && isAfter(startOfDay(date), startOfDay(max)));
+    };
+    parse(text) {
+        return this.props.parseDateInput(text);
+    }
+    render() {
+        const { day, from, currentRange, activeRange, empty } = this.props;
+        const reverse = activeRange && activeRange[1] === from;
+        function makeSpreadRange(range) {
+            return range && [range[0], addDays(range[1], 1)];
+        }
+        const spreadRange = makeSpreadRange(currentRange);
+        const disabled = this.isDisabled(day);
+        const activeSpreadRange = makeSpreadRange(activeRange);
+        return (
+        // TODO make keyboard navigation actually work
+        <button type="button" className={classNames(styles.day, styles[format(day, 'EEEE')], {
+                [styles.current]: ['date', 'from', 'to'].some(this.is),
+                [styles.active]: !disabled && this.is('activeDate'),
+                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
+                [styles.empty]: empty,
+                [styles.from]: (currentRange && this.isDay(currentRange[0]) && !reverse ||
+                    activeRange && this.isDay(activeRange[0])),
+                [styles.to]: (currentRange && this.isDay(currentRange[1])) ||
+                    activeRange && this.isDay(activeRange[1]),
+                [styles.between]: this.inRange(currentRange),
+                [styles.activeBetween]: !disabled && this.inRange(activeRange),
+                [styles.first]: getDate(day) === 1,
+                [styles.spread]: this.inRange(spreadRange),
+                [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
+                [styles.disabled]: disabled
+            })} onClick={this.handleClick} onMouseOver={this.handleMouseOver} onFocus={this.handleMouseOver} onMouseOut={this.handleMouseOut} onBlur={this.handleMouseOut} disabled={disabled}>
+        {empty || (<span className={classNames({ [styles.today]: isToday(day) })}>
+            {format(day, 'd')}</span>)}
+      </button>);
+    }
+}

package/components/date-picker/formats.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/components/date-picker/formats.js

@@ -0,0 +1 @@
+export default ['d M', 'dd M', 'dd MM', 'd-M', 'dd-M', 'dd-MM', 'd.M', 'dd.M', 'dd.MM', 'd\\M', 'dd\\M', 'dd\\MM', 'd/M', 'dd/M', 'dd/MM', 'd M yy', 'dd M yy', 'dd MM yy', 'd M yyyy', 'dd M yyyy', 'dd MM yyyy', 'd-M-yy', 'dd-M-yy', 'dd-MM-yy', 'd-M-yyyy', 'dd-M-yyyy', 'dd-MM-yyyy', 'd.M.yy', 'dd.M.yy', 'dd.MM.yy', 'd.M.yyyy', 'dd.M.yyyy', 'dd.MM.yyyy', 'd\\M\\yy', 'dd\\M\\yy', 'dd\\MM\\yy', 'd\\M\\yyyy', 'dd\\M\\yyyy', 'dd\\MM\\yyyy', 'd/M/yy', 'dd/M/yy', 'dd/MM/yy', 'd/M/yyyy', 'dd/M/yyyy', 'dd/MM/yyyy', 'd M yy', 'dd M yy', 'dd MM yy', 'd M yyyy', 'dd M yyyy', 'dd MM yyyy', 'd-M-yy', 'dd-M-yy', 'dd-MM-yy', 'd-M-yyyy', 'dd-M-yyyy', 'dd-MM-yyyy', 'd.M.yy', 'dd.M.yy', 'dd.MM.yy', 'd.M.yyyy', 'dd.M.yyyy', 'dd.MM.yyyy', 'd\\M\\yy', 'dd\\M\\yy', 'dd\\MM\\yy', 'd\\M\\yyyy', 'dd\\M\\yyyy', 'dd\\MM\\yyyy', 'd/M/yy', 'dd/M/yy', 'dd/MM/yy', 'd/M/yyyy', 'dd/M/yyyy', 'dd/MM/yyyy', 'yy M d', 'yy M dd', 'yy MM dd', 'yyyy M d', 'yyyy M dd', 'yyyy MM dd', 'yy-M-d', 'yy-M-dd', 'yy-MM-dd', 'yyyy-M-d', 'yyyy-M-dd', 'yyyy-MM-dd', 'yy.M.d', 'yy.M.dd', 'yy.MM.dd', 'yyyy.M.d', 'yyyy.M.dd', 'yyyy.MM.dd', 'yy\\M\\d', 'yy\\M\\dd', 'yy\\MM\\dd', 'yyyy\\M\\d', 'yyyy\\M\\dd', 'yyyy\\MM\\dd', 'yy/M/d', 'yy/M/dd', 'yy/MM/dd', 'yyyy/M/d', 'yyyy/M/dd', 'yyyy/MM/dd', 'yy d M', 'yy dd M', 'yy dd MM', 'yyyy d M', 'yyyy dd MM', 'yyyy dd MM', 'yy-d-M', 'yy-dd-M', 'yy-dd-MM', 'yyyy-d-M', 'yyyy-dd-MM', 'yyyy-dd-MM', 'yy.d.M', 'yy.dd.M', 'yy.dd.MM', 'yyyy.d.M', 'yyyy.dd.MM', 'yyyy.dd.MM', 'yy\\d\\M', 'yy\\dd\\M', 'yy\\dd\\MM', 'yyyy\\d\\M', 'yyyy\\dd\\MM', 'yyyy\\dd\\MM', 'yy/d/M', 'yy/dd/M', 'yy/dd/MM', 'yyyy/d/M', 'yyyy/dd/MM', 'yyyy/dd/MM', 'd MMM', 'd MMMM', 'dd MMM', 'dd MMMM', 'd M HH:mm', 'd M, HH:mm', 'dd M HH:mm', 'dd M, HH:mm', 'dd MM HH:mm', 'dd MM, HH:mm', 'd-M HH:mm', 'd-M, HH:mm', 'dd-M HH:mm', 'dd-M, HH:mm', 'dd-MM HH:mm', 'dd-MM, HH:mm', 'd.M HH:mm', 'd.M, HH:mm', 'dd.M HH:mm', 'dd.M, HH:mm', 'dd.MM HH:mm', 'dd.MM, HH:mm', 'd\\M HH:mm', 'd\\M, HH:mm', 'dd\\M HH:mm', 'dd\\M, HH:mm', 'dd\\MM HH:mm', 'dd\\MM, HH:mm', 'd/M HH:mm', 'd/M, HH:mm', 'dd/M HH:mm', 'dd/M, HH:mm', 'dd/MM HH:mm', 'dd/MM, HH:mm', 'd M yy HH:mm', 'd M yy, HH:mm', 'dd M yy HH:mm', 'dd M yy, HH:mm', 'dd MM yy HH:mm', 'dd MM yy, HH:mm', 'd M yyyy HH:mm', 'd M yyyy, HH:mm', 'dd M yyyy HH:mm', 'dd M yyyy, HH:mm', 'dd MM yyyy HH:mm', 'dd MM yyyy, HH:mm', 'd-M-yy HH:mm', 'd-M-yy, HH:mm', 'dd-M-yy HH:mm', 'dd-M-yy, HH:mm', 'dd-MM-yy HH:mm', 'dd-MM-yy, HH:mm', 'd-M-yyyy HH:mm', 'd-M-yyyy, HH:mm', 'dd-M-yyyy HH:mm', 'dd-M-yyyy, HH:mm', 'dd-MM-yyyy HH:mm', 'dd-MM-yyyy, HH:mm', 'd.M.yy HH:mm', 'd.M.yy, HH:mm', 'dd.M.yy HH:mm', 'dd.M.yy, HH:mm', 'dd.MM.yy HH:mm', 'dd.MM.yy, HH:mm', 'd.M.yyyy HH:mm', 'd.M.yyyy, HH:mm', 'dd.M.yyyy HH:mm', 'dd.M.yyyy, HH:mm', 'dd.MM.yyyy HH:mm', 'dd.MM.yyyy, HH:mm', 'd\\M\\yy HH:mm', 'd\\M\\yy, HH:mm', 'dd\\M\\yy HH:mm', 'dd\\M\\yy, HH:mm', 'dd\\MM\\yy HH:mm', 'dd\\MM\\yy, HH:mm', 'd\\M\\yyyy HH:mm', 'd\\M\\yyyy, HH:mm', 'dd\\M\\yyyy HH:mm', 'dd\\M\\yyyy, HH:mm', 'dd\\MM\\yyyy HH:mm', 'dd\\MM\\yyyy, HH:mm', 'd/M/yy HH:mm', 'd/M/yy, HH:mm', 'dd/M/yy HH:mm', 'dd/M/yy, HH:mm', 'dd/MM/yy HH:mm', 'dd/MM/yy, HH:mm', 'd/M/yyyy HH:mm', 'd/M/yyyy, HH:mm', 'dd/M/yyyy HH:mm', 'dd/M/yyyy, HH:mm', 'dd/MM/yyyy HH:mm', 'dd/MM/yyyy, HH:mm', 'd M yy HH:mm', 'd M yy, HH:mm', 'dd M yy HH:mm', 'dd M yy, HH:mm', 'dd MM yy HH:mm', 'dd MM yy, HH:mm', 'd M yyyy HH:mm', 'd M yyyy, HH:mm', 'dd M yyyy HH:mm', 'dd M yyyy, HH:mm', 'dd MM yyyy HH:mm', 'dd MM yyyy, HH:mm', 'd-M-yy HH:mm', 'd-M-yy, HH:mm', 'dd-M-yy HH:mm', 'dd-M-yy, HH:mm', 'dd-MM-yy HH:mm', 'dd-MM-yy, HH:mm', 'd-M-yyyy HH:mm', 'd-M-yyyy, HH:mm', 'dd-M-yyyy HH:mm', 'dd-M-yyyy, HH:mm', 'dd-MM-yyyy HH:mm', 'dd-MM-yyyy, HH:mm', 'd.M.yy HH:mm', 'd.M.yy, HH:mm', 'dd.M.yy HH:mm', 'dd.M.yy, HH:mm', 'dd.MM.yy HH:mm', 'dd.MM.yy, HH:mm', 'd.M.yyyy HH:mm', 'd.M.yyyy, HH:mm', 'dd.M.yyyy HH:mm', 'dd.M.yyyy, HH:mm', 'dd.MM.yyyy HH:mm', 'dd.MM.yyyy, HH:mm', 'd\\M\\yy HH:mm', 'd\\M\\yy, HH:mm', 'dd\\M\\yy HH:mm', 'dd\\M\\yy, HH:mm', 'dd\\MM\\yy HH:mm', 'dd\\MM\\yy, HH:mm', 'd\\M\\yyyy HH:mm', 'd\\M\\yyyy, HH:mm', 'dd\\M\\yyyy HH:mm', 'dd\\M\\yyyy, HH:mm', 'dd\\MM\\yyyy HH:mm', 'dd\\MM\\yyyy, HH:mm', 'd/M/yy HH:mm', 'd/M/yy, HH:mm', 'dd/M/yy HH:mm', 'dd/M/yy, HH:mm', 'dd/MM/yy HH:mm', 'dd/MM/yy, HH:mm', 'd/M/yyyy HH:mm', 'd/M/yyyy, HH:mm', 'dd/M/yyyy HH:mm', 'dd/M/yyyy, HH:mm', 'dd/MM/yyyy HH:mm', 'dd/MM/yyyy, HH:mm', 'yy M d HH:mm', 'yy M d, HH:mm', 'yy M dd HH:mm', 'yy M dd, HH:mm', 'yy MM dd HH:mm', 'yy MM dd, HH:mm', 'yyyy M d HH:mm', 'yyyy M d, HH:mm', 'yyyy M dd HH:mm', 'yyyy M dd, HH:mm', 'yyyy MM dd HH:mm', 'yyyy MM dd, HH:mm', 'yy-M-d HH:mm', 'yy-M-d, HH:mm', 'yy-M-dd HH:mm', 'yy-M-dd, HH:mm', 'yy-MM-dd HH:mm', 'yy-MM-dd, HH:mm', 'yyyy-M-d HH:mm', 'yyyy-M-d, HH:mm', 'yyyy-M-dd HH:mm', 'yyyy-M-dd, HH:mm', 'yyyy-MM-dd HH:mm', 'yyyy-MM-dd, HH:mm', 'yy.M.d HH:mm', 'yy.M.d, HH:mm', 'yy.M.dd HH:mm', 'yy.M.dd, HH:mm', 'yy.MM.dd HH:mm', 'yy.MM.dd, HH:mm', 'yyyy.M.d HH:mm', 'yyyy.M.d, HH:mm', 'yyyy.M.dd HH:mm', 'yyyy.M.dd, HH:mm', 'yyyy.MM.dd HH:mm', 'yyyy.MM.dd, HH:mm', 'yy\\M\\d HH:mm', 'yy\\M\\d, HH:mm', 'yy\\M\\dd HH:mm', 'yy\\M\\dd, HH:mm', 'yy\\MM\\dd HH:mm', 'yy\\MM\\dd, HH:mm', 'yyyy\\M\\d HH:mm', 'yyyy\\M\\d, HH:mm', 'yyyy\\M\\dd HH:mm', 'yyyy\\M\\dd, HH:mm', 'yyyy\\MM\\dd HH:mm', 'yyyy\\MM\\dd, HH:mm', 'yy/M/d HH:mm', 'yy/M/d, HH:mm', 'yy/M/dd HH:mm', 'yy/M/dd, HH:mm', 'yy/MM/dd HH:mm', 'yy/MM/dd, HH:mm', 'yyyy/M/d HH:mm', 'yyyy/M/d, HH:mm', 'yyyy/M/dd HH:mm', 'yyyy/M/dd, HH:mm', 'yyyy/MM/dd HH:mm', 'yyyy/MM/dd, HH:mm', 'yy d M HH:mm', 'yy d M, HH:mm', 'yy dd M HH:mm', 'yy dd M, HH:mm', 'yy dd MM HH:mm', 'yy dd MM, HH:mm', 'yyyy d M HH:mm', 'yyyy d M, HH:mm', 'yyyy dd MM HH:mm', 'yyyy dd MM, HH:mm', 'yyyy dd MM HH:mm', 'yyyy dd MM, HH:mm', 'yy-d-M HH:mm', 'yy-d-M, HH:mm', 'yy-dd-M HH:mm', 'yy-dd-M, HH:mm', 'yy-dd-MM HH:mm', 'yy-dd-MM, HH:mm', 'yyyy-d-M HH:mm', 'yyyy-d-M, HH:mm', 'yyyy-dd-MM HH:mm', 'yyyy-dd-MM, HH:mm', 'yyyy-dd-MM HH:mm', 'yyyy-dd-MM, HH:mm', 'yy.d.M HH:mm', 'yy.d.M, HH:mm', 'yy.dd.M HH:mm', 'yy.dd.M, HH:mm', 'yy.dd.MM HH:mm', 'yy.dd.MM, HH:mm', 'yyyy.d.M HH:mm', 'yyyy.d.M, HH:mm', 'yyyy.dd.MM HH:mm', 'yyyy.dd.MM, HH:mm', 'yyyy.dd.MM HH:mm', 'yyyy.dd.MM, HH:mm', 'yy\\d\\M HH:mm', 'yy\\d\\M, HH:mm', 'yy\\dd\\M HH:mm', 'yy\\dd\\M, HH:mm', 'yy\\dd\\MM HH:mm', 'yy\\dd\\MM, HH:mm', 'yyyy\\d\\M HH:mm', 'yyyy\\d\\M, HH:mm', 'yyyy\\dd\\MM HH:mm', 'yyyy\\dd\\MM, HH:mm', 'yyyy\\dd\\MM HH:mm', 'yyyy\\dd\\MM, HH:mm', 'yy/d/M HH:mm', 'yy/d/M, HH:mm', 'yy/dd/M HH:mm', 'yy/dd/M, HH:mm', 'yy/dd/MM HH:mm', 'yy/dd/MM, HH:mm', 'yyyy/d/M HH:mm', 'yyyy/d/M, HH:mm', 'yyyy/dd/MM HH:mm', 'yyyy/dd/MM, HH:mm', 'yyyy/dd/MM HH:mm', 'yyyy/dd/MM, HH:mm', 'd MMM HH:mm', 'd MMM, HH:mm', 'd MMMM HH:mm', 'd MMMM, HH:mm', 'dd MMM HH:mm', 'dd MMM, HH:mm', 'dd MMMM HH:mm', 'dd MMMM, HH:mm', 'yyyy MMM d', 'yyyy MMMM d', 'yyyy MMM dd', 'yyyy MMMM dd', 'yyyy d MMM', 'yyyy d MMMM', 'yyyy dd MMM', 'yyyy dd MMMM', 'd MMM yy', 'd MMMM yy', 'dd MMM yy', 'dd MMMM yy', 'd MMM yyyy', 'd MMMM yyyy', 'dd MMM yyyy', 'dd MMMM yyyy', 'd MMM yy', 'd MMMM yy', 'dd MMM yy', 'dd MMMM yy', 'd MMM yyyy', 'd MMMM yyyy', 'dd MMM yyyy', 'dd MMMM yyyy', 'MMM d yyyy', 'MMMM d yyyy', 'MMM dd yyyy', 'MMMM dd yyyy', 'yy MMM d', 'yy MMMM d', 'yy MMM dd', 'yy MMMM dd', 'yy d MMM', 'yy d MMMM', 'yy dd MMM', 'yy dd MMMM', 'd MMM', 'd MMMM', 'dd MMM', 'dd MMMM', 'yyyy MMM d HH:mm', 'yyyy MMM d, HH:mm', 'yyyy MMMM d HH:mm', 'yyyy MMMM d, HH:mm', 'yyyy MMM dd HH:mm', 'yyyy MMM dd, HH:mm', 'yyyy MMMM dd HH:mm', 'yyyy MMMM dd, HH:mm', 'yyyy d MMM HH:mm', 'yyyy d MMM, HH:mm', 'yyyy d MMMM HH:mm', 'yyyy d MMMM, HH:mm', 'yyyy dd MMM HH:mm', 'yyyy dd MMM, HH:mm', 'yyyy dd MMMM HH:mm', 'yyyy dd MMMM, HH:mm', 'd MMM yy HH:mm', 'd MMM yy, HH:mm', 'd MMMM yy HH:mm', 'd MMMM yy, HH:mm', 'dd MMM yy HH:mm', 'dd MMM yy, HH:mm', 'dd MMMM yy HH:mm', 'dd MMMM yy, HH:mm', 'd MMM yyyy HH:mm', 'd MMM yyyy, HH:mm', 'd MMMM yyyy HH:mm', 'd MMMM yyyy, HH:mm', 'dd MMM yyyy HH:mm', 'dd MMM yyyy, HH:mm', 'dd MMMM yyyy HH:mm', 'dd MMMM yyyy, HH:mm', 'd MMM yy HH:mm', 'd MMM yy, HH:mm', 'd MMMM yy HH:mm', 'd MMMM yy, HH:mm', 'dd MMM yy HH:mm', 'dd MMM yy, HH:mm', 'dd MMMM yy HH:mm', 'dd MMMM yy, HH:mm', 'd MMM yyyy HH:mm', 'd MMM yyyy, HH:mm', 'd MMMM yyyy HH:mm', 'd MMMM yyyy, HH:mm', 'dd MMM yyyy HH:mm', 'dd MMM yyyy, HH:mm', 'dd MMMM yyyy HH:mm', 'dd MMMM yyyy, HH:mm', 'MMM d yyyy HH:mm', 'MMM d yyyy, HH:mm', 'MMMM d yyyy HH:mm', 'MMMM d yyyy, HH:mm', 'MMM dd yyyy HH:mm', 'MMM dd yyyy, HH:mm', 'MMMM dd yyyy HH:mm', 'MMMM dd yyyy, HH:mm', 'yy MMM d HH:mm', 'yy MMM d, HH:mm', 'yy MMMM d HH:mm', 'yy MMMM d, HH:mm', 'yy MMM dd HH:mm', 'yy MMM dd, HH:mm', 'yy MMMM dd HH:mm', 'yy MMMM dd, HH:mm', 'yy d MMM HH:mm', 'yy d MMM, HH:mm', 'yy d MMMM HH:mm', 'yy d MMMM, HH:mm', 'yy dd MMM HH:mm', 'yy dd MMM, HH:mm', 'yy dd MMMM HH:mm', 'yy dd MMMM, HH:mm', 'd MMM HH:mm', 'd MMM, HH:mm', 'd MMMM HH:mm', 'd MMMM, HH:mm', 'dd MMM HH:mm', 'dd MMM, HH:mm', 'dd MMMM HH:mm', 'dd MMMM, HH:mm', 'yyyy MMM d', 'yyyy MMMM d', 'yyyy MMM dd', 'yyyy MMMM dd', 'yyyy d MMM', 'yyyy d MMMM', 'yyyy dd MMM', 'yyyy dd MMMM', 'd MMM yy', 'd MMMM yy', 'dd MMM yy', 'dd MMMM yy', 'd MMM yyyy', 'd MMMM yyyy', 'dd MMM yyyy', 'dd MMMM yyyy', 'd MMM yy', 'd MMMM yy', 'dd MMM yy', 'dd MMMM yy', 'd MMM yyyy', 'd MMMM yyyy', 'dd MMM yyyy', 'dd MMMM yyyy', 'MMM d yyyy', 'MMMM d yyyy', 'MMM dd yyyy', 'MMMM dd yyyy', 'yy MMM d', 'yy MMMM d', 'yy MMM dd', 'yy MMMM dd', 'yy d MMM', 'yy d MMMM', 'yy dd MMM', 'yy dd MMMM', 'yyyy MMM d HH:mm', 'yyyy MMM d, HH:mm', 'yyyy MMMM d HH:mm', 'yyyy MMMM d, HH:mm', 'yyyy MMM dd HH:mm', 'yyyy MMM dd, HH:mm', 'yyyy MMMM dd HH:mm', 'yyyy MMMM dd, HH:mm', 'yyyy d MMM HH:mm', 'yyyy d MMM, HH:mm', 'yyyy d MMMM HH:mm', 'yyyy d MMMM, HH:mm', 'yyyy dd MMM HH:mm', 'yyyy dd MMM, HH:mm', 'yyyy dd MMMM HH:mm', 'yyyy dd MMMM, HH:mm', 'd MMM yy HH:mm', 'd MMM yy, HH:mm', 'd MMMM yy HH:mm', 'd MMMM yy, HH:mm', 'dd MMM yy HH:mm', 'dd MMM yy, HH:mm', 'dd MMMM yy HH:mm', 'dd MMMM yy, HH:mm', 'd MMM yyyy HH:mm', 'd MMM yyyy, HH:mm', 'd MMMM yyyy HH:mm', 'd MMMM yyyy, HH:mm', 'dd MMM yyyy HH:mm', 'dd MMM yyyy, HH:mm', 'dd MMMM yyyy HH:mm', 'dd MMMM yyyy, HH:mm', 'd MMM yy HH:mm', 'd MMM yy, HH:mm', 'd MMMM yy HH:mm', 'd MMMM yy, HH:mm', 'dd MMM yy HH:mm', 'dd MMM yy, HH:mm', 'dd MMMM yy HH:mm', 'dd MMMM yy, HH:mm', 'd MMM yyyy HH:mm', 'd MMM yyyy, HH:mm', 'd MMMM yyyy HH:mm', 'd MMMM yyyy, HH:mm', 'dd MMM yyyy HH:mm', 'dd MMM yyyy, HH:mm', 'dd MMMM yyyy HH:mm', 'dd MMMM yyyy, HH:mm', 'MMM d yyyy HH:mm', 'MMM d yyyy, HH:mm', 'MMMM d yyyy HH:mm', 'MMMM d yyyy, HH:mm', 'MMM dd yyyy HH:mm', 'MMM dd yyyy, HH:mm', 'MMMM dd yyyy HH:mm', 'MMMM dd yyyy, HH:mm', 'yy MMM d HH:mm', 'yy MMM d, HH:mm', 'yy MMMM d HH:mm', 'yy MMMM d, HH:mm', 'yy MMM dd HH:mm', 'yy MMM dd, HH:mm', 'yy MMMM dd HH:mm', 'yy MMMM dd, HH:mm', 'yy d MMM HH:mm', 'yy d MMM, HH:mm', 'yy d MMMM HH:mm', 'yy d MMMM, HH:mm', 'yy dd MMM HH:mm', 'yy dd MMM, HH:mm', 'yy dd MMMM HH:mm', 'yy dd MMMM, HH:mm'];

package/components/date-picker/month-names.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function MonthNames(props: MonthsProps): React.JSX.Element;
+declare namespace MonthNames {
+    var propTypes: {
+        scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
+        currentRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default MonthNames;

package/components/date-picker/month-names.js

@@ -0,0 +1,62 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { isThisMonth } from 'date-fns/isThisMonth';
+import { set } from 'date-fns/set';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfYear } from 'date-fns/startOfYear';
+import linearFunction from '../global/linear-function';
+import MonthSlider from './month-slider';
+import { YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';
+import styles from './date-picker.css';
+class MonthName extends PureComponent {
+    static propTypes = {
+        month: dateType,
+        onScrollChange: PropTypes.func,
+        locale: PropTypes.string
+    };
+    handleClick = () => {
+        const end = endOfMonth(this.props.month);
+        this.props.onScrollChange(end.getTime());
+    };
+    render() {
+        const { month, locale } = this.props;
+        return (<button type="button" className={classNames(styles.monthName, {
+                [styles.today]: isThisMonth(month)
+            })} onClick={this.handleClick}>
+        {format(month, 'LLL', { locale })}
+      </button>);
+    }
+}
+export default function MonthNames(props) {
+    const { scrollDate, locale } = props;
+    const months = [];
+    for (let i = 0; i < YEAR; i++) {
+        const middleDay = set(scrollDate, { month: i, date: MIDDLE_DAY });
+        months.push(startOfDay(middleDay));
+    }
+    const pxToDate = linearFunction(0, Number(startOfYear(scrollDate)), yearScrollSpeed);
+    let top = 0;
+    let bottom = 0;
+    if (props.currentRange) {
+        [top, bottom] = props.currentRange.
+            map(date => Math.floor(pxToDate.x(Number(date))));
+    }
+    return (<div className={styles.monthNames}>
+      {months.map(month => (<MonthName key={+month} month={month} onScrollChange={props.onScrollChange} locale={locale}/>))}
+      {props.currentRange &&
+            (<div className={styles.range} style={{
+                    top: top - 1,
+                    height: (bottom + 1) - (top - 1)
+                }}/>)}
+      <MonthSlider {...props} pxToDate={pxToDate}/>
+    </div>);
+}
+MonthNames.propTypes = {
+    scrollDate: dateType,
+    onScrollChange: PropTypes.func,
+    currentRange: PropTypes.arrayOf(dateType),
+    locale: PropTypes.string
+};

package/components/date-picker/month-slider.d.ts

@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LinearFunction } from '../global/linear-function';
+import { MonthsProps } from './consts';
+export interface MonthSliderProps extends MonthsProps {
+    pxToDate: LinearFunction;
+}
+interface MonthSliderState {
+    dragging: boolean;
+}
+export default class MonthSlider extends PureComponent<MonthSliderProps> {
+    static propTypes: {
+        scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        pxToDate: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<(...args: any[]) => any>;
+            y: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+    };
+    state: {
+        dragging: boolean;
+    };
+    componentDidUpdate(prevProps: MonthSliderProps, prevState: MonthSliderState): void;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseMove: (e: MouseEvent) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/components/date-picker/month-slider.js

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { addYears } from 'date-fns/addYears';
+import { startOfDay } from 'date-fns/startOfDay';
+import { subYears } from 'date-fns/subYears';
+import linearFunction from '../global/linear-function';
+import units, { dateType, yearScrollSpeed } from './consts';
+import styles from './date-picker.css';
+const COVERYEARS = 3;
+export default class MonthSlider extends PureComponent {
+    static propTypes = {
+        scrollDate: dateType,
+        onScroll: PropTypes.func,
+        pxToDate: PropTypes.shape({
+            x: PropTypes.func,
+            y: PropTypes.func
+        })
+    };
+    state = {
+        dragging: false
+    };
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.dragging && !prevState.dragging) {
+            window.addEventListener('mousemove', this.onMouseMove);
+            window.addEventListener('mouseup', this.onMouseUp);
+        }
+        else if (!this.state.dragging && prevState.dragging) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+            window.removeEventListener('mouseup', this.onMouseUp);
+        }
+    }
+    onMouseDown = () => {
+        this.setState({ dragging: true });
+    };
+    onMouseUp = () => {
+        this.setState({ dragging: false });
+    };
+    onMouseMove = (e) => {
+        this.props.onScroll(linearFunction(0, Number(this.props.scrollDate), yearScrollSpeed).y(e.movementY));
+    };
+    render() {
+        let year = subYears(startOfDay(this.props.scrollDate), 1);
+        const years = [year];
+        for (let i = 0; i <= COVERYEARS; i++) {
+            year = addYears(year, 1);
+            years.push(year);
+        }
+        const classes = classNames(styles.monthSlider, { [styles.dragging]: this.state.dragging });
+        return (<div>
+        {years.map(date => (<button type="button" key={+date} className={classes} style={{
+                    top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize)
+                }} onMouseDown={this.onMouseDown}/>))}
+      </div>);
+    }
+}

package/components/date-picker/month.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface MonthProps extends MonthsProps {
+    month: Date;
+}
+declare function Month(props: MonthProps): React.JSX.Element;
+declare namespace Month {
+    var propTypes: {
+        month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Month;

package/components/date-picker/month.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { addDays } from 'date-fns/addDays';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { format } from 'date-fns/format';
+import { getDay } from 'date-fns/getDay';
+import { setDay } from 'date-fns/setDay';
+import PropTypes from 'prop-types';
+import Day from './day';
+import { dateType, WEEK, weekdays } from './consts';
+import styles from './date-picker.css';
+export default function Month(props) {
+    const start = props.month;
+    const end = endOfMonth(start);
+    const { locale } = props;
+    // pad with empty cells starting from last friday
+    const weekday = getDay(start);
+    let day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+    const days = [];
+    while (day < end) {
+        days.push(day);
+        day = addDays(day, 1);
+    }
+    return (<div className={styles.month}>
+      <span className={styles.monthTitle}>
+        {format(props.month, 'LLLL', { locale })}
+      </span>
+      {days.map(date => (<Day {...props} day={date} empty={date < start} key={+date}/>))}
+    </div>);
+}
+Month.propTypes = {
+    month: dateType,
+    locale: PropTypes.string
+};

package/components/date-picker/months.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function Months(props: MonthsProps): React.JSX.Element;
+declare namespace Months {
+    var propTypes: {
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+    };
+}
+export default Months;

package/components/date-picker/months.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { addMonths } from 'date-fns/addMonths';
+import { getDay } from 'date-fns/getDay';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { subMonths } from 'date-fns/subMonths';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import scheduleRAF from '../global/schedule-raf';
+import linearFunction from '../global/linear-function';
+import useEventCallback from '../global/use-event-callback';
+import Month from './month';
+import MonthNames from './month-names';
+import styles from './date-picker.css';
+import units, { dateType, DOUBLE, HALF, WEEK, weekdays } from './consts';
+const { unit, cellSize, calHeight } = units;
+const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
+const FIVELINES = 31;
+const TALLMONTH = 6;
+const SHORTMONTH = 5;
+const PADDING = 2;
+const MONTHSBACK = 2;
+function monthHeight(date) {
+    const monthStart = startOfMonth(date);
+    const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
+    const monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
+    return monthLines * cellSize + unit * PADDING;
+}
+// in milliseconds per pixel
+function scrollSpeed(date) {
+    const monthStart = startOfMonth(date);
+    const monthEnd = endOfMonth(date);
+    return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
+}
+const scrollSchedule = scheduleRAF();
+let dy = 0;
+export default function Months(props) {
+    const { scrollDate } = props;
+    const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+    const monthStart = startOfMonth(monthDate);
+    const months = useMemo(() => {
+        let month = subMonths(monthStart, MONTHSBACK);
+        const result = [month];
+        for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
+            month = addMonths(month, 1);
+            result.push(month);
+        }
+        return result;
+    }, [monthStart]);
+    const currentSpeed = scrollSpeed(scrollDate);
+    const pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
+    const offset = pxToDate.x(Number(monthStart)); // is a negative number
+    const bottomOffset = monthHeight(scrollDate) + offset;
+    const componentRef = useRef(null);
+    const handleWheel = useEventCallback((e) => {
+        e.preventDefault();
+        dy += e.deltaY;
+        scrollSchedule(() => {
+            let date;
+            // adjust scroll speed to prevent glitches
+            if (dy < offset) {
+                date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
+            }
+            else if (dy > bottomOffset) {
+                date =
+                    pxToDate.y(bottomOffset) +
+                        (dy - bottomOffset) *
+                            scrollSpeed(months[MONTHSBACK + 1]);
+            }
+            else {
+                date = pxToDate.y(dy);
+            }
+            props.onScroll(date);
+            dy = 0;
+        });
+    });
+    useEffect(() => {
+        const current = componentRef.current;
+        if (current !== null) {
+            current.addEventListener('wheel', handleWheel, { passive: false });
+        }
+        return () => {
+            if (current !== null) {
+                current.removeEventListener('wheel', handleWheel);
+            }
+        };
+    }, [handleWheel]);
+    return (<div className={styles.months} ref={componentRef}>
+      <div style={{
+            top: Math.
+                floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
+        }} className={styles.days}>
+        {months.map(date => (<Month {...props} month={date} key={+date}/>))}
+      </div>
+      <MonthNames {...props}/>
+    </div>);
+}
+Months.propTypes = {
+    onScroll: PropTypes.func,
+    scrollDate: dateType
+};

package/components/date-picker/weekdays.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Locale } from 'date-fns';
+import PropTypes from 'prop-types';
+interface WeekdaysProps {
+    locale: Locale | undefined;
+}
+declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
+declare namespace Weekdays {
+    var propTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Weekdays;

package/components/date-picker/weekdays.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { getDay } from 'date-fns/getDay';
+import { format } from 'date-fns/format';
+import { setDay } from 'date-fns/setDay';
+import { startOfDay } from 'date-fns/startOfDay';
+import PropTypes from 'prop-types';
+import { weekdays } from './consts';
+import styles from './date-picker.css';
+export default function Weekdays(props) {
+    const days = Object.values(weekdays).
+        map(value => startOfDay(setDay(new Date(), value)));
+    const { locale } = props;
+    return (<div className={styles.weekdays}>
+      {days.map(day => (<span className={classNames(styles.weekday, {
+                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
+            })} key={+day}>
+          {format(day, 'EEEEEE', { locale })}
+        </span>))}
+    </div>);
+}
+Weekdays.propTypes = {
+    locale: PropTypes.string
+};

package/components/date-picker/years.d.ts

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { CalendarProps } from './consts';
+interface YearsState {
+    scrollDate: Date | null;
+}
+export default class Years extends PureComponent<CalendarProps> {
+    static propTypes: {
+        scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        scrollDate: null;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    componentWillUnmount(): void;
+    stoppedScrolling?: boolean;
+    setYear(date: number): void;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/components/date-picker/years.js

@@ -0,0 +1,87 @@
+import React, { createRef, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { addYears } from 'date-fns/addYears';
+import { getYear } from 'date-fns/getYear';
+import { format } from 'date-fns/format';
+import { isSameYear } from 'date-fns/isSameYear';
+import { isThisYear } from 'date-fns/isThisYear';
+import { setYear } from 'date-fns/setYear';
+import { startOfYear } from 'date-fns/startOfYear';
+import { subYears } from 'date-fns/subYears';
+import linearFunction from '../global/linear-function';
+import styles from './date-picker.css';
+import units, { dateType, DOUBLE, HALF, yearDuration } from './consts';
+const { yearHeight, calHeight } = units;
+let scrollTO;
+const YEARSBACK = 5;
+const scrollDelay = 100;
+export default class Years extends PureComponent {
+    static propTypes = {
+        scrollDate: dateType,
+        onScroll: PropTypes.func,
+        onScrollChange: PropTypes.func
+    };
+    state = { scrollDate: null };
+    componentDidMount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.addEventListener('wheel', this.handleWheel);
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
+    }
+    componentWillUnmount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+        }
+    }
+    stoppedScrolling;
+    setYear(date) {
+        if (scrollTO) {
+            window.clearTimeout(scrollTO);
+            scrollTO = null;
+        }
+        this.setState({ scrollDate: null });
+        this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
+    }
+    componentRef = createRef();
+    handleWheel = (e) => {
+        const { scrollDate } = this.props;
+        const date = this.state.scrollDate || scrollDate;
+        e.preventDefault();
+        const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+        this.setState({
+            scrollDate: newScrollDate
+        });
+        if (scrollTO) {
+            window.clearTimeout(scrollTO);
+        }
+        scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+    };
+    render() {
+        const { onScrollChange, scrollDate } = this.props;
+        const date = this.state.scrollDate || scrollDate;
+        const yearStart = startOfYear(date);
+        let year = subYears(yearStart, YEARSBACK);
+        const years = [year];
+        for (let i = 0; i < YEARSBACK * DOUBLE; i++) {
+            year = addYears(year, 1);
+            years.push(year);
+        }
+        const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
+        return (<div className={styles.years} ref={this.componentRef} style={{
+                transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
+                top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
+            }}>
+        {years.map(item => (<button type="button" key={+item} className={classNames(styles.year, {
+                    [styles.currentYear]: isSameYear(item, date),
+                    [styles.today]: isThisYear(item)
+                })} onClick={function handleClick() {
+                    onScrollChange(Number(setYear(scrollDate, getYear(item))));
+                }}>
+            {format(item, 'yyyy')}
+          </button>))}
+      </div>);
+    }
+}