Skip to content

Commit b8611d8

Browse files
djhidjhi
authored
Merge pull request #9290 from marmelab/fix-prevnextbutton
Fix `<PrevNextButton>` default style
2 parents 4050bc3 + 58a9834 commit b8611d8

File tree

2 files changed

+101
-133
lines changed

2 files changed

+101
-133
lines changed

‎packages/ra-ui-materialui/src/button/PrevNextButtons.stories.tsx

+55-92
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,34 @@ import {
66
ResourceContext,
77
testDataProvider,
88
} from 'ra-core';
9+
import englishMessages from 'ra-language-english';
10+
import polyglotI18nProvider from 'ra-i18n-polyglot';
11+
import { MemoryRouter } from 'react-router';
12+
import { seed, address, internet, name } from 'faker/locale/en_GB';
13+
import { QueryClient } from 'react-query';
14+
915
import {
1016
AdminUI,
17+
AdminContext,
1118
Edit,
1219
EditButton,
1320
ListGuesser,
14-
PrevNextButtons,
1521
Show,
1622
ShowButton,
1723
SimpleForm,
1824
SimpleShowLayout,
1925
TextField,
2026
TextInput,
2127
TopToolbar,
22-
} from 'react-admin';
23-
import englishMessages from 'ra-language-english';
24-
import polyglotI18nProvider from 'ra-i18n-polyglot';
25-
import { MemoryRouter } from 'react-router';
26-
import { seed, address, internet, name } from 'faker/locale/en_GB';
27-
import { QueryClient } from 'react-query';
28-
29-
import { AdminContext } from '../AdminContext';
28+
} from '../';
29+
import { PrevNextButtons } from './PrevNextButtons';
3030

3131
export default { title: 'ra-ui-materialui/button/PrevNextButtons' };
3232

3333
const i18nProvider = polyglotI18nProvider(() => englishMessages, 'en');
3434

