Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Migrate picker demos to hooks #15390

Merged
merged 1 commit into from
Apr 21, 2019
Merged

[docs] Migrate picker demos to hooks #15390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions docs/src/pages/demos/pickers/DateAndTimePickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
Expand All @@ -34,8 +33,4 @@ function DateAndTimePickers(props) {
);
}

DateAndTimePickers.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(DateAndTimePickers);
export default DateAndTimePickers;
20 changes: 7 additions & 13 deletions docs/src/pages/demos/pickers/DateAndTimePickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
Expand All @@ -37,8 +35,4 @@ function DateAndTimePickers(props: Props) {
);
}

DateAndTimePickers.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(DateAndTimePickers);
export default DateAndTimePickers;
17 changes: 6 additions & 11 deletions docs/src/pages/demos/pickers/DatePickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
Expand All @@ -34,8 +33,4 @@ function DatePickers(props) {
);
}

DatePickers.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(DatePickers);
export default DatePickers;
20 changes: 7 additions & 13 deletions docs/src/pages/demos/pickers/DatePickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
Expand All @@ -37,8 +35,4 @@ function DatePickers(props: Props) {
);
}

DatePickers.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(DatePickers);
export default DatePickers;
69 changes: 29 additions & 40 deletions docs/src/pages/demos/pickers/MaterialUIPickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
87 changes: 36 additions & 51 deletions docs/src/pages/demos/pickers/MaterialUIPickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
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;
17 changes: 6 additions & 11 deletions docs/src/pages/demos/pickers/TimePickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
Expand All @@ -37,8 +36,4 @@ function TimePickers(props) {
);
}

TimePickers.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TimePickers);
export default TimePickers;
Loading