Skip to content

Commit 714a736

Browse files
fzaninottofzaninotto
committed
Add complex story
1 parent 74f923b commit 714a736

File tree

3 files changed

+395
-18
lines changed

3 files changed

+395
-18
lines changed

‎packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.Card.stories.tsx‎

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
import * as React from 'react';
2+
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
3+
import {
4+
createTheme,
5+
Avatar,
6+
Box,
7+
ThemeProvider,
8+
Card,
9+
Divider,
10+
Stack,
11+
Typography,
12+
IconButton,
13+
} from '@mui/material';
14+
import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
15+
import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
16+
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
17+
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
18+
import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
19+
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
20+
import {
21+
ResourceContextProvider,
22+
DataProviderContext,
23+
I18nContextProvider,
24+
ShowBase,
25+
TestMemoryRouter,
26+
NotificationContextProvider,
27+
UndoableMutationsContextProvider,
28+
} from 'ra-core';
29+
import fakeRestDataProvider from 'ra-data-fakerest';
30+
import polyglotI18nProvider from 'ra-i18n-polyglot';
31+
import englishMessages from 'ra-language-english';
32+
33+
import { InPlaceEditor } from './InPlaceEditor';
34+
import { SelectInput } from '../SelectInput';
35+
import { ChipField, SelectField, TextField } from '../../field';
36+
import { Notification } from '../../layout';
37+
38+
export default {
39+
title: 'ra-ui-materialui/input/InPlaceEditor',
40+
};
41+
42+
const i18nProvider = polyglotI18nProvider(() => englishMessages, 'en');
43+
44+
const Wrapper = ({ children, dataProvider }) => (
45+
<TestMemoryRouter>
46+
<QueryClientProvider client={new QueryClient()}>
47+
<DataProviderContext.Provider value={dataProvider}>
48+
<UndoableMutationsContextProvider>
49+
<I18nContextProvider value={i18nProvider}>
50+
<ThemeProvider theme={createTheme()}>
51+
<NotificationContextProvider>
52+
<ResourceContextProvider value="users">
53+
<ShowBase id={1}>{children}</ShowBase>
54+
<Notification />
55+
</ResourceContextProvider>
56+
</NotificationContextProvider>
57+
</ThemeProvider>
58+
</I18nContextProvider>
59+
</UndoableMutationsContextProvider>
60+
</DataProviderContext.Provider>
61+
</QueryClientProvider>
62+
</TestMemoryRouter>
63+
);
64+
65+
export const Complex = () => {
66+
const dataProvider = fakeRestDataProvider(
67+
{
68+
users: [
69+
{
70+
id: 1,
71+
name: 'Kevin Malon',
72+
phone: '(+91) 999 564 4837',
73+
email: '[email protected]',
74+
leadStatus: 'customer',
75+
access: 'everyone',
76+
},
77+
],
78+
},
79+
process.env.NODE_ENV !== 'test'
80+
);
81+
return (
82+
<Wrapper dataProvider={dataProvider}>
83+
<Card
84+
sx={{
85+
display: 'flex',
86+
flexDirection: 'column',
87+
px: 2,
88+
py: 3,
89+
m: 2,
90+
width: 300,
91+
}}
92+
>
93+
<Box
94+
sx={{
95+
display: 'absolute',
96+
bgcolor: 'grey.300',
97+
mx: -2,
98+
my: -3,
99+
top: 0,
100+
right: 0,
101+
height: 50,
102+
}}
103+
/>
104+
<Box
105+
sx={{
106+
display: 'flex',
107+
justifyContent: 'center',
108+
}}
109+
>
110+
<Avatar
111+
src="https://mui.com/static/images/avatar/2.jpg"
112+
sx={{ width: 56, height: 56, marginBottom: 0.5 }}
113+
/>
114+
</Box>
115+
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
116+
<InPlaceEditor
117+
source="name"
118+
sx={{
119+
fontSize: '1.2rem',
120+
'& input': {
121+
textAlign: 'center',
122+
},
123+
}}
124+
/>
125+
</Box>
126+
<Box
127+
sx={{
128+
display: 'flex',
129+
justifyContent: 'center',
130+
gap: 1,
131+
my: 1,
132+
}}
133+
>
134+
<IconButton sx={{ bgcolor: '#e1f2ff' }}>
135+
<PhoneOutlinedIcon fontSize="small" />
136+
</IconButton>
137+
<IconButton sx={{ bgcolor: '#e1f2ff' }}>
138+
<ChatBubbleOutlineOutlinedIcon fontSize="small" />
139+
</IconButton>
140+
<IconButton sx={{ bgcolor: '#e1f2ff' }}>
141+
<EmailOutlinedIcon fontSize="small" />
142+
</IconButton>
143+
<IconButton sx={{ bgcolor: '#e1f2ff' }}>
144+
<MoreHorizIcon fontSize="small" />
145+
</IconButton>
146+
</Box>
147+
<Divider sx={{ my: 2, mx: -2 }} />
148+
<Stack gap={1}>
149+
<Box>
150+
<Box
151+
sx={{
152+
display: 'flex',
153+
justifyContent: 'space-between',
154+
}}
155+
>
156+
<Box
157+
sx={{
158+
display: 'flex',
159+
alignItems: 'top',
160+
gap: 1,
161+
}}
162+
>
163+
<PhoneOutlinedIcon
164+
fontSize="small"
165+
sx={{ color: 'text.disabled' }}
166+
/>
167+
<Typography color="text.disabled">
168+
Phone
169+
</Typography>
170+
</Box>
171+
<InPlaceEditor
172+
source="phone"
173+
sx={{
174+
'& input': {
175+
textAlign: 'right',
176+
},
177+
}}
178+
/>
179+
</Box>
180+
</Box>
181+
<Box>
182+
<Box
183+
sx={{
184+
display: 'flex',
185+
justifyContent: 'space-between',
186+
}}
187+
>
188+
<Box
189+
sx={{
190+
display: 'flex',
191+
alignItems: 'top',
192+
gap: 1,
193+
}}
194+
>
195+
<EmailOutlinedIcon
196+
fontSize="small"
197+
sx={{ color: 'text.disabled' }}
198+
/>
199+
<Typography color="text.disabled">
200+
Email
201+
</Typography>
202+
</Box>
203+
<InPlaceEditor
204+
source="email"
205+
sx={{
206+
'& input': {
207+
textAlign: 'right',
208+
},
209+
}}
210+
/>
211+
</Box>
212+
</Box>
213+
<Box>
214+
<Box
215+
sx={{
216+
display: 'flex',
217+
justifyContent: 'space-between',
218+
}}
219+
>
220+
<Box
221+
sx={{
222+
display: 'flex',
223+
alignItems: 'top',
224+
gap: 1,
225+
}}
226+
>
227+
<LocalOfferOutlinedIcon
228+
fontSize="small"
229+
sx={{ color: 'text.disabled' }}
230+
/>
231+
<Typography color="text.disabled">
232+
Lead Status
233+
</Typography>
234+
</Box>
235+
<InPlaceEditor
236+
source="leadStatus"
237+
editor={
238+
<SelectInput
239+
source="leadStatus"
240+
choices={[
241+
{
242+
id: 'customer',
243+
name: 'Customer',
244+
},
245+
{
246+
id: 'prospect',
247+
name: 'Prospect',
248+
},
249+
]}
250+
size="small"
251+
variant="standard"
252+
label={false}
253+
margin="none"
254+
helperText={false}
255+
autoFocus
256+
SelectProps={{ defaultOpen: true }}
257+
sx={{
258+
'& .MuiInput-root': {
259+
marginTop: 0,
260+
},
261+
}}
262+
/>
263+
}
264+
>
265+
<SelectField
266+
source="leadStatus"
267+
choices={[
268+
{ id: 'customer', name: 'Customer' },
269+
{ id: 'prospect', name: 'Prospect' },
270+
]}
271+
optionText={
272+
<ChipField
273+
size="small"
274+
variant="outlined"
275+
source="name"
276+
/>
277+
}
278+
sx={{
279+
display: 'block',
280+
marginBottom: '5px',
281+
}}
282+
/>
283+
</InPlaceEditor>
284+
</Box>
285+
</Box>
286+
<Box>
287+
<Box
288+
sx={{
289+
display: 'flex',
290+
justifyContent: 'space-between',
291+
}}
292+
>
293+
<Box
294+
sx={{
295+
display: 'flex',
296+
alignItems: 'top',
297+
gap: 1,
298+
}}
299+
>
300+
<VisibilityOutlinedIcon
301+
fontSize="small"
302+
sx={{ color: 'text.disabled' }}
303+
/>
304+
<Typography color="text.disabled">
305+
Access
306+
</Typography>
307+
</Box>
308+
<InPlaceEditor
309+
source="access"
310+
editor={
311+
<SelectInput
312+
source="access"
313+
choices={[
314+
{
315+
id: 'everyone',
316+
name: 'Everyone',
317+
},
318+
{ id: 'just_me', name: 'Just me' },
319+
{ id: 'sales', name: 'Sales' },
320+
]}
321+
size="small"
322+
variant="standard"
323+
label={false}
324+
margin="none"
325+
helperText={false}
326+
autoFocus
327+
SelectProps={{ defaultOpen: true }}
328+
sx={{
329+
'& .MuiInput-root': {
330+
marginTop: 0,
331+
},
332+
}}
333+
/>
334+
}
335+
>
336+
<SelectField
337+
source="access"
338+
variant="body1"
339+
choices={[
340+
{ id: 'everyone', name: 'Everyone' },
341+
{ id: 'just_me', name: 'Just me' },
342+
{ id: 'sales', name: 'Sales' },
343+
]}
344+
sx={{
345+
display: 'block',
346+
marginBottom: '5px',
347+
}}
348+
/>
349+
</InPlaceEditor>
350+
</Box>
351+
</Box>
352+
</Stack>
353+
</Card>
354+
</Wrapper>
355+
);
356+
};

0 commit comments

Comments
 (0)