Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
amrocha committed Sep 3, 2019
1 parent 5b2978b commit fab748b
Showing 1 changed file with 92 additions and 129 deletions.
221 changes: 92 additions & 129 deletions src/components/DatePicker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,8 @@ import {
getPreviousDisplayYear,
getPreviousDisplayMonth,
Weekdays,
isSameDay,
} from '@shopify/javascript-utilities/dates';

import {
withAppProvider,
WithAppProviderProps,
} from '../../utilities/with-app-provider';
import {Button} from '../Button';
import {useI18n} from '../../utilities/i18n';
import {monthName} from './utilities';
Expand Down Expand Up @@ -54,7 +49,7 @@ export interface BaseProps {

export interface DatePickerProps extends BaseProps {}

function DatePicker({
export function DatePicker({
id,
selected,
month,
Expand Down Expand Up @@ -82,13 +77,16 @@ function DatePicker({
setFocusDate(date);
}, []);

const setFocusDateAndHandleMonthChange = (date: Date) => {
if (onMonthChange) {
onMonthChange(date.getMonth(), date.getFullYear());
}
setHoverDate(date);
setFocusDate(date);
};
const setFocusDateAndHandleMonthChange = useCallback(
(date: Date) => {
if (onMonthChange) {
onMonthChange(date.getMonth(), date.getFullYear());
}
setHoverDate(date);
setFocusDate(date);
},
[onMonthChange],
);

const handleDateSelection = useCallback(
(range: Range) => {
Expand All @@ -101,81 +99,78 @@ function DatePicker({
[onChange],
);

// private handleDateSelection = (range: Range) => {
// const {end} = range;
// const {onChange = noop} = this.props;

// this.setState({hoverDate: end, focusDate: new Date(end)}, () =>
// onChange(range),
// );
// };

// private handleMonthChangeClick = (month: Months, year: Year) => {
// const {onMonthChange} = this.props;
// if (!onMonthChange) {
// return;
// }
// this.setState({
// focusDate: undefined,
// });

// onMonthChange(month, year);
// };

// private handleHover = (date: Date) => {
// this.setState({
// hoverDate: date,
// });
// };

// private handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
// const {key} = event;
// const {selected, disableDatesBefore, disableDatesAfter} = this.props;

// const {focusDate} = this.state;
// const range = deriveRange(selected);
// const focusedDate = focusDate || (range && range.start);

// if (focusedDate == null) {
// return;
// }

// if (key === 'ArrowUp') {
// const previousWeek = new Date(focusedDate);
// previousWeek.setDate(focusedDate.getDate() - 7);
// if (
// !(disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore))
// ) {
// this.setFocusDateAndHandleMonthChange(previousWeek);
// }
// }

// if (key === 'ArrowDown') {
// const nextWeek = new Date(focusedDate);
// nextWeek.setDate(focusedDate.getDate() + 7);
// if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter))) {
// this.setFocusDateAndHandleMonthChange(nextWeek);
// }
// }
const handleMonthChangeClick = useCallback(
(month: Months, year: Year) => {
if (!onMonthChange) {
return;
}
setFocusDate(undefined);
onMonthChange(month, year);
},
[onMonthChange],
);

// if (key === 'ArrowRight') {
// const tomorrow = new Date(focusedDate);
// tomorrow.setDate(focusedDate.getDate() + 1);
// if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter))) {
// this.setFocusDateAndHandleMonthChange(tomorrow);
// }
// }
const handleHover = useCallback((date: Date) => {
setHoverDate(date);
}, []);

// if (key === 'ArrowLeft') {
// const yesterday = new Date(focusedDate);
// yesterday.setDate(focusedDate.getDate() - 1);
// if (
// !(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore))
// ) {
// this.setFocusDateAndHandleMonthChange(yesterday);
// }
// }
// };
const handleKeyUp = useCallback(
(event: React.KeyboardEvent<HTMLElement>) => {
const {key} = event;

const range = deriveRange(selected);
const focusedDate = focusDate || (range && range.start);

if (focusedDate == null) {
return;
}

if (key === 'ArrowUp') {
const previousWeek = new Date(focusedDate);
previousWeek.setDate(focusedDate.getDate() - 7);
if (
!(
disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore)
)
) {
setFocusDateAndHandleMonthChange(previousWeek);
}
}

if (key === 'ArrowDown') {
const nextWeek = new Date(focusedDate);
nextWeek.setDate(focusedDate.getDate() + 7);
if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter))) {
setFocusDateAndHandleMonthChange(nextWeek);
}
}

if (key === 'ArrowRight') {
const tomorrow = new Date(focusedDate);
tomorrow.setDate(focusedDate.getDate() + 1);
if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter))) {
setFocusDateAndHandleMonthChange(tomorrow);
}
}

if (key === 'ArrowLeft') {
const yesterday = new Date(focusedDate);
yesterday.setDate(focusedDate.getDate() - 1);
if (
!(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore))
) {
setFocusDateAndHandleMonthChange(yesterday);
}
}
},
[
disableDatesAfter,
disableDatesBefore,
focusDate,
selected,
setFocusDateAndHandleMonthChange,
],
);

