From cacee1b85670f6cb2cea5577d4fa326e3f151226 Mon Sep 17 00:00:00 2001 From: Andra Date: Sun, 22 Dec 2024 15:01:36 +0200 Subject: [PATCH] Add default timezone, and value, minDate, and maxDate props can now receive string values --- src/components/inputs/DateTime/DateTime.tsx | 39 +++++++++++++++++---- src/components/inputs/DateTime/types.ts | 24 ++++++++++--- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/components/inputs/DateTime/DateTime.tsx b/src/components/inputs/DateTime/DateTime.tsx index 25cfaa6..e4c0fae 100644 --- a/src/components/inputs/DateTime/DateTime.tsx +++ b/src/components/inputs/DateTime/DateTime.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import React, { useCallback, useMemo } from 'react' import PropTypes from 'prop-types' import { DatePicker, @@ -33,10 +33,15 @@ const DateTime: React.FC> = ({ slots = {}, localeFormat = 'ro', helperText, + timezone = 'UTC', + minDate, + maxDate, error, ...rest }) => { const locale = useMemo(() => adapterLocale ?? localeMap[localeFormat] ?? ro, [adapterLocale, localeFormat]) + const getValidDate = useCallback((value: any) => (value ? new Date(value) : null), []) + const commonSlotProps = useMemo( () => ({ ...slotProps, @@ -53,10 +58,13 @@ const DateTime: React.FC> = ({ equals('date'), () => ( } slots={slots as DatePickerSlots} + timezone={timezone} + minDate={getValidDate(minDate)} + maxDate={getValidDate(maxDate)} {...(rest as DatePickerProps)} /> ) @@ -65,10 +73,13 @@ const DateTime: React.FC> = ({ equals('dateTime'), () => ( } slots={slots as DateTimePickerSlots} + timezone={timezone} + minDate={getValidDate(minDate)} + maxDate={getValidDate(maxDate)} {...(rest as DateTimePickerProps)} /> ) @@ -77,16 +88,17 @@ const DateTime: React.FC> = ({ equals('time'), () => ( } slots={slots as TimePickerSlots} + timezone={timezone} {...(rest as TimePickerProps)} /> ) ] ])(showPicker), - [commonSlotProps, onChange, rest, showPicker, slots, value] + [showPicker, getValidDate, value, onChange, commonSlotProps, slots, timezone, minDate, maxDate, rest] ) return ( @@ -112,7 +124,7 @@ DateTime.propTypes = { * @default null * Value of the picker */ - value: PropTypes.instanceOf(Date), + value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), /** * Callback fired when the value (the selected date) changes @DateIOType. */ @@ -144,7 +156,20 @@ DateTime.propTypes = { /** * The helper text content. */ - helperText: PropTypes.node + helperText: PropTypes.node, + /** + * @default 'UTC' + * The timezone used for the picker. + */ + timezone: PropTypes.oneOf(['UTC', 'default', 'system']), + /** + * The minimum selectable date. + */ + minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + /** + * The maximum selectable date. + */ + maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]) } export default DateTime diff --git a/src/components/inputs/DateTime/types.ts b/src/components/inputs/DateTime/types.ts index 74a1914..43cce9f 100644 --- a/src/components/inputs/DateTime/types.ts +++ b/src/components/inputs/DateTime/types.ts @@ -15,11 +15,10 @@ export type LocaleMapType = { ro: Locale } -export type DateTimeProps = ( - | Omit, 'onChange'> - | Omit, 'onChange'> - | Omit, 'onChange'> -) & +export type DateTimeProps = Omit< + DatePickerProps | DateTimePickerProps | TimePickerProps, + 'value' | 'onChange' | 'minDate' | 'maxDate' +> & Omit, 'adapterLocale'> & { /** * Date library adapter class function. @@ -62,4 +61,19 @@ export type DateTimeProps = ( * The helper text content. */ helperText?: React.ReactNode + + /** + *The value currently displayed in the field + */ + value: string | Date + + /** + * The minimum selectable date. + */ + minDate?: string | Date + + /** + * The maximum selectable date. + */ + maxDate?: string | Date }