Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

openOnFocus-prop for useDatepicker/useMonthpicker #1777

Merged
merged 2 commits into from
Feb 2, 2023
Merged

openOnFocus-prop for useDatepicker/useMonthpicker #1777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3c4108
:art: openOnFocus-prop datepicker
KenAJoh Feb 1, 2023
df38af0
:memo: Changeset
KenAJoh Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sour-files-pretend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@navikt/ds-react": patch
---

:sparkles: Datepicker og monthpicker kan nå bestemme om popover skal dukke opp ved fokus
16 changes: 16 additions & 0 deletions @navikt/core/react/src/date/datepicker/datepicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export const UseDatepicker = () => {
fromDate: new Date("Aug 23 2019"),
onDateChange: console.log,
locale: "en",
openOnFocus: false,
});

return (
Expand Down Expand Up @@ -179,6 +180,21 @@ export const UseRangedDatepicker = () => {
);
};

export const OpenOnFocus = () => {
const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
onDateChange: console.log,
openOnFocus: false,
});

return (
<div style={{ display: "flex", gap: "1rem" }}>
<DatePicker {...datepickerProps}>
<DatePicker.Input {...inputProps} label="Velg dato" />
</DatePicker>
</div>
);
};

export const NB = () => (
<DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
);
Expand Down
8 changes: 7 additions & 1 deletion @navikt/core/react/src/date/hooks/useDatepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ export interface UseDatepickerOptions
* In 2023 this equals to 1943 - 2042
*/
allowTwoDigitYear?: boolean;
/**
* Opens datepicker on input-focus
* @default true
*/
openOnFocus?: boolean;
}

interface UseDatepickerValue {
Expand Down Expand Up @@ -123,6 +128,7 @@ export const useDatepicker = (
onValidate,
defaultMonth,
allowTwoDigitYear = true,
openOnFocus = true,
} = opt;

const locale = getLocaleFromString(_locale);
Expand Down Expand Up @@ -198,7 +204,7 @@ export const useDatepicker = (
};

const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
!open && setOpen(true);
!open && openOnFocus && setOpen(true);
let day = parseDate(
e.target.value,
today,
Expand Down
8 changes: 7 additions & 1 deletion @navikt/core/react/src/date/hooks/useMonthPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ export interface UseMonthPickerOptions
* In 2023 this equals to 1943 - 2042
*/
allowTwoDigitYear?: boolean;
/**
* Opens datepicker on input-focus
* @default true
*/
openOnFocus?: boolean;
}

interface UseMonthPickerValue {
Expand Down Expand Up @@ -104,6 +109,7 @@ export const useMonthpicker = (
onValidate,
defaultYear,
allowTwoDigitYear = true,
openOnFocus = true,
} = opt;

const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
Expand Down Expand Up @@ -180,7 +186,7 @@ export const useMonthpicker = (
};

const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
!open && setOpen(true);
!open && openOnFocus && setOpen(true);
let day = parseDate(
e.target.value,
today,
Expand Down
3 changes: 2 additions & 1 deletion @navikt/core/react/src/date/hooks/useRangeDatepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ export const useRangeDatepicker = (
onValidate,
defaultMonth,
allowTwoDigitYear = true,
openOnFocus = true,
} = opt;

const locale = getLocaleFromString(_locale);
Expand Down Expand Up @@ -323,7 +324,7 @@ export const useRangeDatepicker = (
};

const handleFocus = (e, src: RangeT) => {
!open && setOpen(true);
!open && openOnFocus && setOpen(true);
let day = parseDate(
e.target.value,
today,
Expand Down