@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/date-picker/date-popup.jsx

@@ -0,0 +1,344 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+import startOfDay from 'date-fns/startOfDay';
+import calendarIcon from '@jetbrains/icons/calendar';
+import Icon from '../icon/icon';
+import memoize from '../global/memoize';
+import DateInput from './date-input';
+import Months from './months';
+import Years from './years';
+import Weekdays from './weekdays';
+import { dateType, parseTime } from './consts';
+import styles from './date-picker.css';
+const scrollExpDelay = 10;
+export default class DatePopup extends Component {
+    static sameDay(next, prev) {
+        if (next && prev) {
+            return isSameDay(next, prev);
+        }
+        return next === prev;
+    }
+    static propTypes = {
+        className: PropTypes.string,
+        date: dateType,
+        range: PropTypes.bool,
+        withTime: PropTypes.bool,
+        time: PropTypes.string,
+        from: dateType,
+        to: dateType,
+        renderAfterCalendar: PropTypes.func,
+        displayFormat: PropTypes.func,
+        parseDateInput: PropTypes.func,
+        onChange: PropTypes.func,
+        onComplete: PropTypes.func,
+        onClear: PropTypes.func,
+        minDate: dateType,
+        maxDate: dateType,
+        hidden: PropTypes.bool,
+        fromPlaceholder: PropTypes.string,
+        toPlaceholder: PropTypes.string,
+        timePlaceholder: PropTypes.string,
+        locale: PropTypes.object
+    };
+    static defaultProps = {
+        onChange() { }
+    };
+    constructor(props) {
+        super(props);
+        const defaultState = {
+            text: null,
+            hoverDate: null,
+            scrollDate: null
+        };
+        const { range, withTime } = props;
+        if (!range) {
+            const parsedDate = this.parse(props.date, 'date');
+            const active = withTime && parsedDate && !props.time ? 'time' : 'date';
+            this.state = { ...defaultState, active };
+        }
+        else if (props.from && !props.to) {
+            this.state = { ...defaultState, active: 'to' };
+        }
+        else {
+            this.state = { ...defaultState, active: 'from' };
+        }
+    }
+    componentDidMount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.addEventListener('wheel', this.handleWheel, { passive: true });
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.active !== prevState.active) {
+            if (this.state.text && prevState.active) {
+                this.confirm(prevState.active);
+            }
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({ text: null });
+        }
+    }
+    componentWillUnmount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+        }
+    }
+    _scrollDate;
+    _scrollTS;
+    isInTimeMode = () => !this.props.range && this.props.withTime || false;
+    componentRef = React.createRef();
+    handleWheel = (e) => {
+        e.preventDefault();
+    };
+    parse(text, type) {
+        if (type === 'time') {
+            return parseTime(String(text));
+        }
+        return this.props.parseDateInput(text);
+    }
+    select(changes) {
+        const { range, withTime } = this.props;
+        const prevActive = this.state.active;
+        if (!range && !withTime) {
+            this.setState({
+                text: null,
+                scrollDate: null
+            });
+            this.props.onChange(changes.date);
+            this.props.onComplete();
+        }
+        else if (!range && withTime) {
+            const date = this.parse(this.props.date, 'date');
+            const time = this.parse(this.props.time, 'time');
+            const changeToSubmit = {
+                date: changes.date || date,
+                time: changes.time || time
+            };
+            this.setState({
+                active: changes.date ? 'time' : 'date',
+                text: null,
+                scrollDate: null
+            });
+            this.props.onChange(changeToSubmit);
+            if (!changes.date && prevActive === 'time' &&
+                changeToSubmit.date && changeToSubmit.time) {
+                this.props.onComplete();
+            }
+        }
+        else {
+            let { from, to } = {
+                ...this.props,
+                ...changes
+            };
+            from = this.parse(from, 'from');
+            to = this.parse(to, 'to');
+            // proceed to setting the end by default
+            let active = 'to';
+            let complete = false;
+            // end is before beginning
+            if (from && to && isAfter(startOfDay(from), startOfDay(to))) {
+                // ignore the old end when beginning is changed
+                if (changes.from) {
+                    to = null;
+                    // treat range as reverse when end is changed
+                }
+                else if (changes.to) {
+                    to = from;
+                    from = changes.to;
+                }
+            }
+            else if (changes.to) {
+                active = 'from';
+                complete = !!from;
+            }
+            this.setState({
+                active,
+                hoverDate: null,
+                text: null
+            });
+            this.props.onChange({ from, to });
+            if (complete) {
+                this.props.onComplete();
+            }
+        }
+    }
+    confirm(name) {
+        const text = this.state.text;
+        let result;
+        if (name === 'time') {
+            result = this.parse(text, name);
+            const time = this.parse('time' in this.props ? this.props.time : '', 'time');
+            const emptyCase = this.state.active === 'time' ? '00:00' : null;
+            result = result || time || emptyCase;
+        }
+        else {
+            result = this.parse(text, name);
+            if (!this.isValidDate(result)) {
+                result = this.parse(name in this.props ? this.props[name] : '', name);
+            }
+        }
+        this.select({
+            [name]: result
+        });
+    }
+    isValidDate = (parsedText) => {
+        const minDate = this.parse(this.props.minDate, 'date');
+        const maxDate = this.parse(this.props.maxDate, 'date');
+        if (parsedText) {
+            return (!(minDate && isBefore(parsedText, minDate) ||
+                maxDate && isAfter(parsedText, maxDate)));
+        }
+        return false;
+    };
+    scheduleScroll = () => {
+        const current = this.state.scrollDate && this.parse(this.state.scrollDate, 'date') ||
+            this.parse(this.props[this.state.active], 'date') ||
+            new Date();
+        const goal = this._scrollDate;
+        if (!current ||
+            !goal ||
+            DatePopup.sameDay(goal, current)) {
+            this._scrollDate = null;
+            this._scrollTS = null;
+            return;
+        }
+        if (this._scrollTS) {
+            const diff = goal - Number(current);
+            const dt = Date.now() - this._scrollTS;
+            const next = goal - diff * (Math.E ** (-dt / scrollExpDelay));
+            this.setState({ scrollDate: next });
+        }
+        this._scrollTS = Date.now();
+        window.requestAnimationFrame(this.scheduleScroll);
+    };
+    scrollTo = (scrollDate) => {
+        this._scrollDate = scrollDate;
+        if (!this._scrollTS) {
+            this.scheduleScroll();
+        }
+    };
+    hoverHandler = (hoverDate) => this.setState({ hoverDate });
+    handleActivate = memoize((name) => () => this.setState({ active: name }));
+    handleInput = (text, name) => {
+        if (name !== 'time') {
+            const parsed = this.parse(text, name);
+            if (this.isValidDate(parsed)) {
+                this.scrollTo(Number(parsed));
+            }
+        }
+        this.setState({
+            text,
+            hoverDate: null
+        });
+    };
+    handleConfirm = memoize((name) => () => this.confirm(name));
+    selectHandler = (date) => {
+        if (this.isInTimeMode()) {
+            this.setState({
+                active: 'time'
+            }, () => this.select({ date }));
+        }
+        else {
+            this.select({ [this.state.active]: date });
+        }
+    };
+    handleScroll = (scrollDate) => this.setState({ scrollDate });
+    onClear = (e) => {
+        let changes;
+        if (this.props.range) {
+            changes = {
+                from: null,
+                to: null
+            };
+        }
+        else {
+            changes = {
+                date: null
+            };
+        }
+        this.select(changes);
+        this.props.onClear?.(e);
+    };
+    render() {
+        const { range, hidden, withTime, locale } = this.props;
+        const { from, to, date, time, ...restProps } = this.props;
+        const parsedDate = this.parse(this.props.date, 'date');
+        const parsedTo = this.parse(this.props.to, 'to');
+        const names = range ? ['from', 'to'] : ['date'];
+        const dates = names.reduce((obj, key) => {
+            const value = this.props[key];
+            return {
+                ...obj,
+                [key]: this.parse(value, key)
+            };
+        }, {});
+        const activeDate = this.state.active !== 'time'
+            ? this.state.hoverDate ||
+                (this.state.text != null ? this.parse(this.state.text, 'date') : null)
+            : this.state.hoverDate || null;
+        const currentRange = range && dates.from && dates.to && [dates.from, dates.to] || null;
+        let activeRange = null;
+        if (range && activeDate) {
+            switch (this.state.active) {
+                case 'from':
+                    if (dates.to && isAfter(startOfDay(activeDate), startOfDay(dates.to))) {
+                        activeRange = [activeDate, dates.to];
+                    }
+                    break;
+                case 'to':
+                    if (!dates.from) {
+                        break;
+                    }
+                    if (isBefore(startOfDay(activeDate), startOfDay(dates.from))) {
+                        activeRange = [activeDate, dates.from];
+                    }
+                    else {
+                        activeRange = [dates.from, activeDate];
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        const scrollDate = withTime && !range
+            ? this.state.scrollDate || dates.date || new Date()
+            : this.state.scrollDate || dates[this.state.active] || new Date();
+        const calendarProps = {
+            ...restProps,
+            ...dates,
+            scrollDate,
+            activeDate,
+            currentRange,
+            activeRange,
+            onScroll: this.handleScroll,
+            onScrollChange: this.scrollTo
+        };
+        const clearable = Boolean(this.props.onClear);
+        return (<div className={styles.datePopup} data-test="ring-date-popup" ref={this.componentRef}>
+        <div className={styles.filterWrapper}>
+          <Icon glyph={calendarIcon} className={styles.filterIcon}/>
+
+          {names.map(name => {
+                let onClear;
+                if (clearable && name !== 'from' && !this.isInTimeMode()) {
+                    onClear = this.onClear.bind(this);
+                }
+                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} hidden={hidden} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
+            })}
+
+          {this.isInTimeMode()
+                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} hidden={hidden} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
+                : ('')}
+        </div>
+        <Weekdays locale={locale}/>
+        <div className={styles.calendar}>
+          <Months {...calendarProps} onHover={this.hoverHandler} onSelect={this.selectHandler} locale={locale}/>
+          <Years {...calendarProps}/>
+        </div>
+
+        {this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)}
+      </div>);
+    }
+}

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

