chore: pusher for at peter kan se på, ikke ferdig

SpareBank1 · Nov 12, 2024 · 2f5d57f · 2f5d57f
1 parent 71b9ea0
commit 2f5d57f
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 304 deletions.
diff --git a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
@@ -168,6 +168,11 @@ export class Calendar extends Component<CalendarProps, State> {
         this.forceUpdate();
     }
 
+    changeMonth(value: number) {
+        this.state.calendar.changeMonth(value);
+        this.forceUpdate();
+    }
+
     renderDate(calendarButtonState: CalendarButtonState, index: number) {
         const { calendar } = this.state;
 
@@ -278,7 +283,10 @@ export class Calendar extends Component<CalendarProps, State> {
                         nextMonthLabel={calendar.nextName}
                         previousMonthHandler={this.previousMonth}
                         previousMonthLabel={calendar.previousName}
+                        changeMonthHandler={this.changeMonth}
                         year={calendar.focusedYear}
+                        startYear={calendar.minDate?.year}
+                        endYear={calendar.maxDate?.year}
                         prevMonthButtonElement={this.prevMonthButtonElementRef}
                         nextMonthButtonElement={this.nextMonthButtonElementRef}
                     />

diff --git a/packages/ffe-datepicker-react/src/calendar/Header.tsx b/packages/ffe-datepicker-react/src/calendar/Header.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
+import { Dropdown } from '@sb1/ffe-dropdown-react';
+import { getAllMonths, getAllYears } from '../datelogic/simplecalendar';
 
 interface HeaderProps {
     datepickerId: string;
@@ -8,7 +10,10 @@ interface HeaderProps {
     nextMonthLabel: string;
     previousMonthHandler: React.MouseEventHandler<HTMLButtonElement>;
     previousMonthLabel: string;
+    changeMonthHandler: (value: number) => void;
     year: number;
+    startYear?: number;
+    endYear?: number;
     prevMonthButtonElement: React.RefObject<HTMLButtonElement>;
     nextMonthButtonElement: React.RefObject<HTMLButtonElement>;
 }
@@ -20,7 +25,10 @@ export const Header: React.FC<HeaderProps> = ({
     nextMonthLabel,
     previousMonthHandler,
     previousMonthLabel,
+    changeMonthHandler,
     year,
+    startYear = new Date().getFullYear() - 100,
+    endYear = new Date().getFullYear(),
     prevMonthButtonElement,
     nextMonthButtonElement,
 }) => {
@@ -49,9 +57,45 @@ export const Header: React.FC<HeaderProps> = ({
                     className="ffe-calendar__title"
                     id={`${datepickerId}-title`}
                 >
-                    <div id={`${datepickerId}__month-label`}>
-                        <span className="ffe-calendar__month">{month}</span>
-                        <span className="ffe-calendar__year">{year}</span>
+                    <div
+                        id={`${datepickerId}__month-label`}
+                        className="ffe-calendar__month-label"
+                    >
+                        <span className="ffe-calendar__month">
+                            <Dropdown
+                                value={month}
+                                inline={true}
+                                onChange={e => {
+                                    console.log('e', e.target.value);
+                                    changeMonthHandler(
+                                        parseInt(e.target.value),
+                                    );
+                                }}
+                            >
+                                {getAllMonths('nb').map(
+                                    (monthOption, index) => {
+                                        return (
+                                            <option key={index} value={index}>
+                                                {monthOption}
+                                            </option>
+                                        );
+                                    },
+                                )}
+                            </Dropdown>
+                        </span>
+                        <span className="ffe-calendar__year">
+                            <Dropdown value={year.toString()} inline={true}>
+                                {getAllYears(startYear, endYear).map(
+                                    (yearOption, index) => {
+                                        return (
+                                            <option key={index} value={index}>
+                                                {yearOption}
+                                            </option>
+                                        );
+                                    },
+                                )}
+                            </Dropdown>
+                        </span>
                     </div>
                 </header>
                 <button

diff --git a/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts b/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts
@@ -48,6 +48,22 @@ function isDateWithinMinMax(
     return !(maxDate && date.isAfter(maxDate));
 }
 
+export function getAllMonths(locale: Locale): Array<string> {
+    return Array.from(
+        { length: 12 },
+        (_, i) =>
+            // @ts-ignore
+            i18n[locale][`MONTH_${i + 1}`],
+    );
+}
+
+export function getAllYears(startYear: number, endYear: number): Array<number> {
+    return Array.from(
+        { length: endYear - startYear + 1 },
+        (_, i) => startYear + i,
+    );
+}
+
 export class SimpleCalendar {
     locale: Locale;
     focusedDate: SimpleDate;
@@ -120,6 +136,10 @@ export class SimpleCalendar {
         this.focusedDate.adjust({ period: 'M', offset: -1 });
     }
 
+    public changeMonth(newMonth: number) {
+        this.focusedDate.month = newMonth;
+    }
+
     public nextWeek() {
         this.focusedDate.adjust({ period: 'D', offset: 7 });
     }

diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx
@@ -15,7 +15,7 @@ export const Standard: Story = {
     args: {
         locale: 'nb',
         maxDate: '31.12.2016',
-        minDate: '01.01.2016',
+        //minDate: '01.01.2020',
     },
     render: function Render({ value, onChange, ...args }) {
         const [date, setDate] = useState('01.01.2016');