Skip to content

Commit

Permalink
Various alignments
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Nov 6, 2024
1 parent b75643b commit d3753fe
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 83 deletions.
90 changes: 47 additions & 43 deletions packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -63,7 +63,7 @@ export type DatePickerEventAttributes = {
end?: string
} & Record<string, unknown>

// 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<T> = ReturnObject<T>

export type DisplayPickerEvent = (
Expand All @@ -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`.
*/
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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<HTMLSpanElement>

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 (
<DatePickerProvider
{...props}
attributes={attributes}
attributes={remainingDOMProps}
setReturnObject={(fn) => (getReturnObject.current = fn)}
hidePicker={hidePicker}
>
Expand All @@ -732,7 +736,7 @@ function DatePicker(externalProps: DatePickerProps) {
<span
className="dnb-date-picker__inner"
ref={innerRef}
{...pickerParams}
{...remainingPickerProps}
>
<AlignmentHelper />

Expand Down Expand Up @@ -771,7 +775,7 @@ function DatePicker(externalProps: DatePickerProps) {
status_state={status_state}
lang={context.locale}
{...attributes}
submitAttributes={submitParams}
submitAttributes={remainingSubmitProps}
onSubmit={togglePicker}
{...status_props}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ type CalendarLocales = {
// eslint-disable-next-line no-unused-vars
[locale in InternalLocale]?: Pick<Locale, 'localize' | 'formatLong'>
}
// 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 },
Expand Down Expand Up @@ -377,7 +377,7 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) {
const dates: {
startDate?: Date
endDate?: Date
startMonht?: Date
startMonth?: Date
endMonth?: Date
} = {}

Expand Down
4 changes: 3 additions & 1 deletion packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<CalendarView>
hasHadValidDate: boolean
previousDates: DatePickerDateProps
updateDates: (
dates: DatePickerDates,
callback?: (dates: DatePickerDates) => void
Expand All @@ -30,7 +33,6 @@ export type DatePickerContextValues = ContextProps &
forceViewMonthChange: () => void
callOnChangeHandler: <E>(event: DatePickerChangeEvent<E>) => void
hidePicker: (event: DisplayPickerEvent) => void
previousDates: DatePickerDateProps
getReturnObject: <E>(
params: GetReturnObjectParams<E>
) => ReturnObject<E>
Expand Down
48 changes: 21 additions & 27 deletions packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { DatePickerEventAttributes } from './DatePicker'
import { useTranslation } from '../../shared'

export type DatePickerInputProps = Omit<
React.HTMLProps<HTMLElement>,
React.HTMLProps<HTMLInputElement>,
| 'children'
| 'ref'
| 'value'
Expand All @@ -49,8 +49,6 @@ export type DatePickerInputProps = Omit<
| 'onSubmit'
| 'label'
> & {
id?: string
title?: string
selectedDateTitle?: string
maskOrder?: string
maskPlaceholder?: string
Expand All @@ -77,7 +75,6 @@ export type DatePickerInputProps = Omit<
* Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. 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.
*/
Expand Down Expand Up @@ -144,7 +141,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
} = props

const [focusState, setFocusState] = useState<string>('virgin')
const [partialDates, setpartialDates] = useState({
const [partialDates, setPartialDates] = useState({
partialStartDate: '',
partialEndDate: '',
})
Expand Down Expand Up @@ -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<HTMLInputElement>(null)
const startMonthRef = useRef<HTMLInputElement>(null)
const startYearRef = useRef<HTMLInputElement>(null)
const endDayRef = useRef<HTMLInputElement>(null)
const endMonthRef = useRef<HTMLInputElement>(null)
const endYearRef = useRef<HTMLInputElement>(null)
const startDayRef = useRef<HTMLInputElement>()
const startMonthRef = useRef<HTMLInputElement>()
const startYearRef = useRef<HTMLInputElement>()
const endDayRef = useRef<HTMLInputElement>()
const endMonthRef = useRef<HTMLInputElement>()
const endYearRef = useRef<HTMLInputElement>()

const inputRefs = useMemo(
() => ({
Expand All @@ -215,13 +212,12 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
[]
)

// TODO: Move to it's own hook
const startDayDateRef = useRef<string>(null)
const endDayDateRef = useRef<string>(null)
const startMonthDateRef = useRef<string>(null)
const endMonthDateRef = useRef<string>(null)
const startYearDateRef = useRef<string>(null)
const endYearDateRef = useRef<string>(null)
const startDayDateRef = useRef<string>()
const endDayDateRef = useRef<string>()
const startMonthDateRef = useRef<string>()
const endMonthDateRef = useRef<string>()
const startYearDateRef = useRef<string>()
const endYearDateRef = useRef<string>()

const dateRefs = useMemo(
() => ({
Expand All @@ -235,17 +231,17 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
[]
)

const startDateRef = useRef<Date>(null)
const endDateRef = useRef<Date>(null)
const startDateRef = useRef<Date>()
const endDateRef = useRef<Date>()

const temporaryDates = useMemo(
() => ({ startDate: startDateRef, endDate: endDateRef }),
[]
)

const refList = useRef<Array<MutableRefObject<HTMLInputElement>>>(null)
const refList = useRef<Array<MutableRefObject<HTMLInputElement>>>()

const focusMode = useRef<string>(null)
const focusMode = useRef<string>()

const maskList = useMemo(() => {
const separators = maskOrder.match(separatorRexExp)
Expand All @@ -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())
}

Expand Down Expand Up @@ -414,7 +410,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
const partialStartDate = startDate
const partialEndDate = endDate

setpartialDates({
setPartialDates({
partialStartDate,
partialEndDate,
})
Expand Down Expand Up @@ -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
}

Expand Down
Loading

0 comments on commit d3753fe

Please sign in to comment.