@mantine/dates 9.0.1 → 9.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -40,7 +40,8 @@ const DateTimePicker = (0, _mantine_core.factory)((_props) => {
|
|
|
40
40
|
styles,
|
|
41
41
|
props
|
|
42
42
|
});
|
|
43
|
-
const
|
|
43
|
+
const _withSeconds = withSeconds || timePickerProps?.withSeconds;
|
|
44
|
+
const _valueFormat = valueFormat || (_withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
|
|
44
45
|
const timePickerRef = (0, react.useRef)(null);
|
|
45
46
|
const timePickerRefMerged = (0, _mantine_hooks.useMergedRef)(timePickerRef, timePickerProps?.hoursRef);
|
|
46
47
|
const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
|
|
@@ -53,7 +54,7 @@ const DateTimePicker = (0, _mantine_core.factory)((_props) => {
|
|
|
53
54
|
withTime: true
|
|
54
55
|
});
|
|
55
56
|
const _defaultDate = defaultDate || _value;
|
|
56
|
-
const formatTime = (dateValue) => dateValue ? (0, dayjs.default)(dateValue).format(
|
|
57
|
+
const formatTime = (dateValue) => dateValue ? (0, dayjs.default)(dateValue).format(_withSeconds ? "HH:mm:ss" : "HH:mm") : "";
|
|
57
58
|
const [timeValue, setTimeValue] = (0, react.useState)(defaultTimeValue || formatTime(_value));
|
|
58
59
|
const [currentLevel, setCurrentLevel] = (0, react.useState)(level || defaultLevel || "month");
|
|
59
60
|
const [dropdownOpened, dropdownHandlers] = (0, _mantine_hooks.useDisclosure)(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.cjs","names":["pickCalendarProps","useDatesContext","useUncontrolledDates","assignTime","clampDate","PickerInputBase","DatePicker","getDefaultClampedDate","TimePicker","getMinTime","getMaxTime","ActionIcon","CheckIcon","classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n | 'timeWrapper'\n | 'timeInput'\n | 'submitButton'\n | 'placeholder'\n | PickerInputBaseStylesNames\n | CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" */\n valueFormat?: string;\n\n /** Controlled component value */\n value?: DateValue;\n\n /** Uncontrolled component default value */\n defaultValue?: DateValue;\n\n /** Called when value changes */\n onChange?: (value: DateStringValue | null) => void;\n\n /** Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */\n defaultTimeValue?: string;\n\n /** Props passed down to `TimePicker` component */\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;\n\n /** Props passed down to the submit button */\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /** Determines whether the seconds input should be displayed @default false */\n withSeconds?: boolean;\n\n /** Max level that user can go up to @default 'decade' */\n maxLevel?: CalendarLevel;\n\n /** Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _valueFormat = valueFormat || (withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate || _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue || defaultTimeValue || ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate || getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size || 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateTimePicker.cjs","names":["pickCalendarProps","useDatesContext","useUncontrolledDates","assignTime","clampDate","PickerInputBase","DatePicker","getDefaultClampedDate","TimePicker","getMinTime","getMaxTime","ActionIcon","CheckIcon","classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n | 'timeWrapper'\n | 'timeInput'\n | 'submitButton'\n | 'placeholder'\n | PickerInputBaseStylesNames\n | CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" */\n valueFormat?: string;\n\n /** Controlled component value */\n value?: DateValue;\n\n /** Uncontrolled component default value */\n defaultValue?: DateValue;\n\n /** Called when value changes */\n onChange?: (value: DateStringValue | null) => void;\n\n /** Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */\n defaultTimeValue?: string;\n\n /** Props passed down to `TimePicker` component */\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;\n\n /** Props passed down to the submit button */\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /** Determines whether the seconds input should be displayed @default false */\n withSeconds?: boolean;\n\n /** Max level that user can go up to @default 'decade' */\n maxLevel?: CalendarLevel;\n\n /** Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _withSeconds = withSeconds || timePickerProps?.withSeconds;\n const _valueFormat = valueFormat || (_withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate || _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(_withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue || defaultTimeValue || ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate || getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size || 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}
|
|
@@ -38,7 +38,8 @@ const DateTimePicker = factory((_props) => {
|
|
|
38
38
|
styles,
|
|
39
39
|
props
|
|
40
40
|
});
|
|
41
|
-
const
|
|
41
|
+
const _withSeconds = withSeconds || timePickerProps?.withSeconds;
|
|
42
|
+
const _valueFormat = valueFormat || (_withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
|
|
42
43
|
const timePickerRef = useRef(null);
|
|
43
44
|
const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);
|
|
44
45
|
const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = pickCalendarProps(rest);
|
|
@@ -51,7 +52,7 @@ const DateTimePicker = factory((_props) => {
|
|
|
51
52
|
withTime: true
|
|
52
53
|
});
|
|
53
54
|
const _defaultDate = defaultDate || _value;
|
|
54
|
-
const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(
|
|
55
|
+
const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(_withSeconds ? "HH:mm:ss" : "HH:mm") : "";
|
|
55
56
|
const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));
|
|
56
57
|
const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || "month");
|
|
57
58
|
const [dropdownOpened, dropdownHandlers] = useDisclosure(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.mjs","names":["classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n | 'timeWrapper'\n | 'timeInput'\n | 'submitButton'\n | 'placeholder'\n | PickerInputBaseStylesNames\n | CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" */\n valueFormat?: string;\n\n /** Controlled component value */\n value?: DateValue;\n\n /** Uncontrolled component default value */\n defaultValue?: DateValue;\n\n /** Called when value changes */\n onChange?: (value: DateStringValue | null) => void;\n\n /** Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */\n defaultTimeValue?: string;\n\n /** Props passed down to `TimePicker` component */\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;\n\n /** Props passed down to the submit button */\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /** Determines whether the seconds input should be displayed @default false */\n withSeconds?: boolean;\n\n /** Max level that user can go up to @default 'decade' */\n maxLevel?: CalendarLevel;\n\n /** Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _valueFormat = valueFormat || (withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate || _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue || defaultTimeValue || ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate || getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size || 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateTimePicker.mjs","names":["classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n | 'timeWrapper'\n | 'timeInput'\n | 'submitButton'\n | 'placeholder'\n | PickerInputBaseStylesNames\n | CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" */\n valueFormat?: string;\n\n /** Controlled component value */\n value?: DateValue;\n\n /** Uncontrolled component default value */\n defaultValue?: DateValue;\n\n /** Called when value changes */\n onChange?: (value: DateStringValue | null) => void;\n\n /** Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */\n defaultTimeValue?: string;\n\n /** Props passed down to `TimePicker` component */\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;\n\n /** Props passed down to the submit button */\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /** Determines whether the seconds input should be displayed @default false */\n withSeconds?: boolean;\n\n /** Max level that user can go up to @default 'decade' */\n maxLevel?: CalendarLevel;\n\n /** Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _withSeconds = withSeconds || timePickerProps?.withSeconds;\n const _valueFormat = valueFormat || (_withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate || _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(_withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue || defaultTimeValue || ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate || getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size || 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation || undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/dates",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.2",
|
|
4
4
|
"description": "Calendars, date and time pickers based on Mantine components",
|
|
5
5
|
"homepage": "https://mantine.dev/dates/getting-started/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"directory": "packages/@mantine/dates"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@mantine/core": "9.0.
|
|
49
|
-
"@mantine/hooks": "9.0.
|
|
48
|
+
"@mantine/core": "9.0.2",
|
|
49
|
+
"@mantine/hooks": "9.0.2",
|
|
50
50
|
"dayjs": ">=1.0.0",
|
|
51
51
|
"react": "^19.2.0",
|
|
52
52
|
"react-dom": "^19.2.0"
|