Skip to content

Commit c4765ef

Browse files
djhidjhi
committed
Use react-19 features in demo
1 parent c4775c9 commit c4765ef

File tree

4 files changed

+125
-78
lines changed

4 files changed

+125
-78
lines changed

‎examples/demo/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const App = () => {
4747
const darkTheme = themes.find(theme => theme.name === themeName)?.dark;
4848
return (
4949
<Admin
50-
title=""
50+
title="Posters Galore Admin"
5151
dataProvider={dataProviderFactory(
5252
process.env.REACT_APP_DATA_PROVIDER || ''
5353
)}

‎examples/demo/src/products/ProductCreate.tsx‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,44 @@
11
import * as React from 'react';
2-
import { Create, TabbedForm, TextInput, required } from 'react-admin';
2+
import {
3+
Create,
4+
TabbedForm,
5+
TextInput,
6+
required,
7+
useDefaultTitle,
8+
useGetResourceLabel,
9+
useResourceContext,
10+
useTranslate,
11+
} from 'react-admin';
312
import { ProductEditDetails } from './ProductEditDetails';
413
const RichTextInput = React.lazy(() =>
514
import('ra-input-rich-text').then(module => ({
615
default: module.RichTextInput,
716
}))
817
);
918

19+
const ProductTitle = () => {
20+
const title = useDefaultTitle();
21+
const translate = useTranslate();
22+
const resource = useResourceContext();
23+
const getResourceLabel = useGetResourceLabel();
24+
if (!resource) {
25+
throw new Error(
26+
'useCreateController requires a non-empty resource prop or context'
27+
);
28+
}
29+
const defaultTitle = translate('ra.page.create', {
30+
name: getResourceLabel(resource, 1),
31+
});
32+
return (
33+
<>
34+
<title>{`${title} - ${defaultTitle}`}</title>
35+
<span>{defaultTitle}</span>
36+
</>
37+
);
38+
};
39+
1040
const ProductCreate = () => (
11-
<Create>
41+
<Create title={<ProductTitle />}>
1242
<TabbedForm defaultValues={{ sales: 0 }}>
1343
<TabbedForm.Tab
1444
label="resources.products.tabs.image"

‎examples/demo/src/products/ProductEdit.tsx‎

Lines changed: 89 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
TextField,
1313
TextInput,
1414
useRecordContext,
15+
useDefaultTitle,
1516
} from 'react-admin';
1617
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
1718
import AspectRatioIcon from '@mui/icons-material/AspectRatio';
@@ -32,87 +33,100 @@ const RichTextInput = React.lazy(() =>
3233
);
3334

3435
const ProductTitle = () => {
36+
const title = useDefaultTitle();
37+
3538
const record = useRecordContext<Product>();
36-
return record ? <span>Poster "{record.reference}"</span> : null;
39+
return record ? (
40+
<>
41+
<title>{`${title} - Poster "${record.reference}`}</title>
42+
<span>Poster "{record.reference}"</span>
43+
</>
44+
) : null;
3745
};
3846

39-
const ProductEdit = () => (
40-
<Edit title={<ProductTitle />}>
41-
<TabbedForm>
42-
<TabbedForm.Tab
43-
label="resources.products.tabs.image"
44-
sx={{ maxWidth: '40em', minHeight: 48 }}
45-
iconPosition="start"
46-
icon={<PhotoCameraIcon />}
47-
>
48-
<Poster />
49-
<TextInput source="image" validate={req} />
50-
<TextInput source="thumbnail" validate={req} />
51-
</TabbedForm.Tab>
52-
<TabbedForm.Tab
53-
label="resources.products.tabs.details"
54-
path="details"
55-
sx={{ maxWidth: '40em', minHeight: 48 }}
56-
iconPosition="start"
57-
icon={<AspectRatioIcon />}
58-
>
59-
<ProductEditDetails />
60-
</TabbedForm.Tab>
61-
<TabbedForm.Tab
62-
label="resources.products.tabs.description"
63-
path="description"
64-
sx={{ maxWidth: '40em', minHeight: 48 }}
65-
iconPosition="start"
66-
icon={<EditNoteIcon />}
67-
>
68-
<RichTextInput source="description" label="" validate={req} />
69-
</TabbedForm.Tab>
70-
<TabbedForm.Tab
71-
label="resources.products.tabs.reviews"
72-
count={
73-
<ReferenceManyCount
74-
reference="reviews"
75-
target="product_id"
76-
sx={{ lineHeight: 'inherit' }}
47+
const ProductEdit = () => {
48+
return (
49+
<Edit title={<ProductTitle />}>
50+
<TabbedForm>
51+
<TabbedForm.Tab
52+
label="resources.products.tabs.image"
53+
sx={{ maxWidth: '40em', minHeight: 48 }}
54+
iconPosition="start"
55+
icon={<PhotoCameraIcon />}
56+
>
57+
<Poster />
58+
<TextInput source="image" validate={req} />
59+
<TextInput source="thumbnail" validate={req} />
60+
</TabbedForm.Tab>
61+
<TabbedForm.Tab
62+
label="resources.products.tabs.details"
63+
path="details"
64+
sx={{ maxWidth: '40em', minHeight: 48 }}
65+
iconPosition="start"
66+
icon={<AspectRatioIcon />}
67+
>
68+
<ProductEditDetails />
69+
</TabbedForm.Tab>
70+
<TabbedForm.Tab
71+
label="resources.products.tabs.description"
72+
path="description"
73+
sx={{ maxWidth: '40em', minHeight: 48 }}
74+
iconPosition="start"
75+
icon={<EditNoteIcon />}
76+
>
77+
<RichTextInput
78+
source="description"
79+
label=""
80+
validate={req}
7781
/>
78-
}
79-
path="reviews"
80-
sx={{ minHeight: 48 }}
81-
iconPosition="start"
82-
icon={<ReviewIcon />}
83-
>
84-
<ReferenceManyField
85-
reference="reviews"
86-
target="product_id"
87-
pagination={<Pagination />}
82+
</TabbedForm.Tab>
83+
<TabbedForm.Tab
84+
label="resources.products.tabs.reviews"
85+
count={
86+
<ReferenceManyCount
87+
reference="reviews"
88+
target="product_id"
89+
sx={{ lineHeight: 'inherit' }}
90+
/>
91+
}
92+
path="reviews"
93+
sx={{ minHeight: 48 }}
94+
iconPosition="start"
95+
icon={<ReviewIcon />}
8896
>
89-
<Datagrid
90-
sx={{
91-
width: '100%',
92-
'& .column-comment': {
93-
maxWidth: '20em',
94-
overflow: 'hidden',
95-
textOverflow: 'ellipsis',
96-
whiteSpace: 'nowrap',
97-
},
98-
}}
97+
<ReferenceManyField
98+
reference="reviews"
99+
target="product_id"
100+
pagination={<Pagination />}
99101
>
100-
<DateField source="date" />
101-
<CustomerReferenceField source="customer_id" />
102-
<StarRatingField
103-
label="resources.reviews.fields.rating"
104-
source="rating"
105-
/>
106-
<TextField source="comment" />
107-
<TextField source="status" />
108-
<EditButton />
109-
</Datagrid>
110-
<CreateRelatedReviewButton />
111-
</ReferenceManyField>
112-
</TabbedForm.Tab>
113-
</TabbedForm>
114-
</Edit>
115-
);
102+
<Datagrid
103+
sx={{
104+
width: '100%',
105+
'& .column-comment': {
106+
maxWidth: '20em',
107+
overflow: 'hidden',
108+
textOverflow: 'ellipsis',
109+
whiteSpace: 'nowrap',
110+
},
111+
}}
112+
>
113+
<DateField source="date" />
114+
<CustomerReferenceField source="customer_id" />
115+
<StarRatingField
116+
label="resources.reviews.fields.rating"
117+
source="rating"
118+
/>
119+
<TextField source="comment" />
120+
<TextField source="status" />
121+
<EditButton />
122+
</Datagrid>
123+
<CreateRelatedReviewButton />
124+
</ReferenceManyField>
125+
</TabbedForm.Tab>
126+
</TabbedForm>
127+
</Edit>
128+
);
129+
};
116130

117131
const req = [required()];
118132

‎examples/demo/src/products/ProductList.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,19 @@ import {
1818
TopToolbar,
1919
useTranslate,
2020
useGetResourceLabel,
21+
useDefaultTitle,
2122
} from 'react-admin';
2223

2324
import ImageList from './GridList';
2425
import Aside from './Aside';
2526

2627
const ProductList = () => {
28+
const title = useDefaultTitle();
2729
const getResourceLabel = useGetResourceLabel();
2830
const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
2931
return (
3032
<ListBase perPage={24} sort={{ field: 'reference', order: 'ASC' }}>
33+
<title>{`${title} - ${getResourceLabel('products', 2)}`}</title>
3134
<Title defaultTitle={getResourceLabel('products', 2)} />
3235
<FilterContext.Provider value={productFilters}>
3336
<ListActions isSmall={isSmall} />

0 commit comments

Comments
 (0)