From c12f20a509aad33b6ee84a1ae51cc0af44624619 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 18 Apr 2019 01:01:12 +0200
Subject: [PATCH] [docs] Migrate picker demos to hooks

---
 .../pages/demos/pickers/DateAndTimePickers.js | 17 ++--
 .../demos/pickers/DateAndTimePickers.tsx      | 20 ++---
 docs/src/pages/demos/pickers/DatePickers.js   | 17 ++--
 docs/src/pages/demos/pickers/DatePickers.tsx  | 20 ++---
 .../pages/demos/pickers/MaterialUIPickers.js  | 69 +++++++--------
 .../pages/demos/pickers/MaterialUIPickers.tsx | 87 ++++++++-----------
 docs/src/pages/demos/pickers/TimePickers.js   | 17 ++--
 docs/src/pages/demos/pickers/TimePickers.tsx  | 20 ++---
 8 files changed, 104 insertions(+), 163 deletions(-)

diff --git a/docs/src/pages/demos/pickers/DateAndTimePickers.js b/docs/src/pages/demos/pickers/DateAndTimePickers.js
index 0d5430666e8728..7febc557884466 100644
--- a/docs/src/pages/demos/pickers/DateAndTimePickers.js
+++ b/docs/src/pages/demos/pickers/DateAndTimePickers.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -13,10 +12,10 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
     width: 200,
   },
-});
+}));
 
-function DateAndTimePickers(props) {
-  const { classes } = props;
+function DateAndTimePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -34,8 +33,4 @@ function DateAndTimePickers(props) {
   );
 }
 
-DateAndTimePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(DateAndTimePickers);
+export default DateAndTimePickers;
diff --git a/docs/src/pages/demos/pickers/DateAndTimePickers.tsx b/docs/src/pages/demos/pickers/DateAndTimePickers.tsx
index d5dfd189f12b7d..6f342bb928add8 100644
--- a/docs/src/pages/demos/pickers/DateAndTimePickers.tsx
+++ b/docs/src/pages/demos/pickers/DateAndTimePickers.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     container: {
       display: 'flex',
@@ -14,12 +13,11 @@ const styles = (theme: Theme) =>
       marginRight: theme.spacing(1),
       width: 200,
     },
-  });
+  }),
+);
 
-export type Props = WithStyles<typeof styles>;
-
-function DateAndTimePickers(props: Props) {
-  const { classes } = props;
+function DateAndTimePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -37,8 +35,4 @@ function DateAndTimePickers(props: Props) {
   );
 }
 
-DateAndTimePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(DateAndTimePickers);
+export default DateAndTimePickers;
diff --git a/docs/src/pages/demos/pickers/DatePickers.js b/docs/src/pages/demos/pickers/DatePickers.js
index 104bdfd369934e..f7eeac5dad1b46 100644
--- a/docs/src/pages/demos/pickers/DatePickers.js
+++ b/docs/src/pages/demos/pickers/DatePickers.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -13,10 +12,10 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
     width: 200,
   },
-});
+}));
 
-function DatePickers(props) {
-  const { classes } = props;
+function DatePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -34,8 +33,4 @@ function DatePickers(props) {
   );
 }
 
-DatePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(DatePickers);
+export default DatePickers;
diff --git a/docs/src/pages/demos/pickers/DatePickers.tsx b/docs/src/pages/demos/pickers/DatePickers.tsx
index 631df26c8d0d41..0d85fa164ecd62 100644
--- a/docs/src/pages/demos/pickers/DatePickers.tsx
+++ b/docs/src/pages/demos/pickers/DatePickers.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     container: {
       display: 'flex',
@@ -14,12 +13,11 @@ const styles = (theme: Theme) =>
       marginRight: theme.spacing(1),
       width: 200,
     },
-  });
+  }),
+);
 
-export type Props = WithStyles<typeof styles>;
-
-function DatePickers(props: Props) {
-  const { classes } = props;
+function DatePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -37,8 +35,4 @@ function DatePickers(props: Props) {
   );
 }
 
-DatePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(DatePickers);
+export default DatePickers;
diff --git a/docs/src/pages/demos/pickers/MaterialUIPickers.js b/docs/src/pages/demos/pickers/MaterialUIPickers.js
index ab54039b5c52d8..f16ef9680d4b65 100644
--- a/docs/src/pages/demos/pickers/MaterialUIPickers.js
+++ b/docs/src/pages/demos/pickers/MaterialUIPickers.js
@@ -1,54 +1,43 @@
 import 'date-fns';
 import React from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';
 
-const styles = {
+const useStyles = makeStyles({
   grid: {
     width: '60%',
   },
-};
+});
 
-class MaterialUIPickers extends React.Component {
-  state = {
-    // The first commit of Material-UI
-    selectedDate: new Date('2014-08-18T21:11:54'),
-  };
+function MaterialUIPickers() {
+  // The first commit of Material-UI
+  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));
+  const classes = useStyles();
 
