diff --git a/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.js b/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.js new file mode 100644 index 00000000000..c4726a763d8 --- /dev/null +++ b/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 = ( +
+ + {loadingText} +
+ ); + + 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; diff --git a/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.stories.js b/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.stories.js new file mode 100644 index 00000000000..c7a52524b9d --- /dev/null +++ b/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 = ( + +
Look at me! I am loaded content!
+ + ); + + return inlineTemplate({ + title: 'Loading State', + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}loading-state/`, + story + }); + }) +); diff --git a/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.test.js b/packages/patternfly-3/patternfly-react/src/components/LoadingState/LoadingState.test.js new file mode 100644 index 00000000000..6cbad96d68a --- /dev/null +++ b/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( + +

Loading Complete

+ + ); + 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( + +

Loading Complete

+ + ); + jest.runAllTimers(); + component.update(); + expect(toJson(component.render())).toMatchSnapshot(); +}); + +test('Loadin State renders in xs size', () => { + const component = shallow( + +

Loading Complete

+ + ); + jest.runAllTimers(); + component.update(); + expect(toJson(component.render())).toMatchSnapshot(); +}); diff --git a/packages/patternfly-3/patternfly-react/src/components/LoadingState/__snapshots__/LoadingState.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/LoadingState/__snapshots__/LoadingState.test.js.snap new file mode 100644 index 00000000000..e7d4fce4cb7 --- /dev/null +++ b/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`] = ` +
+ +`; + +exports[`Loading State renders properly while loading 1`] = ` +
+ +`; + +exports[`Loading State renders properly while not loading 1`] = ` +

+ Loading Complete +

+`; diff --git a/packages/patternfly-3/patternfly-react/src/components/LoadingState/index.js b/packages/patternfly-3/patternfly-react/src/components/LoadingState/index.js new file mode 100644 index 00000000000..47654a4c939 --- /dev/null +++ b/packages/patternfly-3/patternfly-react/src/components/LoadingState/index.js @@ -0,0 +1 @@ +export { default as LoadingState } from './LoadingState'; diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json index 73410bf865f..12cb479615a 100644 --- a/packages/patternfly-3/react-console/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index c47d6321aac..f25beed2631 100644 --- a/yarn.lock +++ b/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"