@@ -0,0 +1,30 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface DayProps extends MonthsProps {
+    day: Date;
+    empty: boolean;
+}
+export default class Day extends Component<DayProps> {
+    static propTypes: {
+        day: PropTypes.Requireable<string | number | Date>;
+        from: PropTypes.Requireable<string | number | Date>;
+        currentRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        activeRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        empty: PropTypes.Requireable<boolean>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+    };
+    handleClick: () => void;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+    isDay: (date: Date) => boolean;
+    is: (name: 'date' | 'from' | 'to' | 'activeDate') => boolean;
+    inRange: (range: [Date, Date] | null) => boolean | null;
+    isDisabled: (date: Date) => boolean;
+    parse(text: string | null | undefined): Date | null;
+    render(): JSX.Element;
+}

package/components/date-picker/day.jsx

@@ -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/month-names.d.ts

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

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

@@ -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 { HALF, 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((+this.props.month + +end) * HALF);
+    };
+    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 { 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<string | number | Date>;
+        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(): JSX.Element;
+}
+export {};

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

@@ -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 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface MonthProps extends MonthsProps {
+    month: Date;
+}
+declare function Month(props: MonthProps): JSX.Element;
+declare namespace Month {
+    var propTypes: {
+        month: PropTypes.Requireable<string | number | Date>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Month;

package/components/date-picker/month.jsx

@@ -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
+};