3535
seed(123); // we want consistent results
36+
3637
const data = {
3738
customers: Array.from(Array(900).keys()).map(id => {
3839
const first_name = name.firstName();
@@ -52,35 +53,30 @@ const data = {
5253
const dataProvider = fakeRestDataProvider(data);
5354

5455
const MyTopToolbar = ({ children }) => (
55-
<TopToolbar
56-
sx={{
57-
justifyContent: 'space-between',
58-
}}
59-
>
60-
{children}
61-
</TopToolbar>
56+
<TopToolbar sx={{ justifyContent: 'space-between' }}>{children}</TopToolbar>
6257
);
6358

64-
const defaultFields = [
65-
<TextField source="id" key="id" />,
66-
<TextField source="first_name" key="first_name" />,
67-
<TextField source="last_name" key="last_name" />,
68-
<TextField source="email" key="email" />,
69-
<TextField source="city" key="city" />,
70-
];
71-
72-
const defaultInputs = [
73-
<TextInput source="first_name" key="first_name" />,
74-
<TextInput source="last_name" key="last_name" />,
75-
<TextInput source="email" key="email" />,
76-
<TextInput source="city" key="city" />,
77-
];
78-
79-
const DefaultSimpleForm = () => (
80-
<SimpleForm warnWhenUnsavedChanges>{defaultInputs}</SimpleForm>
59+
const CustomerEdit = ({ actions }: any) => (
60+
<Edit redirect={false} actions={actions}>
61+
<SimpleForm warnWhenUnsavedChanges>
62+
<TextInput source="first_name" key="first_name" />
63+
<TextInput source="last_name" key="last_name" />
64+
<TextInput source="email" key="email" />
65+
<TextInput source="city" key="city" />
66+
</SimpleForm>
67+
</Edit>
8168
);
82-
const DefaultSimpleShowLayout = () => (
83-
<SimpleShowLayout>{defaultFields}</SimpleShowLayout>
69+
70+
const CustomerShow = ({ actions }: any) => (
71+
<Show actions={actions}>
72+
<SimpleShowLayout>
73+
<TextField source="id" key="id" />
74+
<TextField source="first_name" key="first_name" />
75+
<TextField source="last_name" key="last_name" />
76+
<TextField source="email" key="email" />
77+
<TextField source="city" key="city" />
78+
</SimpleShowLayout>
79+
</Show>
8480
);
8581

8682
export const Basic = () => (
@@ -91,28 +87,24 @@ export const Basic = () => (
9187
name="customers"
9288
list={<ListGuesser />}
9389
edit={
94-
<Edit
95-
redirect={false}
90+
<CustomerEdit
9691
actions={
9792
<MyTopToolbar>
9893
<PrevNextButtons />
9994
<ShowButton />
10095
</MyTopToolbar>
10196
}
102-
>
103-
<DefaultSimpleForm />
104-
</Edit>
97+
/>
10598
}
10699
show={
107-
<Show
100+
<CustomerShow
108101
actions={
109102
<MyTopToolbar>
110103
<PrevNextButtons linkType="show" />
104+
<EditButton />
111105
</MyTopToolbar>
112106
}
113-
>
114-
<DefaultSimpleShowLayout />
115-
</Show>
107+
/>
116108
}
117109
/>
118110
</AdminUI>
@@ -128,20 +120,17 @@ export const WithStoreKey = () => (
128120
name="customers"
129121
list={<ListGuesser storeKey="withStoreKey" />}
130122
edit={
131-
<Edit
132-
redirect={false}
123+
<CustomerEdit
133124
actions={
134125
<MyTopToolbar>
135126
<PrevNextButtons storeKey="withStoreKey" />
136127
<ShowButton />
137128
</MyTopToolbar>
138129
}
139-
>
140-
<DefaultSimpleForm />
141-
</Edit>
130+
/>
142131
}
143132
show={
144-
<Show
133+
<CustomerShow
145134
actions={
146135
<MyTopToolbar>
147136
<PrevNextButtons
@@ -151,9 +140,7 @@ export const WithStoreKey = () => (
151140
<EditButton />
152141
</MyTopToolbar>
153142
}
154-
>
155-
<DefaultSimpleShowLayout />
156-
</Show>
143+
/>
157144
}
158145
/>
159146
</AdminUI>
@@ -174,8 +161,7 @@ export const WithFilter = () => (
174161
/>
175162
}
176163
edit={
177-
<Edit
178-
redirect={false}
164+
<CustomerEdit
179165
actions={
180166
<MyTopToolbar>
181167
<PrevNextButtons
@@ -188,12 +174,10 @@ export const WithFilter = () => (
188174
<ShowButton />
189175
</MyTopToolbar>
190176
}
191-
>
192-
<DefaultSimpleForm />
193-
</Edit>
177+
/>
194178
}
195179
show={
196-
<Show
180+
<CustomerShow
197181
actions={
198182
<MyTopToolbar>
199183
<PrevNextButtons
@@ -207,9 +191,7 @@ export const WithFilter = () => (
207191
<EditButton />
208192
</MyTopToolbar>
209193
}
210-
>
211-
<DefaultSimpleShowLayout />
212-
</Show>
194+
/>
213195
}
214196
/>
215197
</AdminUI>
@@ -235,29 +217,24 @@ export const WithQueryFilter = () => (
235217
/>
236218
}
237219
edit={
238-
<Edit
239-
redirect={false}
220+
<CustomerEdit
240221
actions={
241222
<MyTopToolbar>
242223
<PrevNextButtons />
243224
<ShowButton />
244225
</MyTopToolbar>
245226
}
246-
>
247-
<DefaultSimpleForm />
248-
</Edit>
227+
/>
249228
}
250229
show={
251-
<Show
230+
<CustomerShow
252231
actions={
253232
<MyTopToolbar>
254233
<PrevNextButtons linkType="show" />
255234
<EditButton />
256235
</MyTopToolbar>
257236
}
258-
>
259-
<DefaultSimpleShowLayout />
260-
</Show>
237+
/>
261238
}
262239
/>
263240
</AdminUI>
@@ -276,32 +253,27 @@ export const WithLimit = ({ customDataProvider = dataProvider }) => (
276253
name="customers"
277254
list={<ListGuesser />}
278255
edit={
279-
<Edit
280-
redirect={false}
256+
<CustomerEdit
281257
actions={
282258
<MyTopToolbar>
283259
<PrevNextButtons limit={500} />
284260
<ShowButton />
285261
</MyTopToolbar>
286262
}
287-
>
288-
<DefaultSimpleForm />
289-
</Edit>
263+
/>
290264
}
291265
show={
292-
<Show
266+
<CustomerShow
293267
actions={
294268
<MyTopToolbar>
295269
<PrevNextButtons
296270
linkType="show"
297271
limit={500}
298272
/>
299-
<ShowButton />
273+
<EditButton />
300274
</MyTopToolbar>
301275
}
302-
>
303-
<DefaultSimpleShowLayout />
304-
</Show>
276+
/>
305277
}
306278
/>
307279
</AdminUI>
@@ -313,19 +285,10 @@ export const WithStyle = () => (
313285
<AdminContext dataProvider={dataProvider}>
314286
<ResourceContext.Provider value="customers">
315287
<RecordContextProvider value={data.customers[0]}>
316-
<PrevNextButtons
317-
sx={{
318-
color: 'blue',
319-
}}
320-
/>
288+
<PrevNextButtons sx={{ color: 'blue' }} />
321289
<PrevNextButtons
322290
linkType="show"
323-
sx={{
324-
'& .RaPrevNextButton-list': {
325-
marginBottom: '20px',
326-
color: 'red',
327-
},
328-
}}
291+
sx={{ marginBottom: '20px', color: 'red' }}
329292
/>
330293
</RecordContextProvider>
331294
</ResourceContext.Provider>

0 commit comments

Comments
 (0)