Skip to content

Commit

Permalink
[datetime] feat: support highlightCurrentDay prop in more components (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
ejose19 authored Sep 8, 2020
1 parent ff7af00 commit d9925e1
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 59 deletions.
4 changes: 4 additions & 0 deletions packages/datetime/src/common/dateUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -234,3 +234,7 @@ export function get24HourFrom12Hour(hour: number, isPm: boolean): number {
const newHour = hour === 12 ? 0 : hour;
return isPm ? newHour + 12 : newHour;
}

export function isToday(date: Date): boolean {
return areSameDay(date, new Date());
}
11 changes: 0 additions & 11 deletions packages/datetime/src/dateInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@

import classNames from "classnames";
import * as React from "react";
import { DayPickerProps } from "react-day-picker";
import { polyfill } from "react-lifecycles-compat";

import {
Expand Down Expand Up @@ -64,16 +63,6 @@ export interface IDateInputProps extends IDatePickerBaseProps, IDateFormatProps,
*/
closeOnSelection?: boolean;

/**
* Props to pass to ReactDayPicker. See API documentation
* [here](http://react-day-picker.js.org/api/DayPicker).
*
* The following props are managed by the component and cannot be configured:
* `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
* `initialMonth`), `toMonth` (use `maxDate`).
*/
dayPickerProps?: DayPickerProps;

/**
* Whether the date input is non-interactive.
* @default false
Expand Down
28 changes: 2 additions & 26 deletions packages/datetime/src/datePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import { AbstractPureComponent2, Button, DISPLAYNAME_PREFIX, Divider, IProps } from "@blueprintjs/core";
import classNames from "classnames";
import * as React from "react";
import DayPicker, { CaptionElementProps, DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker";
import DayPicker, { CaptionElementProps, DayModifiers, NavbarElementProps } from "react-day-picker";
import { polyfill } from "react-lifecycles-compat";

import * as Classes from "./common/classes";
Expand All @@ -36,34 +36,12 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
*/
canClearSelection?: boolean;

/**
* Props to pass to ReactDayPicker. See API documentation
* [here](http://react-day-picker.js.org/api/DayPicker).
*
* The following props are managed by the component and cannot be configured:
* `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
* `initialMonth`), `toMonth` (use `maxDate`).
*
* In case of supplying your owner `renderDay` function, make sure to apply the appropriate
* CSS wrapper class to obtain default Blueprint styling.
* eg.
* `<div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>`
*
*/
dayPickerProps?: DayPickerProps;

/**
* Initial day the calendar will display as selected.
* This should not be set if `value` is set.
*/
defaultValue?: Date;

/**
* Whether the current day should be highlighted in the calendar.
* @default false
*/
highlightCurrentDay?: boolean;

/**
* Called when the user selects a day.
* If being used in an uncontrolled manner, `selectedDate` will be `null` if the user clicks the currently selected
Expand Down Expand Up @@ -233,12 +211,10 @@ export class DatePicker extends AbstractPureComponent2<IDatePickerProps, IDatePi
}
}

private isToday = (date: Date) => DateUtils.areSameDay(date, new Date());

private shouldHighlightCurrentDay = (date: Date) => {
const { highlightCurrentDay } = this.props;

return highlightCurrentDay && this.isToday(date);
return highlightCurrentDay && DateUtils.isToday(date);
};

private getDatePickerModifiers = () => {
Expand Down
24 changes: 23 additions & 1 deletion packages/datetime/src/datePickerCore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import { LocaleUtils } from "react-day-picker";
import { DayPickerProps, LocaleUtils } from "react-day-picker";
import { Months } from "./common/months";
import { ITimePickerProps, TimePrecision } from "./timePicker";

Expand All @@ -29,6 +29,28 @@ export interface IDatePickerModifiers {
}

export interface IDatePickerBaseProps {
/**
* Props to pass to ReactDayPicker. See API documentation
* [here](http://react-day-picker.js.org/api/DayPicker).
*
* The following props are managed by the component and cannot be configured:
* `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
* `initialMonth`), `toMonth` (use `maxDate`).
*
* In case of supplying your owner `renderDay` function, make sure to apply the appropriate
* CSS wrapper class to obtain default Blueprint styling.
* eg.
* `<div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>`
*
*/
dayPickerProps?: DayPickerProps;

/**
* Whether the current day should be highlighted in the calendar.
* @default false
*/
highlightCurrentDay?: boolean;

/**
* The initial month the calendar displays.
*/
Expand Down
12 changes: 1 addition & 11 deletions packages/datetime/src/dateRangeInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import classNames from "classnames";
import * as React from "react";
import DayPicker, { DayPickerProps } from "react-day-picker";
import DayPicker from "react-day-picker";
import { polyfill } from "react-lifecycles-compat";

import {
Expand Down Expand Up @@ -76,16 +76,6 @@ export interface IDateRangeInputProps extends IDatePickerBaseProps, IDateFormatP
*/
contiguousCalendarMonths?: boolean;

/**
* Props to pass to ReactDayPicker. See API documentation
* [here](http://react-day-picker.js.org/api/DayPicker).
*
* The following props are managed by the component and cannot be configured:
* `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
* `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
*/
dayPickerProps?: DayPickerProps;

/**
* The default date range to be used in the component when uncontrolled.
* This will be ignored if `value` is set.
Expand Down
35 changes: 25 additions & 10 deletions packages/datetime/src/dateRangePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,6 @@ export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
* @default true
*/
contiguousCalendarMonths?: boolean;
/**
* Props to pass to ReactDayPicker. See API documentation
* [here](http://react-day-picker.js.org/api/DayPicker).
*
* The following props are managed by the component and cannot be configured:
* `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
* `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
*/
dayPickerProps?: DayPickerProps;

/**
* Initial `DateRange` the calendar will display as selected.
Expand Down Expand Up @@ -295,6 +286,27 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
}
}

private shouldHighlightCurrentDay = (date: Date) => {
const { highlightCurrentDay } = this.props;

return highlightCurrentDay && DateUtils.isToday(date);
};

private getDateRangePickerModifiers = () => {
const { modifiers } = this.props;

return combineModifiers(this.modifiers, {
isToday: this.shouldHighlightCurrentDay,
...modifiers,
});
};

private renderDay = (day: Date) => {
const date = day.getDate();

return <div className={DateClasses.DATEPICKER_DAY_WRAPPER}>{date}</div>;
};

private disabledDays = (day: Date) => !DateUtils.isDayInRange(day, [this.props.minDate, this.props.maxDate]);

private getDisabledDaysModifier = () => {
Expand Down Expand Up @@ -382,7 +394,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
const dayPickerBaseProps: DayPickerProps = {
locale,
localeUtils,
modifiers: combineModifiers(this.modifiers, this.props.modifiers),
modifiers: this.getDateRangePickerModifiers(),
showOutsideDays: true,
...dayPickerProps,
disabledDays: this.getDisabledDaysModifier(),
Expand All @@ -403,6 +415,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
numberOfMonths={1}
onMonthChange={this.handleLeftMonthChange}
toMonth={maxDate}
renderDay={dayPickerProps?.renderDay ?? this.renderDay}
/>
);
} else {
Expand All @@ -418,6 +431,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
numberOfMonths={1}
onMonthChange={this.handleLeftMonthChange}
toMonth={DateUtils.getDatePreviousMonth(maxDate)}
renderDay={dayPickerProps?.renderDay ?? this.renderDay}
/>,
<DayPicker
key="right"
Expand All @@ -430,6 +444,7 @@ export class DateRangePicker extends AbstractPureComponent2<IDateRangePickerProp
numberOfMonths={1}
onMonthChange={this.handleRightMonthChange}
toMonth={maxDate}
renderDay={dayPickerProps?.renderDay ?? this.renderDay}
/>,
];
}
Expand Down

1 comment on commit d9925e1

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[datetime] feat: support highlightCurrentDay prop in more components (#4314)

Previews: documentation | landing | table

Please sign in to comment.