feat(LoadingState): Add LoadingState component (patternfly#881) (patt…

…ernfly#886)

packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Spinner } from '../Spinner';
+
+class LoadingState extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      render: false
+    };
+  }
+
+  componentDidMount() {
+    this.onTimeout = setTimeout(() => {
+      this.setState({ render: true });
+    }, this.props.timeout);
+  }
+
+  componentWillUnmout() {
+    clearTimeout(this.onTimeout);
+  }
+
+  render() {
+    const { loading, loadingText, children, size, additionalClasses } = this.props;
+
+    const spinner = (
+      <div className={classNames('loading-state-pf', `loading-state-pf-${size}`, additionalClasses)}>
+        <Spinner loading={loading} size={size} />
+        {loadingText}
+      </div>
+    );
+
+    if (loading) {
+      return this.state.render ? spinner : null;
+    }
+    return children;
+  }
+}
+
+LoadingState.propTypes = {
+  /** determines whether to show spinner or children */
+  loading: PropTypes.bool,
+  /** text to show with spinner */
+  loadingText: PropTypes.string,
+  /** children nodes */
+  children: PropTypes.node,
+  /** delay in showing the children */
+  timeout: PropTypes.number,
+  /** size of the spinner */
+  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
+  /** additional css classes for LoadingState */
+  additionalClasses: PropTypes.string
+};
+
+LoadingState.defaultProps = {
+  loading: false,
+  loadingText: 'Loading',
+  children: null,
+  timeout: 300,
+  size: 'lg',
+  additionalClasses: ''
+};
+
+export default LoadingState;

packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import { inlineTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
+
+import { LoadingState } from './index';
+
+import { name } from '../../../package.json';
+
+const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Loading State`, module);
+
+stories.addDecorator(withKnobs);
+
+stories.add(
+  'Loading State',
+  withInfo('Loading State shows centered spinner when loading')(() => {
+    const loading = boolean('Loading', true);
+
+    const size = select('Size', ['lg', 'md', 'sm', 'xs'], 'lg');
+
+    const story = (
+      <LoadingState loading={loading} size={size}>
+        <div>Look at me! I am loaded content!</div>
+      </LoadingState>
+    );
+
+    return inlineTemplate({
+      title: 'Loading State',
+      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}loading-state/`,
+      story
+    });
+  })
+);

packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import { LoadingState } from './index';
+
+jest.useFakeTimers();
+
+test('Loading State renders properly while loading', () => {
+  const component = shallow(
+    <LoadingState loading loadingText="Loading">
+      <p>Loading Complete</p>
+    </LoadingState>
+  );
+  jest.runAllTimers();
+  component.update();
+  expect(component.state('render')).toEqual(true);
+  expect(toJson(component.render())).toMatchSnapshot();
+});
+
+test('Loading State renders properly while not loading', () => {
+  const component = shallow(
+    <LoadingState loading={false} loadingText="Loading">
+      <p>Loading Complete</p>
+    </LoadingState>
+  );
+  jest.runAllTimers();
+  component.update();
+  expect(toJson(component.render())).toMatchSnapshot();
+});
+
+test('Loadin State renders in xs size', () => {
+  const component = shallow(
+    <LoadingState loading loadingText="Loading" size="xs">
+      <p>Loading Complete</p>
+    </LoadingState>
+  );
+  jest.runAllTimers();
+  component.update();
+  expect(toJson(component.render())).toMatchSnapshot();
+});

packages/patternfly-3/patternfly-react/src/components/LoadingState/__snapshots__/LoadingState.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loadin State renders in xs size 1`] = `
+<div
+  class="loading-state-pf loading-state-pf-xs"
+>
+  <div
+    class="spinner spinner-xs"
+  />
+  Loading
+</div>
+`;
+
+exports[`Loading State renders properly while loading 1`] = `
+<div
+  class="loading-state-pf loading-state-pf-lg"
+>
+  <div
+    class="spinner spinner-lg"
+  />
+  Loading
+</div>
+`;
+
+exports[`Loading State renders properly while not loading 1`] = `
+<p>
+  Loading Complete
+</p>
+`;

packages/patternfly-3/patternfly-react/src/components/LoadingState/index.js

@@ -0,0 +1 @@
+export { default as LoadingState } from './LoadingState';

packages/patternfly-3/react-console/package.json

@@ -45,7 +45,7 @@
     "xterm": "^3.3.0"
   },
   "devDependencies": {
-    "patternfly": "^3.52.1",
+    "patternfly": "^3.58.0",
     "patternfly-react": "^2.24.6"
   },
   "peerDependencies": {

yarn.lock

@@ -11131,40 +11131,10 @@ patternfly-bootstrap-treeview@~2.1.0:
     bootstrap "3.3.x"
     jquery ">= 2.1.x"
 
-patternfly@^3.52.1:
-  version "3.54.2"
-  resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.54.2.tgz#58b4b424462c4b01aaebf41db2da3bcd63bedfbf"
-  dependencies:
-    bootstrap "~3.3.7"
-    font-awesome "^4.7.0"
-    jquery "~3.2.1"
-  optionalDependencies:
-    "@types/c3" "^0.6.0"
-    bootstrap-datepicker "^1.7.1"
-    bootstrap-sass "^3.3.7"
-    bootstrap-select "1.12.2"
-    bootstrap-slider "^9.9.0"
-    bootstrap-switch "~3.3.4"
-    bootstrap-touchspin "~3.1.1"
-    c3 "~0.4.11"
-    d3 "~3.5.17"
-    datatables.net "^1.10.15"
-    datatables.net-colreorder "^1.4.1"
-    datatables.net-colreorder-bs "~1.3.2"
-    datatables.net-select "~1.2.0"
-    drmonty-datatables-colvis "~1.1.2"
-    eonasdan-bootstrap-datetimepicker "^4.17.47"
-    font-awesome-sass "^4.7.0"
-    google-code-prettify "~1.0.5"
-    jquery-match-height "^0.7.2"
-    moment "^2.19.1"
-    moment-timezone "^0.4.1"
-    patternfly-bootstrap-combobox "~1.1.7"
-    patternfly-bootstrap-treeview "~2.1.0"
-
 patternfly@^3.58.0:
   version "3.58.0"
   resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.58.0.tgz#c94516a9fbf2b645b63a53e58fcf39c45bf66a8b"
+  integrity sha512-geY0cbSFXoi9qv9cXCZe0OPCZBuLCuPKfEPXk0usTHjYSk5oUv3KMMuAJidbsbtXqc6vnDYjGfngepIlJ99rfg==
   dependencies:
     bootstrap "~3.3.7"
     font-awesome "^4.7.0"