Fix loading icon of modal actions #5

react-ui-org · Dec 4, 2019 · 2464055 · 2464055
1 parent 6120a91
commit 2464055
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 6 deletions.
diff --git a/demo/generated/demo.js b/demo/generated/demo.js
diff --git a/dist/lib.js b/dist/lib.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "license": "MIT",
   "main": "dist/lib.js",
   "repository": {

diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
@@ -56,6 +56,7 @@ class DemoContainer extends React.Component {
     super(props);
     this.state = {
       showModal: false,
+      showModal2: false,
       tableSortColumn: 'id',
       tableSortDirection: 'asc',
     };
@@ -878,6 +879,35 @@ class DemoContainer extends React.Component {
                 </>
               )}
             />
+            <Documentation
+              name="Modal label with loading icon"
+              component={(
+                <>
+                  <Button
+                    label="Open modal"
+                    clickHandler={() => this.setState({ showModal2: true })}
+                  />
+                  {this.state.showModal2 && (
+                    <Modal
+                      actions={[
+                        {
+                          clickHandler: () => {
+                            loggerClick();
+                            this.setState({ showModal2: false });
+                          },
+                          label: 'Agree',
+                          loadingIcon: <Icon icon="sync" />,
+                        },
+                      ]}
+                      closeHandler={() => this.setState({ showModal2: false })}
+                      title="Modal"
+                    >
+                      <p>Dialog content</p>
+                    </Modal>
+                  )}
+                </>
+              )}
+            />
             <h3 id="ui-components-multiple-selectfield" className="typography-size-4 mb-6">Multiple Select Field</h3>
             <Documentation
               name="Multiple select field variants"

diff --git a/src/lib/components/ui/Modal/Modal.jsx b/src/lib/components/ui/Modal/Modal.jsx
@@ -92,7 +92,7 @@ class Modal extends React.Component {
                 id={action.id || undefined}
                 key={action.label}
                 label={action.label}
-                loading={action.loading}
+                loadingIcon={action.loadingIcon}
                 variant={action.variant}
               />
             ))}
@@ -123,7 +123,7 @@ Modal.propTypes = {
     disabled: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string.isRequired,
-    loading: PropTypes.bool,
+    loadingIcon: PropTypes.element,
     variant: PropTypes.string,
   })),
   children: PropTypes.oneOfType([

diff --git a/src/lib/components/ui/Modal/__tests__/Modal.test.jsx b/src/lib/components/ui/Modal/__tests__/Modal.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import sinon from 'sinon';
+import Icon from '../../Icon';
 import Modal from '..';
 
 jest.mock('../../Icon/load-material-design-icons');
@@ -39,6 +40,27 @@ describe('rendering', () => {
     expect(shallowToJson(tree)).toMatchSnapshot();
   });
 
+  it('renders correctly with all with loading icon props except translations', () => {
+    const tree = mount((
+      <Modal
+        actions={[
+          {
+            clickHandler: () => {},
+            label: 'Action',
+            loadingIcon: <Icon icon="sync" />,
+          },
+        ]}
+        closeHandler={() => {}}
+        id="custom-id"
+        title="Modal title"
+      >
+        Modal content
+      </Modal>
+    ));
+
+    expect(shallowToJson(tree)).toMatchSnapshot();
+  });
+
   it('renders correctly with translations', () => {
     const tree = mount((
       <Modal

diff --git a/src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap b/src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap
@@ -152,6 +152,192 @@ exports[`rendering renders correctly with all props except translations 1`] = `
 </WithTranslationContextComponent>
 `;
 
+exports[`rendering renders correctly with all with loading icon props except translations 1`] = `
+<WithTranslationContextComponent
+  actions={
+    Array [
+      Object {
+        "clickHandler": [Function],
+        "label": "Action",
+        "loadingIcon": <Icon
+          icon="sync"
+          size="medium"
+        />,
+      },
+    ]
+  }
+  closeHandler={[Function]}
+  id="custom-id"
+  title="Modal title"
+  translations={null}
+>
+  <Modal
+    actions={
+      Array [
+        Object {
+          "clickHandler": [Function],
+          "label": "Action",
+          "loadingIcon": <Icon
+            icon="sync"
+            size="medium"
+          />,
+        },
+      ]
+    }
+    closeHandler={[Function]}
+    id="custom-id"
+    title="Modal title"
+    translations={
+      Object {
+        "close": "Close",
+      }
+    }
+  >
+    <div
+      className="overlay"
+      id="custom-id"
+      onClick={[Function]}
+      onScroll={[Function]}
+      role="presentation"
+    >
+      <div
+        className="root"
+        onClick={[Function]}
+        role="presentation"
+      >
+        <div
+          className="head"
+        >
+          <h3
+            className="headTitle"
+            id="custom-id__title"
+          >
+            Modal title
+          </h3>
+          <button
+            className="close"
+            id="custom-id__closeModalHeaderButton"
+            onClick={[Function]}
+            title="Close"
+            type="button"
+          >
+            ×
+          </button>
+        </div>
+        <div
+          className="body"
+          id="custom-id__content"
+        >
+          Modal content
+        </div>
+        <div
+          className="footer"
+        >
+          <Button
+            afterLabel={null}
+            beforeLabel={null}
+            block={false}
+            clickHandler={[Function]}
+            disabled={false}
+            endCorner={null}
+            grouped={false}
+            key="Action"
+            label="Action"
+            labelVisibility="all"
+            loadingIcon={
+              <Icon
+                icon="sync"
+                size="medium"
+              />
+            }
+            priority="default"
+            size="medium"
+            startCorner={null}
+            type="button"
+            variant="primary"
+          >
+            <button
+              className="root
+        priorityDefault
+        sizeMedium
+        variantPrimary"
+              disabled={true}
+              onClick={[Function]}
+              title={null}
+              type="button"
+            >
+              <span
+                className="label"
+              >
+                Action
+              </span>
+              <span
+                className="loadingIcon"
+              >
+                <Icon
+                  icon="sync"
+                  size="medium"
+                >
+                  <svg
+                    className="root"
+                    style={
+                      Object {
+                        "fill": "currentColor",
+                      }
+                    }
+                  >
+                    <use
+                      xlinkHref="#ic_sync_48px"
+                    />
+                  </svg>
+                </Icon>
+              </span>
+            </button>
+          </Button>
+          <Button
+            afterLabel={null}
+            beforeLabel={null}
+            block={false}
+            clickHandler={[Function]}
+            disabled={false}
+            endCorner={null}
+            grouped={false}
+            id="custom-id__closeModalFooterButton"
+            label="Close"
+            labelVisibility="all"
+            loadingIcon={null}
+            priority="flat"
+            size="medium"
+            startCorner={null}
+            type="button"
+            variant="primary"
+          >
+            <button
+              className="root
+        priorityFlat
+        sizeMedium
+        variantPrimary"
+              disabled={false}
+              id="custom-id__closeModalFooterButton"
+              onClick={[Function]}
+              title={null}
+              type="button"
+            >
+              <span
+                className="label"
+                id="custom-id__closeModalFooterButton__label"
+              >
+                Close
+              </span>
+            </button>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</WithTranslationContextComponent>
+`;
+
 exports[`rendering renders correctly with mandatory props only 1`] = `
 <WithTranslationContextComponent
   title="Modal title"