mui/material-ui-pickers

React.SFC is deprecated

Closed this issue · 1 comments

    /**
     * @deprecated as of recent React versions, function components can no
     * longer be considered 'stateless'. Please use `FunctionComponent` instead.
     *
     * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html)
     */
    type SFC<P = {}> = FunctionComponent<P>;

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a51e3613b44c4ae400d040592bb4f56fd3fa8a4f/types/react/index.d.ts#L528-L534

Here is one example:

https://github.com/mui-org/material-ui-pickers/blob/f8bc7ba4004e3eafe764346b39b882699409818e/lib/src/_shared/PickerToolbar.tsx#L65

The best resolution is probably to follow the definition style of the main repo:

diff --git a/lib/src/views/Calendar/CalendarHeader.tsx b/lib/src/views/Calendar/CalendarHeader.tsx
index 86174f9c..d7a2b96b 100644
--- a/lib/src/views/Calendar/CalendarHeader.tsx
+++ b/lib/src/views/Calendar/CalendarHeader.tsx
@@ -81,7 +81,8 @@ function getSwitchingViewAriaText(view: DatePickerView) {
     : 'calendar view is open, switch to year view';
 }

-export const CalendarHeader: React.SFC<CalendarHeaderProps> = ({
+export function CalendarHeader(props: CalendarHeaderProps) {
+  const = {
   view: currentView,
   views,
   currentMonth: month,
@@ -99,7 +100,7 @@ export const CalendarHeader: React.SFC<CalendarHeaderProps> = ({
   leftArrowButtonText = 'previous month',
   rightArrowButtonText = 'next month',
   getViewSwitchingButtonText = getSwitchingViewAriaText,
-}) => {
+} = props;
   const utils = useUtils();
   const classes = useStyles();

Fixed by #2045