Skip to content

Commit 2464055

Browse files
bedrich-schindlerbedrich-schindler
committed
Fix loading icon of modal actions #5 
1 parent 6120a91 commit 2464055

File tree

8 files changed

+244
-6
lines changed

8 files changed

+244
-6
lines changed

‎demo/generated/demo.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lib.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-ui-org/react-ui",
3-
"version": "0.21.0",
3+
"version": "0.22.0",
44
"license": "MIT",
55
"main": "dist/lib.js",
66
"repository": {

‎src/demo/pages/DemoContainer.jsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ class DemoContainer extends React.Component {
5656
super(props);
5757
this.state = {
5858
showModal: false,
59+
showModal2: false,
5960
tableSortColumn: 'id',
6061
tableSortDirection: 'asc',
6162
};
@@ -878,6 +879,35 @@ class DemoContainer extends React.Component {
878879
</>
879880
)}
880881
/>
882+
<Documentation
883+
name="Modal label with loading icon"
884+
component={(
885+
<>
886+
<Button
887+
label="Open modal"
888+
clickHandler={() => this.setState({ showModal2: true })}
889+
/>
890+
{this.state.showModal2 && (
891+
<Modal
892+
actions={[
893+
{
894+
clickHandler: () => {
895+
loggerClick();
896+
this.setState({ showModal2: false });
897+
},
898+
label: 'Agree',
899+
loadingIcon: <Icon icon="sync" />,
900+
},
901+
]}
902+
closeHandler={() => this.setState({ showModal2: false })}
903+
title="Modal"
904+
>
905+
<p>Dialog content</p>
906+
</Modal>
907+
)}
908+
</>
909+
)}
910+
/>
881911
<h3 id="ui-components-multiple-selectfield" className="typography-size-4 mb-6">Multiple Select Field</h3>
882912
<Documentation
883913
name="Multiple select field variants"

‎src/lib/components/ui/Modal/Modal.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ class Modal extends React.Component {
9292
id={action.id || undefined}
9393
key={action.label}
9494
label={action.label}
95-
loading={action.loading}
95+
loadingIcon={action.loadingIcon}
9696
variant={action.variant}
9797
/>
9898
))}
@@ -123,7 +123,7 @@ Modal.propTypes = {
123123
disabled: PropTypes.bool,
124124
id: PropTypes.string,
125125
label: PropTypes.string.isRequired,
126-
loading: PropTypes.bool,
126+
loadingIcon: PropTypes.element,
127127
variant: PropTypes.string,
128128
})),
129129
children: PropTypes.oneOfType([

‎src/lib/components/ui/Modal/__tests__/Modal.test.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import { shallowToJson } from 'enzyme-to-json';
44
import sinon from 'sinon';
5+
import Icon from '../../Icon';
56
import Modal from '..';
67

78
jest.mock('../../Icon/load-material-design-icons');
@@ -39,6 +40,27 @@ describe('rendering', () => {
3940
expect(shallowToJson(tree)).toMatchSnapshot();
4041
});
4142

43+
it('renders correctly with all with loading icon props except translations', () => {
44+
const tree = mount((
45+
<Modal
46+
actions={[
47+
{
48+
clickHandler: () => {},
49+
label: 'Action',
50+
loadingIcon: <Icon icon="sync" />,
51+
},
52+
]}
53+
closeHandler={() => {}}
54+
id="custom-id"
55+
title="Modal title"
56+
>
57+
Modal content
58+
</Modal>
59+
));
60+
61+
expect(shallowToJson(tree)).toMatchSnapshot();
62+
});
63+
4264
it('renders correctly with translations', () => {
4365
const tree = mount((
4466
<Modal

‎src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,192 @@ exports[`rendering renders correctly with all props except translations 1`] = `
152152
</WithTranslationContextComponent>
153153
`;
154154

155+
exports[`rendering renders correctly with all with loading icon props except translations 1`] = `
156+
<WithTranslationContextComponent
157+
actions={
158+
Array [
159+
Object {
160+
"clickHandler": [Function],
161+
"label": "Action",
162+
"loadingIcon": <Icon
163+
icon="sync"
164+
size="medium"
165+
/>,
166+
},
167+
]
168+
}
169+
closeHandler={[Function]}
170+
id="custom-id"
171+
title="Modal title"
172+
translations={null}
173+
>
174+
<Modal
175+
actions={
176+
Array [
177+
Object {
178+
"clickHandler": [Function],
179+
"label": "Action",
180+
"loadingIcon": <Icon
181+
icon="sync"
182+
size="medium"
183+
/>,
184+
},
185+
]
186+
}
187+
closeHandler={[Function]}
188+
id="custom-id"
189+
title="Modal title"
190+
translations={
191+
Object {
192+
"close": "Close",
193+
}
194+
}
195+
>
196+
<div
197+
className="overlay"
198+
id="custom-id"
199+
onClick={[Function]}
200+
onScroll={[Function]}
201+
role="presentation"
202+
>
203+
<div
204+
className="root"
205+
onClick={[Function]}
206+
role="presentation"
207+
>
208+
<div
209+
className="head"
210+
>
211+
<h3
212+
className="headTitle"
213+
id="custom-id__title"
214+
>
215+
Modal title
216+
</h3>
217+
<button
218+
className="close"
219+
id="custom-id__closeModalHeaderButton"
220+
onClick={[Function]}
221+
title="Close"
222+
type="button"
223+
>
224+
×
225+
</button>
226+
</div>
227+
<div
228+
className="body"
229+
id="custom-id__content"
230+
>
231+
Modal content
232+
</div>
233+
<div
234+
className="footer"
235+
>
236+
<Button
237+
afterLabel={null}
238+
beforeLabel={null}
239+
block={false}
240+
clickHandler={[Function]}
241+
disabled={false}
242+
endCorner={null}
243+
grouped={false}
244+
key="Action"
245+
label="Action"
246+
labelVisibility="all"
247+
loadingIcon={
248+
<Icon
249+
icon="sync"
250+
size="medium"
251+
/>
252+
}
253+
priority="default"
254+
size="medium"
255+
startCorner={null}
256+
type="button"
257+
variant="primary"
258+
>
259+
<button
260+
className="root
261+
priorityDefault
262+
sizeMedium
263+
variantPrimary"
264+
disabled={true}
265+
onClick={[Function]}
266+
title={null}
267+
type="button"
268+
>
269+
<span
270+
className="label"
271+
>
272+
Action
273+
</span>
274+
<span
275+
className="loadingIcon"
276+
>
277+
<Icon
278+
icon="sync"
279+
size="medium"
280+
>
281+
<svg
282+
className="root"
283+
style={
284+
Object {
285+
"fill": "currentColor",
286+
}
287+
}
288+
>
289+
<use
290+
xlinkHref="#ic_sync_48px"
291+
/>
292+
</svg>
293+
</Icon>
294+
</span>
295+
</button>
296+
</Button>
297+
<Button
298+
afterLabel={null}
299+
beforeLabel={null}
300+
block={false}
301+
clickHandler={[Function]}
302+
disabled={false}
303+
endCorner={null}
304+
grouped={false}
305+
id="custom-id__closeModalFooterButton"
306+
label="Close"
307+
labelVisibility="all"
308+
loadingIcon={null}
309+
priority="flat"
310+
size="medium"
311+
startCorner={null}
312+
type="button"
313+
variant="primary"
314+
>
315+
<button
316+
className="root
317+
priorityFlat
318+
sizeMedium
319+
variantPrimary"
320+
disabled={false}
321+
id="custom-id__closeModalFooterButton"
322+
onClick={[Function]}
323+
title={null}
324+
type="button"
325+
>
326+
<span
327+
className="label"
328+
id="custom-id__closeModalFooterButton__label"
329+
>
330+
Close
331+
</span>
332+
</button>
333+
</Button>
334+
</div>
335+
</div>
336+
</div>
337+
</Modal>
338+
</WithTranslationContextComponent>
339+
`;
340+
155341
exports[`rendering renders correctly with mandatory props only 1`] = `
156342
<WithTranslationContextComponent
157343
title="Modal title"

0 commit comments

Comments
 (0)