From d9c7277dbcd2f315f22bfeb002d02ea5ec51aedb Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sat, 9 May 2020 13:49:25 +0300 Subject: [PATCH 1/6] Improve input customization exprience and add new examples --- .../datepicker/AdvancedKeyboard.example.jsx | 28 ------------------- .../demo/datepicker/CustomInput.example.jsx | 28 +++++++++++++++++++ docs/pages/demo/datepicker/index.mdx | 8 +++--- .../CustomRangeInputs.example.tsx | 22 +++++++++++++++ docs/pages/demo/daterangepicker/index.mdx | 8 ++++++ .../DateRangePicker/DateRangePickerInput.tsx | 6 +++- lib/src/_shared/PureDateInput.tsx | 12 +++++--- lib/src/_shared/hooks/useMaskedInput.tsx | 27 ++++++++++-------- 8 files changed, 90 insertions(+), 49 deletions(-) delete mode 100644 docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx create mode 100644 docs/pages/demo/datepicker/CustomInput.example.jsx create mode 100644 docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx diff --git a/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx b/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx deleted file mode 100644 index eb9f10150..000000000 --- a/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { Fragment, useState } from 'react'; -import EventNoteIcon from '@material-ui/icons/EventNote'; -import { TextField } from '@material-ui/core'; -import { DesktopDatePicker } from '@material-ui/pickers'; - -function AdvancedKeyboardExample(props) { - const [selectedDate, handleDateChange] = useState(new Date()); - - return ( - <Fragment> - <DesktopDatePicker - autoOk - label="Advanced keyboard" - inputFormat={props.__willBeReplacedGetFormatString({ - moment: 'YYYY/MM/DD', - dateFns: 'yyyy/MM/dd', - })} - mask="____/__/__" - openPickerIcon={<EventNoteIcon />} - value={selectedDate} - onChange={date => handleDateChange(date)} - renderInput={props => <TextField {...props} variant="outlined" />} - /> - </Fragment> - ); -} - -export default AdvancedKeyboardExample; diff --git a/docs/pages/demo/datepicker/CustomInput.example.jsx b/docs/pages/demo/datepicker/CustomInput.example.jsx new file mode 100644 index 000000000..ecd54c9e0 --- /dev/null +++ b/docs/pages/demo/datepicker/CustomInput.example.jsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; +import { styled } from '@material-ui/core'; +import { DesktopDatePicker } from '@material-ui/pickers'; + +const InputContainer = styled('div')({ + display: 'flex', + alignItems: 'center', +}); + +function CustomInput() { + const [selectedDate, handleDateChange] = useState(new Date()); + + return ( + <DesktopDatePicker + label="Advanced keyboard" + value={selectedDate} + onChange={date => handleDateChange(date)} + renderInput={({ ref, inputProps, InputProps }) => ( + <InputContainer ref={ref}> + <input {...inputProps} /> + {InputProps.endAdornment} + </InputContainer> + )} + /> + ); +} + +export default CustomInput; diff --git a/docs/pages/demo/datepicker/index.mdx b/docs/pages/demo/datepicker/index.mdx index e46155515..b137262e3 100644 --- a/docs/pages/demo/datepicker/index.mdx +++ b/docs/pages/demo/datepicker/index.mdx @@ -10,7 +10,7 @@ import * as ViewsDatePicker from './ViewsDatePicker.example'; import * as BasicDatePicker from './BasicDatePicker.example'; import * as StaticDatePicker from './StaticDatePicker.example'; import * as DatePickers from './DatePickers.example'; -import * as AdvancedKeyboard from './AdvancedKeyboard.example'; +import * as CustomInput from './CustomInput.example'; <PageMeta component="DatePicker" /> @@ -53,11 +53,11 @@ For that use `StaticDatePicker`. <Example paddingBottom source={StaticDatePicker} /> </Hidden> -#### Advanced keyboard input +#### Custom input component -We are providing default localized formats, but you can change this behaviour with `format` and `mask` props. +You can customize rendering input by `renderInput` prop. But make sure you will spread `ref` and `inputProps` correctly to the custom input component. -<Example source={AdvancedKeyboard} /> +<Example source={CustomInput} /> #### Customization diff --git a/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx new file mode 100644 index 000000000..7206bc4ee --- /dev/null +++ b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx @@ -0,0 +1,22 @@ +import React, { useState } from 'react'; +import { DateRangePicker, DateRange } from '@material-ui/pickers'; + +function CustomRangeInputs() { + const [selectedDate, handleDateChange] = useState<DateRange>([null, null]); + + return ( + <DateRangePicker + label="Advanced keyboard" + value={selectedDate} + onChange={date => handleDateChange(date)} + renderInput={(startProps, endProps) => ( + <> + <input ref={startProps.ref as React.Ref<HTMLInputElement>} {...startProps.inputProps} /> + <input ref={endProps.ref as React.Ref<HTMLInputElement>} {...endProps.inputProps} /> + </> + )} + /> + ); +} + +export default CustomRangeInputs; diff --git a/docs/pages/demo/daterangepicker/index.mdx b/docs/pages/demo/daterangepicker/index.mdx index 07296a39c..433988733 100644 --- a/docs/pages/demo/daterangepicker/index.mdx +++ b/docs/pages/demo/daterangepicker/index.mdx @@ -9,6 +9,7 @@ import * as ResponsiveDateRangePicker from './ResponsiveDateRangePicker.example' import * as MinMaxDateRangePicker from './MinMaxDateRangePicker.example'; import * as CalendarsDateRangePicker from './CalendarsDateRangePicker.example'; import * as StaticDateRangePicker from './StaticDateRangePicker.example'; +import * as CustomRangeInputs from './CustomRangeInputs.example'; <PageMeta component="DateRangePicker" /> @@ -43,6 +44,13 @@ Disabling dates performs just like in simple `DatePicker` <Example source={MinMaxDateRangePicker} /> +#### Custom input component + +You can customize rendering input by `renderInput` prop. For `DateRangePicker` it takes **2** parameters – for start and end input respectively. +So if you need to render custom input make sure you will spread `ref` and `inputProps` correctly to the input components. + +<Example source={CustomRangeInputs} /> + #### Static mode It is possible to render any picker without modal or popper. For that use `StaticDateRangePicker`. diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 41b7d22da..5bdb56933 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -7,8 +7,8 @@ import { CurrentlySelectingRangeEndProps } from './RangeTypes'; import { useMaskedInput } from '../_shared/hooks/useMaskedInput'; import { DateRangeValidationError } from '../_helpers/date-utils'; import { WrapperVariantContext } from '../wrappers/WrapperVariantContext'; -import { DateInputProps, MuiTextFieldProps } from '../_shared/PureDateInput'; import { mergeRefs, executeInTheNextEventLoopTick } from '../_helpers/utils'; +import { DateInputProps, MuiTextFieldProps } from '../_shared/PureDateInput'; export const useStyles = makeStyles( theme => ({ @@ -147,6 +147,8 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({ ref: startRef, variant: 'outlined', focused: open && currentlySelectingRangeEnd === 'start', + }, + inputProps: { onClick: !openOnFocus ? openRangeStartSelection : undefined, onFocus: openOnFocus ? openRangeStartSelection : undefined, }, @@ -164,6 +166,8 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({ ref: endRef, variant: 'outlined', focused: open && currentlySelectingRangeEnd === 'end', + }, + inputProps: { onClick: !openOnFocus ? openRangeEndSelection : undefined, onFocus: openOnFocus ? openRangeEndSelection : undefined, }, diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx index 005ecbbdb..b54d4f268 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -123,11 +123,15 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({ ref: containerRef, inputRef: forwardedRef, error: validationError, - 'aria-label': getOpenDialogAriaText(rawValue, utils), - onClick: onOpen, - value: inputValue, InputProps: PureDateInputProps, - onKeyDown: onSpaceOrEnter(onOpen), + inputProps: { + disabled, + 'aria-readonly': true, + 'aria-label': getOpenDialogAriaText(rawValue, utils), + value: inputValue, + onClick: onOpen, + onKeyDown: onSpaceOrEnter(onOpen), + }, ...TextFieldProps, }); }; diff --git a/lib/src/_shared/hooks/useMaskedInput.tsx b/lib/src/_shared/hooks/useMaskedInput.tsx index 939db0261..8dfda76f6 100644 --- a/lib/src/_shared/hooks/useMaskedInput.tsx +++ b/lib/src/_shared/hooks/useMaskedInput.tsx @@ -21,7 +21,7 @@ type MaskedInputProps = Omit< | 'disableOpenPicker' | 'getOpenDialogAriaText' | 'OpenPickerButtonProps' ->; +> & { inputProps?: Partial<React.HTMLProps<HTMLInputElement>> }; export function useMaskedInput({ disableMaskedInput, @@ -37,6 +37,7 @@ export function useMaskedInput({ readOnly, TextFieldProps, label, + inputProps, }: MaskedInputProps): MuiTextFieldProps { const utils = useUtils(); const isFocusedRef = React.useRef(false); @@ -99,23 +100,25 @@ export function useMaskedInput({ }; return { - ...inputStateArgs, label, disabled, - placeholder: formatHelperText, error: validationError, helperText: formatHelperText, // @ts-ignore ??? fix typings for textfield finally 'data-mui-test': 'keyboard-date-input', - inputProps: { readOnly, type: shouldUseMaskedInput ? 'tel' : 'text' }, + inputProps: { + ...inputStateArgs, + disabled, // make spreading in custom input easier + placeholder: formatHelperText, + readOnly, + type: shouldUseMaskedInput ? 'tel' : 'text', + ...inputProps, + onFocus: createDelegatedEventHandler( + () => (isFocusedRef.current = true), + inputProps?.onFocus + ), + onBlur: createDelegatedEventHandler(() => (isFocusedRef.current = false), inputProps?.onBlur), + }, ...TextFieldProps, - onFocus: createDelegatedEventHandler( - () => (isFocusedRef.current = true), - TextFieldProps?.onFocus - ), - onBlur: createDelegatedEventHandler( - () => (isFocusedRef.current = false), - TextFieldProps?.onBlur - ), }; } From e20f7f225d4c7fa701c3be6671a24420aaf47f5e Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sat, 9 May 2020 13:50:27 +0300 Subject: [PATCH 2/6] Remove data-mui-test from renderInput props --- lib/src/_shared/hooks/useMaskedInput.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/src/_shared/hooks/useMaskedInput.tsx b/lib/src/_shared/hooks/useMaskedInput.tsx index 8dfda76f6..b53059c6e 100644 --- a/lib/src/_shared/hooks/useMaskedInput.tsx +++ b/lib/src/_shared/hooks/useMaskedInput.tsx @@ -104,8 +104,6 @@ export function useMaskedInput({ disabled, error: validationError, helperText: formatHelperText, - // @ts-ignore ??? fix typings for textfield finally - 'data-mui-test': 'keyboard-date-input', inputProps: { ...inputStateArgs, disabled, // make spreading in custom input easier From a31811c4fad337b090f5cdbf8778d3587841018b Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sat, 9 May 2020 14:07:32 +0300 Subject: [PATCH 3/6] Add missing prop-types for new props --- lib/.size-snapshot.json | 24 +++++++++---------- lib/src/DateRangePicker/DateRangePicker.tsx | 9 +++++++ .../DateRangePicker/DateRangePickerInput.tsx | 3 +++ .../DateRangePicker/DateRangePickerView.tsx | 6 +++++ lib/src/Picker/Picker.tsx | 2 +- lib/src/_shared/KeyboardDateInput.tsx | 3 ++- lib/src/_shared/PureDateInput.tsx | 4 ++-- lib/src/constants/prop-types.ts | 12 +++++++++- lib/src/wrappers/DesktopWrapper.tsx | 2 +- 9 files changed, 47 insertions(+), 18 deletions(-) diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index 8d9e7fb85..d46a11d91 100644 --- a/lib/.size-snapshot.json +++ b/lib/.size-snapshot.json @@ -1,26 +1,26 @@ { "build/dist/material-ui-pickers.esm.js": { - "bundled": 188938, - "minified": 101335, - "gzipped": 26402, + "bundled": 189931, + "minified": 102080, + "gzipped": 26573, "treeshaked": { "rollup": { - "code": 83375, - "import_statements": 2121 + "code": 83455, + "import_statements": 2143 }, "webpack": { - "code": 92851 + "code": 92970 } } }, "build/dist/material-ui-pickers.umd.js": { - "bundled": 299832, - "minified": 116954, - "gzipped": 33374 + "bundled": 300723, + "minified": 117352, + "gzipped": 33511 }, "build/dist/material-ui-pickers.umd.min.js": { - "bundled": 258486, - "minified": 107815, - "gzipped": 30601 + "bundled": 258901, + "minified": 107874, + "gzipped": 30626 } } 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<TWrapper extends SomeWrapper>(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<typeof RangePickerWithStateAndWrapper> diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 5bdb56933..3b90e6628 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -3,6 +3,7 @@ import { RangeInput, DateRange } from './RangeTypes'; import { useUtils } from '../_shared/hooks/useUtils'; import { makeStyles } from '@material-ui/core/styles'; import { MaterialUiPickersDate } from '../typings/date'; +import { inputPropTypes } from '../constants/prop-types'; import { CurrentlySelectingRangeEndProps } from './RangeTypes'; import { useMaskedInput } from '../_shared/hooks/useMaskedInput'; import { DateRangeValidationError } from '../_helpers/date-utils'; @@ -183,3 +184,5 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({ </div> ); }; + +DateRangePickerInput.propTypes = inputPropTypes; 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<DateRangePickerViewProps> = ({ </div> ); }; + +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..608042922 100644 --- a/lib/src/_shared/KeyboardDateInput.tsx +++ b/lib/src/_shared/KeyboardDateInput.tsx @@ -4,6 +4,7 @@ import InputAdornment from '@material-ui/core/InputAdornment'; import { useUtils } from './hooks/useUtils'; import { CalendarIcon } from './icons/CalendarIcon'; import { useMaskedInput } from './hooks/useMaskedInput'; +import { inputPropTypes } from '../constants/prop-types'; import { DateInputProps, DateInputRefs } from './PureDateInput'; import { getTextFieldAriaText } from '../_helpers/text-field-helper'; @@ -50,4 +51,4 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({ }); }; -export default KeyboardDateInput; +KeyboardDateInput.propTypes = inputPropTypes; diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx index b54d4f268..1d4e81ab5 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; 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'; +import { ParsableDate, inputPropTypes } from '../constants/prop-types'; import { InputAdornmentProps } from '@material-ui/core/InputAdornment'; import { getDisplayDate, getTextFieldAriaText } from '../_helpers/text-field-helper'; @@ -136,4 +136,4 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({ }); }; -PureDateInput.displayName = 'PureDateInput'; +PureDateInput.propTypes = inputPropTypes; diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts index 15ffe4d8e..ca47c3bb6 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, @@ -17,3 +17,13 @@ export const DomainPropTypes = { date, datePickerView }; export const defaultMinDate = new Date('1900-01-01'); export const defaultMaxDate = new Date('2100-01-01'); + +export const inputPropTypes = { + 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/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 { From 7c5ec036490859d6aa1ec7f6f9691357864859e0 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sun, 10 May 2020 15:00:24 +0300 Subject: [PATCH 4/6] Remove inputProps import to properly treeskahe in production --- lib/.size-snapshot.json | 22 +++++++------------ .../DateRangePicker/DateRangePickerInput.tsx | 12 ++++++++-- lib/src/_shared/KeyboardDateInput.tsx | 12 ++++++++-- lib/src/_shared/PureDateInput.tsx | 13 +++++++++-- lib/src/constants/prop-types.ts | 10 --------- 5 files changed, 39 insertions(+), 30 deletions(-) diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index 3b65f6140..a48f2f19b 100644 --- a/lib/.size-snapshot.json +++ b/lib/.size-snapshot.json @@ -1,27 +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/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 3b90e6628..8804ed2e3 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -1,9 +1,9 @@ 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'; import { MaterialUiPickersDate } from '../typings/date'; -import { inputPropTypes } from '../constants/prop-types'; import { CurrentlySelectingRangeEndProps } from './RangeTypes'; import { useMaskedInput } from '../_shared/hooks/useMaskedInput'; import { DateRangeValidationError } from '../_helpers/date-utils'; @@ -185,4 +185,12 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({ ); }; -DateRangePickerInput.propTypes = inputPropTypes; +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/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx index 608042922..9238321ad 100644 --- a/lib/src/_shared/KeyboardDateInput.tsx +++ b/lib/src/_shared/KeyboardDateInput.tsx @@ -1,10 +1,10 @@ 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'; import { CalendarIcon } from './icons/CalendarIcon'; import { useMaskedInput } from './hooks/useMaskedInput'; -import { inputPropTypes } from '../constants/prop-types'; import { DateInputProps, DateInputRefs } from './PureDateInput'; import { getTextFieldAriaText } from '../_helpers/text-field-helper'; @@ -51,4 +51,12 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({ }); }; -KeyboardDateInput.propTypes = inputPropTypes; +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 1d4e81ab5..02721be13 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -1,10 +1,11 @@ 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'; -import { ParsableDate, inputPropTypes } from '../constants/prop-types'; import { InputAdornmentProps } from '@material-ui/core/InputAdornment'; import { getDisplayDate, getTextFieldAriaText } from '../_helpers/text-field-helper'; @@ -136,4 +137,12 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({ }); }; -PureDateInput.propTypes = inputPropTypes; +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 ca47c3bb6..eed9ec155 100644 --- a/lib/src/constants/prop-types.ts +++ b/lib/src/constants/prop-types.ts @@ -17,13 +17,3 @@ export const DomainPropTypes = { date, datePickerView }; export const defaultMinDate = new Date('1900-01-01'); export const defaultMaxDate = new Date('2100-01-01'); - -export const inputPropTypes = { - renderInput: PropTypes.func.isRequired, - mask: PropTypes.string, - rifmFormatter: PropTypes.func, - openPickerIcon: PropTypes.node, - OpenPickerButtonProps: PropTypes.object, - acceptRegex: PropTypes.instanceOf(RegExp), - getOpenDialogAriaText: PropTypes.func, -}; From 13c4f8aab86addb900493fc4c099c6779cb8a554 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sun, 10 May 2020 15:06:19 +0300 Subject: [PATCH 5/6] Improve docs of `renderInput` --- docs/prop-types.json | 8 ++++---- lib/src/DateRangePicker/DateRangePickerInput.tsx | 8 ++++++-- lib/src/_shared/PureDateInput.tsx | 4 +++- 3 files changed, 13 insertions(+), 7 deletions(-) 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 => <TextField {...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 => <TextField {...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 => <TextField {...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 => <TextField {...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 => <TextField {...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 => <TextField {...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<DateRangePicker\nrenderInput={(startProps, endProps) => (\n<>\n<TextField {...startProps} />\n<Typography> to <Typography>\n<TextField {...endProps} />\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<DateRangePicker\nrenderInput={(startProps, endProps) => (\n <>\n <TextField {...startProps} />\n <Typography> to <Typography>\n <TextField {...endProps} />\n </>;\n)}\n/>\n````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerInput.tsx", diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 8804ed2e3..3e041dd3b 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -33,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 * <DateRangePicker * renderInput={(startProps, endProps) => ( <> diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx index 02721be13..4c093e18c 100644 --- a/lib/src/_shared/PureDateInput.tsx +++ b/lib/src/_shared/PureDateInput.tsx @@ -28,7 +28,9 @@ export interface DateInputProps<TInputValue = ParsableDate, TDateValue = Materia // ?? TODO when it will be possible to display "empty" date in datepicker use it instead of ignoring invalid inputs ignoreInvalidInputs?: boolean; /** - * Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props + * The `renderInput` prop allows you to customize the rendered input. + * The `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward. + * Pay specific attention to the `ref` and `inputProps` keys. * @example ```jsx * renderInput={props => <TextField {...props} />} * ```` From 01d86eb4c57512a3c1352386dc46c7b4653b544e Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Date: Sun, 10 May 2020 15:06:42 +0300 Subject: [PATCH 6/6] Remove 1-level import from '@material-ui/core' --- docs/pages/demo/datepicker/CustomInput.example.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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')({