diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx index ae3964de134..36f30909126 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx @@ -52,7 +52,7 @@ import { SkeletonShow } from '../Skeleton' import { GlobalStatusConfigObject } from '../GlobalStatus' import { pickFormElementProps } from '../../shared/helpers/filterValidProps' import { CalendarDay, DatePickerCalendarProps } from './DatePickerCalendar' -import { DatePickerContextValues } from './DatePickerContext' +import { DatePickerContextValues, DateType } from './DatePickerContext' import { DatePickerDates } from './hooks/useDates' import { useTranslation } from '../../shared' @@ -63,7 +63,7 @@ export type DatePickerEventAttributes = { end?: string } & Record -// Takes the return object from DatePickerProiver and extends it with the event +// Takes the return object from DatePickerProvider and extends it with the event export type DatePickerEvent = ReturnObject export type DisplayPickerEvent = ( @@ -81,40 +81,38 @@ export type DatePickerProps = Omit< 'ref' | 'children' | 'label' | 'size' | 'onBlur' | 'onFocus' | 'start' > & SpacingProps & { - id?: string - title?: string /** * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`. */ - date?: Date | string + date?: DateType /** * To set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`. */ - start_date?: Date | string + start_date?: DateType /** * To set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`. */ - end_date?: Date | string + end_date?: DateType /** * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. */ - month?: Date | string + month?: DateType /** * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. */ - start_month?: Date | string + start_month?: DateType /** * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`. */ - end_month?: Date | string + end_month?: DateType /** * To limit a date range to a minimum `start_date`. Defaults to `null`. */ - min_date?: Date | string + min_date?: DateType /** * To limit a date range to a maximum `end_date`. Defaults to `null`. */ - max_date?: Date | string + max_date?: DateType /** * Corrects the input date value to be the same as either `min_date` or `max_date`, when the user types in a date that is either before or after one of these. Defaults to `false`. */ @@ -271,7 +269,6 @@ export type DatePickerProps = Omit< * Use `right` to change the calendar alignment direction. Defaults to `left`. */ align_picker?: 'auto' | 'left' | 'right' - class?: string className?: string /** * Will be called right before every new calendar view gets rendered. See the example above. @@ -603,11 +600,9 @@ function DatePicker(externalProps: DatePickerProps) { only_month, hide_last_week, disable_autofocus, - enable_keyboard_nav, // eslint-disable-line hide_navigation_buttons, first_day, reset_date, - locale, link, sync, input_element, @@ -628,29 +623,38 @@ function DatePicker(externalProps: DatePickerProps) { submit_button_text, cancel_button_text, reset_button_text, - hide_navigation: _hide_navigation, // eslint-disable-line - return_format: _return_format, // eslint-disable-line - date_format: _date_format, // eslint-disable-line - hide_days: _hide_days, // eslint-disable-line - month: _month, // eslint-disable-line - date: _date, // eslint-disable-line - start_date: _start_date, // eslint-disable-line - end_date: _end_date, // eslint-disable-line - min_date: _min_date, // eslint-disable-line - max_date: _max_date, // eslint-disable-line - correct_invalid_date: _correct_invalid_date, // eslint-disable-line - opened: _opened, // eslint-disable-line - direction: _direction, // eslint-disable-line - id: __id, // eslint-disable-line + show_reset_button, className, - class: _className, - show_reset_button, // eslint-disable-line tooltip, - range: _range, // eslint-disable-line - - ...attributes + ...restProps } = extendedProps + let attributes = null + + { + const { + locale, + id, + month, + date, + start_date, + end_date, + min_date, + max_date, + enable_keyboard_nav, + hide_navigation, + return_format, + date_format, + hide_days, + correct_invalid_date, + opened, + direction, + range, + ...rest + } = restProps + attributes = rest + } + const shouldHideDays = only_month ? true : hide_days const shouldHideNavigation = only_month ? hide_navigation_buttons @@ -697,22 +701,22 @@ function DatePicker(externalProps: DatePickerProps) { 'dnb-form-component', size && `dnb-date-picker--${size}`, createSpacingClasses(props), - _className, className ), lang: context.locale, } as HTMLProps - skeletonDOMAttributes(pickerParams, skeleton, context) - - validateDOMAttributes(props, attributes) - validateDOMAttributes(null, submitParams) - validateDOMAttributes(null, pickerParams) + const remainingDOMProps = validateDOMAttributes(props, attributes) + const remainingSubmitProps = validateDOMAttributes(null, submitParams) + const remainingPickerProps = validateDOMAttributes( + null, + skeletonDOMAttributes(pickerParams, skeleton, context) + ) return ( (getReturnObject.current = fn)} hidePicker={hidePicker} > @@ -732,7 +736,7 @@ function DatePicker(externalProps: DatePickerProps) { @@ -771,7 +775,7 @@ function DatePicker(externalProps: DatePickerProps) { status_state={status_state} lang={context.locale} {...attributes} - submitAttributes={submitParams} + submitAttributes={remainingSubmitProps} onSubmit={togglePicker} {...status_props} /> diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx index 0b711932133..f6227d483f5 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx @@ -67,7 +67,7 @@ type CalendarLocales = { // eslint-disable-next-line no-unused-vars [locale in InternalLocale]?: Pick } -// Easy to acces objects containing the only (in our case) needed functions for date-fns format +// Easy to access objects containing the only (in our case) needed functions for date-fns format const locales: CalendarLocales = { 'nb-NO': { localize: nbLocalize, formatLong: nbFormatLong }, 'en-GB': { localize: enLocalize, formatLong: gbFormatLong }, @@ -377,7 +377,7 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) { const dates: { startDate?: Date endDate?: Date - startMonht?: Date + startMonth?: Date endMonth?: Date } = {} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts index 9a807edfb25..62285d0a1ec 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts @@ -15,12 +15,15 @@ import { import { DatePickerDateProps, DatePickerDates } from './hooks/useDates' import { CalendarView } from './hooks/useViews' +export type DateType = Date | string + export type DatePickerContextValues = ContextProps & DatePickerDates & { props: DatePickerProps translation: ContextProps['translation'] views: Array hasHadValidDate: boolean + previousDates: DatePickerDateProps updateDates: ( dates: DatePickerDates, callback?: (dates: DatePickerDates) => void @@ -30,7 +33,6 @@ export type DatePickerContextValues = ContextProps & forceViewMonthChange: () => void callOnChangeHandler: (event: DatePickerChangeEvent) => void hidePicker: (event: DisplayPickerEvent) => void - previousDates: DatePickerDateProps getReturnObject: ( params: GetReturnObjectParams ) => ReturnObject diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx index 6d70d65c906..f85c04b4edd 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx @@ -39,7 +39,7 @@ import { DatePickerEventAttributes } from './DatePicker' import { useTranslation } from '../../shared' export type DatePickerInputProps = Omit< - React.HTMLProps, + React.HTMLProps, | 'children' | 'ref' | 'value' @@ -49,8 +49,6 @@ export type DatePickerInputProps = Omit< | 'onSubmit' | 'label' > & { - id?: string - title?: string selectedDateTitle?: string maskOrder?: string maskPlaceholder?: string @@ -77,7 +75,6 @@ export type DatePickerInputProps = Omit< * Gives you the possibility to use a plain/vanilla `` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => ()}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. */ input_element?: InputInputElement - disabled?: boolean /** * If set to `true`, an overlaying skeleton with animation will be shown. */ @@ -144,7 +141,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) { } = props const [focusState, setFocusState] = useState('virgin') - const [partialDates, setpartialDates] = useState({ + const [partialDates, setPartialDates] = useState({ partialStartDate: '', partialEndDate: '', }) @@ -194,14 +191,14 @@ function DatePickerInput(externalProps: DatePickerInputProps) { ] ) - // Used in reflist, and initatied inside object to to maintain the way of accessing mimic `this`, used in this component + // Used in refList, and initiated inside object to to maintain the way of accessing mimic `this`, used in this component // Should probably refactor at one point, or move to own hook - const startDayRef = useRef(null) - const startMonthRef = useRef(null) - const startYearRef = useRef(null) - const endDayRef = useRef(null) - const endMonthRef = useRef(null) - const endYearRef = useRef(null) + const startDayRef = useRef() + const startMonthRef = useRef() + const startYearRef = useRef() + const endDayRef = useRef() + const endMonthRef = useRef() + const endYearRef = useRef() const inputRefs = useMemo( () => ({ @@ -215,13 +212,12 @@ function DatePickerInput(externalProps: DatePickerInputProps) { [] ) - // TODO: Move to it's own hook - const startDayDateRef = useRef(null) - const endDayDateRef = useRef(null) - const startMonthDateRef = useRef(null) - const endMonthDateRef = useRef(null) - const startYearDateRef = useRef(null) - const endYearDateRef = useRef(null) + const startDayDateRef = useRef() + const endDayDateRef = useRef() + const startMonthDateRef = useRef() + const endMonthDateRef = useRef() + const startYearDateRef = useRef() + const endYearDateRef = useRef() const dateRefs = useMemo( () => ({ @@ -235,17 +231,17 @@ function DatePickerInput(externalProps: DatePickerInputProps) { [] ) - const startDateRef = useRef(null) - const endDateRef = useRef(null) + const startDateRef = useRef() + const endDateRef = useRef() const temporaryDates = useMemo( () => ({ startDate: startDateRef, endDate: endDateRef }), [] ) - const refList = useRef>>(null) + const refList = useRef>>() - const focusMode = useRef(null) + const focusMode = useRef() const maskList = useMemo(() => { const separators = maskOrder.match(separatorRexExp) @@ -260,7 +256,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) { acc.push(cur) if (separators.length > 0) { - // makes sure that seperators are added at the correct places and removed from array when added + // makes sure that separators are added at the correct places and removed from array when added acc.push(separators.shift()) } @@ -414,7 +410,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) { const partialStartDate = startDate const partialEndDate = endDate - setpartialDates({ + setPartialDates({ partialStartDate, partialEndDate, }) @@ -575,9 +571,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) { event.preventDefault() prepareCounting({ event, keyCode, target }) return false - // Never fires case 'Tab': - // case 'backspace': // We need backspace down here return false } diff --git a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts index 7a0c833f1e4..8b1eb096c59 100644 --- a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts +++ b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts @@ -3,16 +3,17 @@ import { convertStringToDate, isDisabled } from '../DatePickerCalc' import isValid from 'date-fns/isValid' import format from 'date-fns/format' import { addMonths } from 'date-fns' +import { DateType } from '../DatePickerContext' export type DatePickerDateProps = { - date?: Date | string - startDate?: Date | string - endDate?: Date | string - startMonth?: Date | string - endMonth?: Date | string - minDate?: Date | string - maxDate?: Date | string - hoverDate?: Date | string | null + date?: DateType + startDate?: DateType + endDate?: DateType + startMonth?: DateType + endMonth?: DateType + minDate?: DateType + maxDate?: DateType + hoverDate?: DateType | null } type UseDatesOptions = { @@ -31,7 +32,7 @@ export type DatePickerInputDates = { } export type DatePickerDates = { - date?: Date | string + date?: DateType startDate?: Date endDate?: Date minDate?: Date @@ -302,7 +303,7 @@ function updateMonths({ } } -function getDate(date: Date | string, dateFormat: string) { +function getDate(date: DateType, dateFormat: string) { return date instanceof Date ? date : convertStringToDate(date ?? '', {