From 7d01853a97104842a06c82b2e9ba17c39f460282 Mon Sep 17 00:00:00 2001 From: Austin Green Date: Fri, 16 Aug 2019 15:40:38 -0700 Subject: [PATCH 1/2] fix(datepicker): correct minValue and maxValue displays and allow same date selection within Range --- .../datepickers/src/Datepicker/Datepicker.spec.tsx | 2 +- .../src/Datepicker/components/Calendar.tsx | 5 ++--- .../src/DatepickerRange/DatepickerRange.spec.tsx | 10 +++++----- .../src/DatepickerRange/components/Calendar.tsx | 14 ++++++++++++++ .../src/DatepickerRange/components/Month.tsx | 9 +++------ .../utils/datepicker-range-reducer.ts | 10 ++++++++-- 6 files changed, 33 insertions(+), 17 deletions(-) diff --git a/packages/datepickers/src/Datepicker/Datepicker.spec.tsx b/packages/datepickers/src/Datepicker/Datepicker.spec.tsx index 96c2f30ca56..925ba50f645 100644 --- a/packages/datepickers/src/Datepicker/Datepicker.spec.tsx +++ b/packages/datepickers/src/Datepicker/Datepicker.spec.tsx @@ -78,7 +78,7 @@ describe('Datepicker', () => { for (let x = 0; x < days.length; x++) { const element = days[x]; - if (x < 6) { + if (x <= 6) { expect(element).toHaveAttribute('data-test-disabled', 'true'); } else if (x > 11) { expect(element).toHaveAttribute('data-test-disabled', 'true'); diff --git a/packages/datepickers/src/Datepicker/components/Calendar.tsx b/packages/datepickers/src/Datepicker/components/Calendar.tsx index da265bc4662..92e74ff36d3 100644 --- a/packages/datepickers/src/Datepicker/components/Calendar.tsx +++ b/packages/datepickers/src/Datepicker/components/Calendar.tsx @@ -17,7 +17,6 @@ import isSameDay from 'date-fns/isSameDay'; import isSameMonth from 'date-fns/isSameMonth'; import isBefore from 'date-fns/isBefore'; import isAfter from 'date-fns/isAfter'; -import subDays from 'date-fns/subDays'; import { StyledDatepicker, StyledCalendar, @@ -99,11 +98,11 @@ const Calendar: React.FunctionComponent = ({ let isDisabled = false; if (minValue !== undefined) { - isDisabled = isBefore(date, subDays(minValue, 1)); + isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue); } if (maxValue !== undefined) { - isDisabled = isDisabled || isAfter(date, maxValue); + isDisabled = isDisabled || (isAfter(date, maxValue) && !isSameDay(date, maxValue)); } return ( diff --git a/packages/datepickers/src/DatepickerRange/DatepickerRange.spec.tsx b/packages/datepickers/src/DatepickerRange/DatepickerRange.spec.tsx index bd884e7888f..831c8cdc43a 100644 --- a/packages/datepickers/src/DatepickerRange/DatepickerRange.spec.tsx +++ b/packages/datepickers/src/DatepickerRange/DatepickerRange.spec.tsx @@ -188,7 +188,7 @@ describe('DatepickerRange', () => { startValue={DEFAULT_START_VALUE} endValue={DEFAULT_END_VALUE} minValue={subDays(DEFAULT_START_VALUE, 2)} - maxValue={addDays(DEFAULT_END_VALUE, 2)} + maxValue={addDays(DEFAULT_END_VALUE, 1)} /> ); @@ -200,9 +200,9 @@ describe('DatepickerRange', () => { if (x < 5) { expect(element).not.toHaveAttribute('data-test-disabled'); - } else if (x === 5) { + } else if (x < 7) { expect(element).toHaveAttribute('data-test-disabled', 'true'); - } else if (x > 5 && x < 33) { + } else if (x >= 7 && x <= 32) { expect(element).toHaveAttribute('data-test-disabled', 'false'); } else { expect(element).not.toHaveAttribute('data-test-disabled'); @@ -216,9 +216,9 @@ describe('DatepickerRange', () => { if (x < 5) { expect(element).not.toHaveAttribute('data-test-disabled'); - } else if (x >= 5 && x < 12) { + } else if (x >= 5 && x < 11) { expect(element).toHaveAttribute('data-test-disabled', 'false'); - } else if (x >= 12 && x < 36) { + } else if (x >= 11 && x < 36) { expect(element).toHaveAttribute('data-test-disabled', 'true'); } else { expect(element).not.toHaveAttribute('data-test-disabled'); diff --git a/packages/datepickers/src/DatepickerRange/components/Calendar.tsx b/packages/datepickers/src/DatepickerRange/components/Calendar.tsx index 2629cf0f823..97b485b7cdd 100644 --- a/packages/datepickers/src/DatepickerRange/components/Calendar.tsx +++ b/packages/datepickers/src/DatepickerRange/components/Calendar.tsx @@ -50,6 +50,20 @@ const Calendar: React.FunctionComponent> = props => { displayDate={addMonths(state.previewDate, 1)} small={small} isPreviousHidden + isNextHidden + dispatch={dispatch} + minValue={minValue} + maxValue={maxValue} + startValue={startValue} + endValue={endValue} + onChange={onChange} + hoverDate={state.hoverDate} + /> + Date: Fri, 23 Aug 2019 14:43:30 -0700 Subject: [PATCH 2/2] Update example --- packages/datepickers/examples/range.md | 14 ++++++++++---- .../src/DatepickerRange/components/Calendar.tsx | 14 -------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/datepickers/examples/range.md b/packages/datepickers/examples/range.md index a19f18a88b8..d10aa150004 100644 --- a/packages/datepickers/examples/range.md +++ b/packages/datepickers/examples/range.md @@ -2,6 +2,12 @@ const { Field, Label, Input, Message } = require('@zendeskgarden/react-forms/src'); const { addDays, compareAsc } = require('date-fns'); +const StyledCol = styled(Col)` + && { + max-width: 300px; + } +`; + initialState = { startValue: new Date(), endValue: addDays(new Date(), 16) @@ -16,15 +22,15 @@ const isInvalid = () => compareAsc(state.startValue, state.endValue) === 1; > - + - - + + @@ -34,7 +40,7 @@ const isInvalid = () => compareAsc(state.startValue, state.endValue) === 1; End date must occur after the Start date )} - + diff --git a/packages/datepickers/src/DatepickerRange/components/Calendar.tsx b/packages/datepickers/src/DatepickerRange/components/Calendar.tsx index 97b485b7cdd..2629cf0f823 100644 --- a/packages/datepickers/src/DatepickerRange/components/Calendar.tsx +++ b/packages/datepickers/src/DatepickerRange/components/Calendar.tsx @@ -50,20 +50,6 @@ const Calendar: React.FunctionComponent> = props => { displayDate={addMonths(state.previewDate, 1)} small={small} isPreviousHidden - isNextHidden - dispatch={dispatch} - minValue={minValue} - maxValue={maxValue} - startValue={startValue} - endValue={endValue} - onChange={onChange} - hoverDate={state.hoverDate} - /> -