diff --git a/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx b/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx index 243dd78146e994..541cd546b3d086 100644 --- a/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx +++ b/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx @@ -31,8 +31,8 @@ class InlineDateTimePickerDemo extends PureComponent { value={selectedDate} onChange={this.handleDateChange} format={this.props.getFormatString({ - moment: 'YYYY/MM/DD hh:mm A', - dateFns: 'yyyy/MM/dd hh:mm A', + moment: 'YYYY/MM/DD hh:mm a', + dateFns: 'yyyy/MM/dd hh:mm a', })} mask={[ /\d/, diff --git a/lib/package.json b/lib/package.json index 33154f535580d7..3e05fb48f8ed48 100644 --- a/lib/package.json +++ b/lib/package.json @@ -39,6 +39,7 @@ "react-dom": "^16.3.0" }, "dependencies": { + "@types/react-text-mask": "^5.4.2", "classnames": "^2.2.6", "keycode": "^2.2.0", "react-event-listener": "^0.6.4", @@ -89,7 +90,6 @@ "@types/react": "^16.7.17", "@types/react-dom": "^16.0.11", "@types/react-event-listener": "^0.4.7", - "@types/react-text-mask": "^5.4.2", "@types/react-transition-group": "^2.0.15", "classnames": "^2.2.6", "codecov": "^3.1.0", diff --git a/lib/src/DatePicker/DatePickerInline.tsx b/lib/src/DatePicker/DatePickerInline.tsx index b1f44577b046e8..a6589460d01be5 100644 --- a/lib/src/DatePicker/DatePickerInline.tsx +++ b/lib/src/DatePicker/DatePickerInline.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import InlineWrapper, { OuterInlineWrapperProps } from '../wrappers/InlineWrapper'; import Calendar from './components/Calendar'; import DatePicker, { BaseDatePickerProps } from './DatePicker'; @@ -11,7 +12,7 @@ import DatePicker, { BaseDatePickerProps } from './DatePicker'; export interface DatePickerInlineProps extends Omit, BaseDatePickerProps, - Omit { + ExtendWrapper { onlyCalendar?: boolean; } diff --git a/lib/src/DatePicker/DatePickerModal.tsx b/lib/src/DatePicker/DatePickerModal.tsx index fbe51b4c88ed06..ff17069e7e65a5 100644 --- a/lib/src/DatePicker/DatePickerModal.tsx +++ b/lib/src/DatePicker/DatePickerModal.tsx @@ -1,16 +1,16 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import ModalWrapper, { ModalWrapperProps } from '../wrappers/ModalWrapper'; import DatePicker, { BaseDatePickerProps } from './DatePicker'; export interface DatePickerModalProps extends BasePickerProps, BaseDatePickerProps, - Omit {} + ExtendWrapper {} export const DatePickerModal: React.SFC = props => { const { diff --git a/lib/src/DateTimePicker/DateTimePickerInline.tsx b/lib/src/DateTimePicker/DateTimePickerInline.tsx index bce5f0f403f140..7b4f1de7fbc3a3 100644 --- a/lib/src/DateTimePicker/DateTimePickerInline.tsx +++ b/lib/src/DateTimePicker/DateTimePickerInline.tsx @@ -1,16 +1,16 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import InlineWrapper, { OuterInlineWrapperProps } from '../wrappers/InlineWrapper'; import DateTimePicker, { BaseDateTimePickerProps } from './DateTimePicker'; export interface DateTimePickerInlineProps extends BasePickerProps, BaseDateTimePickerProps, - Omit {} + ExtendWrapper {} export const DateTimePickerInline: React.SFC = props => { const { diff --git a/lib/src/DateTimePicker/DateTimePickerModal.tsx b/lib/src/DateTimePicker/DateTimePickerModal.tsx index 8e0db1effd0b20..9e58c08ebb0ee1 100644 --- a/lib/src/DateTimePicker/DateTimePickerModal.tsx +++ b/lib/src/DateTimePicker/DateTimePickerModal.tsx @@ -1,16 +1,16 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import ModalWrapper, { ModalWrapperProps } from '../wrappers/ModalWrapper'; import DateTimePicker, { BaseDateTimePickerProps } from './DateTimePicker'; export interface DateTimePickerModalProps extends BasePickerProps, BaseDateTimePickerProps, - Omit {} + ExtendWrapper {} export const DateTimePickerModal: React.SFC = props => { const { diff --git a/lib/src/TimePicker/TimePickerInline.tsx b/lib/src/TimePicker/TimePickerInline.tsx index abc6be5ec92a42..66c47d9bb9eaae 100644 --- a/lib/src/TimePicker/TimePickerInline.tsx +++ b/lib/src/TimePicker/TimePickerInline.tsx @@ -1,16 +1,16 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import InlineWrapper, { OuterInlineWrapperProps } from '../wrappers/InlineWrapper'; import TimePicker, { BaseTimePickerProps } from './TimePicker'; export interface TimePickerInlineProps extends BasePickerProps, BaseTimePickerProps, - Omit {} + ExtendWrapper {} export const TimePickerInline: React.SFC = props => { const { value, format, onChange, ampm, forwardedRef, seconds, ...other } = props; diff --git a/lib/src/TimePicker/TimePickerModal.tsx b/lib/src/TimePicker/TimePickerModal.tsx index d01abf7d4ad3ed..ce9bc772be1633 100644 --- a/lib/src/TimePicker/TimePickerModal.tsx +++ b/lib/src/TimePicker/TimePickerModal.tsx @@ -1,16 +1,16 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { Omit } from '@material-ui/core'; import BasePicker, { BasePickerProps } from '../_shared/BasePicker'; import DomainPropTypes from '../constants/prop-types'; +import { ExtendWrapper } from '../wrappers/ExtendWrapper'; import ModalWrapper, { ModalWrapperProps } from '../wrappers/ModalWrapper'; import TimePicker, { BaseTimePickerProps } from './TimePicker'; export interface TimePickerModalProps extends BasePickerProps, BaseTimePickerProps, - Omit {} + ExtendWrapper {} export const TimePickerModal: React.SFC = props => { const { value, format, autoOk, onChange, ampm, forwardedRef, seconds, ...other } = props; diff --git a/lib/src/__tests__/e2e/DatePicker.test.tsx b/lib/src/__tests__/e2e/DatePicker.test.tsx index 69c439fc0b719c..0b13951f8ee300 100644 --- a/lib/src/__tests__/e2e/DatePicker.test.tsx +++ b/lib/src/__tests__/e2e/DatePicker.test.tsx @@ -1,3 +1,4 @@ +import { IconButton, InputAdornment } from '@material-ui/core'; import { ReactWrapper } from 'enzyme'; import * as React from 'react'; import DatePickerModal from '../../DatePicker'; @@ -64,6 +65,16 @@ describe('e2e -- DatePicker keyboard input', () => { mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]} value={'2018-01-01T00:00:00.000Z'} onChange={onChangeMock} + InputAdornmentProps={{ + disableTypography: true, + }} + InputProps={{ + endAdornment: ( + + date_range + + ), + }} /> ); }); diff --git a/lib/src/__tests__/wrappers/ModalWrapper.test.tsx b/lib/src/__tests__/wrappers/ModalWrapper.test.tsx index ae804cb6e879f2..1defac1ee343fe 100644 --- a/lib/src/__tests__/wrappers/ModalWrapper.test.tsx +++ b/lib/src/__tests__/wrappers/ModalWrapper.test.tsx @@ -16,6 +16,8 @@ describe('ModalWrapper', () => { onDismiss={jest.fn()} onAccept={jest.fn()} onClear={jest.fn()} + onChange={jest.fn()} + format="mm dd" >
foo
diff --git a/lib/src/_shared/DateTextField.tsx b/lib/src/_shared/DateTextField.tsx index 6a5a6374c70a37..e9e5f411aa04ab 100644 --- a/lib/src/_shared/DateTextField.tsx +++ b/lib/src/_shared/DateTextField.tsx @@ -1,6 +1,8 @@ import Icon from '@material-ui/core/Icon'; import IconButton from '@material-ui/core/IconButton'; -import InputAdornment from '@material-ui/core/InputAdornment'; +import InputAdornment, { + InputAdornmentProps as MuiInputAdornmentProps, +} from '@material-ui/core/InputAdornment'; import TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField'; import * as PropTypes from 'prop-types'; import * as React from 'react'; @@ -78,7 +80,7 @@ export interface DateTextFieldProps ExtendMui { // Properly extend different variants from mui textfield variant?: TextFieldProps['variant']; - InputProps?: Partial; + InputProps?: TextFieldProps['InputProps']; inputProps?: TextFieldProps['inputMode']; value: DateType; minDate?: DateType; @@ -118,9 +120,9 @@ export interface DateTextFieldProps | React.ComponentType | React.ReactType>; /** Props to pass to keyboard input adornment */ - InputAdornmentProps?: object; + InputAdornmentProps?: Partial; /** Specifies position of keyboard button adornment */ - adornmentPosition?: 'start' | 'end'; + adornmentPosition?: MuiInputAdornmentProps['position']; onClick: (e: React.SyntheticEvent) => void; /* Callback firing when date that applied in the keyboard is invalid **/ onError?: (newValue: MaterialUiPickersDate, error: React.ReactNode) => void; @@ -194,7 +196,7 @@ export class DateTextField extends React.PureComponent { maxDateMessage: 'Date should not be after maximal date', TextFieldComponent: TextField, InputAdornmentProps: {}, - adornmentPosition: 'end', + adornmentPosition: 'end' as MuiInputAdornmentProps['position'], pipe: undefined, keepCharPositions: false, }; @@ -358,7 +360,7 @@ export class DateTextField extends React.PureComponent { localInputProps[`${adornmentPosition}Adornment`] = ( - {keyboardIcon} + {keyboardIcon} ); @@ -388,5 +390,4 @@ export class DateTextField extends React.PureComponent { } } -// @ts-ignore ts requires to duplicate proptypes of textfield export default withUtils()(DateTextField); diff --git a/lib/src/wrappers/ExtendWrapper.d.ts b/lib/src/wrappers/ExtendWrapper.d.ts new file mode 100644 index 00000000000000..d4fa2042fb8cc9 --- /dev/null +++ b/lib/src/wrappers/ExtendWrapper.d.ts @@ -0,0 +1,8 @@ +import { Omit } from '@material-ui/core'; +import { InlineWrapperProps } from './InlineWrapper'; +import { ModalWrapperProps } from './ModalWrapper'; + +export type ExtendWrapper = Omit< + T, + 'onChange' | 'value' | 'format' +>; diff --git a/lib/src/wrappers/InlineWrapper.tsx b/lib/src/wrappers/InlineWrapper.tsx index 0dc11bcaa9fb92..19bba9c898f935 100644 --- a/lib/src/wrappers/InlineWrapper.tsx +++ b/lib/src/wrappers/InlineWrapper.tsx @@ -1,3 +1,4 @@ +import { Omit } from '@material-ui/core'; import Popover, { PopoverProps as PopoverPropsType } from '@material-ui/core/Popover'; import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'; import keycode from 'keycode'; @@ -7,7 +8,7 @@ import EventListener from 'react-event-listener'; import DateTextField, { DateTextFieldProps } from '../_shared/DateTextField'; import DomainPropTypes from '../constants/prop-types'; -export interface OuterInlineWrapperProps extends Partial { +export interface OuterInlineWrapperProps extends Omit { /** On open callback */ onOpen?: () => void; /** On close callback */ diff --git a/lib/src/wrappers/ModalWrapper.tsx b/lib/src/wrappers/ModalWrapper.tsx index 5120b58854e2f3..470e8f9b24b050 100644 --- a/lib/src/wrappers/ModalWrapper.tsx +++ b/lib/src/wrappers/ModalWrapper.tsx @@ -7,7 +7,7 @@ import DateTextField, { DateTextFieldProps } from '../_shared/DateTextField'; import ModalDialog from '../_shared/ModalDialog'; import DomainPropTypes from '../constants/prop-types'; -export interface ModalWrapperProps extends Partial { +export interface ModalWrapperProps extends Omit { onAccept?: () => void; onDismiss?: () => void; onClear?: () => void;