Skip to content

Commit 9cd75c3

Browse files
fzaninottofzaninotto
committed
Add more stories
1 parent 241cd44 commit 9cd75c3

File tree

2 files changed

+100
-98
lines changed

2 files changed

+100
-98
lines changed

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

Lines changed: 99 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,14 @@ export default {
2626

2727
const i18nProvider = polyglotI18nProvider(() => englishMessages, 'en');
2828

29-
const Wrapper = ({ children, dataProvider }) => (
29+
const Wrapper = ({
30+
children,
31+
dataProvider = fakeRestDataProvider(
32+
{ users: [{ id: 1, name: 'John Doe', age: 25, type: 'customer' }] },
33+
process.env.NODE_ENV !== 'test',
34+
500
35+
),
36+
}) => (
3037
<TestMemoryRouter>
3138
<QueryClientProvider client={new QueryClient()}>
3239
<DataProviderContext.Provider value={dataProvider}>
@@ -55,12 +62,7 @@ export const Basic = ({
5562
showButtons,
5663
}) => {
5764
const dataProvider = fakeRestDataProvider(
58-
{
59-
users: [
60-
{ id: 1, name: 'John Doe', age: 25 },
61-
{ id: 2, name: 'Jane Doe', age: 30 },
62-
],
63-
},
65+
{ users: [{ id: 1, name: 'John Doe', age: 25, type: 'customer' }] },
6466
process.env.NODE_ENV !== 'test'
6567
);
6668
const sometimesFailsDataProvider = {
@@ -110,101 +112,100 @@ Basic.argTypes = {
110112
showButtons: { control: { type: 'boolean' } },
111113
};
112114

113-
export const SX = () => {
114-
const dataProvider = fakeRestDataProvider(
115-
{
116-
users: [{ id: 1, name: 'John Doe', age: 25 }],
117-
},
118-
process.env.NODE_ENV !== 'test',
119-
500
120-
);
121-
return (
122-
<Wrapper dataProvider={dataProvider}>
123-
<InPlaceEditor
124-
source="name"
125-
sx={{
126-
marginTop: '1rem',
127-
marginLeft: '1rem',
128-
'& .RaInPlaceEditor-reading div': {
129-
fontSize: '1.5rem',
130-
fontWeight: 'bold',
131-
color: 'primary.main',
132-
},
133-
'& .RaInPlaceEditor-saving div': {
134-
fontSize: '1.5rem',
135-
fontWeight: 'bold',
136-
color: 'text.disabled',
137-
},
138-
'& .RaInPlaceEditor-editing input': {
139-
fontSize: '1.5rem',
140-
fontWeight: 'bold',
141-
color: 'primary.main',
142-
},
143-
}}
144-
/>
145-
</Wrapper>
146-
);
147-
};
148-
149-
export const Children = () => {
150-
const dataProvider = fakeRestDataProvider(
151-
{
152-
users: [{ id: 1, name: 'John Doe', age: 25 }],
153-
},
154-
process.env.NODE_ENV !== 'test'
155-
);
156-
return (
157-
<Wrapper dataProvider={dataProvider}>
158-
<InPlaceEditor source="age">
159-
<TextField source="age" variant="body1" />{' '}
160-
<Typography component="span">years old</Typography>
161-
</InPlaceEditor>
162-
</Wrapper>
163-
);
164-
};
115+
export const Children = () => (
116+
<Wrapper>
117+
<InPlaceEditor source="age">
118+
<TextField source="age" variant="body1" />{' '}
119+
<Typography component="span">years old</Typography>
120+
</InPlaceEditor>
121+
</Wrapper>
122+
);
165123

166-
export const Editor = () => {
167-
const dataProvider = fakeRestDataProvider(
168-
{
169-
users: [{ id: 1, name: 'John Doe', type: 'prospect' }],
170-
},
171-
process.env.NODE_ENV !== 'test'
172-
);
173-
return (
174-
<Wrapper dataProvider={dataProvider}>
175-
<Typography color="secondary">Text above</Typography>
176-
<InPlaceEditor
177-
source="type"
178-
editor={
179-
<SelectInput
180-
source="type"
181-
choices={[
182-
{ id: 'prospect', name: 'Prospect' },
183-
{ id: 'customer', name: 'Customer' },
184-
]}
185-
size="small"
186-
margin="none"
187-
label={false}
188-
variant="standard"
189-
autoFocus
190-
SelectProps={{ defaultOpen: true }}
191-
helperText={false}
192-
sx={{ '& .MuiInput-root': { marginTop: 0 } }}
193-
/>
194-
}
195-
>
196-
<SelectField
124+
export const Editor = () => (
125+
<Wrapper>
126+
<Typography color="secondary">Text above</Typography>
127+
<InPlaceEditor
128+
source="type"
129+
editor={
130+
<SelectInput
197131
source="type"
198132
choices={[
199133
{ id: 'prospect', name: 'Prospect' },
200134
{ id: 'customer', name: 'Customer' },
201135
]}
202-
variant="body1"
203-
sx={{ marginTop: '1px', marginBottom: '5px' }}
204-
component="div"
136+
size="small"
137+
margin="none"
138+
label={false}
139+
variant="standard"
140+
autoFocus
141+
SelectProps={{ defaultOpen: true }}
142+
helperText={false}
143+
sx={{ '& .MuiInput-root': { marginTop: 0 } }}
205144
/>
206-
</InPlaceEditor>
207-
<Typography color="secondary">Text below</Typography>
208-
</Wrapper>
209-
);
210-
};
145+
}
146+
>
147+
<SelectField
148+
source="type"
149+
choices={[
150+
{ id: 'prospect', name: 'Prospect' },
151+
{ id: 'customer', name: 'Customer' },
152+
]}
153+
variant="body1"
154+
sx={{ marginTop: '1px', marginBottom: '5px' }}
155+
component="div"
156+
/>
157+
</InPlaceEditor>
158+
<Typography color="secondary">Text below</Typography>
159+
</Wrapper>
160+
);
161+
162+
export const CancelOnBlur = () => (
163+
<Wrapper>
164+
<InPlaceEditor source="name" cancelOnBlur />
165+
</Wrapper>
166+
);
167+
168+
export const MutationMode = () => (
169+
<Wrapper>
170+
<InPlaceEditor source="name" mutationMode="optimistic" />
171+
</Wrapper>
172+
);
173+
174+
export const NotifyOnSuccess = () => (
175+
<Wrapper>
176+
<InPlaceEditor source="name" notifyOnSuccess />
177+
</Wrapper>
178+
);
179+
180+
export const ShowButtons = () => (
181+
<Wrapper>
182+
<InPlaceEditor source="name" showButtons />
183+
</Wrapper>
184+
);
185+
186+
export const SX = () => (
187+
<Wrapper>
188+
<InPlaceEditor
189+
source="name"
190+
sx={{
191+
marginTop: '1rem',
192+
marginLeft: '1rem',
193+
'& .RaInPlaceEditor-reading div': {
194+
fontSize: '1.5rem',
195+
fontWeight: 'bold',
196+
color: 'primary.main',
197+
},
198+
'& .RaInPlaceEditor-saving div': {
199+
fontSize: '1.5rem',
200+
fontWeight: 'bold',
201+
color: 'text.disabled',
202+
},
203+
'& .RaInPlaceEditor-editing input': {
204+
fontSize: '1.5rem',
205+
fontWeight: 'bold',
206+
color: 'primary.main',
207+
},
208+
}}
209+
/>
210+
</Wrapper>
211+
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ export const InPlaceEditor = (props: InPlaceEditorProps) => {
175175
}
176176
if (cancelOnBlur) {
177177
dispatch({ type: 'cancel' });
178+
return;
178179
}
179180
if (state.state === 'editing') {
180181
// trigger the parent form submit

0 commit comments

Comments
 (0)