[typescript] Fix InputProps typing error & add dependency for @types/…

…react-text-mask (mui#831) * [mui#822] Add @types/react-text-mask to dependencies * [mui#826] Properly type InputProps, InputAdornmentProps props * Fix datetext field typings * Move extending wrapper to separate shared type
mnajdova · Jan 2, 2019 · f55d990 · f55d990
1 parent 9a5c6fc
commit f55d990
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 23 deletions.
diff --git 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
@@ -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
@@ -4,14 +4,15 @@ 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';
 
 export interface DatePickerInlineProps
   extends Omit<BasePickerProps, 'ampm'>,
     BaseDatePickerProps,
-    Omit<OuterInlineWrapperProps, 'onChange' | 'value'> {
+    ExtendWrapper<OuterInlineWrapperProps> {
   onlyCalendar?: boolean;
 }
 

diff --git 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<ModalWrapperProps, 'onChange' | 'value'> {}
+    ExtendWrapper<ModalWrapperProps> {}
 
 export const DatePickerModal: React.SFC<DatePickerModalProps> = props => {
   const {

diff --git 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<OuterInlineWrapperProps, 'onChange' | 'value'> {}
+    ExtendWrapper<OuterInlineWrapperProps> {}
 
 export const DateTimePickerInline: React.SFC<DateTimePickerInlineProps> = props => {
   const {

diff --git 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<ModalWrapperProps, 'onChange' | 'value'> {}
+    ExtendWrapper<ModalWrapperProps> {}
 
 export const DateTimePickerModal: React.SFC<DateTimePickerModalProps> = props => {
   const {

diff --git 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<OuterInlineWrapperProps, 'onChange' | 'value'> {}
+    ExtendWrapper<OuterInlineWrapperProps> {}
 
 export const TimePickerInline: React.SFC<TimePickerInlineProps> = props => {
   const { value, format, onChange, ampm, forwardedRef, seconds, ...other } = props;

diff --git 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<ModalWrapperProps, 'onChange' | 'value'> {}
+    ExtendWrapper<ModalWrapperProps> {}
 
 export const TimePickerModal: React.SFC<TimePickerModalProps> = 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
@@ -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: (
+            <InputAdornment position="end">
+              <IconButton>date_range</IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
     );
   });

diff --git 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"
       >
         <div>foo</div>
       </ModalWrapper>

diff --git 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<BaseTextFieldProps, 'onError' | 'onChange' | 'value'> {
   // Properly extend different variants from mui textfield
   variant?: TextFieldProps['variant'];
-  InputProps?: Partial<TextFieldProps>;
+  InputProps?: TextFieldProps['InputProps'];
   inputProps?: TextFieldProps['inputMode'];
   value: DateType;
   minDate?: DateType;
@@ -118,9 +120,9 @@ export interface DateTextFieldProps
     | React.ComponentType<TextFieldProps>
     | React.ReactType<React.HTMLAttributes<any>>;
   /** Props to pass to keyboard input adornment */
-  InputAdornmentProps?: object;
+  InputAdornmentProps?: Partial<MuiInputAdornmentProps>;
   /** 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<DateTextFieldProps> {
     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<DateTextFieldProps> {
       localInputProps[`${adornmentPosition}Adornment`] = (
         <InputAdornment position={adornmentPosition!} {...InputAdornmentProps}>
           <IconButton disabled={disabled} onClick={this.openPicker}>
-            <Icon> {keyboardIcon} </Icon>
+            <Icon>{keyboardIcon}</Icon>
           </IconButton>
         </InputAdornment>
       );
@@ -388,5 +390,4 @@ export class DateTextField extends React.PureComponent<DateTextFieldProps> {
   }
 }
 
-// @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
@@ -0,0 +1,8 @@
+import { Omit } from '@material-ui/core';
+import { InlineWrapperProps } from './InlineWrapper';
+import { ModalWrapperProps } from './ModalWrapper';
+
+export type ExtendWrapper<T extends InlineWrapperProps | ModalWrapperProps> = Omit<
+  T,
+  'onChange' | 'value' | 'format'
+>;
diff --git 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<DateTextFieldProps> {
+export interface OuterInlineWrapperProps extends Omit<DateTextFieldProps, 'utils' | 'onClick'> {
   /** On open callback */
   onOpen?: () => void;
   /** On close callback */

diff --git 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<DateTextFieldProps> {
+export interface ModalWrapperProps extends Omit<DateTextFieldProps, 'utils' | 'onClick'> {
   onAccept?: () => void;
   onDismiss?: () => void;
   onClear?: () => void;