Skip to content

Commit

Permalink
Merge pull request #3406 from marmelab/useShowController
Browse files Browse the repository at this point in the history 
[RFR] Add useShowController hook
  • Loading branch information
@djhi
djhi authored Jul 12, 2019
2 parents 426a95e + 9bc4cb2 commit 0b5597c
Show file tree
Hide file tree
Showing 8 changed files with 383 additions and 403 deletions.
150 changes: 68 additions & 82 deletions examples/demo/src/invoices/InvoiceShow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { ShowController, ReferenceField, TextField } from 'react-admin';
import { useShowController, ReferenceField, TextField } from 'react-admin';

import Basket from '../orders/Basket';

Expand All @@ -17,80 +17,54 @@ const CustomerField = ({ record }) => (
</Typography>
);

const InvoiceShow = props => (
<ShowController {...props} title=" ">
{({ record }) =>
record && (
<Card style={{ width: 600, margin: 'auto' }}>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>
Posters Galore
</Typography>
</Grid>
<Grid item xs={6}>
<Typography
variant="h6"
gutterBottom
align="right"
>
Invoice {record.id}
</Typography>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} align="right">
<ReferenceField
resource="invoices"
reference="customers"
source="customer_id"
basePath="/invoices"
record={record}
linkType={false}
>
<CustomerField />
</ReferenceField>
</Grid>
</Grid>
<div style={{ height: 20 }}>&nbsp;</div>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography
variant="h6"
gutterBottom
align="center"
>
Date{' '}
</Typography>
<Typography gutterBottom align="center">
{new Date(record.date).toLocaleDateString()}
</Typography>
</Grid>
const InvoiceShow = props => {
const { record } = useShowController(props);
if (!record) return null;
return (
<Card style={{ width: 600, margin: 'auto' }}>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>
Posters Galore
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom align="right">
Invoice {record.id}
</Typography>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} align="right">
<ReferenceField
resource="invoices"
reference="customers"
source="customer_id"
basePath="/invoices"
record={record}
linkType={false}
>
<CustomerField />
</ReferenceField>
</Grid>
</Grid>
<div style={{ height: 20 }}>&nbsp;</div>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom align="center">
Date{' '}
</Typography>
<Typography gutterBottom align="center">
{new Date(record.date).toLocaleDateString()}
</Typography>
</Grid>

<Grid item xs={5}>
<Typography
variant="h6"
gutterBottom
align="center"
>
Order
</Typography>
<Typography gutterBottom align="center">
<ReferenceField
resource="invoices"
reference="commands"
source="command_id"
basePath="/invoices"
record={record}
linkType={false}
>
<TextField source="reference" />
</ReferenceField>
</Typography>
</Grid>
</Grid>
<div style={{ margin: '10px 0' }}>
<Grid item xs={5}>
<Typography variant="h6" gutterBottom align="center">
Order
</Typography>
<Typography gutterBottom align="center">
<ReferenceField
resource="invoices"
reference="commands"
Expand All @@ -99,14 +73,26 @@ const InvoiceShow = props => (
record={record}
linkType={false}
>
<Basket />
<TextField source="reference" />
</ReferenceField>
</div>
</CardContent>
</Card>
)
}
</ShowController>
);
</Typography>
</Grid>
</Grid>
<div style={{ margin: '10px 0' }}>
<ReferenceField
resource="invoices"
reference="commands"
source="command_id"
basePath="/invoices"
record={record}
linkType={false}
>
<Basket />
</ReferenceField>
</div>
</CardContent>
</Card>
);
};

export default InvoiceShow;
3 changes: 2 additions & 1 deletion examples/simple/src/comments/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import CommentCreate from './CommentCreate';
import CommentEdit from './CommentEdit';
import CommentList from './CommentList';
import CommentShow from './CommentShow';
import { ShowGuesser } from 'react-admin';

export default {
list: CommentList,
create: CommentCreate,
edit: CommentEdit,
show: CommentShow,
show: ShowGuesser,
icon: ChatBubbleIcon,
};
137 changes: 68 additions & 69 deletions examples/simple/src/posts/PostShow.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ShowController } from 'ra-core';
import { useShowController } from 'ra-core';
import React from 'react';
import {
ArrayField,
Expand Down Expand Up @@ -36,73 +36,72 @@ const CreateRelatedComment = ({ record }) => (
</Button>
);

const PostShow = props => (
<ShowController {...props}>
{controllerProps => (
<ShowView {...controllerProps} title={<PostTitle />}>
<TabbedShowLayout>
<Tab label="post.form.summary">
<TextField source="id" />
<TextField source="title" />
{controllerProps.record &&
controllerProps.record.title ===
'Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi' && (
<TextField source="teaser" />
)}
<ArrayField source="backlinks">
<Datagrid>
<DateField source="date" />
<UrlField source="url" />
</Datagrid>
</ArrayField>
</Tab>
<Tab label="post.form.body">
<RichTextField
source="body"
stripTags={false}
label=""
addLabel={false}
/>
</Tab>
<Tab label="post.form.miscellaneous">
<ReferenceArrayField reference="tags" source="tags">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
<DateField source="published_at" />
<SelectField
source="category"
choices={[
{ name: 'Tech', id: 'tech' },
{ name: 'Lifestyle', id: 'lifestyle' },
]}
/>
<NumberField source="average_note" />
<BooleanField source="commentable" />
<TextField source="views" />
<CloneButton />
</Tab>
<Tab label="post.form.comments">
<ReferenceManyField
addLabel={false}
reference="comments"
target="post_id"
sort={{ field: 'created_at', order: 'DESC' }}
>
<Datagrid>
<DateField source="created_at" />
<TextField source="author.name" />
<TextField source="body" />
<EditButton />
</Datagrid>
</ReferenceManyField>
<CreateRelatedComment />
</Tab>
</TabbedShowLayout>
</ShowView>
)}
</ShowController>
);
const PostShow = props => {
const controllerProps = useShowController(props);
return (
<ShowView {...controllerProps} title={<PostTitle />}>
<TabbedShowLayout>
<Tab label="post.form.summary">
<TextField source="id" />
<TextField source="title" />
{controllerProps.record &&
controllerProps.record.title ===
'Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi' && (
<TextField source="teaser" />
)}
<ArrayField source="backlinks">
<Datagrid>
<DateField source="date" />
<UrlField source="url" />
</Datagrid>
</ArrayField>
</Tab>
<Tab label="post.form.body">
<RichTextField
source="body"
stripTags={false}
label=""
addLabel={false}
/>
</Tab>
<Tab label="post.form.miscellaneous">
<ReferenceArrayField reference="tags" source="tags">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
<DateField source="published_at" />
<SelectField
source="category"
choices={[
{ name: 'Tech', id: 'tech' },
{ name: 'Lifestyle', id: 'lifestyle' },
]}
/>
<NumberField source="average_note" />
<BooleanField source="commentable" />
<TextField source="views" />
<CloneButton />
</Tab>
<Tab label="post.form.comments">
<ReferenceManyField
addLabel={false}
reference="comments"
target="post_id"
sort={{ field: 'created_at', order: 'DESC' }}
>
<Datagrid>
<DateField source="created_at" />
<TextField source="author.name" />
<TextField source="body" />
<EditButton />
</Datagrid>
</ReferenceManyField>
<CreateRelatedComment />
</Tab>
</TabbedShowLayout>
</ShowView>
);
};

export default PostShow;
Loading

0 comments on commit 0b5597c

Please sign in to comment.