const showNextYear = getNextDisplayYear(month, year);
const showNextMonth = getNextDisplayMonth(month);
Expand All @@ -198,14 +193,14 @@ function DatePicker({

const secondDatePicker = multiMonth ? (
<Month
onFocus={this.handleFocus}
onFocus={handleFocus}
focusedDate={focusDate}
month={showNextMonth}
year={showNextYear}
selected={deriveRange(selected)}
hoverDate={hoverDate}
onChange={this.handleDateSelection}
onHover={this.handleHover}
onChange={handleDateSelection}
onHover={handleHover}
disableDatesBefore={disableDatesBefore}
disableDatesAfter={disableDatesAfter}
allowRange={allowRange}
Expand All @@ -218,7 +213,7 @@ function DatePicker({
id={id}
className={styles.DatePicker}
onKeyDown={handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyUp={handleKeyUp}
>
<div className={styles.Header}>
<Button
Expand All @@ -231,11 +226,9 @@ function DatePicker({
showPreviousYear,
},
)}
onClick={this.handleMonthChangeClick.bind(
null,
showPreviousMonth,
showPreviousYear,
)}
onClick={() =>
handleMonthChangeClick(showPreviousMonth, showPreviousYear)
}
/>
<Button
plain
Expand All @@ -244,23 +237,19 @@ function DatePicker({
nextMonth,
nextYear,
})}
onClick={this.handleMonthChangeClick.bind(
null,
showNextMonth,
showNextYear,
)}
onClick={() => handleMonthChangeClick(showNextMonth, showNextYear)}
/>
</div>
<div className={styles.MonthContainer}>
<Month
onFocus={this.handleFocus}
onFocus={handleFocus}
focusedDate={focusDate}
month={month}
year={year}
selected={deriveRange(selected)}
hoverDate={hoverDate}
onChange={this.handleDateSelection}
onHover={this.handleHover}
onChange={handleDateSelection}
onHover={handleHover}
disableDatesBefore={disableDatesBefore}
disableDatesAfter={disableDatesAfter}
allowRange={allowRange}
Expand Down Expand Up @@ -288,32 +277,6 @@ function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
}
}

function isSameSelectedDate(
previousDate?: DatePickerProps['selected'],
currentDate?: DatePickerProps['selected'],
) {
if (previousDate == null || currentDate == null) {
return previousDate == null && currentDate == null;
}

if (previousDate instanceof Date || currentDate instanceof Date) {
return (
previousDate instanceof Date &&
currentDate instanceof Date &&
isSameDay(previousDate, currentDate)
);
}

return (
isSameDay(previousDate.start, currentDate.start) &&
isSameDay(previousDate.end, currentDate.end)
);
}

function deriveRange(selected?: Date | Range) {
return selected instanceof Date ? {start: selected, end: selected} : selected;
}

// Use named export once withAppProvider is refactored away
// eslint-disable-next-line import/no-default-export
export default withAppProvider<DatePickerProps>()(DatePicker);

0 comments on commit fab748b

Please sign in to comment.