diff --git a/docs/pages/demo/datepicker/CustomInput.example.jsx b/docs/pages/demo/datepicker/CustomInput.example.jsx index d3e49e496..190110966 100644 --- a/docs/pages/demo/datepicker/CustomInput.example.jsx +++ b/docs/pages/demo/datepicker/CustomInput.example.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { styled } from '@material-ui/core'; +import { styled } from '@material-ui/core/styles'; import { DesktopDatePicker } from '@material-ui/pickers'; const InputContainer = styled('div')({ diff --git a/docs/prop-types.json b/docs/prop-types.json index c6fa06773..2b426f14c 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -858,7 +858,7 @@ }, "renderInput": { "defaultValue": null, - "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -1559,7 +1559,7 @@ }, "renderInput": { "defaultValue": null, - "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -2597,7 +2597,7 @@ }, "renderInput": { "defaultValue": null, - "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -3455,7 +3455,7 @@ }, "renderInput": { "defaultValue": null, - "description": "Render input component for date range. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\n (\n<>\n\n to \n\n;\n)}\n/>\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api),\nthat you need to forward to the range start/end inputs respectively.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\n (\n <>\n \n to \n \n ;\n)}\n/>\n````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerInput.tsx", diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index 05f5f4c2f..a48f2f19b 100644 --- a/lib/.size-snapshot.json +++ b/lib/.size-snapshot.json @@ -1,26 +1,21 @@ { "build/dist/material-ui-pickers.esm.js": { - "bundled": 189105, - "minified": 101411, - "gzipped": 26429, + "bundled": 190258, + "minified": 102356, + "gzipped": 26649, "treeshaked": { "rollup": { - "code": 83443, + "code": 83408, "import_statements": 2121 }, "webpack": { - "code": 92919 + "code": 92884 } } }, "build/dist/material-ui-pickers.umd.js": { - "bundled": 300017, - "minified": 117022, - "gzipped": 33387 - }, - "build/dist/material-ui-pickers.umd.min.js": { - "bundled": 258671, - "minified": 107883, - "gzipped": 30626 + "bundled": 301162, + "minified": 117618, + "gzipped": 33567 } } diff --git a/lib/src/DateRangePicker/DateRangePicker.tsx b/lib/src/DateRangePicker/DateRangePicker.tsx index 41a036469..5b6d04b66 100644 --- a/lib/src/DateRangePicker/DateRangePicker.tsx +++ b/lib/src/DateRangePicker/DateRangePicker.tsx @@ -1,4 +1,6 @@ import * as React from 'react'; +import * as PropTypes from 'prop-types'; +import { date } from '../constants/prop-types'; import { useUtils } from '../_shared/hooks/useUtils'; import { MobileWrapper } from '../wrappers/MobileWrapper'; import { DateRangeInputProps } from './DateRangePickerInput'; @@ -128,6 +130,13 @@ export function makeRangePicker(Wrapper: TWrapper) ); } + RangePickerWithStateAndWrapper.propTypes = { + value: PropTypes.arrayOf(date).isRequired, + onChange: PropTypes.func.isRequired, + startText: PropTypes.node, + endText: PropTypes.node, + }; + return React.forwardRef< HTMLDivElement, React.ComponentProps diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 5bdb56933..3e041dd3b 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as PropTypes from 'prop-types'; import { RangeInput, DateRange } from './RangeTypes'; import { useUtils } from '../_shared/hooks/useUtils'; import { makeStyles } from '@material-ui/core/styles'; @@ -32,8 +33,12 @@ export const useStyles = makeStyles( export interface ExportedDateRangePickerInputProps { /** - * Render input component for date range. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props - * @example ```jsx + * The `renderInput` prop allows you to customize the rendered input. + * The `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api), + * that you need to forward to the range start/end inputs respectively. + * Pay specific attention to the `ref` and `inputProps` keys. + * @example + * ```jsx * ( <> @@ -183,3 +188,13 @@ export const DateRangePickerInput: React.FC = ({ ); }; + +DateRangePickerInput.propTypes = { + acceptRegex: PropTypes.instanceOf(RegExp), + getOpenDialogAriaText: PropTypes.func, + mask: PropTypes.string, + OpenPickerButtonProps: PropTypes.object, + openPickerIcon: PropTypes.node, + renderInput: PropTypes.func.isRequired, + rifmFormatter: PropTypes.func, +}; diff --git a/lib/src/DateRangePicker/DateRangePickerView.tsx b/lib/src/DateRangePicker/DateRangePickerView.tsx index 705a362a0..eda98ca70 100644 --- a/lib/src/DateRangePicker/DateRangePickerView.tsx +++ b/lib/src/DateRangePicker/DateRangePickerView.tsx @@ -1,4 +1,5 @@ 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'; @@ -212,3 +213,8 @@ export const DateRangePickerView: React.FC = ({ ); }; + +DateRangePickerView.propTypes = { + disableAutoMonthSwitching: PropTypes.bool, + calendars: PropTypes.oneOf([1, 2, 3]), +}; diff --git a/lib/src/Picker/Picker.tsx b/lib/src/Picker/Picker.tsx index 123f027a8..92a59683d 100644 --- a/lib/src/Picker/Picker.tsx +++ b/lib/src/Picker/Picker.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import clsx from 'clsx'; -import KeyboardDateInput from '../_shared/KeyboardDateInput'; import { useViews } from '../_shared/hooks/useViews'; import { makeStyles } from '@material-ui/core/styles'; import { DateTimePickerView } from '../DateTimePicker'; @@ -8,6 +7,7 @@ import { ParsableDate } from '../constants/prop-types'; import { BasePickerProps } from '../typings/BasePicker'; import { MaterialUiPickersDate } from '../typings/date'; import { DatePickerView } from '../DatePicker/DatePicker'; +import { KeyboardDateInput } from '../_shared/KeyboardDateInput'; import { useIsLandscape } from '../_shared/hooks/useIsLandscape'; import { DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions'; import { WrapperVariantContext } from '../wrappers/WrapperVariantContext'; diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx index a3f6bee27..9238321ad 100644 --- a/lib/src/_shared/KeyboardDateInput.tsx +++ b/lib/src/_shared/KeyboardDateInput.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as PropTypes from 'prop-types'; import IconButton from '@material-ui/core/IconButton'; import InputAdornment from '@material-ui/core/InputAdornment'; import { useUtils } from './hooks/useUtils'; @@ -50,4 +51,12 @@ export const KeyboardDateInput: React.FC = ({ }); }; -export default KeyboardDateInput; +KeyboardDateInput.propTypes = { + renderInput: PropTypes.func.isRequired, + mask: PropTypes.string, + rifmFormatter: PropTypes.func, + openPickerIcon: PropTypes.node, + OpenPickerButtonProps: PropTypes.object, + acceptRegex: PropTypes.instanceOf(RegExp), + getOpenDialogAriaText: PropTypes.func, +}; diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx index b54d4f268..4c093e18c 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -1,4 +1,5 @@ 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'; @@ -27,7 +28,9 @@ export interface DateInputProps } * ```` @@ -136,4 +139,12 @@ export const PureDateInput: React.FC = ({ }); }; -PureDateInput.displayName = 'PureDateInput'; +PureDateInput.propTypes = { + acceptRegex: PropTypes.instanceOf(RegExp), + getOpenDialogAriaText: PropTypes.func, + mask: PropTypes.string, + OpenPickerButtonProps: PropTypes.object, + openPickerIcon: PropTypes.node, + renderInput: PropTypes.func.isRequired, + rifmFormatter: PropTypes.func, +}; diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts index 15ffe4d8e..eed9ec155 100644 --- a/lib/src/constants/prop-types.ts +++ b/lib/src/constants/prop-types.ts @@ -1,7 +1,7 @@ import * as PropTypes from 'prop-types'; import { MaterialUiPickersDate } from '../typings/date'; -const date = PropTypes.oneOfType([ +export const date = PropTypes.oneOfType([ PropTypes.object, PropTypes.string, PropTypes.number, diff --git a/lib/src/wrappers/DesktopWrapper.tsx b/lib/src/wrappers/DesktopWrapper.tsx index 9e67fc289..029b40c78 100644 --- a/lib/src/wrappers/DesktopWrapper.tsx +++ b/lib/src/wrappers/DesktopWrapper.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import KeyboardDateInput from '../_shared/KeyboardDateInput'; import Popover, { PopoverProps } from '@material-ui/core/Popover'; import { WrapperProps } from './Wrapper'; import { StaticWrapperProps } from './StaticWrapper'; @@ -8,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles'; import { InnerMobileWrapperProps } from './MobileWrapper'; import { WrapperVariantContext } from './WrapperVariantContext'; import { IS_TOUCH_DEVICE_MEDIA } from '../constants/dimensions'; +import { KeyboardDateInput } from '../_shared/KeyboardDateInput'; import { InnerDesktopPopperWrapperProps } from './DesktopPopperWrapper'; export interface InnerDesktopWrapperProps {