From b470d65dcc6cca27d3c29e3a29a58b883f2d80ea Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 Jun 2020 15:19:45 +0200 Subject: [PATCH] [core] Sort props ASC (#1928) --- docs/prop-types.json | 78 ++++++++----------- lib/src/CalendarSkeleton.tsx | 8 +- .../DateRangePicker/DateRangePickerDay.tsx | 12 +-- .../DateRangePicker/DateRangePickerInput.tsx | 2 +- .../DateRangePickerToolbar.tsx | 8 +- .../DateRangePickerViewDesktop.tsx | 2 +- .../DateRangePickerViewMobile.tsx | 8 +- lib/src/DateTimePicker/DateTimePicker.tsx | 10 +-- lib/src/DateTimePicker/DateTimePickerTabs.tsx | 8 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 10 +-- lib/src/Picker/Picker.tsx | 16 ++-- lib/src/TimePicker/TimePicker.tsx | 4 +- lib/src/TimePicker/TimePickerToolbar.tsx | 12 +-- lib/src/_helpers/time-utils.ts | 2 +- lib/src/_helpers/utils.ts | 12 +-- lib/src/_shared/ArrowSwitcher.tsx | 15 ++-- lib/src/_shared/hooks/useIsLandscape.tsx | 11 ++- lib/src/_shared/hooks/useKeyDown.ts | 13 ++-- lib/src/_shared/hooks/useMaskedInput.tsx | 22 +++--- lib/src/views/Calendar/CalendarView.tsx | 18 ++--- lib/src/views/Calendar/Day.tsx | 24 +++--- lib/src/views/Calendar/Month.tsx | 6 +- lib/src/views/Calendar/MonthSelection.tsx | 8 +- lib/src/views/Calendar/SlideTransition.tsx | 4 +- lib/src/views/Calendar/Year.tsx | 12 +-- lib/src/views/Calendar/YearSelection.tsx | 22 +++--- lib/src/views/Calendar/useCalendarState.tsx | 10 +-- lib/src/views/Clock/Clock.tsx | 14 ++-- lib/src/views/Clock/ClockNumber.tsx | 18 ++--- lib/src/views/Clock/ClockNumbers.tsx | 18 ++--- lib/src/wrappers/DesktopPopperWrapper.tsx | 8 +- lib/src/wrappers/DesktopWrapper.tsx | 6 +- lib/src/wrappers/MobileWrapper.tsx | 24 +++--- lib/src/wrappers/ResponsiveWrapper.tsx | 12 +-- lib/src/wrappers/makeWrapperComponent.tsx | 24 +++--- 35 files changed, 240 insertions(+), 241 deletions(-) diff --git a/docs/prop-types.json b/docs/prop-types.json index 042b5e174..c24270fb4 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -363,7 +363,7 @@ }, "leftArrowIcon": { "defaultValue": null, - "description": "Left arrow icon", + "description": "Left arrow icon.", "name": "leftArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -376,7 +376,7 @@ }, "rightArrowIcon": { "defaultValue": null, - "description": "Right arrow icon", + "description": "Right arrow icon.", "name": "rightArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -389,7 +389,7 @@ }, "leftArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to left arrow button", + "description": "Props to pass to left arrow button.", "name": "leftArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -402,7 +402,7 @@ }, "rightArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to right arrow button", + "description": "Props to pass to right arrow button.", "name": "rightArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -415,7 +415,7 @@ }, "leftArrowButtonText": { "defaultValue": null, - "description": "Left arrow icon aria-label text", + "description": "Left arrow icon aria-label text.", "name": "leftArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -428,7 +428,7 @@ }, "rightArrowButtonText": { "defaultValue": null, - "description": "Right arrow icon aria-label text", + "description": "Right arrow icon aria-label text.", "name": "rightArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -1292,7 +1292,7 @@ "defaultValue": { "value": "false" }, - "description": "Do not ignore date part when validating min/max time", + "description": "Do not ignore date part when validating min/max time.", "name": "disableIgnoringDatePartForTimeValidation", "parent": { "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", @@ -2114,7 +2114,7 @@ "defaultValue": { "value": "false" }, - "description": "Do not ignore date part when validating min/max time", + "description": "Do not ignore date part when validating min/max time.", "name": "disableIgnoringDatePartForTimeValidation", "parent": { "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", @@ -2157,7 +2157,7 @@ }, "leftArrowIcon": { "defaultValue": null, - "description": "Left arrow icon", + "description": "Left arrow icon.", "name": "leftArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -2170,7 +2170,7 @@ }, "rightArrowIcon": { "defaultValue": null, - "description": "Right arrow icon", + "description": "Right arrow icon.", "name": "rightArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -2183,7 +2183,7 @@ }, "leftArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to left arrow button", + "description": "Props to pass to left arrow button.", "name": "leftArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -2196,7 +2196,7 @@ }, "rightArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to right arrow button", + "description": "Props to pass to right arrow button.", "name": "rightArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -2209,7 +2209,7 @@ }, "leftArrowButtonText": { "defaultValue": null, - "description": "Left arrow icon aria-label text", + "description": "Left arrow icon aria-label text.", "name": "leftArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -2222,7 +2222,7 @@ }, "rightArrowButtonText": { "defaultValue": null, - "description": "Right arrow icon aria-label text", + "description": "Right arrow icon aria-label text.", "name": "rightArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3032,7 +3032,7 @@ }, "leftArrowIcon": { "defaultValue": null, - "description": "Left arrow icon", + "description": "Left arrow icon.", "name": "leftArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3045,7 +3045,7 @@ }, "rightArrowIcon": { "defaultValue": null, - "description": "Right arrow icon", + "description": "Right arrow icon.", "name": "rightArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3058,7 +3058,7 @@ }, "leftArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to left arrow button", + "description": "Props to pass to left arrow button.", "name": "leftArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3071,7 +3071,7 @@ }, "rightArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to right arrow button", + "description": "Props to pass to right arrow button.", "name": "rightArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3084,7 +3084,7 @@ }, "leftArrowButtonText": { "defaultValue": null, - "description": "Left arrow icon aria-label text", + "description": "Left arrow icon aria-label text.", "name": "leftArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3097,7 +3097,7 @@ }, "rightArrowButtonText": { "defaultValue": null, - "description": "Right arrow icon aria-label text", + "description": "Right arrow icon aria-label text.", "name": "rightArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -3297,7 +3297,7 @@ "defaultValue": { "value": "2" }, - "description": "How many calendars render on **desktop** DateRangePicker", + "description": "How many calendars render on **desktop** DateRangePicker.", "name": "calendars", "parent": { "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx", @@ -4218,9 +4218,7 @@ } }, "getHoursClockNumberText": { - "defaultValue": { - "value": null - }, + "defaultValue": null, "description": "Get clock number aria-text for hours.", "name": "getHoursClockNumberText", "parent": { @@ -4233,9 +4231,7 @@ } }, "getMinutesClockNumberText": { - "defaultValue": { - "value": null - }, + "defaultValue": null, "description": "Get clock number aria-text for minutes.", "name": "getMinutesClockNumberText", "parent": { @@ -4248,9 +4244,7 @@ } }, "getSecondsClockNumberText": { - "defaultValue": { - "value": null - }, + "defaultValue": null, "description": "Get clock number aria-text for seconds.", "name": "getSecondsClockNumberText", "parent": { @@ -4279,7 +4273,7 @@ }, "minutesStep": { "defaultValue": { - "value": 1 + "value": "1" }, "description": "Step over minutes", "name": "minutesStep", @@ -4365,7 +4359,7 @@ "defaultValue": { "value": "false" }, - "description": "Do not ignore date part when validating min/max time", + "description": "Do not ignore date part when validating min/max time.", "name": "disableIgnoringDatePartForTimeValidation", "parent": { "fileName": "material-ui-pickers/lib/src/_helpers/time-utils.ts", @@ -4378,7 +4372,7 @@ }, "leftArrowIcon": { "defaultValue": null, - "description": "Left arrow icon", + "description": "Left arrow icon.", "name": "leftArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -4391,7 +4385,7 @@ }, "rightArrowIcon": { "defaultValue": null, - "description": "Right arrow icon", + "description": "Right arrow icon.", "name": "rightArrowIcon", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -4403,10 +4397,8 @@ } }, "leftArrowButtonText": { - "defaultValue": { - "value": "open previous view" - }, - "description": "Left arrow icon aria-label text", + "defaultValue": null, + "description": "Left arrow icon aria-label text.", "name": "leftArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -4418,10 +4410,8 @@ } }, "rightArrowButtonText": { - "defaultValue": { - "value": "open next view" - }, - "description": "Right arrow icon aria-label text", + "defaultValue": null, + "description": "Right arrow icon aria-label text.", "name": "rightArrowButtonText", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -4434,7 +4424,7 @@ }, "leftArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to left arrow button", + "description": "Props to pass to left arrow button.", "name": "leftArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", @@ -4447,7 +4437,7 @@ }, "rightArrowButtonProps": { "defaultValue": null, - "description": "Props to pass to right arrow button", + "description": "Props to pass to right arrow button.", "name": "rightArrowButtonProps", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/ArrowSwitcher.tsx", diff --git a/lib/src/CalendarSkeleton.tsx b/lib/src/CalendarSkeleton.tsx index 3ef6562e3..b9b0914ca 100644 --- a/lib/src/CalendarSkeleton.tsx +++ b/lib/src/CalendarSkeleton.tsx @@ -43,11 +43,11 @@ export const CalendarSkeleton: React.FC = withDefaultProp return (
- {monthMap.map((week, i) => ( -
- {week.map((day, i) => ( + {monthMap.map((week, index) => ( +
+ {week.map((day, index) => ( { const utils = useUtils(); diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx index 3e041dd3b..562ab79ca 100644 --- a/lib/src/DateRangePicker/DateRangePickerInput.tsx +++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx @@ -78,12 +78,12 @@ export const DateRangePickerInput: React.FC = ({ open, openPicker, rawValue, + rawValue: [start, end], readOnly, renderInput, setCurrentlySelectingRangeEnd, startText, TextFieldProps, - rawValue: [start, end], validationError: [startValidationError, endValidationError], ...other }) => { diff --git a/lib/src/DateRangePicker/DateRangePickerToolbar.tsx b/lib/src/DateRangePicker/DateRangePickerToolbar.tsx index deafd2de2..f4cd7839d 100644 --- a/lib/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/lib/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -38,14 +38,14 @@ interface DateRangePickerToolbarProps export const DateRangePickerToolbar: React.FC = withDefaultProps( muiComponentConfig, ({ + currentlySelectingRangeEnd, date: [start, end], - toolbarFormat, + endText, isMobileKeyboardViewOpen, - toggleMobileKeyboardView, - currentlySelectingRangeEnd, setCurrentlySelectingRangeEnd, startText, - endText, + toggleMobileKeyboardView, + toolbarFormat, toolbarTitle = 'SELECT DATE RANGE', }) => { const utils = useUtils(); diff --git a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx index a5a5d77fa..a896b599a 100644 --- a/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx +++ b/lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx @@ -21,7 +21,7 @@ import { export interface ExportedDesktopDateRangeCalendarProps { /** - * How many calendars render on **desktop** DateRangePicker + * How many calendars render on **desktop** DateRangePicker. * @default 2 */ calendars?: 1 | 2 | 3; diff --git a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx index e40eddb01..3a1016790 100644 --- a/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx +++ b/lib/src/DateRangePicker/DateRangePickerViewMobile.tsx @@ -28,17 +28,17 @@ interface DesktopDateRangeCalendarProps const onlyDateView = ['date'] as ['date']; export const DateRangePickerViewMobile: React.FC = ({ - date, changeMonth, + date, leftArrowButtonProps, leftArrowButtonText, leftArrowIcon, + maxDate: __maxDate, + minDate: __minDate, + onChange, rightArrowButtonProps, rightArrowButtonText, rightArrowIcon, - onChange, - minDate: __minDate, - maxDate: __maxDate, ...other }) => { const utils = useUtils(); diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx index 357d16ef4..70e7e6529 100644 --- a/lib/src/DateTimePicker/DateTimePicker.tsx +++ b/lib/src/DateTimePicker/DateTimePicker.tsx @@ -47,16 +47,16 @@ export interface BaseDateTimePickerProps function useInterceptProps({ ampm, - mask, inputFormat, - orientation = 'portrait', - minTime: __minTime, - maxTime: __maxTime, - minDate: __minDate = defaultMinDate, + mask, maxDate: __maxDate = defaultMaxDate, maxDateTime: __maxDateTime, + maxTime: __maxTime, + minDate: __minDate = defaultMinDate, minDateTime: __minDateTime, + minTime: __minTime, openTo = 'date', + orientation = 'portrait', views = ['year', 'date', 'hours', 'minutes'], ...other }: BaseDateTimePickerProps & AllSharedPickerProps) { diff --git a/lib/src/DateTimePicker/DateTimePickerTabs.tsx b/lib/src/DateTimePicker/DateTimePickerTabs.tsx index 470143bde..56c120a62 100644 --- a/lib/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/lib/src/DateTimePicker/DateTimePickerTabs.tsx @@ -26,10 +26,10 @@ const tabIndexToView = (tab: DateTimePickerView) => { }; export interface DateTimePickerTabsProps { - view: DateTimePickerView; - onChange: (view: DateTimePickerView) => void; dateRangeIcon?: React.ReactNode; + onChange: (view: DateTimePickerView) => void; timeIcon?: React.ReactNode; + view: DateTimePickerView; } export const useStyles = makeStyles( @@ -53,10 +53,10 @@ export const useStyles = makeStyles( ); export const DateTimePickerTabs: React.FC = ({ - view, + dateRangeIcon = , onChange, timeIcon = , - dateRangeIcon = , + view, }) => { const classes = useStyles(); const theme = useTheme(); diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx index 2752d0fed..0cfb19cf2 100644 --- a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -45,17 +45,17 @@ export const useStyles = makeStyles( export const DateTimePickerToolbar: React.FC = withDefaultProps( muiComponentConfig, ({ + ampm, date, + dateRangeIcon, + hideTabs, + isMobileKeyboardViewOpen, openView, setOpenView, - ampm, - hideTabs, - dateRangeIcon, timeIcon, + toggleMobileKeyboardView, toolbarFormat, toolbarPlaceholder = '––', - isMobileKeyboardViewOpen, - toggleMobileKeyboardView, toolbarTitle = 'SELECT DATE & TIME', }) => { const utils = useUtils(); diff --git a/lib/src/Picker/Picker.tsx b/lib/src/Picker/Picker.tsx index d407eddac..c5621d9eb 100644 --- a/lib/src/Picker/Picker.tsx +++ b/lib/src/Picker/Picker.tsx @@ -90,20 +90,20 @@ const isTimePickerByViews = (views: DateTimePickerView[]) => !views.some(view => view === 'year' || view === 'month' || view === 'date'); function Picker({ + className, date, - openTo = 'date', - views = ['year', 'month', 'date', 'hours', 'minutes', 'seconds'], - toolbarTitle, - showToolbar, - onDateChange, - ToolbarComponent = () => null, - orientation, DateInputProps, isMobileKeyboardViewOpen, + onDateChange, + openTo = 'date', + orientation, + showToolbar, toggleMobileKeyboardView, + ToolbarComponent = () => null, toolbarFormat, - className, toolbarPlaceholder, + toolbarTitle, + views = ['year', 'month', 'date', 'hours', 'minutes', 'seconds'], ...other }: PickerProps) { const classes = useStyles(); diff --git a/lib/src/TimePicker/TimePicker.tsx b/lib/src/TimePicker/TimePicker.tsx index b790e8551..82c97d5be 100644 --- a/lib/src/TimePicker/TimePicker.tsx +++ b/lib/src/TimePicker/TimePicker.tsx @@ -26,10 +26,10 @@ export function getTextFieldAriaText(value: ParsableDate, utils: MuiPickersAdapt function useInterceptProps({ ampm, - mask, inputFormat, - minTime: __minTime, + mask, maxTime: __maxTime, + minTime: __minTime, openTo = 'hours', views = ['hours', 'minutes'], ...other diff --git a/lib/src/TimePicker/TimePickerToolbar.tsx b/lib/src/TimePicker/TimePickerToolbar.tsx index 8fa947ce8..781c09e41 100644 --- a/lib/src/TimePicker/TimePickerToolbar.tsx +++ b/lib/src/TimePicker/TimePickerToolbar.tsx @@ -77,17 +77,17 @@ const clockTypographyVariant = 'h3'; export const TimePickerToolbar: React.FC = withDefaultProps( muiComponentConfig, ({ - date, - views, ampm, - openView, - onChange, - isLandscape, - setOpenView, ampmInClock, + date, + isLandscape, isMobileKeyboardViewOpen, + onChange, + openView, + setOpenView, toggleMobileKeyboardView, toolbarTitle = 'SELECT TIME', + views, }) => { const utils = useUtils(); const theme = useTheme(); diff --git a/lib/src/_helpers/time-utils.ts b/lib/src/_helpers/time-utils.ts index 712b7cef8..459354185 100644 --- a/lib/src/_helpers/time-utils.ts +++ b/lib/src/_helpers/time-utils.ts @@ -125,7 +125,7 @@ export interface TimeValidationProps { */ shouldDisableTime?: (timeValue: number, clockType: 'hours' | 'minutes' | 'seconds') => boolean; /** - * Do not ignore date part when validating min/max time + * Do not ignore date part when validating min/max time. * @default false */ disableIgnoringDatePartForTimeValidation?: boolean; diff --git a/lib/src/_helpers/utils.ts b/lib/src/_helpers/utils.ts index a8b77fb82..63c424ba5 100644 --- a/lib/src/_helpers/utils.ts +++ b/lib/src/_helpers/utils.ts @@ -11,18 +11,18 @@ export function arrayIncludes(array: T[] | readonly T[], itemOrItems: T | T[] export const onSpaceOrEnter = ( innerFn: () => void, - onFocus?: (e: React.KeyboardEvent) => void -) => (e: React.KeyboardEvent) => { - if (e.key === 'Enter' || e.key === ' ') { + onFocus?: (event: React.KeyboardEvent) => void +) => (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { innerFn(); // prevent any side effects - e.preventDefault(); - e.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); } if (onFocus) { - onFocus(e); + onFocus(event); } }; diff --git a/lib/src/_shared/ArrowSwitcher.tsx b/lib/src/_shared/ArrowSwitcher.tsx index 31e57aead..52d217b71 100644 --- a/lib/src/_shared/ArrowSwitcher.tsx +++ b/lib/src/_shared/ArrowSwitcher.tsx @@ -8,28 +8,28 @@ import { makeStyles, useTheme } from '@material-ui/core/styles'; export interface ExportedArrowSwitcherProps { /** - * Left arrow icon + * Left arrow icon. */ leftArrowIcon?: React.ReactNode; /** - * Right arrow icon + * Right arrow icon. */ rightArrowIcon?: React.ReactNode; /** - * Left arrow icon aria-label text + * Left arrow icon aria-label text. */ leftArrowButtonText?: string; /** - * Right arrow icon aria-label text + * Right arrow icon aria-label text. */ rightArrowButtonText?: string; /** - * Props to pass to left arrow button + * Props to pass to left arrow button. * @type {Partial} */ leftArrowButtonProps?: Partial; /** - * Props to pass to right arrow button + * Props to pass to right arrow button. * @type {Partial} */ rightArrowButtonProps?: Partial; @@ -47,6 +47,7 @@ interface ArrowSwitcherProps extends ExportedArrowSwitcherProps, React.HTMLProps export const useStyles = makeStyles( theme => ({ + root: {}, iconButton: { zIndex: 1, backgroundColor: theme.palette.background.paper, @@ -83,7 +84,7 @@ const PureArrowSwitcher: React.FC = ({ const isRtl = theme.direction === 'rtl'; return ( -
+
setOrientation(getOrientation()), []); - useIsomorphicEffect(() => { + const eventHandler = () => { + setOrientation(getOrientation()); + }; window.addEventListener('orientationchange', eventHandler); - return () => window.removeEventListener('orientationchange', eventHandler); - }, [eventHandler]); + return () => { + window.removeEventListener('orientationchange', eventHandler); + }; + }, []); if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) { // could not display 13:34:44 in landscape mode diff --git a/lib/src/_shared/hooks/useKeyDown.ts b/lib/src/_shared/hooks/useKeyDown.ts index cab390f8d..6026d0231 100644 --- a/lib/src/_shared/hooks/useKeyDown.ts +++ b/lib/src/_shared/hooks/useKeyDown.ts @@ -5,12 +5,15 @@ export const useIsomorphicEffect = type KeyHandlers = Record void>; -export function runKeyHandler(e: KeyboardEvent | React.KeyboardEvent, keyHandlers: KeyHandlers) { - const handler = keyHandlers[e.keyCode]; +export function runKeyHandler( + event: KeyboardEvent | React.KeyboardEvent, + keyHandlers: KeyHandlers +) { + const handler = keyHandlers[event.keyCode]; if (handler) { handler(); // if event was handled prevent other side effects (e.g. page scroll) - e.preventDefault(); + event.preventDefault(); } } @@ -19,9 +22,9 @@ export function useKeyDownHandler(active: boolean, keyHandlers: KeyHandlers) { keyHandlersRef.current = keyHandlers; return React.useCallback( - (e: React.KeyboardEvent) => { + (event: React.KeyboardEvent) => { if (active) { - runKeyHandler(e, keyHandlersRef.current); + runKeyHandler(event, keyHandlersRef.current); } }, [active] diff --git a/lib/src/_shared/hooks/useMaskedInput.tsx b/lib/src/_shared/hooks/useMaskedInput.tsx index b53059c6e..2af587fc8 100644 --- a/lib/src/_shared/hooks/useMaskedInput.tsx +++ b/lib/src/_shared/hooks/useMaskedInput.tsx @@ -24,20 +24,20 @@ type MaskedInputProps = Omit< > & { inputProps?: Partial> }; export function useMaskedInput({ - disableMaskedInput, - rawValue, - validationError, - onChange, - mask, acceptRegex = /[\d]/gi, - inputFormat, disabled, - rifmFormatter, + disableMaskedInput, ignoreInvalidInputs, + inputFormat, + inputProps, + label, + mask, + onChange, + rawValue, readOnly, + rifmFormatter, TextFieldProps, - label, - inputProps, + validationError, }: MaskedInputProps): MuiTextFieldProps { const utils = useUtils(); const isFocusedRef = React.useRef(false); @@ -96,7 +96,9 @@ export function useMaskedInput({ ? rifmProps : { value: innerInputValue, - onChange: (e: React.ChangeEvent) => handleChange(e.currentTarget.value), + onChange: (event: React.ChangeEvent) => { + handleChange(event.currentTarget.value); + }, }; return { diff --git a/lib/src/views/Calendar/CalendarView.tsx b/lib/src/views/Calendar/CalendarView.tsx index b27d79629..6c2bf8235 100644 --- a/lib/src/views/Calendar/CalendarView.tsx +++ b/lib/src/views/Calendar/CalendarView.tsx @@ -78,21 +78,21 @@ export const defaultReduceAnimations = export const CalendarView: React.FC = withDefaultProps( muiComponentConfig, ({ + allowKeyboardControl: __allowKeyboardControlProp, + changeView, date, - view, + disableFuture, + disablePast, + loading, + maxDate: __maxDate, + minDate: __minDate, onChange, - changeView, onMonthChange, - minDate: __minDate, - maxDate: __maxDate, reduceAnimations = defaultReduceAnimations, + renderLoading, shouldDisableDate, - allowKeyboardControl: __allowKeyboardControlProp, - disablePast, - disableFuture, shouldDisableYear, - loading, - renderLoading, + view, ...other }) => { const utils = useUtils(); diff --git a/lib/src/views/Calendar/Day.tsx b/lib/src/views/Calendar/Day.tsx index 4dc5329ad..21b02fb9a 100644 --- a/lib/src/views/Calendar/Day.tsx +++ b/lib/src/views/Calendar/Day.tsx @@ -128,25 +128,25 @@ export interface DayProps extends ExtendMui { } const PureDay: React.FC = ({ + allowKeyboardControl, className, day, disabled, + disableHighlightToday = false, + disableMargin = false, + focusable = false, + focused = false, hidden, inCurrentMonth: isInCurrentMonth, - today: isToday, - selected, - focused = false, - focusable = false, isAnimating, + onClick, onDayFocus, onDaySelect, onFocus, - onClick, onKeyDown, - disableMargin = false, - allowKeyboardControl, - disableHighlightToday = false, + selected, showDaysOutsideCurrentMonth = false, + today: isToday, ...other }) => { const ref = React.useRef(null); @@ -166,23 +166,23 @@ const PureDay: React.FC = ({ } }, [allowKeyboardControl, disabled, focused, isAnimating, isInCurrentMonth]); - const handleFocus = (e: React.FocusEvent) => { + const handleFocus = (event: React.FocusEvent) => { if (!focused) { onDayFocus(day); } if (onFocus) { - onFocus(e); + onFocus(event); } }; - const handleClick = (e: React.MouseEvent) => { + const handleClick = (event: React.MouseEvent) => { if (!disabled) { onDaySelect(day, true); } if (onClick) { - onClick(e); + onClick(event); } }; diff --git a/lib/src/views/Calendar/Month.tsx b/lib/src/views/Calendar/Month.tsx index 2a0d950bb..97e28f371 100644 --- a/lib/src/views/Calendar/Month.tsx +++ b/lib/src/views/Calendar/Month.tsx @@ -41,11 +41,11 @@ export const useStyles = makeStyles( ); export const Month: React.FC = ({ - selected, - onSelect, + children, disabled, + onSelect, + selected, value, - children, ...other }) => { const classes = useStyles(); diff --git a/lib/src/views/Calendar/MonthSelection.tsx b/lib/src/views/Calendar/MonthSelection.tsx index c32947f35..0291fc203 100644 --- a/lib/src/views/Calendar/MonthSelection.tsx +++ b/lib/src/views/Calendar/MonthSelection.tsx @@ -28,13 +28,13 @@ export const useStyles = makeStyles( ); export const MonthSelection: React.FC = ({ - disablePast, + date, disableFuture, - minDate, + disablePast, maxDate, - date, - onMonthChange, + minDate, onChange, + onMonthChange, }) => { const utils = useUtils(); const classes = useStyles(); diff --git a/lib/src/views/Calendar/SlideTransition.tsx b/lib/src/views/Calendar/SlideTransition.tsx index e6020c007..4e826abbf 100644 --- a/lib/src/views/Calendar/SlideTransition.tsx +++ b/lib/src/views/Calendar/SlideTransition.tsx @@ -69,10 +69,10 @@ export const useStyles = makeStyles( export const SlideTransition: React.SFC = ({ children, - transKey, + className, reduceAnimations, slideDirection, - className = undefined, + transKey, ...other }) => { const classes = useStyles(); diff --git a/lib/src/views/Calendar/Year.tsx b/lib/src/views/Calendar/Year.tsx index c826c6dab..6ebd8a8c1 100644 --- a/lib/src/views/Calendar/Year.tsx +++ b/lib/src/views/Calendar/Year.tsx @@ -60,14 +60,14 @@ export const useStyles = makeStyles( ); export const Year: React.FC = ({ - onSelect, - forwardedRef, - value, - selected, - disabled, + allowKeyboardControl, children, + disabled, focused, - allowKeyboardControl, + forwardedRef, + onSelect, + selected, + value, ...other }) => { const classes = useStyles(); diff --git a/lib/src/views/Calendar/YearSelection.tsx b/lib/src/views/Calendar/YearSelection.tsx index 3f59eda6c..dea900386 100644 --- a/lib/src/views/Calendar/YearSelection.tsx +++ b/lib/src/views/Calendar/YearSelection.tsx @@ -19,15 +19,15 @@ export interface ExportedYearSelectionProps { } export interface YearSelectionProps extends ExportedYearSelectionProps { + allowKeyboardControl?: boolean; + changeFocusedDay: (day: MaterialUiPickersDate) => void; date: MaterialUiPickersDate; - minDate: MaterialUiPickersDate; - maxDate: MaterialUiPickersDate; - onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void; - disablePast?: boolean | null | undefined; disableFuture?: boolean | null | undefined; - allowKeyboardControl?: boolean; + disablePast?: boolean | null | undefined; isDateDisabled: (day: MaterialUiPickersDate) => boolean; - changeFocusedDay: (day: MaterialUiPickersDate) => void; + maxDate: MaterialUiPickersDate; + minDate: MaterialUiPickersDate; + onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void; } export const useStyles = makeStyles( @@ -44,15 +44,15 @@ export const useStyles = makeStyles( ); export const YearSelection: React.FC = ({ + allowKeyboardControl, + changeFocusedDay, date: __dateOrNull, + isDateDisabled, + maxDate, + minDate, onChange, onYearChange, - minDate, - maxDate, - isDateDisabled, shouldDisableYear, - changeFocusedDay, - allowKeyboardControl, }) => { const now = useNow(); const theme = useTheme(); diff --git a/lib/src/views/Calendar/useCalendarState.tsx b/lib/src/views/Calendar/useCalendarState.tsx index 2317f46f5..3ba3de383 100644 --- a/lib/src/views/Calendar/useCalendarState.tsx +++ b/lib/src/views/Calendar/useCalendarState.tsx @@ -79,14 +79,14 @@ type CalendarStateInput = Pick< export function useCalendarState({ date, - reduceAnimations, - onMonthChange, - disablePast, disableFuture, - minDate, + disablePast, + disableSwitchToMonthOnDayFocus = false, maxDate, + minDate, + onMonthChange, + reduceAnimations, shouldDisableDate, - disableSwitchToMonthOnDayFocus = false, }: CalendarStateInput) { const now = useNow(); const utils = useUtils(); diff --git a/lib/src/views/Clock/Clock.tsx b/lib/src/views/Clock/Clock.tsx index 4eaa23e03..d99575de8 100644 --- a/lib/src/views/Clock/Clock.tsx +++ b/lib/src/views/Clock/Clock.tsx @@ -99,18 +99,18 @@ export const useStyles = makeStyles( export const Clock: React.FC = withDefaultProps( muiComponentConfig, ({ - date, + allowKeyboardControl, + ampm, ampmInClock = false, - value, children: numbersElementsArray, - type, - ampm, + date, + handleMeridiemChange, isTimeDisabled, + meridiemMode, minutesStep = 1, - allowKeyboardControl, onChange, - meridiemMode, - handleMeridiemChange, + type, + value, }) => { const utils = useUtils(); const classes = useStyles(); diff --git a/lib/src/views/Clock/ClockNumber.tsx b/lib/src/views/Clock/ClockNumber.tsx index 286245853..e53148661 100644 --- a/lib/src/views/Clock/ClockNumber.tsx +++ b/lib/src/views/Clock/ClockNumber.tsx @@ -34,13 +34,13 @@ const positions: Record = { }; export interface ClockNumberProps { + disabled: boolean; + getClockNumberText: (currentItemText: string) => string; index: number; + isInner?: boolean; label: string; - selected: boolean; - disabled: boolean; onSelect: (isFinish: boolean | symbol) => void; - isInner?: boolean; - getClockNumberText: (currentItemText: string) => string; + selected: boolean; } export const useStyles = makeStyles( @@ -79,13 +79,13 @@ export const useStyles = makeStyles( ); export const ClockNumber: React.FC = ({ - selected, - label, - index, - onSelect, - isInner, disabled, getClockNumberText, + index, + isInner, + label, + onSelect, + selected, }) => { const ref = React.useRef(null); const classes = useStyles(); diff --git a/lib/src/views/Clock/ClockNumbers.tsx b/lib/src/views/Clock/ClockNumbers.tsx index a16cda49b..a2f3a1ffa 100644 --- a/lib/src/views/Clock/ClockNumbers.tsx +++ b/lib/src/views/Clock/ClockNumbers.tsx @@ -5,20 +5,20 @@ import { MaterialUiPickersDate } from '../../typings/date'; interface GetHourNumbersOptions { ampm: boolean; - utils: IUtils; date: MaterialUiPickersDate; - onChange: (value: number, isFinish?: boolean) => void; getClockNumberText: (hour: string) => string; isDisabled: (value: number) => boolean; + onChange: (value: number, isFinish?: boolean) => void; + utils: IUtils; } export const getHourNumbers = ({ ampm, date, - utils, - onChange, - isDisabled, getClockNumberText, + isDisabled, + onChange, + utils, }: GetHourNumbersOptions) => { const currentHours = date ? utils.getHours(date) : null; @@ -68,11 +68,11 @@ export const getHourNumbers = ({ }; export const getMinutesNumbers = ({ - value, - utils, - onChange, - isDisabled, getClockNumberText, + isDisabled, + onChange, + utils, + value, }: { value: number; utils: IUtils; diff --git a/lib/src/wrappers/DesktopPopperWrapper.tsx b/lib/src/wrappers/DesktopPopperWrapper.tsx index e7343e4d9..45f66b527 100644 --- a/lib/src/wrappers/DesktopPopperWrapper.tsx +++ b/lib/src/wrappers/DesktopPopperWrapper.tsx @@ -51,13 +51,13 @@ const useStyles = makeStyles(theme => ({ })); export const DesktopPopperWrapper: React.FC = ({ - open, children, - PopperProps, - onDismiss, DateInputProps, - TransitionComponent = Grow, KeyboardDateInputComponent = KeyboardDateInput, + onDismiss, + open, + PopperProps, + TransitionComponent = Grow, }) => { const classes = useStyles(); const inputRef = React.useRef(null); diff --git a/lib/src/wrappers/DesktopWrapper.tsx b/lib/src/wrappers/DesktopWrapper.tsx index 5de940f57..00882f978 100644 --- a/lib/src/wrappers/DesktopWrapper.tsx +++ b/lib/src/wrappers/DesktopWrapper.tsx @@ -34,12 +34,12 @@ const useStyles = makeStyles({ }); export const DesktopWrapper: React.FC = ({ - open, children, - PopoverProps, - onDismiss, DateInputProps, KeyboardDateInputComponent = KeyboardDateInput, + onDismiss, + open, + PopoverProps, }) => { const ref = React.useRef(null); const classes = useStyles(); diff --git a/lib/src/wrappers/MobileWrapper.tsx b/lib/src/wrappers/MobileWrapper.tsx index e7714b59a..71fd1ba05 100644 --- a/lib/src/wrappers/MobileWrapper.tsx +++ b/lib/src/wrappers/MobileWrapper.tsx @@ -22,26 +22,26 @@ export interface MobileWrapperProps Partial {} export const MobileWrapper: React.FC = ({ - open, - children, - okText, cancelText, - clearText, - todayText, - showTodayButton, + children, clearable, - DialogProps, - showTabs, - wider, + clearText, DateInputProps, - onClear, + DialogProps, + displayStaticWrapperAs, + KeyboardDateInputComponent, + okText, onAccept, + onClear, onDismiss, onSetToday, + open, PopoverProps, - displayStaticWrapperAs, - KeyboardDateInputComponent, PureDateInputComponent = PureDateInput, + showTabs, + showTodayButton, + todayText, + wider, ...other }) => { return ( diff --git a/lib/src/wrappers/ResponsiveWrapper.tsx b/lib/src/wrappers/ResponsiveWrapper.tsx index 7191ed0ed..229cdccaf 100644 --- a/lib/src/wrappers/ResponsiveWrapper.tsx +++ b/lib/src/wrappers/ResponsiveWrapper.tsx @@ -23,18 +23,18 @@ export const makeResponsiveWrapper = ( MobileWrapperComponent: React.FC ) => { const ResponsiveWrapper: React.FC = ({ - desktopModeMediaQuery = IS_TOUCH_DEVICE_MEDIA, - okText, cancelText, - clearText, - todayText, - showTodayButton, clearable, + clearText, + desktopModeMediaQuery = IS_TOUCH_DEVICE_MEDIA, DialogProps, + displayStaticWrapperAs, + okText, PopoverProps, PopperProps, + showTodayButton, + todayText, TransitionComponent, - displayStaticWrapperAs, ...other }) => { const isDesktop = useMediaQuery(desktopModeMediaQuery); diff --git a/lib/src/wrappers/makeWrapperComponent.tsx b/lib/src/wrappers/makeWrapperComponent.tsx index 668a40470..3b4eeb335 100644 --- a/lib/src/wrappers/makeWrapperComponent.tsx +++ b/lib/src/wrappers/makeWrapperComponent.tsx @@ -32,27 +32,27 @@ export function makeWrapperComponent< Partial & StaticWrapperProps> ) { const { - open, - value, autoOk, - inputFormat, - onChange, + cancelText, children, clearable, clearText, + DateInputProps, DialogProps, - PopoverProps, + displayStaticWrapperAs, + inputFormat, okText, - cancelText, - todayText, - DateInputProps, - wrapperProps, - wider, - showTabs, onAccept, + onChange, onClose, onOpen, - displayStaticWrapperAs, + open, + PopoverProps, + showTabs, + todayText, + value, + wider, + wrapperProps, ...restPropsForTextField } = props;