-  handleDateChange = date => {
-    this.setState({ selectedDate: date });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { selectedDate } = this.state;
-
-    return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <Grid container className={classes.grid} justify="space-around">
-          <DatePicker
-            margin="normal"
-            label="Date picker"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-          />
-          <TimePicker
-            margin="normal"
-            label="Time picker"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-          />
-        </Grid>
-      </MuiPickersUtilsProvider>
-    );
+  function handleDateChange(date) {
+    setSelectedDate(date);
   }
-}
 
-MaterialUIPickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Grid container className={classes.grid} justify="space-around">
+        <DatePicker
+          margin="normal"
+          label="Date picker"
+          value={selectedDate}
+          onChange={handleDateChange}
+        />
+        <TimePicker
+          margin="normal"
+          label="Time picker"
+          value={selectedDate}
+          onChange={handleDateChange}
+        />
+      </Grid>
+    </MuiPickersUtilsProvider>
+  );
+}
 
-export default withStyles(styles)(MaterialUIPickers);
+export default MaterialUIPickers;
diff --git a/docs/src/pages/demos/pickers/MaterialUIPickers.tsx b/docs/src/pages/demos/pickers/MaterialUIPickers.tsx
index 21f9b70d2e5fc1..d6be0eadcc1542 100644
--- a/docs/src/pages/demos/pickers/MaterialUIPickers.tsx
+++ b/docs/src/pages/demos/pickers/MaterialUIPickers.tsx
@@ -1,60 +1,45 @@
 import 'date-fns';
 import React from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';
 
-const styles = createStyles({
-  grid: {
-    width: '60%',
-  },
-});
-
-export type Props = WithStyles<typeof styles>;
-
-export interface State {
-  selectedDate: Date;
-}
-
-class MaterialUIPickers extends React.Component<Props, State> {
-  state = {
-    // The first commit of Material-UI
-    selectedDate: new Date('2014-08-18T21:11:54'),
-  };
-
-  handleDateChange = (date: Date) => {
-    this.setState({ selectedDate: date });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { selectedDate } = this.state;
-
-    return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <Grid container className={classes.grid} justify="space-around">
-          <DatePicker
-            margin="normal"
-            label="Date picker"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-          />
-          <TimePicker
-            margin="normal"
-            label="Time picker"
-            value={selectedDate}
-            onChange={this.handleDateChange}
-          />
-        </Grid>
-      </MuiPickersUtilsProvider>
-    );
+const useStyles = makeStyles(
+  createStyles({
+    grid: {
+      width: '60%',
+    },
+  }),
+);
+
+function MaterialUIPickers() {
+  // The first commit of Material-UI
+  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));
+  const classes = useStyles();
+
+  function handleDateChange(date: Date) {
+    setSelectedDate(date);
   }
-}
 
-(MaterialUIPickers as React.ComponentClass<Props, State>).propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Grid container className={classes.grid} justify="space-around">
+        <DatePicker
+          margin="normal"
+          label="Date picker"
+          value={selectedDate}
+          onChange={handleDateChange}
+        />
+        <TimePicker
+          margin="normal"
+          label="Time picker"
+          value={selectedDate}
+          onChange={handleDateChange}
+        />
+      </Grid>
+    </MuiPickersUtilsProvider>
+  );
+}
 
-export default withStyles(styles)(MaterialUIPickers);
+export default MaterialUIPickers;
diff --git a/docs/src/pages/demos/pickers/TimePickers.js b/docs/src/pages/demos/pickers/TimePickers.js
index 0ba9e697165fb1..ecbd347e2debad 100644
--- a/docs/src/pages/demos/pickers/TimePickers.js
+++ b/docs/src/pages/demos/pickers/TimePickers.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -13,10 +12,10 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
     width: 200,
   },
-});
+}));
 
-function TimePickers(props) {
-  const { classes } = props;
+function TimePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -37,8 +36,4 @@ function TimePickers(props) {
   );
 }
 
-TimePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(TimePickers);
+export default TimePickers;
diff --git a/docs/src/pages/demos/pickers/TimePickers.tsx b/docs/src/pages/demos/pickers/TimePickers.tsx
index 4f45c721db349e..6bfe966c6cbb69 100644
--- a/docs/src/pages/demos/pickers/TimePickers.tsx
+++ b/docs/src/pages/demos/pickers/TimePickers.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     container: {
       display: 'flex',
@@ -14,12 +13,11 @@ const styles = (theme: Theme) =>
       marginRight: theme.spacing(1),
       width: 200,
     },
-  });
+  }),
+);
 
-export type Props = WithStyles<typeof styles>;
-
-function TimePickers(props: Props) {
-  const { classes } = props;
+function TimePickers() {
+  const classes = useStyles();
 
   return (
     <form className={classes.container} noValidate>
@@ -40,8 +38,4 @@ function TimePickers(props: Props) {
   );
 }
 
-TimePickers.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(TimePickers);
+export default TimePickers;