From b67c1ee25586c785067e4bad32dbe5065d74b628 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 9 Jan 2019 18:03:20 +0200 Subject: [PATCH] [size] Remove unused/duplicated defaultProps & propTypes (#843) * Remove undefined from defaultProps * Split formatting functions from DateTestField to separate helper * Remove unused/duplicated propTypes & defaultProps * Fix ts error in test --- docs/src/_shared/SourcablePanel.jsx | 4 - docs/src/layout/NavItem.jsx | 2 - lib/.size-snapshot.json | 24 +++--- lib/src/DatePicker/DatePicker.tsx | 32 +------- lib/src/DatePicker/DatePickerInline.tsx | 45 ---------- lib/src/DatePicker/DatePickerModal.tsx | 44 ---------- lib/src/DatePicker/components/Calendar.tsx | 12 +-- .../DatePicker/components/CalendarHeader.tsx | 3 - .../DatePicker/components/SlideTransition.tsx | 5 -- .../DatePicker/components/YearSelection.tsx | 8 +- lib/src/DateTimePicker/DateTimePicker.tsx | 35 +------- .../DateTimePicker/DateTimePickerInline.tsx | 51 ------------ .../DateTimePicker/DateTimePickerModal.tsx | 76 ----------------- .../components/DateTimePickerHeader.tsx | 7 -- .../components/DateTimePickerTabs.tsx | 3 - lib/src/MuiPickersUtilsProvider.tsx | 5 -- lib/src/TimePicker/TimePicker.tsx | 3 - lib/src/TimePicker/TimePickerInline.tsx | 19 ----- lib/src/TimePicker/TimePickerModal.tsx | 21 ----- lib/src/TimePicker/components/Clock.tsx | 1 - .../TimePicker/components/ClockPointer.tsx | 4 +- .../TimePicker/components/TimePickerView.tsx | 1 - .../__tests__/DatePicker/DatePicker.test.tsx | 7 +- lib/src/_helpers/text-field-helper.ts | 65 +++++++++++++++ lib/src/_shared/BasePicker.tsx | 19 ++++- lib/src/_shared/DateTextField.tsx | 82 ++----------------- lib/src/_shared/MaskedInput.tsx | 4 - lib/src/constants/prop-types.ts | 2 +- lib/src/wrappers/InlineWrapper.tsx | 18 ---- lib/src/wrappers/ModalWrapper.tsx | 15 ---- 30 files changed, 112 insertions(+), 505 deletions(-) create mode 100644 lib/src/_helpers/text-field-helper.ts diff --git a/docs/src/_shared/SourcablePanel.jsx b/docs/src/_shared/SourcablePanel.jsx index ad9818fa335efb..f4a4166ceb8962 100644 --- a/docs/src/_shared/SourcablePanel.jsx +++ b/docs/src/_shared/SourcablePanel.jsx @@ -14,10 +14,6 @@ class SourcablePanel extends PureComponent { sourceFile: PropTypes.string.isRequired, }; - static defaultProps = { - description: undefined, - }; - state = { sourceExpanded: false, }; diff --git a/docs/src/layout/NavItem.jsx b/docs/src/layout/NavItem.jsx index 0b1b5131b02acf..c49586106335d5 100644 --- a/docs/src/layout/NavItem.jsx +++ b/docs/src/layout/NavItem.jsx @@ -105,8 +105,6 @@ NavItem.propTypes = { NavItem.defaultProps = { depth: 0, - children: undefined, - href: undefined, }; export default withStyles(styles)(NavItem); diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index cd1528027fcce7..2a73e3470f537c 100644 --- a/lib/.size-snapshot.json +++ b/lib/.size-snapshot.json @@ -1,26 +1,26 @@ { "build/dist/material-ui-pickers.esm.js": { - "bundled": 115237, - "minified": 68052, - "gzipped": 14835, + "bundled": 106370, + "minified": 62077, + "gzipped": 14537, "treeshaked": { "rollup": { - "code": 50219, - "import_statements": 1317 + "code": 48166, + "import_statements": 1323 }, "webpack": { - "code": 57185 + "code": 55154 } } }, "build/dist/material-ui-pickers.umd.js": { - "bundled": 231850, - "minified": 101280, - "gzipped": 25689 + "bundled": 220351, + "minified": 95434, + "gzipped": 25457 }, "build/dist/material-ui-pickers.umd.min.js": { - "bundled": 203184, - "minified": 91312, - "gzipped": 24082 + "bundled": 199685, + "minified": 89206, + "gzipped": 24135 } } diff --git a/lib/src/DatePicker/DatePicker.tsx b/lib/src/DatePicker/DatePicker.tsx index 04b99dc929910a..91f657d281057e 100644 --- a/lib/src/DatePicker/DatePicker.tsx +++ b/lib/src/DatePicker/DatePicker.tsx @@ -1,10 +1,8 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; - import PickerToolbar from '../_shared/PickerToolbar'; import ToolbarButton from '../_shared/ToolbarButton'; import { withUtils, WithUtilsProps } from '../_shared/WithUtils'; -import DomainPropTypes, { DateType } from '../constants/prop-types'; +import { DateType } from '../constants/prop-types'; import { MaterialUiPickersDate } from '../typings/date'; import Calendar, { RenderDay } from './components/Calendar'; import YearSelection from './components/YearSelection'; @@ -41,38 +39,10 @@ export interface DatePickerProps extends BaseDatePickerProps { } export class DatePicker extends React.PureComponent { - public static propTypes: any = { - date: PropTypes.object.isRequired, - minDate: DomainPropTypes.date, - maxDate: DomainPropTypes.date, - onChange: PropTypes.func.isRequired, - disablePast: PropTypes.bool, - disableFuture: PropTypes.bool, - animateYearScrolling: PropTypes.bool, - openToYearSelection: PropTypes.bool, - children: PropTypes.node, - leftArrowIcon: PropTypes.node, - rightArrowIcon: PropTypes.node, - renderDay: PropTypes.func, - utils: PropTypes.object.isRequired, - shouldDisableDate: PropTypes.func, - allowKeyboardControl: PropTypes.bool, - initialFocusedDate: DomainPropTypes.date, - }; - public static defaultProps = { minDate: '1900-01-01', maxDate: '2100-01-01', - disablePast: false, - disableFuture: false, - allowKeyboardControl: false, - animateYearScrolling: undefined, openToYearSelection: false, - children: null, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - renderDay: undefined, - shouldDisableDate: undefined, }; public state = { diff --git a/lib/src/DatePicker/DatePickerInline.tsx b/lib/src/DatePicker/DatePickerInline.tsx index ac8e59ce483b17..7c2fab2311c34e 100644 --- a/lib/src/DatePicker/DatePickerInline.tsx +++ b/lib/src/DatePicker/DatePickerInline.tsx @@ -1,9 +1,7 @@ -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 Calendar from './components/Calendar'; @@ -80,49 +78,6 @@ export const DatePickerInline: React.SFC = props => { ); }; -(DatePickerInline as any).propTypes = { - onlyCalendar: PropTypes.bool, - value: DomainPropTypes.date, - minDate: DomainPropTypes.date, - maxDate: DomainPropTypes.date, - initialFocusedDate: DomainPropTypes.date, - format: PropTypes.string, - onChange: PropTypes.func.isRequired, - disablePast: PropTypes.bool, - disableFuture: PropTypes.bool, - animateYearScrolling: PropTypes.bool, - openToYearSelection: PropTypes.bool, - labelFunc: PropTypes.func, - leftArrowIcon: PropTypes.node, - rightArrowIcon: PropTypes.node, - renderDay: PropTypes.func, - shouldDisableDate: PropTypes.func, - allowKeyboardControl: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - autoOk: PropTypes.bool, -}; - -DatePickerInline.defaultProps = { - value: new Date(), - format: undefined, - minDate: '1900-01-01', - maxDate: '2100-01-01', - initialFocusedDate: undefined, - disableFuture: false, - disablePast: false, - animateYearScrolling: false, - openToYearSelection: false, - allowKeyboardControl: true, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - renderDay: undefined, - labelFunc: undefined, - shouldDisableDate: undefined, - forwardedRef: undefined, - autoOk: undefined, - onlyCalendar: false, -}; - export default React.forwardRef((props: DatePickerInlineProps, ref) => ( )); diff --git a/lib/src/DatePicker/DatePickerModal.tsx b/lib/src/DatePicker/DatePickerModal.tsx index 72e2e9e11a34f2..c1da1a7fb8dcfb 100644 --- a/lib/src/DatePicker/DatePickerModal.tsx +++ b/lib/src/DatePicker/DatePickerModal.tsx @@ -1,8 +1,5 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; - 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'; @@ -86,47 +83,6 @@ export const DatePickerModal: React.SFC = props => { ); }; -(DatePickerModal as any).propTypes = { - value: DomainPropTypes.date, - minDate: DomainPropTypes.date, - maxDate: DomainPropTypes.date, - initialFocusedDate: DomainPropTypes.date, - format: PropTypes.string, - onChange: PropTypes.func.isRequired, - autoOk: PropTypes.bool, - disablePast: PropTypes.bool, - disableFuture: PropTypes.bool, - animateYearScrolling: PropTypes.bool, - openToYearSelection: PropTypes.bool, - labelFunc: PropTypes.func, - leftArrowIcon: PropTypes.node, - rightArrowIcon: PropTypes.node, - renderDay: PropTypes.func, - shouldDisableDate: PropTypes.func, - allowKeyboardControl: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -DatePickerModal.defaultProps = { - value: new Date(), - format: undefined, - autoOk: false, - minDate: '1900-01-01', - maxDate: '2100-01-01', - initialFocusedDate: undefined, - disableFuture: false, - disablePast: false, - animateYearScrolling: false, - openToYearSelection: false, - allowKeyboardControl: true, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - renderDay: undefined, - labelFunc: undefined, - shouldDisableDate: undefined, - forwardedRef: undefined, -}; - export default React.forwardRef((props: DatePickerModalProps, ref) => ( )); diff --git a/lib/src/DatePicker/components/Calendar.tsx b/lib/src/DatePicker/components/Calendar.tsx index cb163cf30b7d43..31232af07bab3d 100644 --- a/lib/src/DatePicker/components/Calendar.tsx +++ b/lib/src/DatePicker/components/Calendar.tsx @@ -8,7 +8,7 @@ import { Theme } from '@material-ui/core'; import { IconButtonProps } from '@material-ui/core/IconButton'; import { findClosestEnabledDate } from '../../_helpers/date-utils'; import { withUtils, WithUtilsProps } from '../../_shared/WithUtils'; -import DomainPropTypes, { DateType } from '../../constants/prop-types'; +import { DateType, DomainPropTypes } from '../../constants/prop-types'; import { MaterialUiPickersDate } from '../../typings/date'; import CalendarHeader from './CalendarHeader'; import Day from './Day'; @@ -47,14 +47,10 @@ export class Calendar extends React.Component { date: PropTypes.object.isRequired, minDate: DomainPropTypes.date, maxDate: DomainPropTypes.date, - classes: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, disablePast: PropTypes.bool, disableFuture: PropTypes.bool, - leftArrowIcon: PropTypes.node, - rightArrowIcon: PropTypes.node, renderDay: PropTypes.func, - theme: PropTypes.object.isRequired, shouldDisableDate: PropTypes.func, utils: PropTypes.object.isRequired, allowKeyboardControl: PropTypes.bool, @@ -66,11 +62,7 @@ export class Calendar extends React.Component { maxDate: '2100-01-01', disablePast: false, disableFuture: false, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - renderDay: undefined, - allowKeyboardControl: false, - shouldDisableDate: () => false, + allowKeyboardControl: true, }; public static getDerivedStateFromProps(nextProps: CalendarProps, state: CalendarState) { diff --git a/lib/src/DatePicker/components/CalendarHeader.tsx b/lib/src/DatePicker/components/CalendarHeader.tsx index 69c9b1e0b028ac..a0090d2b6d34f6 100644 --- a/lib/src/DatePicker/components/CalendarHeader.tsx +++ b/lib/src/DatePicker/components/CalendarHeader.tsx @@ -87,13 +87,10 @@ export const CalendarHeader: React.SFC = ({ (CalendarHeader as any).propTypes = { currentMonth: PropTypes.object.isRequired, onMonthChange: PropTypes.func.isRequired, - classes: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, leftArrowIcon: PropTypes.node, rightArrowIcon: PropTypes.node, disablePrevMonth: PropTypes.bool, disableNextMonth: PropTypes.bool, - utils: PropTypes.object.isRequired, slideDirection: PropTypes.oneOf(['right', 'left']).isRequired, innerRef: PropTypes.any, }; diff --git a/lib/src/DatePicker/components/SlideTransition.tsx b/lib/src/DatePicker/components/SlideTransition.tsx index 8b19c6bb99d699..5ff33e8fb6c214 100644 --- a/lib/src/DatePicker/components/SlideTransition.tsx +++ b/lib/src/DatePicker/components/SlideTransition.tsx @@ -41,7 +41,6 @@ const SlideTransition: React.SFC = ({ ); (SlideTransition as any).propTypes = { - classes: PropTypes.shape({}).isRequired, children: PropTypes.node.isRequired, className: PropTypes.string, slideDirection: PropTypes.oneOf(['left', 'right']).isRequired, @@ -49,10 +48,6 @@ const SlideTransition: React.SFC = ({ innerRef: PropTypes.any, }; -SlideTransition.defaultProps = { - className: undefined, -}; - export const styles = (theme: Theme) => { const slideTransition = theme.transitions.create('transform', { duration: animationDuration, diff --git a/lib/src/DatePicker/components/YearSelection.tsx b/lib/src/DatePicker/components/YearSelection.tsx index 26756fc9bb72aa..20dd32681a0d0c 100644 --- a/lib/src/DatePicker/components/YearSelection.tsx +++ b/lib/src/DatePicker/components/YearSelection.tsx @@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; import { findDOMNode } from 'react-dom'; import { withUtils, WithUtilsProps } from '../../_shared/WithUtils'; -import DomainPropTypes, { DateType } from '../../constants/prop-types'; +import { DateType, DomainPropTypes } from '../../constants/prop-types'; import { MaterialUiPickersDate } from '../../typings/date'; import Year from './Year'; @@ -23,17 +23,15 @@ export class YearSelection extends React.PureComponent { date: PropTypes.shape({}).isRequired, minDate: DomainPropTypes.date, maxDate: DomainPropTypes.date, - classes: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, - disablePast: PropTypes.bool, - disableFuture: PropTypes.bool, animateYearScrolling: PropTypes.bool, - utils: PropTypes.object.isRequired, innerRef: PropTypes.any, }; public static defaultProps = { animateYearScrolling: false, + minDate: '1900-01-01', + maxDate: '2100-01-01', }; public selectedYearRef?: React.ReactInstance = undefined; diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx index 3c75a4511c88f4..0258ad59b2fe34 100644 --- a/lib/src/DateTimePicker/DateTimePicker.tsx +++ b/lib/src/DateTimePicker/DateTimePicker.tsx @@ -12,7 +12,6 @@ import View from './components/DateTimePickerView'; import { Omit } from '@material-ui/core'; import { withUtils, WithUtilsProps } from '../_shared/WithUtils'; import DateTimePickerView, { DateTimePickerViewType } from '../constants/DateTimePickerView'; -import DomainPropTypes from '../constants/prop-types'; import { BaseDatePickerProps } from '../DatePicker/DatePicker'; import { MaterialUiPickersDate } from '../typings/date'; @@ -45,28 +44,9 @@ interface DateTimePickerState { export class DateTimePicker extends React.Component { public static propTypes: any = { - allowKeyboardControl: PropTypes.bool, - ampm: PropTypes.bool, - animateYearScrolling: PropTypes.bool, autoSubmit: PropTypes.bool, - date: PropTypes.object.isRequired, - initialFocusedDate: PropTypes.any, - innerRef: PropTypes.any, - dateRangeIcon: PropTypes.node, - disableFuture: PropTypes.bool, - disablePast: PropTypes.bool, - leftArrowIcon: PropTypes.node, - maxDate: DomainPropTypes.date.isRequired, - minDate: DomainPropTypes.date.isRequired, - onChange: PropTypes.func.isRequired, - openTo: PropTypes.oneOf(Object.keys(DateTimePickerView).map(key => DateTimePickerView[key])) - .isRequired, - renderDay: PropTypes.func, - rightArrowIcon: PropTypes.node, - shouldDisableDate: PropTypes.func, + openTo: PropTypes.oneOf(Object.keys(DateTimePickerView).map(key => DateTimePickerView[key])), showTabs: PropTypes.bool, - timeIcon: PropTypes.node, - utils: PropTypes.object.isRequired, ViewContainerComponent: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -75,19 +55,10 @@ export class DateTimePicker extends React.Component = props ); }; -(DateTimePickerInline as any).propTypes = { - value: DomainPropTypes.date, - format: PropTypes.string, - onChange: PropTypes.func.isRequired, - autoOk: PropTypes.bool, - autoSubmit: PropTypes.bool, - disableFuture: PropTypes.bool, - disablePast: PropTypes.bool, - minDate: DomainPropTypes.date, - maxDate: DomainPropTypes.date, - initialFocusedDate: DomainPropTypes.date, - showTabs: PropTypes.bool, - leftArrowIcon: PropTypes.node, - rightArrowIcon: PropTypes.node, - dateRangeIcon: PropTypes.node, - timeIcon: PropTypes.node, - renderDay: PropTypes.func, - ampm: PropTypes.bool, - shouldDisableDate: PropTypes.func, - animateYearScrolling: PropTypes.bool, - openTo: PropTypes.oneOf(['year', 'date', 'hour', 'minutes']), - allowKeyboardControl: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -(DateTimePickerInline as any).defaultProps = { - value: new Date(), - format: undefined, - autoOk: false, - autoSubmit: true, - openTo: 'date', - disableFuture: false, - disablePast: false, - minDate: '1900-01-01', - maxDate: '2100-01-01', - initialFocusedDate: undefined, - showTabs: true, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - dateRangeIcon: undefined, - timeIcon: undefined, - renderDay: undefined, - ampm: true, - shouldDisableDate: undefined, - animateYearScrolling: false, - forwardedRef: undefined, - allowKeyboardControl: true, -}; - export default React.forwardRef((props: DateTimePickerInlineProps, ref) => ( )); diff --git a/lib/src/DateTimePicker/DateTimePickerModal.tsx b/lib/src/DateTimePicker/DateTimePickerModal.tsx index b77936b82e2602..9458758464f4ab 100644 --- a/lib/src/DateTimePicker/DateTimePickerModal.tsx +++ b/lib/src/DateTimePicker/DateTimePickerModal.tsx @@ -1,8 +1,5 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; - 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'; @@ -97,79 +94,6 @@ export const DateTimePickerModal: React.SFC = props => ); }; -(DateTimePickerModal as any).propTypes = { - /** Date-time picker value */ - value: DomainPropTypes.date, - /** Date format string for input */ - format: PropTypes.string, - /** Callback firing when date accepted [(date: Date) => void] */ - onChange: PropTypes.func.isRequired, - /** Auto accept date on minute selection */ - autoOk: PropTypes.bool, - /** Move to the next part of date on select (year -> date -> hour -> minute) */ - autoSubmit: PropTypes.bool, - /** Disable future dates */ - disableFuture: PropTypes.bool, - /** Disable past dates */ - disablePast: PropTypes.bool, - /** Min selectable date */ - minDate: DomainPropTypes.date, - /** Max selectable date */ - maxDate: DomainPropTypes.date, - /** Initial focused date when calendar opens, if no value is provided */ - initialFocusedDate: DomainPropTypes.date, - /** Show date/time tabs */ - showTabs: PropTypes.bool, - /** Left arrow icon */ - leftArrowIcon: PropTypes.node, - /** Right arrow icon */ - rightArrowIcon: PropTypes.node, - /** Date tab icon */ - dateRangeIcon: PropTypes.node, - /** Time tab icon */ - timeIcon: PropTypes.node, - /** - * Custom renderer for day - * [(date: Date, nowSelectedDate: Date, isInCurrentMonth: boolean) => ReactElement] - */ - renderDay: PropTypes.func, - /** 12h/24h view for hour selection clock */ - ampm: PropTypes.bool, - /** Disable specific date [(date: Date) => boolean] */ - shouldDisableDate: PropTypes.func, - /** Enable animated scrolling to current year */ - animateYearScrolling: PropTypes.bool, - /** Open directly to particular view */ - openTo: PropTypes.oneOf(['year', 'date', 'hour', 'minutes']), - /** Enables keyboard listener for moving between days in calendar */ - allowKeyboardControl: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -DateTimePickerModal.defaultProps = { - value: new Date(), - format: undefined, - autoOk: false, - autoSubmit: true, - openTo: 'date', - disableFuture: false, - disablePast: false, - minDate: '1900-01-01', - maxDate: '2100-01-01', - initialFocusedDate: undefined, - showTabs: true, - leftArrowIcon: undefined, - rightArrowIcon: undefined, - dateRangeIcon: undefined, - timeIcon: undefined, - renderDay: undefined, - ampm: true, - shouldDisableDate: undefined, - animateYearScrolling: false, - forwardedRef: undefined, - allowKeyboardControl: true, -}; - export default React.forwardRef((props: DateTimePickerModalProps, ref) => ( )); diff --git a/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx b/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx index d2ae063492115a..ccab67265fb4c7 100644 --- a/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx +++ b/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx @@ -136,16 +136,9 @@ export const DateTimePickerHeader: React.SFC = ({ date: PropTypes.object.isRequired, classes: PropTypes.object.isRequired, meridiemMode: PropTypes.string.isRequired, - openView: PropTypes.string.isRequired, - onOpenViewChange: PropTypes.func.isRequired, - setMeridiemMode: PropTypes.func.isRequired, utils: PropTypes.object.isRequired, ampm: PropTypes.bool, innerRef: PropTypes.any, }; -DateTimePickerHeader.defaultProps = { - ampm: true, -}; - export default withStyles(styles, { name: 'MuiPickerDTHeader' })(withUtils()(DateTimePickerHeader)); diff --git a/lib/src/DateTimePicker/components/DateTimePickerTabs.tsx b/lib/src/DateTimePicker/components/DateTimePickerTabs.tsx index 700b239e759c35..5ff90c0962226b 100644 --- a/lib/src/DateTimePicker/components/DateTimePickerTabs.tsx +++ b/lib/src/DateTimePicker/components/DateTimePickerTabs.tsx @@ -62,9 +62,6 @@ export const DateTimePickerTabs: React.SFC = props => { (DateTimePickerTabs as any).propTypes = { view: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - classes: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, dateRangeIcon: PropTypes.node.isRequired, timeIcon: PropTypes.node.isRequired, }; diff --git a/lib/src/MuiPickersUtilsProvider.tsx b/lib/src/MuiPickersUtilsProvider.tsx index 957ca3f8a07e58..e187c520c5d742 100644 --- a/lib/src/MuiPickersUtilsProvider.tsx +++ b/lib/src/MuiPickersUtilsProvider.tsx @@ -22,11 +22,6 @@ export default class MuiPickersUtilsProvider extends React.Component { public static propTypes: any = { date: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, - classes: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, - children: PropTypes.node, utils: PropTypes.object.isRequired, ampm: PropTypes.bool, seconds: PropTypes.bool, diff --git a/lib/src/TimePicker/TimePickerInline.tsx b/lib/src/TimePicker/TimePickerInline.tsx index 66c47d9bb9eaae..211f65f49455f9 100644 --- a/lib/src/TimePicker/TimePickerInline.tsx +++ b/lib/src/TimePicker/TimePickerInline.tsx @@ -1,8 +1,6 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; 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'; @@ -42,23 +40,6 @@ export const TimePickerInline: React.SFC = props => { ); }; -(TimePickerInline as any).propTypes = { - value: DomainPropTypes.date, - format: PropTypes.string, - onChange: PropTypes.func.isRequired, - ampm: PropTypes.bool, - seconds: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -TimePickerInline.defaultProps = { - ampm: true, - value: new Date(), - format: undefined, - forwardedRef: undefined, - seconds: false, -}; - export default React.forwardRef((props: TimePickerInlineProps, ref) => ( )); diff --git a/lib/src/TimePicker/TimePickerModal.tsx b/lib/src/TimePicker/TimePickerModal.tsx index ce9bc772be1633..b742ea50608079 100644 --- a/lib/src/TimePicker/TimePickerModal.tsx +++ b/lib/src/TimePicker/TimePickerModal.tsx @@ -1,8 +1,6 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; 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'; @@ -48,25 +46,6 @@ export const TimePickerModal: React.SFC = props => { ); }; -(TimePickerModal as any).propTypes = { - value: DomainPropTypes.date, - format: PropTypes.string, - onChange: PropTypes.func.isRequired, - autoOk: PropTypes.bool, - ampm: PropTypes.bool, - seconds: PropTypes.bool, - forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), -}; - -TimePickerModal.defaultProps = { - value: new Date(), - format: undefined, - autoOk: false, - ampm: true, - forwardedRef: undefined, - seconds: false, -}; - export default React.forwardRef((props: TimePickerModalProps, ref) => ( )); diff --git a/lib/src/TimePicker/components/Clock.tsx b/lib/src/TimePicker/components/Clock.tsx index 24139c1c239075..31a2a4330c1841 100644 --- a/lib/src/TimePicker/components/Clock.tsx +++ b/lib/src/TimePicker/components/Clock.tsx @@ -19,7 +19,6 @@ export interface ClockProps extends WithStyles { export class Clock extends React.Component { public static propTypes: any = { type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key])).isRequired, - classes: PropTypes.object.isRequired, value: PropTypes.number.isRequired, onChange: PropTypes.func.isRequired, children: PropTypes.arrayOf(PropTypes.node).isRequired, diff --git a/lib/src/TimePicker/components/ClockPointer.tsx b/lib/src/TimePicker/components/ClockPointer.tsx index a21c0c8c56685f..39a622cd11e1c9 100644 --- a/lib/src/TimePicker/components/ClockPointer.tsx +++ b/lib/src/TimePicker/components/ClockPointer.tsx @@ -15,11 +15,9 @@ export interface ClockPointerProps extends WithStyles { export class ClockPointer extends React.Component { public static propTypes: any = { - classes: PropTypes.object.isRequired, value: PropTypes.number.isRequired, hasSelected: PropTypes.bool.isRequired, isInner: PropTypes.bool.isRequired, - innerRef: PropTypes.any, type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key])).isRequired, }; @@ -42,7 +40,7 @@ export class ClockPointer extends React.Component { public state = { toAnimateTransform: false, - previousType: undefined, // eslint-disable-line + previousType: undefined, }; public getAngleStyle = () => { diff --git a/lib/src/TimePicker/components/TimePickerView.tsx b/lib/src/TimePicker/components/TimePickerView.tsx index 78070ad7134c8e..728a893e1d378b 100644 --- a/lib/src/TimePicker/components/TimePickerView.tsx +++ b/lib/src/TimePicker/components/TimePickerView.tsx @@ -22,7 +22,6 @@ export class TimePickerView extends React.PureComponent { onHourChange: PropTypes.func.isRequired, onMinutesChange: PropTypes.func.isRequired, onSecondsChange: PropTypes.func.isRequired, - utils: PropTypes.object.isRequired, ampm: PropTypes.bool, type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key])).isRequired, }; diff --git a/lib/src/__tests__/DatePicker/DatePicker.test.tsx b/lib/src/__tests__/DatePicker/DatePicker.test.tsx index 18747ccda96b1a..7ab9f5a7663b68 100644 --- a/lib/src/__tests__/DatePicker/DatePicker.test.tsx +++ b/lib/src/__tests__/DatePicker/DatePicker.test.tsx @@ -8,12 +8,7 @@ describe('DatePicker', () => { beforeEach(() => { component = shallow( - + ); }); diff --git a/lib/src/_helpers/text-field-helper.ts b/lib/src/_helpers/text-field-helper.ts new file mode 100644 index 00000000000000..102a366c956ab8 --- /dev/null +++ b/lib/src/_helpers/text-field-helper.ts @@ -0,0 +1,65 @@ +import { DateTextFieldProps } from '../_shared/DateTextField'; +import { MaterialUiPickersDate } from '../typings/date'; + +export const getDisplayDate = ({ + utils, + value, + format, + invalidLabel, + emptyLabel, + labelFunc, +}: DateTextFieldProps) => { + const isEmpty = value === null; + const date = utils.date(value); + + if (labelFunc) { + return labelFunc(isEmpty ? null : date, invalidLabel!); + } + + if (isEmpty) { + return emptyLabel; + } + + return utils.isValid(date) ? utils.format(date, format) : invalidLabel; +}; + +export const getError = ( + value: MaterialUiPickersDate, + props: DateTextFieldProps +): React.ReactNode => { + const { + utils, + maxDate, + minDate, + disablePast, + disableFuture, + maxDateMessage, + minDateMessage, + invalidDateMessage, + } = props; + + if (!utils.isValid(value)) { + // if null - do not show error + if (utils.isNull(value)) { + return ''; + } + + return invalidDateMessage; + } + + if ( + (maxDate && utils.isAfter(value, utils.endOfDay(utils.date(maxDate)))) || + (disableFuture && utils.isAfter(value, utils.endOfDay(utils.date()))) + ) { + return maxDateMessage; + } + + if ( + (minDate && utils.isBefore(value, utils.startOfDay(utils.date(minDate)))) || + (disablePast && utils.isBefore(value, utils.startOfDay(utils.date()))) + ) { + return minDateMessage; + } + + return ''; +}; diff --git a/lib/src/_shared/BasePicker.tsx b/lib/src/_shared/BasePicker.tsx index 6d998331946d87..ea8c0133890b59 100644 --- a/lib/src/_shared/BasePicker.tsx +++ b/lib/src/_shared/BasePicker.tsx @@ -1,6 +1,8 @@ -import { IUtils } from '@date-io/core/IUtils'; +import * as PropTypes from 'prop-types'; import * as React from 'react'; -import { DateType } from '../constants/prop-types'; + +import { IUtils } from '@date-io/core/IUtils'; +import { DateType, DomainPropTypes } from '../constants/prop-types'; import { MaterialUiPickersDate } from '../typings/date'; import { withUtils, WithUtilsProps } from './WithUtils'; @@ -52,6 +54,19 @@ const getInitialDate = ({ utils, value, initialFocusedDate }: OuterBasePickerPro }; export class BasePicker extends React.Component { + public static propTypes = { + value: DomainPropTypes.date, + onChange: PropTypes.func.isRequired, + autoOk: PropTypes.bool, + initialFocusedDate: PropTypes.any, + }; + + public static defaultProps = { + value: new Date(), + autoOK: false, + ampm: true, + }; + public state = { date: getInitialDate(this.props), isAccepted: false, diff --git a/lib/src/_shared/DateTextField.tsx b/lib/src/_shared/DateTextField.tsx index 5ed3ad8ad41904..84ccb8699d8b08 100644 --- a/lib/src/_shared/DateTextField.tsx +++ b/lib/src/_shared/DateTextField.tsx @@ -8,73 +8,14 @@ import InputAdornment, { } from '@material-ui/core/InputAdornment'; import TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField'; import { MaskedInputProps } from 'react-text-mask'; -import DomainPropTypes, { DateType } from '../constants/prop-types'; +import { getDisplayDate, getError } from '../_helpers/text-field-helper'; +import { DateType, DomainPropTypes } from '../constants/prop-types'; import { MaterialUiPickersDate } from '../typings/date'; import { ExtendMui } from '../typings/extendMui'; import { KeyboardIcon } from './icons/KeyboardIcon'; import MaskedInput from './MaskedInput'; import { withUtils, WithUtilsProps } from './WithUtils'; -const getDisplayDate = ({ - utils, - value, - format, - invalidLabel, - emptyLabel, - labelFunc, -}: DateTextFieldProps) => { - const isEmpty = value === null; - const date = utils.date(value); - - if (labelFunc) { - return labelFunc(isEmpty ? null : date, invalidLabel!); - } - - if (isEmpty) { - return emptyLabel; - } - - return utils.isValid(date) ? utils.format(date, format) : invalidLabel; -}; - -const getError = (value: MaterialUiPickersDate, props: DateTextFieldProps): React.ReactNode => { - const { - utils, - maxDate, - minDate, - disablePast, - disableFuture, - maxDateMessage, - minDateMessage, - invalidDateMessage, - } = props; - - if (!utils.isValid(value)) { - // if null - do not show error - if (utils.isNull(value)) { - return ''; - } - - return invalidDateMessage; - } - - if ( - (maxDate && utils.isAfter(value, utils.endOfDay(utils.date(maxDate)))) || - (disableFuture && utils.isAfter(value, utils.endOfDay(utils.date()))) - ) { - return maxDateMessage; - } - - if ( - (minDate && utils.isBefore(value, utils.startOfDay(utils.date(minDate)))) || - (disablePast && utils.isBefore(value, utils.startOfDay(utils.date()))) - ) { - return minDateMessage; - } - - return ''; -}; - export interface DateTextFieldProps extends WithUtilsProps, ExtendMui { @@ -149,7 +90,6 @@ export class DateTextField extends React.PureComponent { onClick: PropTypes.func.isRequired, clearable: PropTypes.bool, utils: PropTypes.object.isRequired, - disabled: PropTypes.bool, InputProps: PropTypes.shape({}), mask: PropTypes.any, minDateMessage: PropTypes.node, @@ -174,22 +114,13 @@ export class DateTextField extends React.PureComponent { disabled: false, invalidLabel: 'Unknown', emptyLabel: '', - value: new Date(), - labelFunc: undefined, - format: undefined, - InputProps: undefined, keyboard: false, - mask: undefined, keyboardIcon: , disableOpenOnEnter: false, invalidDateMessage: 'Invalid Date Format', clearable: false, - onBlur: undefined, - onClear: undefined, disablePast: false, disableFuture: false, - onError: undefined, - onInputChange: undefined, minDate: '1900-01-01', maxDate: '2100-01-01', minDateMessage: 'Date should not be before minimal date', @@ -197,17 +128,16 @@ export class DateTextField extends React.PureComponent { TextFieldComponent: TextField, InputAdornmentProps: {}, adornmentPosition: 'end' as MuiInputAdornmentProps['position'], - pipe: undefined, keepCharPositions: false, }; - public static updateState = (props: DateTextFieldProps) => ({ + public static getStateFromProps = (props: DateTextFieldProps) => ({ value: props.value, displayValue: getDisplayDate(props), error: getError(props.utils.date(props.value), props), }); - public state = DateTextField.updateState(this.props); + public state = DateTextField.getStateFromProps(this.props); public componentDidUpdate(prevProps: DateTextFieldProps) { if ( @@ -218,7 +148,7 @@ export class DateTextField extends React.PureComponent { prevProps.emptyLabel !== this.props.emptyLabel || prevProps.utils !== this.props.utils ) { - this.setState(DateTextField.updateState(this.props)); + this.setState(DateTextField.getStateFromProps(this.props)); } } @@ -227,7 +157,7 @@ export class DateTextField extends React.PureComponent { if (value === '') { if (this.props.value === null) { - this.setState(DateTextField.updateState(this.props)); + this.setState(DateTextField.getStateFromProps(this.props)); } else if (clearable && onClear) { onClear(); } diff --git a/lib/src/_shared/MaskedInput.tsx b/lib/src/_shared/MaskedInput.tsx index e5fdc556039293..ba77e1f629642e 100644 --- a/lib/src/_shared/MaskedInput.tsx +++ b/lib/src/_shared/MaskedInput.tsx @@ -13,10 +13,6 @@ export default class Input extends React.PureComponent { inputRef: PropTypes.func.isRequired, }; - public static defaultProps = { - mask: undefined, - }; - public createInputRef = (ref: MaskedInput | null) => { const { inputRef } = this.props; diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts index 41f995861f8520..4de727a6140f29 100644 --- a/lib/src/constants/prop-types.ts +++ b/lib/src/constants/prop-types.ts @@ -9,4 +9,4 @@ const date = PropTypes.oneOfType([ export type DateType = object | string | number | Date | null | undefined; -export default { date }; +export const DomainPropTypes = { date }; diff --git a/lib/src/wrappers/InlineWrapper.tsx b/lib/src/wrappers/InlineWrapper.tsx index 19bba9c898f935..b878cb9bc9c941 100644 --- a/lib/src/wrappers/InlineWrapper.tsx +++ b/lib/src/wrappers/InlineWrapper.tsx @@ -6,7 +6,6 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; import EventListener from 'react-event-listener'; import DateTextField, { DateTextFieldProps } from '../_shared/DateTextField'; -import DomainPropTypes from '../constants/prop-types'; export interface OuterInlineWrapperProps extends Omit { /** On open callback */ @@ -29,32 +28,15 @@ export class InlineWrapper extends React.PureComponent< > { public static propTypes: any = { onlyCalendar: PropTypes.bool, - value: DomainPropTypes.date, onOpen: PropTypes.func, onClose: PropTypes.func, - format: PropTypes.string, PopoverProps: PropTypes.object, - labelFunc: PropTypes.func, - onClear: PropTypes.func, - isAccepted: PropTypes.bool, - handleAccept: PropTypes.func.isRequired, - children: PropTypes.node.isRequired, - keyboard: PropTypes.bool, - classes: PropTypes.object.isRequired, - innerRef: PropTypes.any, }; public static defaultProps = { value: new Date(), - labelFunc: undefined, onlyCalendar: false, - format: undefined, - onClear: undefined, - onOpen: undefined, - onClose: undefined, - PopoverProps: undefined, isAccepted: false, - keyboard: undefined, }; public static getDerivedStateFromProps(nextProps: InlineWrapperProps) { diff --git a/lib/src/wrappers/ModalWrapper.tsx b/lib/src/wrappers/ModalWrapper.tsx index 470e8f9b24b050..9e1c879474f85e 100644 --- a/lib/src/wrappers/ModalWrapper.tsx +++ b/lib/src/wrappers/ModalWrapper.tsx @@ -5,7 +5,6 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; import DateTextField, { DateTextFieldProps } from '../_shared/DateTextField'; import ModalDialog from '../_shared/ModalDialog'; -import DomainPropTypes from '../constants/prop-types'; export interface ModalWrapperProps extends Omit { onAccept?: () => void; @@ -44,11 +43,7 @@ export default class ModalWrapper extends React.PureComponent todayLabel: PropTypes.string, showTodayButton: PropTypes.bool, onOpen: PropTypes.func, - format: PropTypes.string, DialogProps: PropTypes.object, - value: DomainPropTypes.date, - invalidLabel: PropTypes.node, - labelFunc: PropTypes.func, onClose: PropTypes.func, onAccept: PropTypes.func, onDismiss: PropTypes.func, @@ -59,23 +54,13 @@ export default class ModalWrapper extends React.PureComponent }; public static defaultProps = { - invalidLabel: undefined, value: new Date(), - labelFunc: undefined, okLabel: 'OK', cancelLabel: 'Cancel', clearLabel: 'Clear', todayLabel: 'Today', clearable: false, showTodayButton: false, - format: undefined, - onAccept: undefined, - onDismiss: undefined, - onClear: undefined, - onOpen: undefined, - onClose: undefined, - onSetToday: undefined, - DialogProps: undefined, isAccepted: false, };