Skip to content

Commit 0dc6086

Browse files
author
Peter Hellstrand
committed
chore: wip
1 parent ccf1745 commit 0dc6086

File tree

7 files changed

+245
-4
lines changed

7 files changed

+245
-4
lines changed

‎packages/ffe-datepicker-react/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@sb1/ffe-icons-react": "^11.0.14",
3131
"@types/lodash.debounce": "^4.0.9",
3232
"classnames": "^2.3.1",
33+
"date-fns": "^4.1.0",
3334
"lodash.debounce": "^4.0.8",
3435
"uuid": "^9.0.0"
3536
},

‎packages/ffe-datepicker-react/src/calendar/Calendar.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,10 @@ export const Calendar: React.FC<CalendarProps> = props => {
124124

125125
function mouseClick(date: CalendarButtonState) {
126126
const pickedDate = getSimpleDateFromTimestamp(date.timestamp);
127+
console.log(pickedDate);
127128
if (calendar.isDateWithinDateRange(pickedDate)) {
128129
calendar.selectTimestamp(date.timestamp);
129-
props.onDatePicked(calendar.selected());
130+
/* props.onDatePicked(calendar.selected());*/
130131
updateMonth(pickedDate.month);
131132
setYear(pickedDate.year.toString());
132133
}

‎packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { CalendarProvider } from '../datelogic/CalendarContext';
22
import React from 'react';
33
import { DatepickerInner, DatepickerProps } from './DatepickerInner';
4+
import { DatePicker } from '../v2/DatePicker';
45

56
export const Datepicker: React.FC<DatepickerProps> = props => {
67
return (
7-
<CalendarProvider initialDate={props.value}>
8-
<DatepickerInner {...props} />
9-
</CalendarProvider>
8+
<>
9+
<CalendarProvider initialDate={props.value}>
10+
<DatepickerInner {...props} />
11+
</CalendarProvider>
12+
<DatePicker />
13+
</>
1014
);
1115
};

‎packages/ffe-datepicker-react/src/v2/DatePicker.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { DatePickerProvider } from './DatePickerContext';
3+
import { DatePickerComp } from './DatePickerComp';
4+
5+
interface Props {
6+
locale?: 'nb' | 'nn' | 'en';
7+
}
8+
9+
export const DatePicker: React.FC<Props> = () => {
10+
return (
11+
<DatePickerProvider>
12+
<DatePickerComp />
13+
</DatePickerProvider>
14+
);
15+
};

‎packages/ffe-datepicker-react/src/v2/DatePickerComp.tsx

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { useContext, useRef } from 'react';
2+
import { DatePickerContext } from './DatePickerContext';
3+
import { SpinnButton } from './SpinnButton';
4+
5+
export const DatePickerComp: React.FC = () => {
6+
/*
7+
const dayRef = useRef<HTMLSpanElement>(null);
8+
*/
9+
const monthRef = useRef<HTMLSpanElement>(null);
10+
const yearRef = useRef<HTMLSpanElement>(null);
11+
const { day, setDay, year, setYear, month, setMonth } =
12+
useContext(DatePickerContext);
13+
14+
const handleDayChange = (evt: React.KeyboardEvent<HTMLSpanElement>) => {
15+
evt.stopPropagation();
16+
if (/\d/.test(evt.key)) {
17+
setDay(parseInt(evt.key), () =>
18+
monthRef.current?.focus({ preventScroll: true }),
19+
);
20+
}
21+
};
22+
23+
const handleMonthChange = (evt: React.KeyboardEvent<HTMLSpanElement>) => {
24+
evt.stopPropagation();
25+
if (/\d/.test(evt.key)) {
26+
setMonth(parseInt(evt.key), () =>
27+
yearRef.current?.focus({ preventScroll: true }),
28+
);
29+
}
30+
};
31+
32+
const handleYearChange = (evt: React.KeyboardEvent<HTMLSpanElement>) => {
33+
evt.stopPropagation();
34+
if (/\d/.test(evt.key)) {
35+
setYear(parseInt(evt.key));
36+
}
37+
};
38+
39+
return (
40+
<div className="ffe-datepicker--wrapper">
41+
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
42+
<div
43+
className="ffe-input-field ffe-dateinput"
44+
/* tabIndex={0}*/
45+
>
46+
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
47+
{/* <span
48+
className="ffe-dateinput__field"
49+
tabIndex={0}
50+
onKeyDown={handleDayChange}
51+
>
52+
{typeof day === 'number'
53+
? `${day < 10 ? '0' : ''}${day}`
54+
: 'dd'}
55+
</span>*/}
56+
<SpinnButton
57+
onChange={history => {
58+
console.log(history);
59+
}}
60+
>
61+
{typeof day === 'number'
62+
? `${day < 10 ? '0' : ''}${day}`
63+
: 'dd'}
64+
</SpinnButton>
65+
.
66+
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
67+
<span
68+
className="ffe-dateinput__field"
69+
tabIndex={0}
70+
ref={monthRef}
71+
onKeyDown={handleMonthChange}
72+
>
73+
{month ?? 'mm'}
74+
</span>
75+
.
76+
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
77+
<span
78+
className="ffe-dateinput__field"
79+
tabIndex={0}
80+
ref={yearRef}
81+
onKeyDown={handleYearChange}
82+
>
83+
{year ?? 'yyyy'}
84+
</span>
85+
</div>
86+
{/* <Button
87+
onClick={calendarButtonClickHandler}
88+
value={value}
89+
locale={locale}
90+
ref={buttonRef}
91+
/>*/}
92+
</div>
93+
);
94+
};

‎packages/ffe-datepicker-react/src/v2/DatePickerContext.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React, { createContext, useState } from 'react';
2+
3+
interface DatePickerContextInterface {
4+
day?: number | null;
5+
month?: number | null;
6+
year?: number | null;
7+
setDay: (value: number, focusNext: () => void) => void;
8+
setMonth: (value: number, focusNext: () => void) => void;
9+
setYear: (value: number) => void;
10+
}
11+
12+
export const DatePickerContext = createContext<DatePickerContextInterface>({
13+
day: null,
14+
month: null,
15+
year: null,
16+
setDay: () => null,
17+
setMonth: () => null,
18+
setYear: () => null,
19+
});
20+
21+
interface Props {
22+
children: React.ReactNode;
23+
}
24+
25+
const MONTHS_PER_YEAR = 12;
26+
const MAX_MONTH = 31; // TODO noen logik her avhenge av månad?
27+
28+
export const DatePickerProvider: React.FC<Props> = ({ children }) => {
29+
const [day, setDay] = useState<number>([]);
30+
const [month, setMonth] = useState<number>();
31+
const [year, setYear] = useState<number>();
32+
33+
return (
34+
<DatePickerContext.Provider
35+
value={{
36+
day,
37+
month,
38+
year,
39+
setDay: (value, focusNext) => {
40+
const next = parseInt(`${day ?? 0}${value}`);
41+
if (next > MAX_MONTH) {
42+
console.log('her nå', next);
43+
setDay(value);
44+
/* focusNext();*/
45+
} else {
46+
console.log(value, day, next);
47+
setDay(next);
48+
}
49+
50+
/* const parsedCurrent = parseInt(day);
51+
const parsedNext = parseInt(`${value}${parsedCurrent}`);
52+
if (day === 'dd' || parsedNext < 10) {
53+
setDay(`0${value}`);
54+
} else if (value >= 4 || parsedCurrent >= 4) {
55+
setDay(`0${value}`);
56+
focusNext();
57+
} else {
58+
setDay(`${parsedNext}`);
59+
focusNext();
60+
}*/
61+
},
62+
setMonth: (value, focusNext) => {
63+
/* const current = parseInt(month);
64+
if (
65+
month === 'mm' ||
66+
parseInt(`${current}${value}`) > MONTHS_PER_YEAR
67+
) {
68+
setMonth(`0${value}`);
69+
} else {
70+
setMonth(`${current}${value}`);
71+
focusNext();
72+
}*/
73+
},
74+
setYear: value => {
75+
/* if (year === 'yyyy' || `${year}${value}`.length > 4) {
76+
setYear(`${value}`);
77+
} else {
78+
setYear(`${year}${value}`);
79+
}*/
80+
},
81+
}}
82+
>
83+
{children}
84+
</DatePickerContext.Provider>
85+
);
86+
};

‎packages/ffe-datepicker-react/src/v2/SpinnButton.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useState } from 'react';
2+
3+
interface Props {
4+
onChange: (date: number) => void;
5+
children: React.ReactNode;
6+
}
7+
8+
export const SpinnButton = React.forwardRef<HTMLSpanElement, Props>(
9+
({ onChange, children }, ref) => {
10+
const [, setHistory] = useState<string[]>([]);
11+
12+
return (
13+
<span
14+
className="ffe-dateinput__field"
15+
tabIndex={0}
16+
onFocus={() => setHistory([])}
17+
/* onFocus={() => dayRef.current?.focus()}*/
18+
/* onKeyDown={handleDayChange}*/
19+
/* ref={dayRef}*/
20+
ref={ref}
21+
onKeyDown={evt => {
22+
evt.stopPropagation();
23+
if (/\d/.test(evt.key)) {
24+
setHistory(prev => {
25+
const newHistory = prev.concat(evt.key);
26+
console.log(newHistory);
27+
const [first, second] = newHistory.slice(-2);
28+
console.log(first, second);
29+
30+
// onChange(newHistory);
31+
return newHistory;
32+
});
33+
}
34+
}}
35+
>
36+
{children}
37+
</span>
38+
);
39+
},
40+
);

0 commit comments

Comments
 (0)