From c3c423179ceae40da6f3b5212e2618af44c2b161 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 10 Jul 2020 18:44:51 +0300 Subject: [PATCH] [typescript] Generic date type (#1966) --- docs/layout/components/navigationMap.ts | 1 + .../BasicDateRangePicker.example.tsx | 2 +- .../CalendarsDateRangePicker.example.tsx | 2 +- .../CustomRangeInputs.example.tsx | 4 +- .../MinMaxDateRangePicker.example.tsx | 2 +- .../ResponsiveDateRangePicker.example.tsx | 2 +- .../StaticDateRangePicker.example.tsx | 2 +- docs/pages/guides/typescript.mdx | 83 + docs/prop-types.json | 1556 ++++++++--------- docs/scripts/docgen.js | 2 +- docs/typings.d.ts | 10 - lib/.size-snapshot.json | 22 +- lib/src/DateRangePicker/DateRangePicker.tsx | 47 +- .../DateRangePicker/DateRangePickerInput.tsx | 7 +- .../DateRangePicker/DateRangePickerView.tsx | 19 +- .../DateRangePickerViewDesktop.tsx | 13 +- .../DateRangePickerViewMobile.tsx | 3 +- lib/src/DateRangePicker/RangeTypes.ts | 11 +- lib/src/DateRangePicker/date-range-manager.ts | 5 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 3 +- lib/src/DateTimePicker/date-time-utils.ts | 3 +- lib/src/Picker/Picker.tsx | 8 +- lib/src/Picker/SharedPickerProps.tsx | 14 +- lib/src/Picker/makePickerWithState.tsx | 51 +- lib/src/TimePicker/TimePickerToolbar.tsx | 5 +- lib/src/__tests__/DatePicker.test.tsx | 3 +- lib/src/__tests__/DateTimePicker.test.tsx | 3 +- lib/src/__tests__/TimePicker.test.tsx | 5 +- lib/src/__tests__/Validation.test.tsx | 3 +- lib/src/__tests__/test-utils.tsx | 5 +- .../typescript/GenericValues.tstest.tsx | 79 + .../{Overrides.tsx => Overrides.tstest.tsx} | 0 ...Props.tsx => ThemeDefaultProps.tstest.tsx} | 0 lib/src/_helpers/date-utils.ts | 51 +- lib/src/_helpers/time-utils.ts | 21 +- lib/src/_shared/PureDateInput.tsx | 5 +- lib/src/_shared/hooks/date-helpers-hooks.tsx | 11 +- lib/src/_shared/hooks/useUtils.ts | 7 +- lib/src/_shared/hooks/useViews.tsx | 6 +- lib/src/_shared/withDateAdapterProp.tsx | 16 +- lib/src/constants/prop-types.ts | 3 +- lib/src/index.ts | 3 +- lib/src/typings/BasePicker.tsx | 8 +- lib/src/typings/date.ts | 3 - lib/src/typings/index.ts | 1 - lib/src/views/Calendar/Calendar.tsx | 20 +- lib/src/views/Calendar/CalendarHeader.tsx | 9 +- lib/src/views/Calendar/CalendarView.tsx | 8 +- lib/src/views/Calendar/Day.tsx | 7 +- lib/src/views/Calendar/MonthSelection.tsx | 7 +- lib/src/views/Calendar/YearSelection.tsx | 17 +- lib/src/views/Calendar/useCalendarState.tsx | 19 +- lib/src/views/Clock/Clock.tsx | 4 +- lib/src/views/Clock/ClockNumbers.tsx | 7 +- lib/src/views/Clock/ClockView.tsx | 8 +- lib/src/wrappers/makeWrapperComponent.tsx | 6 +- 56 files changed, 1161 insertions(+), 1061 deletions(-) create mode 100644 docs/pages/guides/typescript.mdx create mode 100644 lib/src/__tests__/typescript/GenericValues.tstest.tsx rename lib/src/__tests__/typescript/{Overrides.tsx => Overrides.tstest.tsx} (100%) rename lib/src/__tests__/typescript/{ThemeDefaultProps.tsx => ThemeDefaultProps.tstest.tsx} (100%) delete mode 100644 lib/src/typings/date.ts diff --git a/docs/layout/components/navigationMap.ts b/docs/layout/components/navigationMap.ts index b6079c6ce0e949..ab571bfe0ce740 100644 --- a/docs/layout/components/navigationMap.ts +++ b/docs/layout/components/navigationMap.ts @@ -39,6 +39,7 @@ export const navItems = [ { title: 'Guides', children: [ + { title: 'TypeScript', href: '/guides/typescript' }, { title: 'Accessibility', href: '/guides/accessibility' }, { title: 'Form integration', href: '/guides/forms' }, { title: 'CSS overrides', href: '/guides/css-overrides' }, diff --git a/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx index 75251cd5766633..e033a2cf489c4f 100644 --- a/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx +++ b/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx @@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField'; import { DateRangePicker, DateRange, DateRangeDelimiter } from '@material-ui/pickers'; function BasicDateRangePicker() { - const [selectedDate, handleDateChange] = React.useState([null, null]); + const [selectedDate, handleDateChange] = React.useState>([null, null]); return ( ([null, null]); + const [selectedDate, handleDateChange] = React.useState>([null, null]); return ( diff --git a/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx index d993b263ed266b..cacbb15fda1215 100644 --- a/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx +++ b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; +import * as React from 'react'; import { DateRangePicker, DateRange } from '@material-ui/pickers'; function CustomRangeInputs() { - const [selectedDate, handleDateChange] = useState([null, null]); + const [selectedDate, handleDateChange] = React.useState>([null, null]); return ( ([null, null]); + const [selectedRange, handleDateChange] = React.useState>([null, null]); return ( ([null, null]); + const [selectedDate, handleDateChange] = React.useState>([null, null]); return ( diff --git a/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx b/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx index 339499cb064d0c..e6961ef0c61f27 100644 --- a/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx +++ b/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx @@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField'; import { StaticDateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers'; function StaticDateRangePickerExample() { - const [selectedDate, handleDateChange] = React.useState([null, null]); + const [selectedDate, handleDateChange] = React.useState>([null, null]); return ( diff --git a/docs/pages/guides/typescript.mdx b/docs/pages/guides/typescript.mdx new file mode 100644 index 00000000000000..02e2d09790fb66 --- /dev/null +++ b/docs/pages/guides/typescript.mdx @@ -0,0 +1,83 @@ +import PageMeta from '_shared/PageMeta'; + + + +## TypeScript guide + +The date picker components come with built-in TypeScript definitions. +Here is some information about how to achive better experience with TypeScript. + + + +#### Nullable value + +Any picker can return null in the `onChange` argument so if you are using `React.useState`, you **must** manually cast your default value as nullable. (e.g. `Date | null`) + +```tsx +function MyComponent() { + const [value, setValue] = React.useState(new Date()); + + return ( + setValue(newValue)} + renderInput={props => } + /> + ); +} +``` + +#### Generics + +The components don't know which adapter you will pass to the ``. So any picker component is generic by default. +It means that it will try to infer the `value` and `onChange` type from the passed props. + +```tsx + newValue?.getDate()} +/> +``` + +It also means that you can manually set value type thanks to the generic JSX sytax: + +```tsx + + // You can pass any value right here that can be parsed + value={new Date()} + onChange={newValue => newValue?.getDate()} +/> +``` + +#### Important note on type inference! + +If you are passing not typed value to the picker (such like `null`) we cannot properly infer the type for you. It is required to properly type the vaue: + +```tsx + newValue?.getDate()} +/> +``` + +In this case it is required to manually set proper [generic type manually](#generics). + +```tsx + + value={null} + onChange={newValue => newValue?.getDate()} +/> + +// Or cast the type for the `value` or `onChange` prop. + + newValue?.getDate()} +/> +``` diff --git a/docs/prop-types.json b/docs/prop-types.json index 5f1b20f77ee23b..c67a79a3134e6b 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -477,7 +477,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "maxDate": { @@ -492,7 +492,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "disablePast": { @@ -550,7 +550,7 @@ }, "required": false, "type": { - "name": "(date: any) => void" + "name": "(date: DateIOType) => void" } }, "renderDay": { @@ -637,6 +637,165 @@ "name": "(day: DateIOType) => boolean" } }, + "DialogProps": { + "defaultValue": null, + "description": "Props to be passed directly to material-ui Dialog", + "name": "DialogProps", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", + "name": "InnerMobileWrapperProps" + }, + "required": false, + "type": { + "name": "{Partial}" + } + }, + "okText": { + "defaultValue": { + "value": "\"OK\"" + }, + "description": "\"OK\" button text.", + "name": "okText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "cancelText": { + "defaultValue": { + "value": "\"CANCEL\"" + }, + "description": "\"CANCEL\" Text message", + "name": "cancelText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "clearText": { + "defaultValue": { + "value": "\"CLEAR\"" + }, + "description": "\"CLEAR\" Text message", + "name": "clearText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "todayText": { + "defaultValue": { + "value": "\"TODAY\"" + }, + "description": "\"TODAY\" Text message", + "name": "todayText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "clearable": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, it shows the clear action in the picker dialog.", + "name": "clearable", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "showTodayButton": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", + "name": "showTodayButton", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "PopperProps": { + "defaultValue": null, + "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", + "name": "PopperProps", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "Partial" + } + }, + "TransitionComponent": { + "defaultValue": null, + "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", + "name": "TransitionComponent", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "ComponentClass | FunctionComponent" + } + }, + "displayStaticWrapperAs": { + "defaultValue": { + "value": "\"static\"" + }, + "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", + "name": "displayStaticWrapperAs", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", + "name": "StaticWrapperProps" + }, + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | \"static\"" + } + }, + "desktopModeMediaQuery": { + "defaultValue": { + "value": "\"" + }, + "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", + "name": "desktopModeMediaQuery", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", + "name": "ResponsiveWrapperProps" + }, + "required": false, + "type": { + "name": "string" + } + }, "value": { "defaultValue": null, "description": "Picker value.", @@ -647,7 +806,7 @@ }, "required": true, "type": { - "name": "any" + "name": "ParsableDate" } }, "onChange": { @@ -660,7 +819,7 @@ }, "required": true, "type": { - "name": "(date: DateIOType, keyboardInputValue?: string) => void" + "name": "(date: TDate | null, keyboardInputValue?: string) => void" } }, "disableCloseOnSelect": { @@ -727,7 +886,7 @@ }, "required": false, "type": { - "name": "(date: DateIOType) => void" + "name": "(date: TDate | null) => void" } }, "onOpen": { @@ -805,7 +964,7 @@ }, "required": false, "type": { - "name": "ComponentClass, any> | FunctionComponent>" + "name": "ComponentClass, any> | FunctionComponent>" } }, "toolbarTitle": { @@ -999,7 +1158,7 @@ }, "required": false, "type": { - "name": "(value: any, utils: MuiPickersAdapter) => string" + "name": "(value: DateIOType, utils: MuiPickersAdapter) => string" } }, "dateAdapter": { @@ -1012,321 +1171,321 @@ }, "required": false, "type": { - "name": "MuiPickersAdapter" + "name": "MuiPickersAdapter" } - }, - "DialogProps": { - "defaultValue": null, - "description": "Props to be passed directly to material-ui Dialog", - "name": "DialogProps", + } + }, + "TimePicker": { + "ampm": { + "defaultValue": { + "value": "true" + }, + "description": "12h/24h view for hour selection clock", + "name": "ampm", "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", - "name": "InnerMobileWrapperProps" + "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", + "name": "ExportedClockViewProps" }, "required": false, "type": { - "name": "{Partial}" + "name": "boolean" } }, - "okText": { + "minutesStep": { "defaultValue": { - "value": "\"OK\"" + "value": "1" }, - "description": "\"OK\" button text.", - "name": "okText", + "description": "Step over minutes", + "name": "minutesStep", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", + "name": "ExportedClockViewProps" }, "required": false, "type": { - "name": "ReactNode" + "name": "number" } }, - "cancelText": { + "ampmInClock": { "defaultValue": { - "value": "\"CANCEL\"" + "value": "false" }, - "description": "\"CANCEL\" Text message", - "name": "cancelText", + "description": "Display ampm controls under the clock (instead of in the toolbar)", + "name": "ampmInClock", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", + "name": "ExportedClockViewProps" }, "required": false, "type": { - "name": "ReactNode" + "name": "boolean" } }, - "clearText": { + "allowKeyboardControl": { "defaultValue": { - "value": "\"CLEAR\"" + "value": "currentWrapper !== 'static'" }, - "description": "\"CLEAR\" Text message", - "name": "clearText", + "description": "Enables keyboard listener for moving between days in calendar", + "name": "allowKeyboardControl", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", + "name": "ExportedClockViewProps" }, "required": false, "type": { - "name": "ReactNode" + "name": "boolean" } }, - "todayText": { - "defaultValue": { - "value": "\"TODAY\"" - }, - "description": "\"TODAY\" Text message", - "name": "todayText", + "minTime": { + "defaultValue": null, + "description": "Min time acceptable time.\nFor input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.", + "name": "minTime", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", + "name": "TimeValidationProps" }, "required": false, "type": { - "name": "ReactNode" + "name": "unknown" } }, - "clearable": { - "defaultValue": { - "value": "false" - }, - "description": "If `true`, it shows the clear action in the picker dialog.", - "name": "clearable", + "maxTime": { + "defaultValue": null, + "description": "Max time acceptable time.\nFor input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.", + "name": "maxTime", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", + "name": "TimeValidationProps" }, "required": false, "type": { - "name": "boolean" + "name": "unknown" } }, - "showTodayButton": { + "shouldDisableTime": { + "defaultValue": null, + "description": "Dynamically check if time is disabled or not.\nIf returns `false` appropriate time point will ot be acceptable.", + "name": "shouldDisableTime", + "parent": { + "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", + "name": "TimeValidationProps" + }, + "required": false, + "type": { + "name": "(timeValue: number, clockType: \"hours\" | \"minutes\" | \"seconds\") => boolean" + } + }, + "disableIgnoringDatePartForTimeValidation": { "defaultValue": { "value": "false" }, - "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", - "name": "showTodayButton", + "description": "Do not ignore date part when validating min/max time.", + "name": "disableIgnoringDatePartForTimeValidation", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", + "name": "TimeValidationProps" }, "required": false, "type": { "name": "boolean" } }, - "PopperProps": { + "onError": { "defaultValue": null, - "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", - "name": "PopperProps", + "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", + "name": "onError", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" + "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", + "name": "ValidationProps" }, "required": false, "type": { - "name": "Partial" + "name": "(reason: \"invalidDate\" | \"minTime\" | \"maxTime\" | \"shouldDisableTime-hours\" | \"shouldDisableTime-minutes\" | \"shouldDisableTime-seconds\" | null, value: DateIOType) => void" } }, - "TransitionComponent": { + "views": { "defaultValue": null, - "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", - "name": "TransitionComponent", + "description": "Array of views to show.", + "name": "views", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" + "fileName": "material-ui-pickers/lib/src/Picker/SharedPickerProps.tsx", + "name": "WithViewsProps" }, "required": false, "type": { - "name": "ComponentClass | FunctionComponent" + "name": "(\"hours\" | \"minutes\" | \"seconds\")[]" } }, - "displayStaticWrapperAs": { - "defaultValue": { - "value": "\"static\"" + "openTo": { + "defaultValue": null, + "description": "First view to show.", + "name": "openTo", + "parent": { + "fileName": "material-ui-pickers/lib/src/Picker/SharedPickerProps.tsx", + "name": "WithViewsProps" }, - "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", - "name": "displayStaticWrapperAs", + "required": false, + "type": { + "name": "\"hours\" | \"minutes\" | \"seconds\"" + } + }, + "DialogProps": { + "defaultValue": null, + "description": "Props to be passed directly to material-ui Dialog", + "name": "DialogProps", "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", - "name": "StaticWrapperProps" + "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", + "name": "InnerMobileWrapperProps" }, "required": false, "type": { - "name": "\"desktop\" | \"mobile\" | \"static\"" + "name": "{Partial}" } }, - "desktopModeMediaQuery": { + "okText": { "defaultValue": { - "value": "\"" + "value": "\"OK\"" }, - "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", - "name": "desktopModeMediaQuery", + "description": "\"OK\" button text.", + "name": "okText", "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", - "name": "ResponsiveWrapperProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "string" + "name": "ReactNode" } - } - }, - "TimePicker": { - "ampm": { + }, + "cancelText": { "defaultValue": { - "value": "true" + "value": "\"CANCEL\"" }, - "description": "12h/24h view for hour selection clock", - "name": "ampm", + "description": "\"CANCEL\" Text message", + "name": "cancelText", "parent": { - "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", - "name": "ExportedClockViewProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "boolean" + "name": "ReactNode" } }, - "minutesStep": { + "clearText": { "defaultValue": { - "value": "1" + "value": "\"CLEAR\"" }, - "description": "Step over minutes", - "name": "minutesStep", + "description": "\"CLEAR\" Text message", + "name": "clearText", "parent": { - "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", - "name": "ExportedClockViewProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "number" + "name": "ReactNode" } }, - "ampmInClock": { + "todayText": { "defaultValue": { - "value": "false" + "value": "\"TODAY\"" }, - "description": "Display ampm controls under the clock (instead of in the toolbar)", - "name": "ampmInClock", + "description": "\"TODAY\" Text message", + "name": "todayText", "parent": { - "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", - "name": "ExportedClockViewProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "boolean" + "name": "ReactNode" } }, - "allowKeyboardControl": { + "clearable": { "defaultValue": { - "value": "currentWrapper !== 'static'" + "value": "false" }, - "description": "Enables keyboard listener for moving between days in calendar", - "name": "allowKeyboardControl", + "description": "If `true`, it shows the clear action in the picker dialog.", + "name": "clearable", "parent": { - "fileName": "material-ui-pickers/lib/src/views/Clock/ClockView.tsx", - "name": "ExportedClockViewProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { "name": "boolean" } }, - "minTime": { - "defaultValue": null, - "description": "Min time acceptable time.\nFor input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.", - "name": "minTime", + "showTodayButton": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", + "name": "showTodayButton", "parent": { - "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", - "name": "TimeValidationProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "any" + "name": "boolean" } }, - "maxTime": { + "PopperProps": { "defaultValue": null, - "description": "Max time acceptable time.\nFor input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.", - "name": "maxTime", + "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", + "name": "PopperProps", "parent": { - "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", - "name": "TimeValidationProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" }, "required": false, "type": { - "name": "any" + "name": "Partial" } }, - "shouldDisableTime": { + "TransitionComponent": { "defaultValue": null, - "description": "Dynamically check if time is disabled or not.\nIf returns `false` appropriate time point will ot be acceptable.", - "name": "shouldDisableTime", + "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", + "name": "TransitionComponent", "parent": { - "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", - "name": "TimeValidationProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" }, "required": false, "type": { - "name": "(timeValue: number, clockType: \"hours\" | \"minutes\" | \"seconds\") => boolean" + "name": "ComponentClass | FunctionComponent" } }, - "disableIgnoringDatePartForTimeValidation": { + "displayStaticWrapperAs": { "defaultValue": { - "value": "false" - }, - "description": "Do not ignore date part when validating min/max time.", - "name": "disableIgnoringDatePartForTimeValidation", - "parent": { - "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", - "name": "TimeValidationProps" + "value": "\"static\"" }, - "required": false, - "type": { - "name": "boolean" - } - }, - "onError": { - "defaultValue": null, - "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", - "name": "onError", + "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", + "name": "displayStaticWrapperAs", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", - "name": "ValidationProps" + "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", + "name": "StaticWrapperProps" }, "required": false, "type": { - "name": "(reason: \"invalidDate\" | \"minTime\" | \"maxTime\" | \"shouldDisableTime-hours\" | \"shouldDisableTime-minutes\" | \"shouldDisableTime-seconds\" | null, value: DateIOType) => void" + "name": "\"desktop\" | \"mobile\" | \"static\"" } }, - "views": { - "defaultValue": null, - "description": "Array of views to show.", - "name": "views", - "parent": { - "fileName": "material-ui-pickers/lib/src/Picker/SharedPickerProps.tsx", - "name": "WithViewsProps" + "desktopModeMediaQuery": { + "defaultValue": { + "value": "\"" }, - "required": false, - "type": { - "name": "(\"hours\" | \"minutes\" | \"seconds\")[]" - } - }, - "openTo": { - "defaultValue": null, - "description": "First view to show.", - "name": "openTo", + "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", + "name": "desktopModeMediaQuery", "parent": { - "fileName": "material-ui-pickers/lib/src/Picker/SharedPickerProps.tsx", - "name": "WithViewsProps" + "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", + "name": "ResponsiveWrapperProps" }, "required": false, "type": { - "name": "\"hours\" | \"minutes\" | \"seconds\"" + "name": "string" } }, "value": { @@ -1339,7 +1498,7 @@ }, "required": true, "type": { - "name": "any" + "name": "ParsableDate" } }, "onChange": { @@ -1352,7 +1511,7 @@ }, "required": true, "type": { - "name": "(date: DateIOType, keyboardInputValue?: string) => void" + "name": "(date: TDate | null, keyboardInputValue?: string) => void" } }, "disableCloseOnSelect": { @@ -1419,7 +1578,7 @@ }, "required": false, "type": { - "name": "(date: DateIOType) => void" + "name": "(date: TDate | null) => void" } }, "onOpen": { @@ -1497,7 +1656,7 @@ }, "required": false, "type": { - "name": "ComponentClass, any> | FunctionComponent>" + "name": "ComponentClass, any> | FunctionComponent>" } }, "toolbarTitle": { @@ -1691,7 +1850,7 @@ }, "required": false, "type": { - "name": "(value: any, utils: MuiPickersAdapter) => string" + "name": "(value: DateIOType, utils: MuiPickersAdapter) => string" } }, "dateAdapter": { @@ -1704,181 +1863,22 @@ }, "required": false, "type": { - "name": "MuiPickersAdapter" + "name": "MuiPickersAdapter" } - }, - "DialogProps": { + } + }, + "DateTimePicker": { + "hideTabs": { "defaultValue": null, - "description": "Props to be passed directly to material-ui Dialog", - "name": "DialogProps", + "description": "To show tabs.", + "name": "hideTabs", "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", - "name": "InnerMobileWrapperProps" + "fileName": "material-ui-pickers/lib/src/DateTimePicker/DateTimePicker.tsx", + "name": "BaseDateTimePickerProps" }, "required": false, "type": { - "name": "{Partial}" - } - }, - "okText": { - "defaultValue": { - "value": "\"OK\"" - }, - "description": "\"OK\" button text.", - "name": "okText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "cancelText": { - "defaultValue": { - "value": "\"CANCEL\"" - }, - "description": "\"CANCEL\" Text message", - "name": "cancelText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "clearText": { - "defaultValue": { - "value": "\"CLEAR\"" - }, - "description": "\"CLEAR\" Text message", - "name": "clearText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "todayText": { - "defaultValue": { - "value": "\"TODAY\"" - }, - "description": "\"TODAY\" Text message", - "name": "todayText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "clearable": { - "defaultValue": { - "value": "false" - }, - "description": "If `true`, it shows the clear action in the picker dialog.", - "name": "clearable", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "showTodayButton": { - "defaultValue": { - "value": "false" - }, - "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", - "name": "showTodayButton", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "PopperProps": { - "defaultValue": null, - "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", - "name": "PopperProps", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" - }, - "required": false, - "type": { - "name": "Partial" - } - }, - "TransitionComponent": { - "defaultValue": null, - "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", - "name": "TransitionComponent", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" - }, - "required": false, - "type": { - "name": "ComponentClass | FunctionComponent" - } - }, - "displayStaticWrapperAs": { - "defaultValue": { - "value": "\"static\"" - }, - "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", - "name": "displayStaticWrapperAs", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", - "name": "StaticWrapperProps" - }, - "required": false, - "type": { - "name": "\"desktop\" | \"mobile\" | \"static\"" - } - }, - "desktopModeMediaQuery": { - "defaultValue": { - "value": "\"" - }, - "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", - "name": "desktopModeMediaQuery", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", - "name": "ResponsiveWrapperProps" - }, - "required": false, - "type": { - "name": "string" - } - } - }, - "DateTimePicker": { - "hideTabs": { - "defaultValue": null, - "description": "To show tabs.", - "name": "hideTabs", - "parent": { - "fileName": "material-ui-pickers/lib/src/DateTimePicker/DateTimePicker.tsx", - "name": "BaseDateTimePickerProps" - }, - "required": false, - "type": { - "name": "boolean" + "name": "boolean" } }, "dateRangeIcon": { @@ -1917,7 +1917,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "maxDateTime": { @@ -1930,7 +1930,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "toolbarFormat": { @@ -2055,7 +2055,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "maxTime": { @@ -2068,7 +2068,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "shouldDisableTime": { @@ -2245,7 +2245,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "maxDate": { @@ -2260,7 +2260,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "disablePast": { @@ -2318,7 +2318,7 @@ }, "required": false, "type": { - "name": "(date: any) => void" + "name": "(date: DateIOType) => void" } }, "renderDay": { @@ -2390,97 +2390,256 @@ "name": "(day: DateIOType) => boolean" } }, - "value": { + "DialogProps": { "defaultValue": null, - "description": "Picker value.", - "name": "value", + "description": "Props to be passed directly to material-ui Dialog", + "name": "DialogProps", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", + "name": "InnerMobileWrapperProps" }, - "required": true, + "required": false, "type": { - "name": "any" + "name": "{Partial}" } }, - "onChange": { - "defaultValue": null, - "description": "onChange callback.", - "name": "onChange", + "okText": { + "defaultValue": { + "value": "\"OK\"" + }, + "description": "\"OK\" button text.", + "name": "okText", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, - "required": true, + "required": false, "type": { - "name": "(date: DateIOType, keyboardInputValue?: string) => void" + "name": "ReactNode" } }, - "disableCloseOnSelect": { + "cancelText": { "defaultValue": { - "value": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." + "value": "\"CANCEL\"" }, - "description": "If `true` picker will immediately close after submitting full date.", - "name": "disableCloseOnSelect", + "description": "\"CANCEL\" Text message", + "name": "cancelText", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "boolean" + "name": "ReactNode" } }, - "inputFormat": { - "defaultValue": null, - "description": "Format string.", - "name": "inputFormat", + "clearText": { + "defaultValue": { + "value": "\"CLEAR\"" + }, + "description": "\"CLEAR\" Text message", + "name": "clearText", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "string" + "name": "ReactNode" } }, - "disabled": { - "defaultValue": null, - "description": "Disable picker and text field.", - "name": "disabled", + "todayText": { + "defaultValue": { + "value": "\"TODAY\"" + }, + "description": "\"TODAY\" Text message", + "name": "todayText", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { - "name": "boolean" + "name": "ReactNode" } }, - "readOnly": { - "defaultValue": null, - "description": "Make picker read only.", - "name": "readOnly", + "clearable": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, it shows the clear action in the picker dialog.", + "name": "clearable", "parent": { - "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", - "name": "BasePickerProps" + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" }, "required": false, "type": { "name": "boolean" } }, - "onAccept": { - "defaultValue": null, - "description": "Callback fired when date is accepted.", - "name": "onAccept", + "showTodayButton": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", + "name": "showTodayButton", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "PopperProps": { + "defaultValue": null, + "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", + "name": "PopperProps", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "Partial" + } + }, + "TransitionComponent": { + "defaultValue": null, + "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", + "name": "TransitionComponent", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "ComponentClass | FunctionComponent" + } + }, + "displayStaticWrapperAs": { + "defaultValue": { + "value": "\"static\"" + }, + "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", + "name": "displayStaticWrapperAs", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", + "name": "StaticWrapperProps" + }, + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | \"static\"" + } + }, + "desktopModeMediaQuery": { + "defaultValue": { + "value": "\"" + }, + "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", + "name": "desktopModeMediaQuery", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", + "name": "ResponsiveWrapperProps" + }, + "required": false, + "type": { + "name": "string" + } + }, + "value": { + "defaultValue": null, + "description": "Picker value.", + "name": "value", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": true, + "type": { + "name": "ParsableDate" + } + }, + "onChange": { + "defaultValue": null, + "description": "onChange callback.", + "name": "onChange", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": true, + "type": { + "name": "(date: TDate | null, keyboardInputValue?: string) => void" + } + }, + "disableCloseOnSelect": { + "defaultValue": { + "value": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." + }, + "description": "If `true` picker will immediately close after submitting full date.", + "name": "disableCloseOnSelect", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", "name": "BasePickerProps" }, "required": false, "type": { - "name": "(date: DateIOType) => void" + "name": "boolean" + } + }, + "inputFormat": { + "defaultValue": null, + "description": "Format string.", + "name": "inputFormat", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": false, + "type": { + "name": "string" + } + }, + "disabled": { + "defaultValue": null, + "description": "Disable picker and text field.", + "name": "disabled", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "readOnly": { + "defaultValue": null, + "description": "Make picker read only.", + "name": "readOnly", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "onAccept": { + "defaultValue": null, + "description": "Callback fired when date is accepted.", + "name": "onAccept", + "parent": { + "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", + "name": "BasePickerProps" + }, + "required": false, + "type": { + "name": "(date: TDate | null) => void" } }, "onOpen": { @@ -2558,7 +2717,7 @@ }, "required": false, "type": { - "name": "ComponentClass, any> | FunctionComponent>" + "name": "ComponentClass, any> | FunctionComponent>" } }, "toolbarTitle": { @@ -2739,7 +2898,7 @@ }, "required": false, "type": { - "name": "(value: any, utils: MuiPickersAdapter) => string" + "name": "(value: DateIOType, utils: MuiPickersAdapter) => string" } }, "dateAdapter": { @@ -2752,256 +2911,97 @@ }, "required": false, "type": { - "name": "MuiPickersAdapter" - } - }, - "DialogProps": { - "defaultValue": null, - "description": "Props to be passed directly to material-ui Dialog", - "name": "DialogProps", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", - "name": "InnerMobileWrapperProps" - }, - "required": false, - "type": { - "name": "{Partial}" - } - }, - "okText": { - "defaultValue": { - "value": "\"OK\"" - }, - "description": "\"OK\" button text.", - "name": "okText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" + "name": "MuiPickersAdapter" } - }, - "cancelText": { + } + }, + "DateRangePicker": { + "startText": { "defaultValue": { - "value": "\"CANCEL\"" + "value": "\"Start\"" }, - "description": "\"CANCEL\" Text message", - "name": "cancelText", + "description": "Text for start input label and toolbar placeholder", + "name": "startText", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePicker.tsx", + "name": "BaseDateRangePickerProps" }, "required": false, "type": { "name": "ReactNode" } }, - "clearText": { + "endText": { "defaultValue": { - "value": "\"CLEAR\"" + "value": "\"end\"" }, - "description": "\"CLEAR\" Text message", - "name": "clearText", + "description": "Text for end input label and toolbar placeholder", + "name": "endText", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePicker.tsx", + "name": "BaseDateRangePickerProps" }, "required": false, "type": { "name": "ReactNode" } }, - "todayText": { + "disableAutoMonthSwitching": { "defaultValue": { - "value": "\"TODAY\"" + "value": "false" }, - "description": "\"TODAY\" Text message", - "name": "todayText", + "description": "if `true` after selecting `start` date calendar will not automatically switch to the month of `end` date", + "name": "disableAutoMonthSwitching", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerView.tsx", + "name": "ExportedDateRangePickerViewProps" }, "required": false, "type": { - "name": "ReactNode" + "name": "boolean" } }, - "clearable": { + "disableHighlightToday": { "defaultValue": { "value": "false" }, - "description": "If `true`, it shows the clear action in the picker dialog.", - "name": "clearable", + "description": "Disable highlighting today date with a circle.", + "name": "disableHighlightToday", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/views/Calendar/Day.tsx", + "name": "DayProps" }, "required": false, "type": { "name": "boolean" } }, - "showTodayButton": { + "showDaysOutsideCurrentMonth": { "defaultValue": { "value": "false" }, - "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", - "name": "showTodayButton", + "description": "Display disabled dates outside the current month.", + "name": "showDaysOutsideCurrentMonth", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" + "fileName": "material-ui-pickers/lib/src/views/Calendar/Day.tsx", + "name": "DayProps" }, "required": false, "type": { "name": "boolean" } }, - "PopperProps": { + "leftArrowIcon": { "defaultValue": null, - "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", - "name": "PopperProps", + "description": "Left arrow icon.", + "name": "leftArrowIcon", "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" + "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", + "name": "ExportedArrowSwitcherProps" }, "required": false, "type": { - "name": "Partial" - } - }, - "TransitionComponent": { - "defaultValue": null, - "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", - "name": "TransitionComponent", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" - }, - "required": false, - "type": { - "name": "ComponentClass | FunctionComponent" - } - }, - "displayStaticWrapperAs": { - "defaultValue": { - "value": "\"static\"" - }, - "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", - "name": "displayStaticWrapperAs", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", - "name": "StaticWrapperProps" - }, - "required": false, - "type": { - "name": "\"desktop\" | \"mobile\" | \"static\"" - } - }, - "desktopModeMediaQuery": { - "defaultValue": { - "value": "\"" - }, - "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", - "name": "desktopModeMediaQuery", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", - "name": "ResponsiveWrapperProps" - }, - "required": false, - "type": { - "name": "string" - } - } - }, - "DateRangePicker": { - "startText": { - "defaultValue": { - "value": "\"Start\"" - }, - "description": "Text for start input label and toolbar placeholder", - "name": "startText", - "parent": { - "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePicker.tsx", - "name": "BaseDateRangePickerProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "endText": { - "defaultValue": { - "value": "\"end\"" - }, - "description": "Text for end input label and toolbar placeholder", - "name": "endText", - "parent": { - "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePicker.tsx", - "name": "BaseDateRangePickerProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "disableAutoMonthSwitching": { - "defaultValue": { - "value": "false" - }, - "description": "if `true` after selecting `start` date calendar will not automatically switch to the month of `end` date", - "name": "disableAutoMonthSwitching", - "parent": { - "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerView.tsx", - "name": "ExportedDateRangePickerViewProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "disableHighlightToday": { - "defaultValue": { - "value": "false" - }, - "description": "Disable highlighting today date with a circle.", - "name": "disableHighlightToday", - "parent": { - "fileName": "material-ui-pickers/lib/src/views/Calendar/Day.tsx", - "name": "DayProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "showDaysOutsideCurrentMonth": { - "defaultValue": { - "value": "false" - }, - "description": "Display disabled dates outside the current month.", - "name": "showDaysOutsideCurrentMonth", - "parent": { - "fileName": "material-ui-pickers/lib/src/views/Calendar/Day.tsx", - "name": "DayProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "leftArrowIcon": { - "defaultValue": null, - "description": "Left arrow icon.", - "name": "leftArrowIcon", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", - "name": "ExportedArrowSwitcherProps" - }, - "required": false, - "type": { - "name": "ReactNode" + "name": "ReactNode" } }, "rightArrowIcon": { @@ -3107,7 +3107,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "maxDate": { @@ -3122,7 +3122,7 @@ }, "required": false, "type": { - "name": "any" + "name": "DateIOType" } }, "disablePast": { @@ -3180,7 +3180,7 @@ }, "required": false, "type": { - "name": "(date: any) => void" + "name": "(date: DateIOType) => void" } }, "allowKeyboardControl": { @@ -3266,7 +3266,7 @@ }, "required": false, "type": { - "name": "(date: any, DateRangeDayProps: DateRangeDayProps) => Element" + "name": "(date: DateIOType, DateRangeDayProps: DateRangeDayProps) => Element" } }, "className": { @@ -3346,7 +3346,7 @@ }, "required": false, "type": { - "name": "(date: DateIOType) => void) | ((date: DateRange) => void" + "name": "(date: DateIOType) => void) | ((date: DateRange | null) => void" } }, "onOpen": { @@ -3424,7 +3424,7 @@ }, "required": false, "type": { - "name": "ComponentClass, any> | FunctionComponent>" + "name": "ComponentClass, any> | FunctionComponent>" } }, "toolbarTitle": { @@ -3480,7 +3480,7 @@ }, "required": false, "type": { - "name": "(reason: DateRangeValidationError, value: RangeInput) => void" + "name": "(reason: DateRangeValidationError, value: RangeInput) => void" } }, "renderInput": { @@ -3496,6 +3496,165 @@ "name": "(props: any) => ReactElement Component)> | null) | (new (props: any) => Component<...>" } }, + "PopperProps": { + "defaultValue": null, + "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", + "name": "PopperProps", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "Partial" + } + }, + "TransitionComponent": { + "defaultValue": null, + "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", + "name": "TransitionComponent", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", + "name": "ExportedPickerPopperProps" + }, + "required": false, + "type": { + "name": "ComponentClass | FunctionComponent" + } + }, + "displayStaticWrapperAs": { + "defaultValue": { + "value": "\"static\"" + }, + "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", + "name": "displayStaticWrapperAs", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", + "name": "StaticWrapperProps" + }, + "required": false, + "type": { + "name": "\"desktop\" | \"mobile\" | \"static\"" + } + }, + "DialogProps": { + "defaultValue": null, + "description": "Props to be passed directly to material-ui Dialog", + "name": "DialogProps", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", + "name": "InnerMobileWrapperProps" + }, + "required": false, + "type": { + "name": "{Partial}" + } + }, + "okText": { + "defaultValue": { + "value": "\"OK\"" + }, + "description": "\"OK\" button text.", + "name": "okText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "cancelText": { + "defaultValue": { + "value": "\"CANCEL\"" + }, + "description": "\"CANCEL\" Text message", + "name": "cancelText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "clearText": { + "defaultValue": { + "value": "\"CLEAR\"" + }, + "description": "\"CLEAR\" Text message", + "name": "clearText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "todayText": { + "defaultValue": { + "value": "\"TODAY\"" + }, + "description": "\"TODAY\" Text message", + "name": "todayText", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "ReactNode" + } + }, + "clearable": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, it shows the clear action in the picker dialog.", + "name": "clearable", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "showTodayButton": { + "defaultValue": { + "value": "false" + }, + "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", + "name": "showTodayButton", + "parent": { + "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", + "name": "ExportedPickerModalProps" + }, + "required": false, + "type": { + "name": "boolean" + } + }, + "desktopModeMediaQuery": { + "defaultValue": { + "value": "\"" + }, + "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", + "name": "desktopModeMediaQuery", + "parent": { + "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", + "name": "ResponsiveWrapperProps" + }, + "required": false, + "type": { + "name": "string" + } + }, "onChange": { "defaultValue": null, "description": "onChange callback.", @@ -3506,7 +3665,7 @@ }, "required": true, "type": { - "name": "(date: DateRange, keyboardInputValue?: string) => void" + "name": "(date: DateRange, keyboardInputValue?: string) => void" } }, "mask": { @@ -3532,7 +3691,7 @@ }, "required": true, "type": { - "name": "RangeInput" + "name": "RangeInput" } }, "openPickerIcon": { @@ -3644,7 +3803,7 @@ }, "required": false, "type": { - "name": "(value: any, utils: MuiPickersAdapter) => string" + "name": "(value: DateIOType, utils: MuiPickersAdapter) => string" } }, "dateAdapter": { @@ -3657,166 +3816,7 @@ }, "required": false, "type": { - "name": "MuiPickersAdapter" - } - }, - "DialogProps": { - "defaultValue": null, - "description": "Props to be passed directly to material-ui Dialog", - "name": "DialogProps", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/MobileWrapper.tsx", - "name": "InnerMobileWrapperProps" - }, - "required": false, - "type": { - "name": "{Partial}" - } - }, - "okText": { - "defaultValue": { - "value": "\"OK\"" - }, - "description": "\"OK\" button text.", - "name": "okText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "cancelText": { - "defaultValue": { - "value": "\"CANCEL\"" - }, - "description": "\"CANCEL\" Text message", - "name": "cancelText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "clearText": { - "defaultValue": { - "value": "\"CLEAR\"" - }, - "description": "\"CLEAR\" Text message", - "name": "clearText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "todayText": { - "defaultValue": { - "value": "\"TODAY\"" - }, - "description": "\"TODAY\" Text message", - "name": "todayText", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "ReactNode" - } - }, - "clearable": { - "defaultValue": { - "value": "false" - }, - "description": "If `true`, it shows the clear action in the picker dialog.", - "name": "clearable", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "showTodayButton": { - "defaultValue": { - "value": "false" - }, - "description": "If `true`, the today button will be displayed. **Note** that `showClearButton` has a higher priority.", - "name": "showTodayButton", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerModalDialog.tsx", - "name": "ExportedPickerModalProps" - }, - "required": false, - "type": { - "name": "boolean" - } - }, - "PopperProps": { - "defaultValue": null, - "description": "Popper props passed down to [Popper](https://material-ui.com/api/popper/) component.", - "name": "PopperProps", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" - }, - "required": false, - "type": { - "name": "Partial" - } - }, - "TransitionComponent": { - "defaultValue": null, - "description": "Custom component for [Transition](https://material-ui.com/components/transitions/#transitioncomponent-prop).", - "name": "TransitionComponent", - "parent": { - "fileName": "material-ui-pickers/lib/src/_shared/PickerPopper.tsx", - "name": "ExportedPickerPopperProps" - }, - "required": false, - "type": { - "name": "ComponentClass | FunctionComponent" - } - }, - "displayStaticWrapperAs": { - "defaultValue": { - "value": "\"static\"" - }, - "description": "Force static wrapper inner components to be rendered in mobile or desktop mode", - "name": "displayStaticWrapperAs", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/StaticWrapper.tsx", - "name": "StaticWrapperProps" - }, - "required": false, - "type": { - "name": "\"desktop\" | \"mobile\" | \"static\"" - } - }, - "desktopModeMediaQuery": { - "defaultValue": { - "value": "\"" - }, - "description": "CSS media query when `Mobile` mode will be changed to `Desktop`.\n@media (pointer: fine)\"\n@example \"\n@media (min-width: 720px)\" or theme.breakpoints.up(\"sm\")", - "name": "desktopModeMediaQuery", - "parent": { - "fileName": "material-ui-pickers/lib/src/wrappers/ResponsiveWrapper.tsx", - "name": "ResponsiveWrapperProps" - }, - "required": false, - "type": { - "name": "string" + "name": "MuiPickersAdapter>" } } }, @@ -3846,7 +3846,7 @@ }, "required": true, "type": { - "name": "PickerOnChangeFn" + "name": "PickerOnChangeFn" } }, "renderDay": { @@ -3949,7 +3949,7 @@ }, "required": true, "type": { - "name": "any" + "name": "unknown" } }, "focused": { @@ -4280,7 +4280,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "maxTime": { @@ -4293,7 +4293,7 @@ }, "required": false, "type": { - "name": "any" + "name": "unknown" } }, "shouldDisableTime": { diff --git a/docs/scripts/docgen.js b/docs/scripts/docgen.js index 0acd01e1f40641..5fb22ef15609f0 100644 --- a/docs/scripts/docgen.js +++ b/docs/scripts/docgen.js @@ -51,7 +51,7 @@ function processProp(prop) { const { description } = prop; if (description.includes('@DateIOType')) { - prop.type.name = prop.type.name.replace(/any/g, 'DateIOType'); + prop.type.name = prop.type.name.replace(/unknown/g, 'DateIOType'); prop.description = description.replace(' @DateIOType', ''); } diff --git a/docs/typings.d.ts b/docs/typings.d.ts index d52356f0ddd4ce..b52664c9b615b5 100644 --- a/docs/typings.d.ts +++ b/docs/typings.d.ts @@ -1,8 +1,6 @@ -import { ParsableDate } from '@material-ui/pickers/src/constants/prop-types'; import { MuiPickersComponentsToClassName, MuiPickersComponentsPropsList, - MaterialUiPickersDate, } from '@material-ui/pickers/src/typings'; declare module '@material-ui/core/styles/overrides' { @@ -29,11 +27,3 @@ declare module '*.mdx' { declare module '@date-io/type' { export type DateType = any; } - -declare module '@material-ui/pickers/src/typings/BasePicker' { - // In order to display user readable code in the examples we must not use `Date | Moment | DayJS | DateTime` type. - interface BasePickerProps { - value: any; - onChange: (value: any) => void; - } -} diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index 98b7d97f7e1c81..9ad1541b5bf701 100644 --- a/lib/.size-snapshot.json +++ b/lib/.size-snapshot.json @@ -1,26 +1,26 @@ { "material-ui-pickers.esm.js": { - "bundled": 204060, - "minified": 108823, - "gzipped": 27970, + "bundled": 206357, + "minified": 110201, + "gzipped": 28112, "treeshaked": { "rollup": { - "code": 88258, + "code": 89508, "import_statements": 2098 }, "webpack": { - "code": 98009 + "code": 99259 } } }, "material-ui-pickers.umd.js": { - "bundled": 319378, - "minified": 123263, - "gzipped": 34889 + "bundled": 319934, + "minified": 124137, + "gzipped": 34867 }, "material-ui-pickers.umd.min.js": { - "bundled": 274474, - "minified": 113444, - "gzipped": 32079 + "bundled": 275030, + "minified": 114319, + "gzipped": 32057 } } diff --git a/lib/src/DateRangePicker/DateRangePicker.tsx b/lib/src/DateRangePicker/DateRangePicker.tsx index bed475ffdfd872..efdfa52459ce3a 100644 --- a/lib/src/DateRangePicker/DateRangePicker.tsx +++ b/lib/src/DateRangePicker/DateRangePicker.tsx @@ -12,15 +12,11 @@ import { ResponsiveTooltipWrapper } from '../wrappers/ResponsiveWrapper'; import { defaultMinDate, defaultMaxDate } from '../constants/prop-types'; import { DesktopTooltipWrapper } from '../wrappers/DesktopTooltipWrapper'; import { SomeWrapper, ExtendWrapper, StaticWrapper } from '../wrappers/Wrapper'; +import { RangeInput, AllSharedDateRangePickerProps, DateRange } from './RangeTypes'; import { makeValidationHook, ValidationProps } from '../_shared/hooks/useValidation'; import { usePickerState, PickerStateValueManager } from '../_shared/hooks/usePickerState'; import { DateRangePickerView, ExportedDateRangePickerViewProps } from './DateRangePickerView'; import { DateRangePickerInput, ExportedDateRangePickerInputProps } from './DateRangePickerInput'; -import { - DateRange as DateRangeType, - RangeInput, - AllSharedDateRangePickerProps, -} from './RangeTypes'; import { parseRangeInputValue, validateDateRange, @@ -43,6 +39,13 @@ export interface BaseDateRangePickerProps endText?: React.ReactNode; } +type RangePickerComponent = ( + props: BaseDateRangePickerProps & + ExtendWrapper & + AllSharedDateRangePickerProps & + React.RefAttributes +) => JSX.Element; + export const useDateRangeValidation = makeValidationHook< DateRangeValidationError, RangeInput, @@ -52,22 +55,22 @@ export const useDateRangeValidation = makeValidationHook< isSameError: (a, b) => a[1] === b[1] && a[0] === b[0], }); -export function makeRangePicker(name: string, Wrapper: TWrapper) { - const WrapperComponent = makeWrapperComponent( - Wrapper, - { - KeyboardDateInputComponent: DateRangePickerInput, - PureDateInputComponent: DateRangePickerInput, - } - ); +export function makeRangePicker( + name: string, + Wrapper: TWrapper +): RangePickerComponent { + const WrapperComponent = makeWrapperComponent(Wrapper, { + KeyboardDateInputComponent: DateRangePickerInput, + PureDateInputComponent: DateRangePickerInput, + }); - const rangePickerValueManager: PickerStateValueManager = { + const rangePickerValueManager: PickerStateValueManager = { emptyValue: [null, null], parseInput: parseRangeInputValue, areValuesEqual: (utils, a, b) => utils.isEqual(a[0], b[0]) && utils.isEqual(a[1], b[1]), }; - function RangePickerWithStateAndWrapper({ + function RangePickerWithStateAndWrapper({ calendars, value, onChange, @@ -78,7 +81,7 @@ export function makeRangePicker(name: string, Wrap minDate: __minDate = defaultMinDate, maxDate: __maxDate = defaultMaxDate, ...other - }: BaseDateRangePickerProps & AllSharedDateRangePickerProps & ExtendWrapper) { + }: BaseDateRangePickerProps & AllSharedDateRangePickerProps & ExtendWrapper) { const utils = useUtils(); const minDate = useParsedDate(__minDate); const maxDate = useParsedDate(__maxDate); @@ -99,10 +102,10 @@ export function makeRangePicker(name: string, Wrap maxDate, }; - const { pickerProps, inputProps, wrapperProps } = usePickerState( - pickerStateProps, - rangePickerValueManager - ); + const { pickerProps, inputProps, wrapperProps } = usePickerState< + RangeInput, + DateRange + >(pickerStateProps, rangePickerValueManager); const validationError = useDateRangeValidation(value, restProps); @@ -146,15 +149,13 @@ export function makeRangePicker(name: string, Wrap withDateAdapterProp(RangePickerWithStateAndWrapper) ); + // @ts-ignore @see lib/src/Picker/makePickerWithState.tsx:95 return React.forwardRef< HTMLDivElement, React.ComponentProps >((props, ref) => ); } -// TODO replace with new export type syntax -export type DateRange = DateRangeType; - export const DateRangePicker = makeRangePicker( 'MuiPickersDateRangePicker', ResponsiveTooltipWrapper diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index dad45cb40cacb8..55a90b288ba8d4 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -3,7 +3,6 @@ import * as PropTypes from 'prop-types'; import { RangeInput, DateRange } from './RangeTypes'; import { useUtils } from '../_shared/hooks/useUtils'; import { makeStyles } from '@material-ui/core/styles'; -import { MaterialUiPickersDate } from '../typings/date'; import { CurrentlySelectingRangeEndProps } from './RangeTypes'; import { useMaskedInput } from '../_shared/hooks/useMaskedInput'; import { DateRangeValidationError } from '../_helpers/date-utils'; @@ -57,7 +56,7 @@ export interface DateRangeInputProps extends ExportedDateRangePickerInputProps, CurrentlySelectingRangeEndProps, Omit< - DateInputProps, + DateInputProps, DateRange>, 'validationError' | 'renderInput' | 'forwardedRef' > { startText: React.ReactNode; @@ -113,11 +112,11 @@ export const DateRangePickerInput: React.FC = ({ [onChange] ); - const handleStartChange = (date: MaterialUiPickersDate, inputString?: string) => { + const handleStartChange = (date: unknown, inputString?: string) => { lazyHandleChangeCallback([date, utils.date(end)], inputString); }; - const handleEndChange = (date: MaterialUiPickersDate, inputString?: string) => { + const handleEndChange = (date: unknown, inputString?: string) => { lazyHandleChangeCallback([utils.date(start), date], inputString); }; diff --git a/lib/src/DateRangePicker/DateRangePickerView.tsx b/lib/src/DateRangePicker/DateRangePickerView.tsx index b27cd6526174d0..1edb455c2200c2 100644 --- a/lib/src/DateRangePicker/DateRangePickerView.tsx +++ b/lib/src/DateRangePicker/DateRangePickerView.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import { isRangeValid } from '../_helpers/date-utils'; -import { MaterialUiPickersDate } from '../typings/date'; import { BasePickerProps } from '../typings/BasePicker'; import { calculateRangeChange } from './date-range-manager'; import { useUtils, useNow } from '../_shared/hooks/useUtils'; @@ -34,16 +33,16 @@ export interface ExportedDateRangePickerViewProps disableAutoMonthSwitching?: boolean; } -interface DateRangePickerViewProps +interface DateRangePickerViewProps extends ExportedDateRangePickerViewProps, CurrentlySelectingRangeEndProps, - SharedPickerProps { + SharedPickerProps, DateRange, DateRangeInputProps> { open: boolean; startText: React.ReactNode; endText: React.ReactNode; } -export const DateRangePickerView: React.FC = ({ +export const DateRangePickerView = ({ calendars = 2, className, currentlySelectingRangeEnd, @@ -69,7 +68,7 @@ export const DateRangePickerView: React.FC = ({ toolbarFormat, toolbarTitle, ...other -}) => { +}: DateRangePickerViewProps) => { const now = useNow(); const utils = useUtils(); const wrapperVariant = React.useContext(WrapperVariantContext); @@ -97,7 +96,7 @@ export const DateRangePickerView: React.FC = ({ const toShowToolbar = showToolbar ?? wrapperVariant !== 'desktop'; - const scrollToDayIfNeeded = (day: MaterialUiPickersDate) => { + const scrollToDayIfNeeded = (day: unknown) => { if (!utils.isValid(day) || isDateDisabled(day)) { return; } @@ -137,7 +136,7 @@ export const DateRangePickerView: React.FC = ({ }, [currentlySelectingRangeEnd, date]); // eslint-disable-line const handleChange = React.useCallback( - (newDate: MaterialUiPickersDate) => { + (newDate: unknown) => { const { nextSelection, newRange } = calculateRangeChange({ newDate, utils, @@ -150,7 +149,11 @@ export const DateRangePickerView: React.FC = ({ const isFullRangeSelected = currentlySelectingRangeEnd === 'end' && isRangeValid(utils, newRange); - onDateChange(newRange, wrapperVariant, isFullRangeSelected ? 'finish' : 'partial'); + onDateChange( + newRange as DateRange, + wrapperVariant, + isFullRangeSelected ? 'finish' : 'partial' + ); }, [ currentlySelectingRangeEnd, diff --git a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx index 58876cf9bd5c73..f1fa974304e41a 100644 --- a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx +++ b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { DateRange } from './RangeTypes'; import { useUtils } from '../_shared/hooks/useUtils'; import { makeStyles } from '@material-ui/core/styles'; -import { MaterialUiPickersDate } from '../typings/date'; import { calculateRangePreview } from './date-range-manager'; import { Calendar, CalendarProps } from '../views/Calendar/Calendar'; import { DateRangeDay, DateRangeDayProps } from './DateRangePickerDay'; @@ -26,10 +25,10 @@ export interface ExportedDesktopDateRangeCalendarProps { */ calendars?: 1 | 2 | 3; /** - * Custom renderer for `` days. + * Custom renderer for `` days. @DateIOType * @example (date, DateRangeDayProps) => */ - renderDay?: (date: MaterialUiPickersDate, DateRangeDayProps: DateRangeDayProps) => JSX.Element; + renderDay?: (date: unknown, DateRangeDayProps: DateRangeDayProps) => JSX.Element; } interface DesktopDateRangeCalendarProps @@ -38,7 +37,7 @@ interface DesktopDateRangeCalendarProps DateValidationProps, ExportedArrowSwitcherProps { date: DateRange; - changeMonth: (date: MaterialUiPickersDate) => void; + changeMonth: (date: unknown) => void; currentlySelectingRangeEnd: 'start' | 'end'; } @@ -106,7 +105,7 @@ export const DateRangePickerViewDesktop: React.FC const minDate = __minDate || utils.date(defaultMinDate); const maxDate = __maxDate || utils.date(defaultMaxDate); - const [rangePreviewDay, setRangePreviewDay] = React.useState(null); + const [rangePreviewDay, setRangePreviewDay] = React.useState(null); const isNextMonthDisabled = useNextMonthDisabled(currentMonth, { disableFuture, maxDate }); const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, { disablePast, minDate }); @@ -119,14 +118,14 @@ export const DateRangePickerViewDesktop: React.FC }); const handleDayChange = React.useCallback( - (day: MaterialUiPickersDate) => { + (day: unknown) => { setRangePreviewDay(null); onChange(day); }, [onChange] ); - const handlePreviewDayChange = (newPreviewRequest: MaterialUiPickersDate) => { + const handlePreviewDayChange = (newPreviewRequest: unknown) => { if (!isWithinRange(utils, newPreviewRequest, date)) { setRangePreviewDay(newPreviewRequest); } else { diff --git a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx index c108a1186b8aa9..645ba7fa3d64bf 100644 --- a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx +++ b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx @@ -3,7 +3,6 @@ import CalendarHeader from '../views/Calendar/CalendarHeader'; import { DateRange } from './RangeTypes'; import { DateRangeDay } from './DateRangePickerDay'; import { useUtils } from '../_shared/hooks/useUtils'; -import { MaterialUiPickersDate } from '../typings/date'; import { Calendar, CalendarProps } from '../views/Calendar/Calendar'; import { ExportedArrowSwitcherProps } from '../_shared/ArrowSwitcher'; import { defaultMinDate, defaultMaxDate } from '../constants/prop-types'; @@ -24,7 +23,7 @@ interface DesktopDateRangeCalendarProps DateValidationProps, ExportedArrowSwitcherProps { date: DateRange; - changeMonth: (date: MaterialUiPickersDate) => void; + changeMonth: (date: unknown) => void; } const onlyDateView = ['date'] as ['date']; diff --git a/lib/src/DateRangePicker/RangeTypes.ts b/lib/src/DateRangePicker/RangeTypes.ts index d819dd08b69fca..b4f231b48fce44 100644 --- a/lib/src/DateRangePicker/RangeTypes.ts +++ b/lib/src/DateRangePicker/RangeTypes.ts @@ -1,14 +1,13 @@ import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { AllSharedPickerProps } from '../Picker/SharedPickerProps'; import { ExportedDateRangePickerInputProps } from './DateRangePickerInput'; -export type RangeInput = [ParsableDate, ParsableDate]; -export type DateRange = [MaterialUiPickersDate, MaterialUiPickersDate]; +export type RangeInput = [ParsableDate, ParsableDate]; +export type DateRange = [TDate | null, TDate | null]; -export type AllSharedDateRangePickerProps = Omit< - AllSharedPickerProps, - 'renderInput' +export type AllSharedDateRangePickerProps = Omit< + AllSharedPickerProps, DateRange>, + 'renderInput' | 'orientation' > & ExportedDateRangePickerInputProps; diff --git a/lib/src/DateRangePicker/date-range-manager.ts b/lib/src/DateRangePicker/date-range-manager.ts index 056c5ab3b2b5a0..9687293050b5db 100644 --- a/lib/src/DateRangePicker/date-range-manager.ts +++ b/lib/src/DateRangePicker/date-range-manager.ts @@ -1,11 +1,10 @@ -import { DateRange } from './DateRangePicker'; -import { MaterialUiPickersDate } from '../typings/date'; +import { DateRange } from './RangeTypes'; import { MuiPickersAdapter } from '../_shared/hooks/useUtils'; interface CalculateRangeChangeOptions { utils: MuiPickersAdapter; range: DateRange; - newDate: MaterialUiPickersDate; + newDate: unknown; currentlySelectingRangeEnd: 'start' | 'end'; } diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx index 464e2c0d863f98..4b9d473bea7c5f 100644 --- a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -6,7 +6,6 @@ import DateTimePickerTabs from './DateTimePickerTabs'; import { useUtils } from '../_shared/hooks/useUtils'; import { DateTimePickerView } from './DateTimePicker'; import { makeStyles } from '@material-ui/core/styles'; -import { MaterialUiPickersDate } from '../typings/date'; import { withDefaultProps } from '../_shared/withDefaultProps'; import { ToolbarComponentProps } from '../Picker/SharedPickerProps'; import { WrapperVariantContext } from '../wrappers/WrapperVariantContext'; @@ -68,7 +67,7 @@ export const DateTimePickerToolbar: React.FC = withDefaul ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667; - const formatHours = (time: MaterialUiPickersDate) => + const formatHours = (time: unknown) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); const dateText = React.useMemo(() => { diff --git a/lib/src/DateTimePicker/date-time-utils.ts b/lib/src/DateTimePicker/date-time-utils.ts index d35d5b998ca1aa..365c3770d48dab 100644 --- a/lib/src/DateTimePicker/date-time-utils.ts +++ b/lib/src/DateTimePicker/date-time-utils.ts @@ -1,12 +1,11 @@ import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { MuiPickersAdapter } from '../_shared/hooks/useUtils'; import { DateValidationProps, validateDate } from '../_helpers/date-utils'; import { TimeValidationProps, validateTime } from '../_helpers/time-utils'; export function validateDateAndTime( utils: MuiPickersAdapter, - value: MaterialUiPickersDate | ParsableDate, + value: unknown | ParsableDate, { minDate, maxDate, diff --git a/lib/src/Picker/Picker.tsx b/lib/src/Picker/Picker.tsx index d4c3e1450b9c41..953eebab24ff2c 100644 --- a/lib/src/Picker/Picker.tsx +++ b/lib/src/Picker/Picker.tsx @@ -4,9 +4,7 @@ import { useViews } from '../_shared/hooks/useViews'; import { ClockView } from '../views/Clock/ClockView'; import { makeStyles } from '@material-ui/core/styles'; import { DateTimePickerView } from '../DateTimePicker'; -import { ParsableDate } from '../constants/prop-types'; import { BasePickerProps } from '../typings/BasePicker'; -import { MaterialUiPickersDate } from '../typings/date'; import { DatePickerView } from '../DatePicker/DatePicker'; import { CalendarView } from '../views/Calendar/CalendarView'; import { withDefaultProps } from '../_shared/withDefaultProps'; @@ -35,8 +33,8 @@ export interface ExportedPickerProps export type PickerProps< TView extends AnyPickerView, - TInputValue = ParsableDate, - TDateValue = MaterialUiPickersDate + TInputValue = any, + TDateValue = any > = ExportedPickerProps & SharedPickerProps; const muiComponentConfig = { name: 'MuiPickersBasePicker' }; @@ -95,7 +93,7 @@ function Picker({ typeof showToolbar === 'undefined' ? wrapperVariant !== 'desktop' : showToolbar; const handleDateChange = React.useCallback( - (date: MaterialUiPickersDate, selectionState?: PickerSelectionState) => { + (date: unknown, selectionState?: PickerSelectionState) => { onDateChange(date, wrapperVariant, selectionState); }, [onDateChange, wrapperVariant] diff --git a/lib/src/Picker/SharedPickerProps.tsx b/lib/src/Picker/SharedPickerProps.tsx index 2ea0a12efa1c58..0fc4f88956bd12 100644 --- a/lib/src/Picker/SharedPickerProps.tsx +++ b/lib/src/Picker/SharedPickerProps.tsx @@ -1,7 +1,5 @@ import { DateTimePickerView } from '../DateTimePicker'; -import { ParsableDate } from '../constants/prop-types'; import { BasePickerProps } from '../typings/BasePicker'; -import { MaterialUiPickersDate } from '../typings/date'; import { PickerOnChangeFn } from '../_shared/hooks/useViews'; import { ExportedDateInputProps } from '../_shared/PureDateInput'; import { ExportedClockViewProps } from '../views/Clock/ClockView'; @@ -12,12 +10,12 @@ import { ExportedCalendarViewProps } from '../views/Calendar/CalendarView'; export type AnyPickerView = DateTimePickerView; -export type AllSharedPickerProps< - TInputValue = ParsableDate, - TDateValue = MaterialUiPickersDate -> = BasePickerProps & +export type AllSharedPickerProps = BasePickerProps< + TInputValue, + TDateValue +> & ExportedDateInputProps & - WithDateAdapterProps; + WithDateAdapterProps; export interface SharedPickerProps< TInputValue, @@ -49,7 +47,7 @@ export interface WithViewsProps { export type CalendarAndClockProps = ExportedCalendarViewProps & ExportedClockViewProps; export type ToolbarComponentProps< - TDate = MaterialUiPickersDate, + TDate = unknown, TView extends AnyPickerView = AnyPickerView > = CalendarAndClockProps & { ampmInClock?: boolean; diff --git a/lib/src/Picker/makePickerWithState.tsx b/lib/src/Picker/makePickerWithState.tsx index 5f4495d7b57392..a86b692d5d4327 100644 --- a/lib/src/Picker/makePickerWithState.tsx +++ b/lib/src/Picker/makePickerWithState.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Picker, { ExportedPickerProps } from './Picker'; import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { MuiPickersAdapter } from '../_shared/hooks/useUtils'; import { parsePickerInputValue } from '../_helpers/date-utils'; import { withDefaultProps } from '../_shared/withDefaultProps'; @@ -25,7 +24,7 @@ export interface MakePickerOptions { /** * Hook that running validation for the `value` and input. */ - useValidation: (value: ParsableDate, props: T) => string | null; + useValidation: (value: ParsableDate, props: T) => string | null; /** * Intercept props to override or inject default props specifically for picker. */ @@ -33,36 +32,44 @@ export interface MakePickerOptions { DefaultToolbarComponent: React.ComponentType; } -const valueManager: PickerStateValueManager = { +const valueManager: PickerStateValueManager = { emptyValue: null, parseInput: parsePickerInputValue, - areValuesEqual: (utils: MuiPickersAdapter, a: MaterialUiPickersDate, b: MaterialUiPickersDate) => - utils.isEqual(a, b), + areValuesEqual: (utils: MuiPickersAdapter, a: unknown, b: unknown) => utils.isEqual(a, b), }; +type PickerComponent< + TViewProps extends AllAvailableForOverrideProps, + TWrapper extends SomeWrapper +> = ( + props: TViewProps & + ExtendWrapper & + AllSharedPickerProps, TDate | null> & + React.RefAttributes +) => JSX.Element; + export function makePickerWithStateAndWrapper< T extends AllAvailableForOverrideProps, TWrapper extends SomeWrapper = typeof ResponsiveWrapper >( Wrapper: TWrapper, { name, useInterceptProps, useValidation, DefaultToolbarComponent }: MakePickerOptions -) { - const PickerWrapper = makeWrapperComponent( - Wrapper, - { - KeyboardDateInputComponent: KeyboardDateInput, - PureDateInputComponent: PureDateInput, - } - ); +): PickerComponent { + const WrapperComponent = makeWrapperComponent>(Wrapper, { + KeyboardDateInputComponent: KeyboardDateInput, + PureDateInputComponent: PureDateInput, + }); - function PickerWithState(__props: T & AllSharedPickerProps & ExtendWrapper) { + function PickerWithState( + __props: T & AllSharedPickerProps, TDate> & ExtendWrapper + ) { const allProps = useInterceptProps(__props) as AllPickerProps; const validationError = useValidation(allProps.value, allProps) !== null; - const { pickerProps, inputProps, wrapperProps } = usePickerState< - ParsableDate, - MaterialUiPickersDate - >(allProps, valueManager); + const { pickerProps, inputProps, wrapperProps } = usePickerState, TDate>( + allProps, + valueManager as PickerStateValueManager, TDate> + ); // Note that we are passing down all the value without spread. // It saves us >1kb gzip and make any prop available automatically on any level down. @@ -70,7 +77,7 @@ export function makePickerWithStateAndWrapper< const AllDateInputProps = { ...inputProps, ...other, validationError }; return ( - + - + ); } const FinalPickerComponent = withDefaultProps({ name }, withDateAdapterProp(PickerWithState)); + + // @ts-ignore Simply ignore generic values in props, because it is impossible + // to keep generics without additional cast when using forwardRef + // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834 return React.forwardRef>( (props, ref) => ); diff --git a/lib/src/TimePicker/TimePickerToolbar.tsx b/lib/src/TimePicker/TimePickerToolbar.tsx index 81b9157f2bac38..acaff91b9420b9 100644 --- a/lib/src/TimePicker/TimePickerToolbar.tsx +++ b/lib/src/TimePicker/TimePickerToolbar.tsx @@ -5,7 +5,6 @@ import ToolbarButton from '../_shared/ToolbarButton'; import PickerToolbar from '../_shared/PickerToolbar'; import { arrayIncludes } from '../_helpers/utils'; import { useUtils } from '../_shared/hooks/useUtils'; -import { MaterialUiPickersDate } from '../typings/date'; import { PickerOnChangeFn } from '../_shared/hooks/useViews'; import { withDefaultProps } from '../_shared/withDefaultProps'; import { useTheme, makeStyles } from '@material-ui/core/styles'; @@ -55,7 +54,7 @@ export const useStyles = makeStyles( ); export function useMeridiemMode( - date: MaterialUiPickersDate, + date: unknown, ampm: boolean | undefined, onChange: PickerOnChangeFn ) { @@ -97,7 +96,7 @@ export const TimePickerToolbar: React.FC = withDefaultPro const showAmPmControl = Boolean(ampm && !ampmInClock); const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange); - const formatHours = (time: MaterialUiPickersDate) => + const formatHours = (time: unknown) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); const separator = ( diff --git a/lib/src/__tests__/DatePicker.test.tsx b/lib/src/__tests__/DatePicker.test.tsx index 015189b6299610..b4dc70e747a71f 100644 --- a/lib/src/__tests__/DatePicker.test.tsx +++ b/lib/src/__tests__/DatePicker.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import CalendarSkeleton from '../CalendarSkeleton'; import TextField from '@material-ui/core/TextField'; import { ReactWrapper } from 'enzyme'; -import { MaterialUiPickersDate } from '../typings/date'; import { mount, utilsToUse, mountPickerWithState } from './test-utils'; import { DatePicker, @@ -178,7 +177,7 @@ it('Selected date is disabled', () => { }); it('Should not add to loading queue when synchronous', () => { - const component = mountPickerWithState(null as MaterialUiPickersDate, props => ( + const component = mountPickerWithState(null, props => ( )); diff --git a/lib/src/__tests__/DateTimePicker.test.tsx b/lib/src/__tests__/DateTimePicker.test.tsx index 26b8916b308f7a..d54500a635e035 100644 --- a/lib/src/__tests__/DateTimePicker.test.tsx +++ b/lib/src/__tests__/DateTimePicker.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import TextField from '@material-ui/core/TextField'; import { ReactWrapper } from 'enzyme'; import { mount as enzymeDefaultMount } from 'enzyme'; -import { MaterialUiPickersDate } from '../typings/date'; import { mount, utilsToUse, mountPickerWithState } from './test-utils'; import { DateTimePicker, DateTimePickerProps } from '../DateTimePicker/DateTimePicker'; @@ -102,7 +101,7 @@ describe('e2e -- Override utils using `dateAdapter`', () => { }); it('e2e - DateTimePicker empty date', () => { - const component = mountPickerWithState(null as MaterialUiPickersDate, props => ( + const component = mountPickerWithState(null, props => ( )); diff --git a/lib/src/__tests__/TimePicker.test.tsx b/lib/src/__tests__/TimePicker.test.tsx index 4bb7f051baefb5..f64101c28e8486 100644 --- a/lib/src/__tests__/TimePicker.test.tsx +++ b/lib/src/__tests__/TimePicker.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import TextField from '@material-ui/core/TextField'; import { ReactWrapper } from 'enzyme'; import { clickOKButton } from './commands'; -import { MaterialUiPickersDate } from '../typings/date'; import { mount, utilsToUse, @@ -260,9 +259,7 @@ describe('e2e - TimePicker time validation', () => { }); it('e2e - TimePicker empty date', () => { - const component = mountPickerWithState(null as MaterialUiPickersDate, props => ( - - )); + const component = mountPickerWithState(null, props => ); expect(component.find('button[data-mui-test="hours"]').text()).toBe('--'); expect(component.find('button[data-mui-test="minutes"]').text()).toBe('--'); diff --git a/lib/src/__tests__/Validation.test.tsx b/lib/src/__tests__/Validation.test.tsx index b1efb05fc8491b..60954cc2a771aa 100644 --- a/lib/src/__tests__/Validation.test.tsx +++ b/lib/src/__tests__/Validation.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import TextField from '@material-ui/core/TextField'; import { isWeekend } from 'date-fns'; import { act } from 'react-dom/test-utils'; -import { MaterialUiPickersDate } from '../typings/date'; import { DesktopDatePicker } from '../DatePicker/DatePicker'; import { mountPickerWithState, utilsToUse } from './test-utils'; import { DesktopDateRangePicker } from '../DateRangePicker/DateRangePicker'; @@ -10,7 +9,7 @@ import { TimePickerProps, DesktopTimePicker } from '../TimePicker/TimePicker'; jest.useFakeTimers(); -const disableWeekends = (date: MaterialUiPickersDate) => { +const disableWeekends = (date: unknown) => { return isWeekend(utilsToUse.toJsDate(date)); }; diff --git a/lib/src/__tests__/test-utils.tsx b/lib/src/__tests__/test-utils.tsx index f4be9929d77e92..bac4340435d7f8 100644 --- a/lib/src/__tests__/test-utils.tsx +++ b/lib/src/__tests__/test-utils.tsx @@ -7,7 +7,6 @@ import TextField from '@material-ui/core/TextField'; import LocalizationProvider from '../LocalizationProvider'; import { IUtils } from '@date-io/core/IUtils'; import { DatePickerProps } from '../DatePicker'; -import { MaterialUiPickersDate } from '../typings/date'; import { BasePickerProps } from '../typings/BasePicker'; import { createClientRender } from './createClientRender'; import { TransitionProps } from '@material-ui/core/transitions/transition'; @@ -50,7 +49,7 @@ export const FakeTransitionComponent = React.forwardRef; + utils: IUtils; } const getUtilClass = () => { @@ -67,7 +66,7 @@ const getUtilClass = () => { }; export const UtilClassToUse: any = getUtilClass(); -export const utilsToUse: IUtils = new UtilClassToUse(); +export const utilsToUse: IUtils = new UtilClassToUse(); const getComponentWithUtils =

(element: React.ReactElement

) => React.cloneElement(element, { utils: utilsToUse } as any); diff --git a/lib/src/__tests__/typescript/GenericValues.tstest.tsx b/lib/src/__tests__/typescript/GenericValues.tstest.tsx new file mode 100644 index 00000000000000..f6ecba7bb54f25 --- /dev/null +++ b/lib/src/__tests__/typescript/GenericValues.tstest.tsx @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import * as React from 'react'; +import moment, { Moment } from 'moment'; +import LuxonAdapter from '@material-ui/pickers/adapter/luxon'; +import { DateTime } from 'luxon'; +import { TextField } from '@material-ui/core'; +import { DatePicker } from '@material-ui/pickers'; +import { DateRangePicker } from '../../DateRangePicker/DateRangePicker'; + +// Allows to set date type right with generic JSX syntax + + value={new Date()} + onChange={date => date?.getDate()} + renderInput={props => } +/>; + +// Also works for DateRangePicker + + value={[new DateTime(), new DateTime()]} + onChange={date => date[0]?.set({ second: 15 })} + renderInput={props => } +/>; + +// Throws error if passed value is invalid + + // @ts-expect-error Value is invalid + value={new DateTime()} + onChange={date => date?.getDate()} + renderInput={props => } +/>; + +// Inference from the state +const InferTest = () => { + const [date, setDate] = React.useState(new DateTime()); + + return ( + setDate(date)} + renderInput={props => } + /> + ); +}; + +// Infer value type from the dateAdapter + console.log(date)} + renderInput={props => } + dateAdapter={new LuxonAdapter()} +/>; + +// Conflict between value type and date adapter causes error + console.log(date)} + renderInput={props => } + // @ts-expect-error + dateAdapter={new LuxonAdapter()} +/>; + +// Conflict between explicit generic type and date adapter causes error + + value={moment()} + onChange={date => console.log(date)} + renderInput={props => } + // @ts-expect-error + dateAdapter={new LuxonAdapter()} +/>; + +// Edge case and known issue. When the passed `value` is not a date type +// We cannot infer the type properly without explicit generic type or `dateAdapter` prop +// So in this case it is expected that type will be `null` as for now + date?.getDate()} + renderInput={props => } +/>; diff --git a/lib/src/__tests__/typescript/Overrides.tsx b/lib/src/__tests__/typescript/Overrides.tstest.tsx similarity index 100% rename from lib/src/__tests__/typescript/Overrides.tsx rename to lib/src/__tests__/typescript/Overrides.tstest.tsx diff --git a/lib/src/__tests__/typescript/ThemeDefaultProps.tsx b/lib/src/__tests__/typescript/ThemeDefaultProps.tstest.tsx similarity index 100% rename from lib/src/__tests__/typescript/ThemeDefaultProps.tsx rename to lib/src/__tests__/typescript/ThemeDefaultProps.tstest.tsx diff --git a/lib/src/_helpers/date-utils.ts b/lib/src/_helpers/date-utils.ts index eaa9bd3f94755c..2a58048354f46b 100644 --- a/lib/src/_helpers/date-utils.ts +++ b/lib/src/_helpers/date-utils.ts @@ -1,20 +1,18 @@ import { arrayIncludes } from './utils'; -import { IUtils } from '@date-io/core/IUtils'; import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { BasePickerProps } from '../typings/BasePicker'; import { DatePickerView } from '../DatePicker/DatePicker'; import { MuiPickersAdapter } from '../_shared/hooks/useUtils'; import { DateRange, RangeInput } from '../DateRangePicker/RangeTypes'; interface FindClosestDateParams { - date: MaterialUiPickersDate; - utils: IUtils; - minDate: MaterialUiPickersDate; - maxDate: MaterialUiPickersDate; + date: unknown; + utils: MuiPickersAdapter; + minDate: unknown; + maxDate: unknown; disableFuture: boolean; disablePast: boolean; - shouldDisableDate: (date: MaterialUiPickersDate) => boolean; + shouldDisableDate: (date: unknown) => boolean; } export const findClosestEnabledDate = ({ @@ -84,10 +82,7 @@ export const isYearOnlyView = (views: readonly DatePickerView[]) => export const isYearAndMonthViews = (views: readonly DatePickerView[]) => views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year'); -export const getFormatByViews = ( - views: readonly DatePickerView[], - utils: IUtils -) => { +export const getFormatByViews = (views: readonly DatePickerView[], utils: MuiPickersAdapter) => { if (isYearOnlyView(views)) { return utils.formats.year; } @@ -102,7 +97,7 @@ export const getFormatByViews = ( export function parsePickerInputValue( utils: MuiPickersAdapter, { value }: BasePickerProps -): MaterialUiPickersDate | null { +): unknown | null { const parsedValue = utils.date(value); return utils.isValid(parsedValue) ? parsedValue : null; @@ -124,45 +119,33 @@ export const isRangeValid = ( return Boolean(range && range[0] && range[1] && utils.isBefore(range[0], range[1])); }; -export const isWithinRange = ( - utils: MuiPickersAdapter, - day: MaterialUiPickersDate, - range: DateRange | null -) => { +export const isWithinRange = (utils: MuiPickersAdapter, day: unknown, range: DateRange | null) => { return isRangeValid(utils, range) && utils.isWithinRange(day, range); }; -export const isStartOfRange = ( - utils: MuiPickersAdapter, - day: MaterialUiPickersDate, - range: DateRange | null -) => { +export const isStartOfRange = (utils: MuiPickersAdapter, day: unknown, range: DateRange | null) => { return isRangeValid(utils, range) && utils.isSameDay(day, range[0]); }; -export const isEndOfRange = ( - utils: MuiPickersAdapter, - day: MaterialUiPickersDate, - range: DateRange | null -) => { +export const isEndOfRange = (utils: MuiPickersAdapter, day: unknown, range: DateRange | null) => { return isRangeValid(utils, range) && utils.isSameDay(day, range[1]); }; export interface DateValidationProps { /** - * Min selectable date. + * Min selectable date. @DateIOType * @default Date(1900-01-01) */ - minDate?: MaterialUiPickersDate; + minDate?: unknown; /** - * Max selectable date. + * Max selectable date. @DateIOType * @default Date(2099-31-12) */ - maxDate?: MaterialUiPickersDate; + maxDate?: unknown; /** - * Disable specific date @DateIOType. + * Disable specific date. @DateIOType */ - shouldDisableDate?: (day: MaterialUiPickersDate) => boolean; + shouldDisableDate?: (day: unknown) => boolean; /** * Disable past dates. * @default false @@ -177,7 +160,7 @@ export interface DateValidationProps { export const validateDate = ( utils: MuiPickersAdapter, - value: MaterialUiPickersDate | ParsableDate, + value: unknown | ParsableDate, { minDate, maxDate, disableFuture, shouldDisableDate, disablePast }: DateValidationProps ) => { const now = utils.date(); diff --git a/lib/src/_helpers/time-utils.ts b/lib/src/_helpers/time-utils.ts index 45935418582815..6ad21b62ceb0ed 100644 --- a/lib/src/_helpers/time-utils.ts +++ b/lib/src/_helpers/time-utils.ts @@ -1,14 +1,9 @@ -import { IUtils } from '@date-io/core/IUtils'; import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { MuiPickersAdapter } from '../_shared/hooks/useUtils'; type Meridiem = 'am' | 'pm' | null; -export const getMeridiem = ( - date: MaterialUiPickersDate, - utils: IUtils -): Meridiem => { +export const getMeridiem = (date: unknown, utils: MuiPickersAdapter): Meridiem => { if (!date) { return null; } @@ -28,10 +23,10 @@ export const convertValueToMeridiem = (value: number, meridiem: Meridiem, ampm: }; export const convertToMeridiem = ( - time: MaterialUiPickersDate, + time: unknown, meridiem: 'am' | 'pm', ampm: boolean, - utils: IUtils + utils: MuiPickersAdapter ) => { const newHoursAmount = convertValueToMeridiem(utils.getHours(time), meridiem, ampm); return utils.setHours(time, newHoursAmount); @@ -93,14 +88,14 @@ export const getHours = (offsetX: number, offsetY: number, ampm: boolean) => { return value; }; -export function getSecondsInDay(date: MaterialUiPickersDate, utils: MuiPickersAdapter) { +export function getSecondsInDay(date: unknown, utils: MuiPickersAdapter) { return utils.getHours(date) * 3600 + utils.getMinutes(date) * 60 + utils.getSeconds(date); } export const createIsAfterIgnoreDatePart = ( disableIgnoringDatePartForTimeValidation: boolean, utils: MuiPickersAdapter -) => (dateLeft: MaterialUiPickersDate, dateRight: MaterialUiPickersDate) => { +) => (dateLeft: unknown, dateRight: unknown) => { if (disableIgnoringDatePartForTimeValidation) { return utils.isAfter(dateLeft, dateRight); } @@ -113,12 +108,12 @@ export interface TimeValidationProps { * Min time acceptable time. * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified. */ - minTime?: MaterialUiPickersDate; + minTime?: unknown; /** * Max time acceptable time. * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified. */ - maxTime?: MaterialUiPickersDate; + maxTime?: unknown; /** * Dynamically check if time is disabled or not. * If returns `false` appropriate time point will ot be acceptable. @@ -133,7 +128,7 @@ export interface TimeValidationProps { export const validateTime = ( utils: MuiPickersAdapter, - value: MaterialUiPickersDate | ParsableDate, + value: unknown | ParsableDate, { minTime, maxTime, diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx index d47ef77704e126..7bccd0da502f29 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import { onSpaceOrEnter } from '../_helpers/utils'; import { ParsableDate } from '../constants/prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; import { TextFieldProps } from '@material-ui/core/TextField'; import { IconButtonProps } from '@material-ui/core/IconButton'; import { useUtils, MuiPickersAdapter } from './hooks/useUtils'; @@ -11,7 +10,7 @@ import { getDisplayDate, getTextFieldAriaText } from '../_helpers/text-field-hel export type MuiTextFieldProps = TextFieldProps | Omit; -export interface DateInputProps { +export interface DateInputProps, TDateValue = unknown> { open: boolean; rawValue: TInputValue; inputFormat: string; @@ -74,7 +73,7 @@ export interface DateInputProps `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}` */ getOpenDialogAriaText?: (value: ParsableDate, utils: MuiPickersAdapter) => string; diff --git a/lib/src/_shared/hooks/date-helpers-hooks.tsx b/lib/src/_shared/hooks/date-helpers-hooks.tsx index 2c77c4b20f7ff6..4dc855cb9a752b 100644 --- a/lib/src/_shared/hooks/date-helpers-hooks.tsx +++ b/lib/src/_shared/hooks/date-helpers-hooks.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { useUtils } from './useUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; -export function useParsedDate(possiblyUnparsedValue: any): MaterialUiPickersDate | undefined { +export function useParsedDate(possiblyUnparsedValue: any): unknown | undefined { const utils = useUtils(); return React.useMemo( () => @@ -14,12 +13,12 @@ export function useParsedDate(possiblyUnparsedValue: any): MaterialUiPickersDate interface MonthValidationOptions { disablePast?: boolean; disableFuture?: boolean; - minDate: MaterialUiPickersDate; - maxDate: MaterialUiPickersDate; + minDate: unknown; + maxDate: unknown; } export function useNextMonthDisabled( - month: MaterialUiPickersDate, + month: unknown, { disableFuture, maxDate }: Pick ) { const utils = useUtils(); @@ -33,7 +32,7 @@ export function useNextMonthDisabled( } export function usePreviousMonthDisabled( - month: MaterialUiPickersDate, + month: unknown, { disablePast, minDate }: Pick ) { const utils = useUtils(); diff --git a/lib/src/_shared/hooks/useUtils.ts b/lib/src/_shared/hooks/useUtils.ts index df815ec35e5704..cca3ea61f69a68 100644 --- a/lib/src/_shared/hooks/useUtils.ts +++ b/lib/src/_shared/hooks/useUtils.ts @@ -1,12 +1,11 @@ import { useContext, useRef } from 'react'; import { IUtils } from '@date-io/core/IUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; import { MuiPickersAdapterContext } from '../../LocalizationProvider'; -export type MuiPickersAdapter = IUtils; +export type MuiPickersAdapter = IUtils; // TODO uncomment when syntax will be allowed by next babel -function checkUtils(utils: MuiPickersAdapter | null) /* : asserts utils is MuiPickersUtils */ { +function checkUtils(utils: MuiPickersAdapter | null): asserts utils is MuiPickersAdapter { if (!utils) { throw new Error( 'Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.' @@ -18,7 +17,7 @@ export function useUtils() { const utils = useContext(MuiPickersAdapterContext); checkUtils(utils); - return utils!; + return utils; } export function useNow() { diff --git a/lib/src/_shared/hooks/useViews.tsx b/lib/src/_shared/hooks/useViews.tsx index 90a239e0f0d964..1075cc1654785d 100644 --- a/lib/src/_shared/hooks/useViews.tsx +++ b/lib/src/_shared/hooks/useViews.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { arrayIncludes } from '../../_helpers/utils'; import { PickerSelectionState } from './usePickerState'; -import { MaterialUiPickersDate } from '../../typings/date'; + import { AnyPickerView } from '../../Picker/SharedPickerProps'; -export type PickerOnChangeFn = ( +export type PickerOnChangeFn = ( date: TDate, selectionState?: PickerSelectionState ) => void; @@ -47,7 +47,7 @@ export function useViews({ }, [nextView, setOpenView]); const handleChangeAndOpenNext = React.useCallback( - (date: MaterialUiPickersDate, currentViewSelectionState?: PickerSelectionState) => { + (date: unknown, currentViewSelectionState?: PickerSelectionState) => { const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish'; const globalSelectionState = isSelectionFinishedOnCurrentView && Boolean(nextView) diff --git a/lib/src/_shared/withDateAdapterProp.tsx b/lib/src/_shared/withDateAdapterProp.tsx index 9911a238cce4dd..d1cde2364ededf 100644 --- a/lib/src/_shared/withDateAdapterProp.tsx +++ b/lib/src/_shared/withDateAdapterProp.tsx @@ -2,27 +2,27 @@ import * as React from 'react'; import { MuiPickersAdapter } from './hooks/useUtils'; import { MuiPickersAdapterContext } from '../LocalizationProvider'; -export interface WithDateAdapterProps { +export interface WithDateAdapterProps { /** * Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing) * ```jsx * dateAdapter={new DateFnsAdapter({ locale: ruLocale })} * ``` */ - dateAdapter?: MuiPickersAdapter; + dateAdapter?: MuiPickersAdapter; } -export function withDateAdapterProp( - Component: React.ComponentType -): React.FC { - return ({ dateAdapter, ...other }: T & WithDateAdapterProps) => { +export function withDateAdapterProp( + Component: React.ComponentType +): React.FC> { + return ({ dateAdapter, ...other }: TProps & WithDateAdapterProps) => { if (dateAdapter) { return ( - + ); } - return ; + return ; }; } diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts index 7a163311c26b50..68a90f696dfbd8 100644 --- a/lib/src/constants/prop-types.ts +++ b/lib/src/constants/prop-types.ts @@ -1,5 +1,4 @@ import * as PropTypes from 'prop-types'; -import { MaterialUiPickersDate } from '../typings/date'; export const date = PropTypes.oneOfType([ PropTypes.object, @@ -10,7 +9,7 @@ export const date = PropTypes.oneOfType([ const datePickerView = PropTypes.oneOf(['year', 'month', 'day']); -export type ParsableDate = string | number | Date | null | undefined | MaterialUiPickersDate; +export type ParsableDate = string | number | Date | null | undefined | TDate; export const DomainPropTypes = { date, datePickerView }; diff --git a/lib/src/index.ts b/lib/src/index.ts index 6179692d97327b..30081476c980dc 100644 --- a/lib/src/index.ts +++ b/lib/src/index.ts @@ -30,7 +30,6 @@ export { useUtils } from './_shared/hooks/useUtils'; export { usePickerState } from './_shared/hooks/usePickerState'; -export * from './typings/date'; export * from './typings/BasePicker'; export { @@ -48,5 +47,5 @@ export type ClockProps = import('./views/Clock/Clock').ClockProps; export type ToolbarComponentProps = import('./Picker/SharedPickerProps').ToolbarComponentProps; export type DateRangeDelimiterProps = import('./DateRangePicker/DateRangeDelimiter').DateRangeDelimiterProps; export type LocalizationProviderProps = import('./LocalizationProvider').LocalizationProviderProps; -export type DateRange = import('./DateRangePicker/RangeTypes').DateRange; +export type DateRange = import('./DateRangePicker/RangeTypes').DateRange; export type RangeInput = import('./DateRangePicker/RangeTypes').RangeInput; diff --git a/lib/src/typings/BasePicker.tsx b/lib/src/typings/BasePicker.tsx index ceb3246eb00f64..a4e5d327373a6c 100644 --- a/lib/src/typings/BasePicker.tsx +++ b/lib/src/typings/BasePicker.tsx @@ -1,11 +1,7 @@ -import { MaterialUiPickersDate } from './date'; import { ParsableDate } from '../constants/prop-types'; import { ToolbarComponentProps } from '../Picker/SharedPickerProps'; -export interface BasePickerProps< - TInputValue = ParsableDate, - TDateValue = MaterialUiPickersDate | null -> { +export interface BasePickerProps { /** * Picker value. */ @@ -34,7 +30,7 @@ export interface BasePickerProps< /** * Callback fired when date is accepted @DateIOType. */ - onAccept?: (date: TDateValue) => void; + onAccept?: (date: TDateValue | null) => void; /** * On open callback. */ diff --git a/lib/src/typings/date.ts b/lib/src/typings/date.ts deleted file mode 100644 index 5556effbd1e27f..00000000000000 --- a/lib/src/typings/date.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DateType } from '@date-io/type'; - -export type MaterialUiPickersDate = DateType | null; diff --git a/lib/src/typings/index.ts b/lib/src/typings/index.ts index 45e992ec62318f..fb7e4e5466a87d 100644 --- a/lib/src/typings/index.ts +++ b/lib/src/typings/index.ts @@ -1,3 +1,2 @@ -export * from './date'; export * from './overrides'; export * from './props'; diff --git a/lib/src/views/Calendar/Calendar.tsx b/lib/src/views/Calendar/Calendar.tsx index e6ad52ec375c61..2299f57f6c22e8 100644 --- a/lib/src/views/Calendar/Calendar.tsx +++ b/lib/src/views/Calendar/Calendar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; import { Day, DayProps } from './Day'; -import { MaterialUiPickersDate } from '../../typings/date'; + import { useUtils, useNow } from '../../_shared/hooks/useUtils'; import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; import { makeStyles, useTheme } from '@material-ui/core/styles'; @@ -21,11 +21,7 @@ export interface ExportedCalendarProps /** * Custom renderer for day. Check [DayComponentProps api](https://material-ui-pickers.dev/api/Day) @DateIOType. */ - renderDay?: ( - day: MaterialUiPickersDate, - selectedDates: MaterialUiPickersDate[], - DayComponentProps: DayProps - ) => JSX.Element; + renderDay?: (day: unknown, selectedDates: unknown[], DayComponentProps: DayProps) => JSX.Element; /** * Enables keyboard listener for moving between days in calendar. * @default currentWrapper !== 'static' @@ -45,13 +41,13 @@ export interface ExportedCalendarProps } export interface CalendarProps extends ExportedCalendarProps { - date: MaterialUiPickersDate | MaterialUiPickersDate[]; - isDateDisabled: (day: MaterialUiPickersDate) => boolean; + date: unknown | unknown[]; + isDateDisabled: (day: unknown) => boolean; slideDirection: SlideDirection; - currentMonth: MaterialUiPickersDate; + currentMonth: unknown; reduceAnimations: boolean; - focusedDay: MaterialUiPickersDate | null; - changeFocusedDay: (newFocusedDay: MaterialUiPickersDate) => void; + focusedDay: unknown | null; + changeFocusedDay: (newFocusedDay: unknown) => void; isMonthSwitchingAnimating: boolean; onMonthSwitchingAnimationEnd: () => void; TransitionProps?: Partial; @@ -132,7 +128,7 @@ export const Calendar: React.FC = withDefaultProps( const classes = useStyles(); const handleDaySelect = React.useCallback( - (day: MaterialUiPickersDate, isFinish: PickerSelectionState = 'finish') => { + (day: unknown, isFinish: PickerSelectionState = 'finish') => { // TODO possibly buggy line figure out and add tests const finalDate = Array.isArray(date) ? day : utils.mergeDateAndTime(day, date || now); diff --git a/lib/src/views/Calendar/CalendarHeader.tsx b/lib/src/views/Calendar/CalendarHeader.tsx index 7f9e5ad7698ac4..d47768b5c57c47 100644 --- a/lib/src/views/Calendar/CalendarHeader.tsx +++ b/lib/src/views/Calendar/CalendarHeader.tsx @@ -8,7 +8,6 @@ import { DatePickerView } from '../../DatePicker'; import { SlideDirection } from './SlideTransition'; import { makeStyles } from '@material-ui/core/styles'; import { useUtils } from '../../_shared/hooks/useUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; import { FadeTransitionGroup } from './FadeTransitionGroup'; import { DateValidationProps } from '../../_helpers/date-utils'; import { ArrowDropDownIcon } from '../../_shared/icons/ArrowDropDownIcon'; @@ -23,16 +22,16 @@ export interface CalendarHeaderProps Omit { view: DatePickerView; views: DatePickerView[]; - currentMonth: MaterialUiPickersDate; + currentMonth: unknown; /** * Get aria-label text for switching between views button. */ getViewSwitchingButtonText?: (currentView: DatePickerView) => string; reduceAnimations: boolean; changeView: (view: DatePickerView) => void; - minDate: MaterialUiPickersDate; - maxDate: MaterialUiPickersDate; - onMonthChange: (date: MaterialUiPickersDate, slideDirection: SlideDirection) => void; + minDate: unknown; + maxDate: unknown; + onMonthChange: (date: unknown, slideDirection: SlideDirection) => void; } export const useStyles = makeStyles( diff --git a/lib/src/views/Calendar/CalendarView.tsx b/lib/src/views/Calendar/CalendarView.tsx index ffa248c081829f..1d9be8ee0fe337 100644 --- a/lib/src/views/Calendar/CalendarView.tsx +++ b/lib/src/views/Calendar/CalendarView.tsx @@ -4,7 +4,7 @@ import { DatePickerView } from '../../DatePicker'; import { useCalendarState } from './useCalendarState'; import { makeStyles } from '@material-ui/core/styles'; import { useUtils } from '../../_shared/hooks/useUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; + import { FadeTransitionGroup } from './FadeTransitionGroup'; import { Calendar, ExportedCalendarProps } from './Calendar'; import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; @@ -32,7 +32,7 @@ export interface CalendarViewProps ExportedCalendarProps, ExportedYearSelectionProps, PublicCalendarHeaderProps { - date: MaterialUiPickersDate; + date: unknown; view: DatePickerView; views: DatePickerView[]; changeView: (view: DatePickerView) => void; @@ -43,9 +43,9 @@ export interface CalendarViewProps */ reduceAnimations?: boolean; /** - * Callback firing on month change. + * Callback firing on month change. @DateIOType */ - onMonthChange?: (date: MaterialUiPickersDate) => void; + onMonthChange?: (date: unknown) => void; } export type ExportedCalendarViewProps = Omit< diff --git a/lib/src/views/Calendar/Day.tsx b/lib/src/views/Calendar/Day.tsx index 58c5c9c55c03e6..6e01c1af536227 100644 --- a/lib/src/views/Calendar/Day.tsx +++ b/lib/src/views/Calendar/Day.tsx @@ -5,7 +5,6 @@ import ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase'; import { ExtendMui } from '../../typings/helpers'; import { onSpaceOrEnter } from '../../_helpers/utils'; import { useUtils } from '../../_shared/hooks/useUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; import { makeStyles, fade } from '@material-ui/core/styles'; import { DAY_SIZE, DAY_MARGIN } from '../../constants/dimensions'; import { withDefaultProps } from '../../_shared/withDefaultProps'; @@ -77,7 +76,7 @@ export interface DayProps extends ExtendMui { /** * The date to show. */ - day: MaterialUiPickersDate; + day: unknown; /** * Is focused by keyboard navigation. */ @@ -124,8 +123,8 @@ export interface DayProps extends ExtendMui { * @default false */ disableHighlightToday?: boolean; - onDayFocus: (day: MaterialUiPickersDate) => void; - onDaySelect: (day: MaterialUiPickersDate, isFinish: PickerSelectionState) => void; + onDayFocus: (day: unknown) => void; + onDaySelect: (day: unknown, isFinish: PickerSelectionState) => void; } const PureDay: React.FC = ({ diff --git a/lib/src/views/Calendar/MonthSelection.tsx b/lib/src/views/Calendar/MonthSelection.tsx index 6506323b40e5e6..6460a9a2317db4 100644 --- a/lib/src/views/Calendar/MonthSelection.tsx +++ b/lib/src/views/Calendar/MonthSelection.tsx @@ -3,17 +3,16 @@ import Month from './Month'; import { makeStyles } from '@material-ui/core/styles'; import { useUtils } from '../../_shared/hooks/useUtils'; import { ParsableDate } from '../../constants/prop-types'; -import { MaterialUiPickersDate } from '../../typings/date'; import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; export interface MonthSelectionProps { - date: MaterialUiPickersDate; + date: unknown; minDate?: ParsableDate; maxDate?: ParsableDate; onChange: PickerOnChangeFn; disablePast?: boolean | null | undefined; disableFuture?: boolean | null | undefined; - onMonthChange?: (date: MaterialUiPickersDate) => void | Promise; + onMonthChange?: (date: unknown) => void | Promise; } export const useStyles = makeStyles( @@ -41,7 +40,7 @@ export const MonthSelection: React.FC = ({ const classes = useStyles(); const currentMonth = utils.getMonth(date); - const shouldDisableMonth = (month: MaterialUiPickersDate) => { + const shouldDisableMonth = (month: unknown) => { const now = utils.date(); const utilMinDate = utils.date(minDate); const utilMaxDate = utils.date(maxDate); diff --git a/lib/src/views/Calendar/YearSelection.tsx b/lib/src/views/Calendar/YearSelection.tsx index 58f94442432244..6dd6dff94df40c 100644 --- a/lib/src/views/Calendar/YearSelection.tsx +++ b/lib/src/views/Calendar/YearSelection.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import Year from './Year'; -import { MaterialUiPickersDate } from '../../typings/date'; import { useUtils, useNow } from '../../_shared/hooks/useUtils'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; @@ -13,23 +12,23 @@ export interface ExportedYearSelectionProps { /** * Callback firing on year change @DateIOType. */ - onYearChange?: (date: MaterialUiPickersDate) => void; + onYearChange?: (date: unknown) => void; /** * Disable specific years dynamically. * Works like `shouldDisableDate` but for year selection view. @DateIOType. */ - shouldDisableYear?: (day: MaterialUiPickersDate) => boolean; + shouldDisableYear?: (day: unknown) => boolean; } export interface YearSelectionProps extends ExportedYearSelectionProps { allowKeyboardControl?: boolean; - changeFocusedDay: (day: MaterialUiPickersDate) => void; - date: MaterialUiPickersDate; + changeFocusedDay: (day: unknown) => void; + date: unknown; disableFuture?: boolean | null | undefined; disablePast?: boolean | null | undefined; - isDateDisabled: (day: MaterialUiPickersDate) => boolean; - maxDate: MaterialUiPickersDate; - minDate: MaterialUiPickersDate; + isDateDisabled: (day: unknown) => boolean; + maxDate: unknown; + minDate: unknown; onChange: PickerOnChangeFn; } @@ -73,7 +72,7 @@ export const YearSelection: React.FC = ({ const handleYearSelection = React.useCallback( (year: number, isFinish: PickerSelectionState = 'finish') => { - const submitDate = (newDate: MaterialUiPickersDate) => { + const submitDate = (newDate: unknown) => { onChange(newDate, isFinish); changeFocusedDay(newDate); diff --git a/lib/src/views/Calendar/useCalendarState.tsx b/lib/src/views/Calendar/useCalendarState.tsx index 3ba3de3831a05f..f5f39254d9d653 100644 --- a/lib/src/views/Calendar/useCalendarState.tsx +++ b/lib/src/views/Calendar/useCalendarState.tsx @@ -2,13 +2,12 @@ import * as React from 'react'; import { CalendarViewProps } from './CalendarView'; import { SlideDirection } from './SlideTransition'; import { validateDate } from '../../_helpers/date-utils'; -import { MaterialUiPickersDate } from '../../typings/date'; import { MuiPickersAdapter, useUtils, useNow } from '../../_shared/hooks/useUtils'; interface CalendarState { isMonthSwitchingAnimating: boolean; - currentMonth: MaterialUiPickersDate; - focusedDay: MaterialUiPickersDate | null; + currentMonth: unknown; + focusedDay: unknown | null; slideDirection: SlideDirection; } @@ -16,7 +15,7 @@ type ReducerAction = { type: TType } & TAdditional; interface ChangeMonthPayload { direction: SlideDirection; - newMonth: MaterialUiPickersDate; + newMonth: unknown; } export const createCalendarStateReducer = ( @@ -28,7 +27,7 @@ export const createCalendarStateReducer = ( action: | ReducerAction<'finishMonthSwitchingAnimation'> | ReducerAction<'changeMonth', ChangeMonthPayload> - | ReducerAction<'changeFocusedDay', { focusedDay: MaterialUiPickersDate }> + | ReducerAction<'changeFocusedDay', { focusedDay: unknown }> ): CalendarState => { switch (action.type) { case 'changeMonth': { @@ -72,8 +71,8 @@ type CalendarStateInput = Pick< | 'reduceAnimations' | 'onMonthChange' > & { - minDate: MaterialUiPickersDate; - maxDate: MaterialUiPickersDate; + minDate: unknown; + maxDate: unknown; disableSwitchToMonthOnDayFocus?: boolean; }; @@ -117,7 +116,7 @@ export function useCalendarState({ ); const changeMonth = React.useCallback( - (newDate: MaterialUiPickersDate) => { + (newDate: unknown) => { const newDateRequested = newDate ?? now; if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) { return; @@ -134,7 +133,7 @@ export function useCalendarState({ ); const isDateDisabled = React.useCallback( - (day: MaterialUiPickersDate) => + (day: unknown) => validateDate(utils, day, { disablePast, disableFuture, @@ -150,7 +149,7 @@ export function useCalendarState({ }, []); const changeFocusedDay = React.useCallback( - (newFocusedDate: MaterialUiPickersDate) => { + (newFocusedDate: unknown) => { if (!isDateDisabled(newFocusedDate)) { dispatch({ type: 'changeFocusedDay', focusedDay: newFocusedDate }); } diff --git a/lib/src/views/Clock/Clock.tsx b/lib/src/views/Clock/Clock.tsx index eb190572e62412..f6b06526147420 100644 --- a/lib/src/views/Clock/Clock.tsx +++ b/lib/src/views/Clock/Clock.tsx @@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/core/styles'; import { useUtils } from '../../_shared/hooks/useUtils'; import { VIEW_HEIGHT } from '../../constants/dimensions'; import { ClockViewType } from '../../constants/ClockType'; -import { MaterialUiPickersDate } from '../../typings/date'; + import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; import { getHours, getMinutes } from '../../_helpers/time-utils'; import { withDefaultProps } from '../../_shared/withDefaultProps'; @@ -18,7 +18,7 @@ import { useGlobalKeyDown, keycode } from '../../_shared/hooks/useKeyDown'; import { WrapperVariantContext } from '../../wrappers/WrapperVariantContext'; export interface ClockProps extends ReturnType { - date: MaterialUiPickersDate; + date: unknown; type: ClockViewType; value: number; isTimeDisabled: (timeValue: number, type: ClockViewType) => boolean; diff --git a/lib/src/views/Clock/ClockNumbers.tsx b/lib/src/views/Clock/ClockNumbers.tsx index 2ff80c378f58c3..d540003551d6ab 100644 --- a/lib/src/views/Clock/ClockNumbers.tsx +++ b/lib/src/views/Clock/ClockNumbers.tsx @@ -1,16 +1,15 @@ import * as React from 'react'; import ClockNumber from './ClockNumber'; -import { IUtils } from '@date-io/core/IUtils'; -import { MaterialUiPickersDate } from '../../typings/date'; +import { MuiPickersAdapter } from '../../_shared/hooks/useUtils'; import { PickerSelectionState } from '../../_shared/hooks/usePickerState'; interface GetHourNumbersOptions { ampm: boolean; - date: MaterialUiPickersDate; + date: unknown; getClockNumberText: (hour: string) => string; isDisabled: (value: number) => boolean; onChange: (value: number, isFinish?: PickerSelectionState) => void; - utils: IUtils; + utils: MuiPickersAdapter; } export const getHourNumbers = ({ diff --git a/lib/src/views/Clock/ClockView.tsx b/lib/src/views/Clock/ClockView.tsx index 49152ce5ea73d0..a485457c559369 100644 --- a/lib/src/views/Clock/ClockView.tsx +++ b/lib/src/views/Clock/ClockView.tsx @@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'; import { Clock } from './Clock'; import { pipe } from '../../_helpers/utils'; import { makeStyles } from '@material-ui/core/styles'; -import { MaterialUiPickersDate } from '../../typings/date'; + import { useUtils, useNow } from '../../_shared/hooks/useUtils'; import { PickerOnChangeFn } from '../../_shared/hooks/useViews'; import { withDefaultProps } from '../../_shared/withDefaultProps'; @@ -44,7 +44,7 @@ export interface ClockViewProps extends ExportedClockViewProps, ExportedArrowSwi /** * Selected date @DateIOType. */ - date: MaterialUiPickersDate; + date: unknown; /** * Clock type. */ @@ -128,9 +128,7 @@ const _ClockView: React.FC = ({ const isTimeDisabled = React.useCallback( (rawValue: number, type: 'hours' | 'minutes' | 'seconds') => { - const validateTimeValue = ( - getRequestedTimePoint: (when: 'start' | 'end') => MaterialUiPickersDate - ) => { + const validateTimeValue = (getRequestedTimePoint: (when: 'start' | 'end') => unknown) => { const isAfterComparingFn = createIsAfterIgnoreDatePart( Boolean(disableIgnoringDatePartForTimeValidation), utils diff --git a/lib/src/wrappers/makeWrapperComponent.tsx b/lib/src/wrappers/makeWrapperComponent.tsx index e02db38c1e7e0e..3e76cabbb7ac9a 100644 --- a/lib/src/wrappers/makeWrapperComponent.tsx +++ b/lib/src/wrappers/makeWrapperComponent.tsx @@ -18,16 +18,14 @@ interface WithWrapperProps { /* Creates a component that rendering modal/popover/nothing and spreading props down to text field */ export function makeWrapperComponent< - TInputProps extends DateInputPropsLike, - TInputValue, - TDateValue, + TInputProps extends DateInputPropsLike, TWrapper extends SomeWrapper = any >( Wrapper: TWrapper, { KeyboardDateInputComponent, PureDateInputComponent }: MakePickerOptions ) { function WrapperComponent( - props: Partial> & + props: Partial> & WithWrapperProps & Partial & StaticWrapperProps> ) {