From 796c289294dfbda5bcfe2b409037ad5a80d18f93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Snoen?= Date: Fri, 11 Jun 2021 10:49:35 +0200 Subject: [PATCH 1/2] Add prop for allowing navigation outside limitation range --- CHANGELOG.md | 4 +++ src/datepicker/Datepicker.tsx | 3 ++ src/datepicker/calendar/Calendar.tsx | 3 ++ src/datepicker/calendar/Navbar.tsx | 17 +++++++-- .../calendar/__tests__/Calendar.test.tsx | 10 +++++- src/dev/examples/DatepickerExample.tsx | 36 +++++++++++++++++-- 6 files changed, 67 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f36137f..bd0a75f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,8 @@ # Changelog + +## [11.2.0] - 2021-06-11 +Add ability to navigate outside restricted range via prop + ## [9.0.0] - 2021-01-04 Refactor locale code. Set 'nb' as default locale (was 'en'). diff --git a/src/datepicker/Datepicker.tsx b/src/datepicker/Datepicker.tsx index d8396c8..84d4830 100644 --- a/src/datepicker/Datepicker.tsx +++ b/src/datepicker/Datepicker.tsx @@ -32,6 +32,7 @@ export interface DatepickerProps { showYearSelector?: boolean; dayPickerProps?: DayPickerProps; setFocusOnDateWhenOpened?: boolean; + allowNavigationToDisabledMonths?: boolean; } const Datepicker = ({ @@ -47,6 +48,7 @@ const Datepicker = ({ onChange, dayPickerProps, setFocusOnDateWhenOpened, + allowNavigationToDisabledMonths = false, }: DatepickerProps) => { const [activeMonth, setActiveMonth] = useState(getDefaultMonth(value, limitations, dayPickerProps)); const [calendarIsVisible, setCalendarIsVisible] = useState(false); @@ -109,6 +111,7 @@ const Datepicker = ({ dayPickerProps={dayPickerProps} showYearSelector={showYearSelector} setFocusOnDateWhenOpened={setFocusOnDateWhenOpened} + allowNavigationToDisabledMonths={allowNavigationToDisabledMonths} /> )} diff --git a/src/datepicker/calendar/Calendar.tsx b/src/datepicker/calendar/Calendar.tsx index 886868d..a453c68 100644 --- a/src/datepicker/calendar/Calendar.tsx +++ b/src/datepicker/calendar/Calendar.tsx @@ -31,6 +31,7 @@ interface Props { locale: DatepickerLocales; dayPickerProps?: DayPickerProps; setFocusOnDateWhenOpened?: boolean; + allowNavigationToDisabledMonths: boolean; } export type NavigationFocusElement = 'nextMonth' | 'previousMonth' | 'year' | 'month'; @@ -52,6 +53,7 @@ const Calendar = React.forwardRef(function Calendar(props: Props, ref: React.Ref onSelect, setFocusOnDateWhenOpened, dayPickerProps, + allowNavigationToDisabledMonths, } = props; const onSelectDate = (date: Date, modifiers: DayModifiers) => { @@ -94,6 +96,7 @@ const Calendar = React.forwardRef(function Calendar(props: Props, ref: React.Ref ...localeUtils, }} showYearSelector={showYearSelector} + allowNavigationToDisabledMonths={allowNavigationToDisabledMonths} /> ); }, diff --git a/src/datepicker/calendar/Navbar.tsx b/src/datepicker/calendar/Navbar.tsx index 8ac8a69..1471ce6 100644 --- a/src/datepicker/calendar/Navbar.tsx +++ b/src/datepicker/calendar/Navbar.tsx @@ -17,6 +17,7 @@ interface Props { maxDate?: Date; showYearSelector?: boolean; localeUtils: LocaleUtils; + allowNavigationToDisabledMonths: boolean; } interface NavbarButtonProps { @@ -55,13 +56,23 @@ class Navbar extends React.Component { } render() { - const { defaultMonth, onChangeMonth, minDate, maxDate, showYearSelector, localeUtils } = this.props; + const { + defaultMonth, + onChangeMonth, + minDate, + maxDate, + showYearSelector, + localeUtils, + allowNavigationToDisabledMonths, + } = this.props; const previousMonth = dayjs(defaultMonth).subtract(1, 'month'); const nextMonth = dayjs(defaultMonth).add(1, 'month'); - const lastMonthIsDisabled = minDate ? dayjs(minDate).isAfter(previousMonth.endOf('month')) : false; - const nextMonthIsDisabled = maxDate ? dayjs(maxDate).isBefore(nextMonth.startOf('month')) : false; + const lastMonthIsDisabled = + !allowNavigationToDisabledMonths && minDate ? dayjs(minDate).isAfter(previousMonth.endOf('month')) : false; + const nextMonthIsDisabled = + !allowNavigationToDisabledMonths && maxDate ? dayjs(maxDate).isBefore(nextMonth.startOf('month')) : false; const onClick = ( evt: React.MouseEvent, diff --git a/src/datepicker/calendar/__tests__/Calendar.test.tsx b/src/datepicker/calendar/__tests__/Calendar.test.tsx index 74821ee..04b49dd 100644 --- a/src/datepicker/calendar/__tests__/Calendar.test.tsx +++ b/src/datepicker/calendar/__tests__/Calendar.test.tsx @@ -5,7 +5,15 @@ import Calendar from '../Calendar'; describe('Calendar', () => { it('Should be defined', () => { expect( - shallow() + shallow( + + ) ).toBeDefined(); }); }); diff --git a/src/dev/examples/DatepickerExample.tsx b/src/dev/examples/DatepickerExample.tsx index 3681f18..d744a3a 100644 --- a/src/dev/examples/DatepickerExample.tsx +++ b/src/dev/examples/DatepickerExample.tsx @@ -29,6 +29,10 @@ const DatepickerExample: React.FunctionComponent = () => { const [initialMonth, setInitialMonth] = useState(); const [locale, setLocale] = useState('nb'); + const [minDate, setMinDate] = useState('2000-04-03'); + const [maxDate, setMaxDate] = useState('2025-12-12'); + const [allowNavigatingToDisabledMonths, setAllowNavigatingToDisabledMonths] = useState(false); + const takenRange: DatepickerDateRange = { from: '2021-04-10', to: '2021-04-11', @@ -55,8 +59,8 @@ const DatepickerExample: React.FunctionComponent = () => { limitations={{ weekendsNotSelectable: false, invalidDateRanges: [takenRange], - minDate: '2000-04-03', - maxDate: '2025-12-12', + minDate: minDate.length > 0 ? minDate : undefined, + maxDate: maxDate.length > 0 ? maxDate : undefined, }} dayPickerProps={{ initialMonth, @@ -65,6 +69,7 @@ const DatepickerExample: React.FunctionComponent = () => { console.log(month); }, }} + allowNavigationToDisabledMonths={allowNavigatingToDisabledMonths} /> Chosen date: {renderDate(date)} @@ -113,6 +118,19 @@ const DatepickerExample: React.FunctionComponent = () => { + Restrictions + +
+ + setMinDate(e)} value={minDate} /> +
+ {' - '} +
+ + setMaxDate(e)} value={maxDate} /> +
+ +
Presentation properties @@ -159,6 +177,20 @@ const DatepickerExample: React.FunctionComponent = () => { } /> + + +
+ allowNavigationToDisabledMonths +
+ Allow navigating outside restricted range + + } + checked={allowNavigatingToDisabledMonths} + onChange={(event) => setAllowNavigatingToDisabledMonths(event.target.checked)} + /> +
From 1827a3b8e2f995f6f74a6fd6ad931400b08afc8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Snoen?= Date: Fri, 11 Jun 2021 11:19:56 +0200 Subject: [PATCH 2/2] Version bump --- package-lock.json | 5 +++-- package.json | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 886e981..7f28d6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nav-datovelger", - "version": "11.1.2", + "version": "11.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -26133,7 +26133,8 @@ }, "ssri": { "version": "6.0.1", - "resolved": "", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", "dev": true, "requires": { "figgy-pudding": "^3.5.1" diff --git a/package.json b/package.json index 6c630e9..a7f560d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nav-datovelger", - "version": "11.1.2", + "version": "11.2.0", "description": "Datepicker with input and calendar", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -92,13 +92,13 @@ }, "peerDependencies": { "classnames": "^2.2.x", + "dayjs": "^1.10.x", "nav-frontend-core": "^5.0.x", "nav-frontend-js-utils": "^1.0.x", "nav-frontend-skjema": "^3.1.x", "nav-frontend-typografi": "^3.0.x", "react": "17", - "react-day-picker": "^7.4.x", - "dayjs": "^1.10.x" + "react-day-picker": "^7.4.x" }, "eslintConfig": { "extends": "react-app"