From 3a0471a2b1401c62c64351d10a4327f0629301d5 Mon Sep 17 00:00:00 2001 From: "MARI L. JOHANNESSEN" Date: Thu, 20 Apr 2017 11:58:57 -0500 Subject: [PATCH] refactor(loading): update to 7.x (#559) * refactor(loading): update to 7.x * fix(interior-left-nav): removed unused variable --- .storybook/components/LoadingStory.js | 25 +++++++-- components/Loading.js | 76 +++++++++++++++------------ components/__tests__/Loading-test.js | 60 +++++++-------------- 3 files changed, 83 insertions(+), 78 deletions(-) diff --git a/.storybook/components/LoadingStory.js b/.storybook/components/LoadingStory.js index c9fedfa35ac9..e27e18f5c11b 100644 --- a/.storybook/components/LoadingStory.js +++ b/.storybook/components/LoadingStory.js @@ -9,12 +9,29 @@ const loadingProps = { storiesOf('Loading', module) .addWithInfo( - '', + 'Loading with overlay', ` Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The 'active' property is true by default; set to false to end the animation. `, - () => ( - - )); + () => , + ) + .addWithInfo( + 'Loading without overlay', + ` + Loading spinners are used when retrieving data or performing slow computations, + and help to notify users that loading is underway. The 'active' property is true by default; + set to false to end the animation. + `, + () => , + ) + .addWithInfo( + 'Small loading', + ` + Loading spinners are used when retrieving data or performing slow computations, + and help to notify users that loading is underway. The 'active' property is true by default; + set to false to end the animation. + `, + () => , + ); diff --git a/components/Loading.js b/components/Loading.js index 9ad5e87d3eff..5b717649d3eb 100644 --- a/components/Loading.js +++ b/components/Loading.js @@ -1,40 +1,48 @@ -/* global window */ - import React from 'react'; import classNames from 'classnames'; -const propTypes = { - active: React.PropTypes.bool, - className: React.PropTypes.string, -}; - -const defaultProps = { - active: true, -}; - -const Loading = ({ className, active, ...other }) => { - const isIe = window.ActiveXObject || 'ActiveXObject' in window; - - const loadingClasses = classNames( - 'bx--loading', - className, - { - 'bx--loading--ie': isIe, +class Loading extends React.Component { + static propTypes = { + active: React.PropTypes.bool, + className: React.PropTypes.string, + withOverlay: React.PropTypes.bool, + small: React.PropTypes.bool, + }; + + static defaultProps = { + active: true, + withOverlay: true, + small: false, + }; + + render() { + const { + active, + className, + withOverlay, + small, + ...other + } = this.props; + + const loadingClasses = classNames('bx--loading', className, { + 'bx--loading--small': small, 'bx--loading--stop': !active, - 'bx--loading--stop--ie': !active && isIe, - }, - ); - - return ( -
- - - -
- ); -}; - -Loading.propTypes = propTypes; -Loading.defaultProps = defaultProps; + }); + + const loading = ( +
+ + + +
+ ); + + return withOverlay + ?
+ {loading} +
+ : loading; + } +} export default Loading; diff --git a/components/__tests__/Loading-test.js b/components/__tests__/Loading-test.js index 6e3c79d7493e..5e153a11d19f 100644 --- a/components/__tests__/Loading-test.js +++ b/components/__tests__/Loading-test.js @@ -2,18 +2,20 @@ import React from 'react'; import Loading from '../Loading'; -import { shallow, mount } from 'enzyme'; +import { mount } from 'enzyme'; describe('Loading', () => { describe('Renders as expected', () => { - const wrapper = shallow( - - ); + const wrapper = mount(); + const overlay = wrapper.find('.bx--loading-overlay'); + const loader = wrapper.find('.bx--loading'); + const svg = loader.find('svg'); - const loader = wrapper.find('div'); - const svg = wrapper.find('svg'); + it('should render with an overlay', () => { + expect(overlay.length).toEqual(1); + }); - it('should render a loader', () => { + it('should render with a loader', () => { expect(loader.length).toEqual(1); }); @@ -21,7 +23,11 @@ describe('Loading', () => { expect(svg.length).toEqual(1); }); - it('has the expected classes', () => { + it('overlay has the expected class', () => { + expect(overlay.hasClass('bx--loading-overlay')).toEqual(true); + }); + + it('loader has the expected classes', () => { expect(loader.hasClass('bx--loading')).toEqual(true); }); @@ -35,46 +41,20 @@ describe('Loading', () => { }); describe('Sets props and state as expected', () => { - const wrapper = mount( - - ); + const wrapper = mount(); - const loader = wrapper.find('div'); it('should remove and add bx--loading--stop class', () => { + const loader = wrapper.find('.bx--loading'); wrapper.setProps({ active: false }); expect(loader.hasClass('bx--loading--stop')).toEqual(true); wrapper.setProps({ active: true }); expect(loader.hasClass('bx--loading--stop')).toEqual(false); }); - }); - - describe('Has expected IE classes in IE environment', () => { - let wrapper; - let loader; - - beforeAll(() => { - window.ActiveXObject = {}; - wrapper = mount( - - ); - loader = wrapper.find('div'); - }); - afterAll(() => { - window.ActiveXObject = undefined; - }); - - it('has the expected classes', () => { - expect(loader.hasClass('bx--loading')).toEqual(true); - expect(loader.hasClass('bx--loading--ie')).toEqual(true); - }); - - it('should remove and add bx--loading--stop--ie class', () => { - wrapper.setProps({ active: false }); - expect(loader.hasClass('bx--loading--stop')).toEqual(true); - expect(loader.hasClass('bx--loading--stop--ie')).toEqual(true); - wrapper.setProps({ active: true }); - expect(loader.hasClass('bx--loading--stop--ie')).toEqual(false); + it('should not render overlay when withOverlay is set to false', () => { + wrapper.setProps({ withOverlay: false }); + const overlay = wrapper.find('.bx--loading-overlay'); + expect(overlay.length).toEqual(0); }); }); });