Skip to content

Commit

Permalink
Migrate remaining demo components to useMediaQuery
Browse files Browse the repository at this point in the history
  • Loading branch information
@fzaninotto @djhi
fzaninotto authored and djhi committed Aug 9, 2019
1 parent f22e54f commit fc087e2
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 79 deletions.
144 changes: 72 additions & 72 deletions examples/demo/src/orders/OrderList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,17 @@ import {
NullableBooleanInput,
NumberField,
ReferenceInput,
Responsive,
SearchInput,
TextField,
TextInput,
} from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';
import Divider from '@material-ui/core/Divider';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import {
makeStyles,
useMediaQuery,
Divider,
Tabs,
Tab,
} from '@material-ui/core';

import NbItemsField from './NbItemsField';
import CustomerReferenceField from '../visitors/CustomerReferenceField';
Expand Down Expand Up @@ -68,7 +70,7 @@ class TabbedDatagrid extends React.Component {
};

render() {
const { classes, filterValues, ...props } = this.props;
const { isXSmall, classes, filterValues, ...props } = this.props;

return (
<Fragment>
Expand All @@ -88,79 +90,77 @@ class TabbedDatagrid extends React.Component {
))}
</Tabs>
<Divider />
<Responsive
xsmall={
<MobileGrid
{...props}
ids={this.state[filterValues.status]}
/>
}
medium={
<div>
{filterValues.status === 'ordered' && (
<Datagrid {...props} ids={this.state.ordered}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<EditButton />
</Datagrid>
)}
{filterValues.status === 'delivered' && (
<Datagrid {...props} ids={this.state.delivered}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<BooleanField source="returned" />
<EditButton />
</Datagrid>
)}
{filterValues.status === 'cancelled' && (
<Datagrid {...props} ids={this.state.cancelled}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<BooleanField source="returned" />
<EditButton />
</Datagrid>
)}
</div>
}
/>
{isXSmall ? (
<MobileGrid
{...props}
ids={this.state[filterValues.status]}
/>
) : (
<div>
{filterValues.status === 'ordered' && (
<Datagrid {...props} ids={this.state.ordered}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<EditButton />
</Datagrid>
)}
{filterValues.status === 'delivered' && (
<Datagrid {...props} ids={this.state.delivered}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<BooleanField source="returned" />
<EditButton />
</Datagrid>
)}
{filterValues.status === 'cancelled' && (
<Datagrid {...props} ids={this.state.cancelled}>
<DateField source="date" showTime />
<TextField source="reference" />
<CustomerReferenceField />
<NbItemsField />
<NumberField
source="total"
options={{
style: 'currency',
currency: 'USD',
}}
className={classes.total}
/>
<BooleanField source="returned" />
<EditButton />
</Datagrid>
)}
</div>
)}
</Fragment>
);
}
}

const StyledTabbedDatagrid = props => {
const classes = useDatagridStyles();
return <TabbedDatagrid classes={classes} {...props} />;
const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
return <TabbedDatagrid classes={classes} isXSmall={isXSmall} {...props} />;
};

const OrderList = ({ classes, ...props }) => (
Expand Down
15 changes: 8 additions & 7 deletions examples/demo/src/reviews/ReviewList.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React, { Fragment, useCallback } from 'react';
import classnames from 'classnames';
import { BulkDeleteButton, List, Responsive } from 'react-admin';
import { BulkDeleteButton, List } from 'react-admin';
import { useDispatch } from 'react-redux';
import { push } from 'connected-react-router';
import { Route } from 'react-router';
import Drawer from '@material-ui/core/Drawer';
import { makeStyles } from '@material-ui/core/styles';
import { Drawer, useMediaQuery, makeStyles } from '@material-ui/core';
import BulkAcceptButton from './BulkAcceptButton';
import BulkRejectButton from './BulkRejectButton';
import ReviewListMobile from './ReviewListMobile';
Expand Down Expand Up @@ -43,6 +42,7 @@ const useStyles = makeStyles(theme => ({
const ReviewList = props => {
const classes = useStyles();
const dispatch = useDispatch();
const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));

const handleClose = useCallback(() => {
dispatch(push('/reviews'));
Expand Down Expand Up @@ -70,10 +70,11 @@ const ReviewList = props => {
perPage={25}
sort={{ field: 'date', order: 'DESC' }}
>
<Responsive
xsmall={<ReviewListMobile />}
medium={<ReviewListDesktop />}
/>
{isXSmall ? (
<ReviewListMobile />
) : (
<ReviewListDesktop />
)}
</List>
<Drawer
variant="persistent"
Expand Down

0 comments on commit fc087e2

Please sign in to comment.