Merge branch 'master' of github.com:beanloop/react-with-spinner

Author: drager

package.json

@@ -28,7 +28,6 @@
     "ramda": "^0.23.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-toolbox": "^1.3.4",
     "recompose": "^0.22.0"
   }
 }

src/__snapshots__/index.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`withSpinner should render passed spinnerComponent 1`] = `
 `;
 
 exports[`withSpinner should render spinner if loading is true 1`] = `
-<ToolboxSpinner
+<Loading
   data={
     Object {
       "loading": true,

src/index.test.tsx

@@ -4,17 +4,17 @@ import './test-setup'
 import {mount, shallow} from 'enzyme'
 import toJson from 'enzyme-to-json'
 import * as React from 'react'
-import ProgressBar from 'react-toolbox/lib/progress_bar'
 import compose from 'recompose/compose'
 import {withSpinner} from './index'
 
+const Loading = () => <span>Loading...</span>
 jest.useFakeTimers()
 
 describe('withSpinner', () => {
   it('should render spinner if loading is true', () => {
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: true}} />,
-      withSpinner(),
+      withSpinner({spinnerComponent: Loading}),
     )(() => <div></div>)
 
     const wrapper = shallow(<Component />).first().shallow()
@@ -31,7 +31,7 @@ describe('withSpinner', () => {
   it('should not render spinner if loading is false', () => {
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: false}} />,
-      withSpinner(),
+      withSpinner({spinnerComponent: Loading}),
     )(({data}) => <div>loading: {data.loading.toString()}</div>)
 
     const wrapper = shallow(<Component />).first().shallow().first().shallow()
@@ -58,7 +58,7 @@ describe('withSpinner', () => {
           return <WrappedComponent {...this.props} data={{loading: this.state.loading, item: this.state.item}} />
         }
       },
-      withSpinner(),
+      withSpinner({spinnerComponent: Loading}),
     )(DisplayComponent)
 
     const wrapper = mount(<Component />)
@@ -69,14 +69,14 @@ describe('withSpinner', () => {
     // Run timer to 100 ms since withSpinner timeout defaults to 100 ms
     jest.runTimersToTime(100)
     // ProgressBar should now be found
-    expect(wrapper.find(ProgressBar)).toHaveLength(1)
+    expect(wrapper.find(Loading)).toHaveLength(1)
     expect(wrapper.find(DisplayComponent)).toHaveLength(0)
 
     // Run timer to 1000 ms for our own timeout
     jest.runTimersToTime(1000)
     // DisplayComponent should be found
     expect(wrapper.find(DisplayComponent)).toHaveLength(1)
-    expect(wrapper.find(ProgressBar)).toHaveLength(0)
+    expect(wrapper.find(Loading)).toHaveLength(0)
 
     expect(toJson(wrapper)).toMatchSnapshot()
   })
@@ -101,7 +101,7 @@ describe('withSpinner', () => {
 
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: false, error: true}} />,
-      withSpinner({handleError: false}),
+      withSpinner({spinnerComponent: Loading, handleError: false}),
     )(DisplayComponent)
 
     const wrapper = shallow(<Component />).first().shallow()
@@ -115,7 +115,7 @@ describe('withSpinner', () => {
 
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: false, error: true}} />,
-      withSpinner({errorComponent: ErrorComponent}),
+      withSpinner({spinnerComponent: Loading, errorComponent: ErrorComponent}),
     )(null)
 
     const wrapper = shallow(<Component />).first().shallow()
@@ -130,7 +130,7 @@ describe('withSpinner', () => {
 
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: true}} />,
-      withSpinner({timeout: 500}),
+      withSpinner({spinnerComponent: Loading, timeout: 500}),
     )(DisplayComponent)
 
     const wrapper = shallow(<Component />).first().shallow()
@@ -141,7 +141,7 @@ describe('withSpinner', () => {
 
     // Run timer over our timeout
     jest.runTimersToTime(600)
-    expect(wrapper.first().shallow().type()).toBe(ProgressBar)
+    expect(wrapper.first().shallow().node).toEqual(Loading())
   })
 
   it('should not render errorComponent if skipErrors returns true', () => {
@@ -153,7 +153,7 @@ describe('withSpinner', () => {
 
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: false, error: validationError}} />,
-      withSpinner(({
+      withSpinner(({spinnerComponent: Loading,
         errorComponent: ErrorComponent,
         skipErrors: data => data.error.validationError && data.error.validationError.field === 'password'
       })),
@@ -184,7 +184,7 @@ describe('withSpinner', () => {
           return <WrappedComponent {...this.props} result={{loading: this.state.loading, item: this.state.item}} />
         }
       },
-      withSpinner({prop: 'result'}),
+      withSpinner({spinnerComponent: Loading, prop: 'result'}),
     )(DisplayComponent)
 
     const wrapper = mount(<Component />)
@@ -195,14 +195,14 @@ describe('withSpinner', () => {
     // Run timer to 100 ms since withSpinner timeout defaults to 100 ms
     jest.runTimersToTime(100)
     // ProgressBar should now be found
-    expect(wrapper.find(ProgressBar)).toHaveLength(1)
+    expect(wrapper.find(Loading)).toHaveLength(1)
     expect(wrapper.find(DisplayComponent)).toHaveLength(0)
 
     // Run timer to 1000 ms for our own timeout
     jest.runTimersToTime(1000)
     // DisplayComponent should be found
     expect(wrapper.find(DisplayComponent)).toHaveLength(1)
-    expect(wrapper.find(ProgressBar)).toHaveLength(0)
+    expect(wrapper.find(Loading)).toHaveLength(0)
   })
 
   it('should support custom nested loading property', () => {
@@ -224,7 +224,7 @@ describe('withSpinner', () => {
           return <WrappedComponent {...this.props} result={{nested: {loading: this.state.loading, item: this.state.item}}} />
         }
       },
-      withSpinner({prop: ['result', 'nested']}),
+      withSpinner({spinnerComponent: Loading, prop: ['result', 'nested']}),
       // withSpinner(),
     )(DisplayComponent)
 
@@ -236,14 +236,14 @@ describe('withSpinner', () => {
     // Run timer to 100 ms since withSpinner timeout defaults to 100 ms
     jest.runTimersToTime(100)
     // ProgressBar should now be found
-    expect(wrapper.find(ProgressBar)).toHaveLength(1)
+    expect(wrapper.find(Loading)).toHaveLength(1)
     expect(wrapper.find(DisplayComponent)).toHaveLength(0)
 
     // Run timer to 1000 ms for our own timeout
     jest.runTimersToTime(1000)
     // DisplayComponent should be found
     expect(wrapper.find(DisplayComponent)).toHaveLength(1)
-    expect(wrapper.find(ProgressBar)).toHaveLength(0)
+    expect(wrapper.find(Loading)).toHaveLength(0)
     expect(toJson(wrapper)).toMatchSnapshot()
   })
 
@@ -252,7 +252,7 @@ describe('withSpinner', () => {
 
     const Component = compose(
       WrappedComponent => props => <WrappedComponent {...props} data={{loading: false, value: {}}} />,
-      withSpinner({emptyComponent: EmptyComponent, prop: ['data', 'value']}),
+      withSpinner({spinnerComponent: Loading, emptyComponent: EmptyComponent, prop: ['data', 'value']}),
     )(null)
 
     const wrapper = shallow(<Component />).first().shallow()

src/index.tsx

@@ -1,11 +1,8 @@
 import path from 'ramda/src/path'
 import * as React from 'react'
 import {Component, ReactType} from 'react'
-import ProgressBar from 'react-toolbox/lib/progress_bar'
 import wrapDisplayName from 'recompose/wrapDisplayName'
 
-const ToolboxSpinner = props => <ProgressBar {...props} />
-
 export type Properties = {
   /**
    * Property to look for, if prop.loading is true then the [spinnerComponent]
@@ -38,7 +35,7 @@ export type Properties = {
    * Component that should be rendered while loading.
    * Defaults to a React Toolbox ProgressBar component.
    */
-  spinnerComponent?: ReactType
+  spinnerComponent: ReactType
   /**
    * Extra props that should be passed to the [spinnerComponent].
    */
@@ -65,9 +62,9 @@ export const withSpinner = ({
   handleError = true, partial = false,
   skipErrors, spinnerProps,
   errorComponent: ErrorComponent = null,
-  spinnerComponent: Spinner = ToolboxSpinner,
+  spinnerComponent: Spinner,
   emptyComponent: EmptyComponent = null,
-}: Properties = {}): any => WrappedComponent =>
+}: Properties): any => WrappedComponent =>
   class extends Component<Properties, {showSpinner: boolean}> {
     static displayName = wrapDisplayName(WrappedComponent, 'withSpinner')