Merge pull request #77 from navikt/feat/allow-navigating-to-disabled-…

…months Add prop for allowing navigation outside limitation range
navikt · Jun 16, 2021 · a6e2fca · a6e2fca
2 parents 5503073 + 1827a3b
commit a6e2fca
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 11 deletions.
diff --git 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/package-lock.json b/package-lock.json
diff --git 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"

diff --git 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<Date>(getDefaultMonth(value, limitations, dayPickerProps));
     const [calendarIsVisible, setCalendarIsVisible] = useState<boolean>(false);
@@ -109,6 +111,7 @@ const Datepicker = ({
                             dayPickerProps={dayPickerProps}
                             showYearSelector={showYearSelector}
                             setFocusOnDateWhenOpened={setFocusOnDateWhenOpened}
+                            allowNavigationToDisabledMonths={allowNavigationToDisabledMonths}
                         />
                     </CalendarPortal>
                 )}

diff --git 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
@@ -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<Props> {
     }
 
     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<HTMLButtonElement>,

diff --git 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(<Calendar onClose={jest.fn()} onSelect={jest.fn()} locale="nb" month={new Date()} />)
+            shallow(
+                <Calendar
+                    onClose={jest.fn()}
+                    onSelect={jest.fn()}
+                    locale="nb"
+                    month={new Date()}
+                    allowNavigationToDisabledMonths={false}
+                />
+            )
         ).toBeDefined();
     });
 });
diff --git a/src/dev/examples/DatepickerExample.tsx b/src/dev/examples/DatepickerExample.tsx
@@ -29,6 +29,10 @@ const DatepickerExample: React.FunctionComponent = () => {
     const [initialMonth, setInitialMonth] = useState<Date | undefined>();
     const [locale, setLocale] = useState<DatepickerLocales>('nb');
 
+    const [minDate, setMinDate] = useState<DatepickerValue>('2000-04-03');
+    const [maxDate, setMaxDate] = useState<DatepickerValue>('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}
                 />
                 <Box margin="l">Chosen date: {renderDate(date)}</Box>
                 <Box margin="m">
@@ -113,6 +118,19 @@ const DatepickerExample: React.FunctionComponent = () => {
                     </Knapp>
                 </Box>
 
+                <Box margin="xl">Restrictions</Box>
+                <Box margin="m">
+                    <div style={{ display: 'inline-block' }}>
+                        <label htmlFor={'date-range-from'}>First pickable date</label>
+                        <Datepicker inputId={'date-range-from'} onChange={(e) => setMinDate(e)} value={minDate} />
+                    </div>
+                    {' - '}
+                    <div style={{ display: 'inline-block' }}>
+                        <label htmlFor={'date-range-to'}>Last pickable date</label>
+                        <Datepicker inputId={'date-range-to'} onChange={(e) => setMaxDate(e)} value={maxDate} />
+                    </div>
+                </Box>
+
                 <Box margin="xl">
                     <fieldset>
                         <legend>Presentation properties</legend>
@@ -159,6 +177,20 @@ const DatepickerExample: React.FunctionComponent = () => {
                                     }
                                 />
                             </Box>
+                            <Box margin={'l'}>
+                                <Checkbox
+                                    label={
+                                        <>
+                                            <div>
+                                                <code>allowNavigationToDisabledMonths</code>
+                                            </div>
+                                            Allow navigating outside restricted range
+                                        </>
+                                    }
+                                    checked={allowNavigatingToDisabledMonths}
+                                    onChange={(event) => setAllowNavigatingToDisabledMonths(event.target.checked)}
+                                />
+                            </Box>
                         </div>
                     </fieldset>
                 </Box>