feat(loader): add ability to specify custom loading content

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": ["es2015-loose", "stage-0", "react"],
+  "plugins": ["transform-runtime", "transform-proto-to-assign", "transform-class-properties"],
   "env": {
     "test": {
       "plugins": [

__test__/BlockUi.spec.js

@@ -108,10 +108,30 @@ describe('BlockUi', function() {
       expect(message.hasClass('av-block-ui-message')).to.be.true;
     });
 
-    it('should append "Loader"', () => {
-      const message = shallow(<BlockUi blocking>Yo!</BlockUi>).childAt(1).childAt(1).childAt(0).childAt(0);
+    describe('the loader', () => {
+      it('should append the Loader', () => {
+        const message = shallow(<BlockUi blocking>Yo!</BlockUi>).childAt(1).childAt(1).childAt(0).childAt(0);
 
-      expect(message.type()).to.equal(Loader);
+        expect(message.type()).to.equal(Loader);
+      });
+
+      it('should append a custom Loader (element) if provided', () => {
+        const message = shallow(<BlockUi blocking loader={<span/>}>Yo!</BlockUi>).childAt(1).childAt(1).childAt(0).childAt(0);
+
+        expect(message.type()).to.equal('span');
+      });
+
+      it('should append a custom Loader (string) if provided', () => {
+        const message = shallow(<BlockUi blocking loader="span">Yo!</BlockUi>).childAt(1).childAt(1).childAt(0).childAt(0);
+
+        expect(message.type()).to.equal('span');
+      });
+
+      it('should append a custom Loader (component) if provided', () => {
+        const message = shallow(<BlockUi blocking loader={Loader}>Yo!</BlockUi>).childAt(1).childAt(1).childAt(0).childAt(0);
+
+        expect(message.type()).to.equal(Loader);
+      });
     });
 
     describe('renderChildren is false', () => {

docs/lib/Components/BlockUiPage.js

@@ -5,6 +5,8 @@ import Helmet from 'react-helmet';
 
 import BlockUiExample from '../examples/BlockUi';
 const BlockUiExampleSource = require('!!raw!../examples/BlockUi.js');
+import BlockUiCustomLoaderExample from '../examples/BlockUiCustomLoader';
+const BlockUiCustomLoaderExampleSource = require('!!raw!../examples/BlockUiCustomLoader.js');
 import BlockUiNoChildrenExample from '../examples/BlockUiNoChildren';
 const BlockUiNoChildrenExampleSource = require('!!raw!../examples/BlockUiNoChildren.js');
 
@@ -28,6 +30,23 @@ export default class BlockUiPage extends React.Component {
           </PrismCode>
         </pre>
 
+        <h3>Using external/custom loader</h3>
+        <p>
+          You do not have to use the default loader that comes with this library, you can pass anything you want. Pass JSX
+          to render or a component to the <code>loader</code> prop to use it. In the exmaple below, we are using the fancy
+          {' '}<a href="https://github.com/ConnorAtherton/loaders.css">Loaders.css</a> via the convenient{' '}
+          <a href="https://github.com/jonjaques/react-loaders">react-loaders</a> library. Use the select input to change
+          the loader you see.
+        </p>
+        <div className="docs-example">
+          <BlockUiCustomLoaderExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {BlockUiCustomLoaderExampleSource}
+          </PrismCode>
+        </pre>
+
         <h3>Do not render children while blocking</h3>
         <p>
           Setting the <code>renderChildren</code> prop to <code>false</code> will prevent the children from rendering while

docs/lib/Components/index.js

@@ -39,7 +39,7 @@ class Components extends React.Component {
       <Container fluid className="content">
         <Row>
           <Col md={{ size: 3, push: 9 }}>
-            <div className="docs-sidebar m-b-3">
+            <div className="docs-sidebar mb-3">
               <h5>Components</h5>
               <Nav>
                 {this.state.navItems.map((item, i) => {

docs/lib/Home/index.js

@@ -9,7 +9,7 @@ const importBasic = require('!!raw!../examples/import-basic.js');
 export default () => {
   return (
     <div>
-      <section className="jumbotron text-xs-center m-b-3">
+      <section className="jumbotron text-xs-center mb-3">
         <Container fluid>
           <Row>
             <Col>
@@ -54,7 +54,7 @@ export default () => {
               </PrismCode>
             </pre>
             <p>Check out the demo <a href="http://output.jsbin.com/dimive/latest">here</a></p>*/}
-            <h2 className="m-t-3">About the Project</h2>
+            <h2 className="mt-3">About the Project</h2>
             <hr/>
             <p>This library contains easy to use components to prevent the user from interacting with the user interface based on some conditions.</p>
             <p>There is also a separate component which works with redux to help block and unblock automatically based on redux action types. See the <Link to="/components/ReduxBlockUi/">ReduxBlockUi</Link> component for more details.</p>

docs/lib/NotFound/index.js

@@ -7,7 +7,7 @@ export default () => {
   return (
     <div>
       <Helmet title="404 Page Not Found"/>
-      <section className="jumbotron text-xs-center m-b-3">
+      <section className="jumbotron text-xs-center mb-3">
         <Container fluid>
           <Row>
             <Col>
@@ -19,7 +19,7 @@ export default () => {
                 Can't find what you're looking for? <a href="https://github.com/availity/react-block-ui/issues/new">Open</a> up an issue.
               </p>
               <p>
-                <Button outline color="danger" className="m-r-1" tag={Link} to="/">Get Started</Button>
+                <Button outline color="danger" className="mr-1" tag={Link} to="/">Get Started</Button>
                 <Button color="danger" tag={Link} to="/components/">View Components</Button>
               </p>
             </Col>

docs/lib/UI/Nav.js

@@ -7,7 +7,7 @@ export default () => {
     <Navbar className="header" color="faded" light>
       <Container fluid>
         <NavbarBrand tag={Link} to="/">React Block UI</NavbarBrand>
-        <Nav className="nav navbar-nav pull-xs-right">
+        <Nav className="nav navbar-nav float-xs-right">
           <NavItem>
             <NavLink tag={Link} className="nav-link" to="/components/" activeClassName="active">Components</NavLink>
           </NavItem>

docs/lib/examples/BlockUi.js

@@ -24,7 +24,7 @@ export default class Example extends React.Component {
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </BlockUi>
-        <Button onClick={this.toggleBlocking}>Toggle Block</Button>
+        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
       </div>
     );
   }

docs/lib/examples/BlockUiCustomLoader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, Col, Input, Row } from 'reactstrap';
+import BlockUi from 'react-block-ui';
+import { Loader, Types } from 'react-loaders';
+import 'react-block-ui/style.css';
+import 'loaders.css/loaders.min.css';
+
+export default class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggleBlocking = this.toggleBlocking.bind(this);
+    this.setLoaderType = this.setLoaderType.bind(this);
+    this.state = {
+      blocking: false,
+      loaderType: 'ball-triangle-path',
+    };
+  }
+
+  toggleBlocking() {
+    this.setState({blocking: !this.state.blocking});
+  }
+
+  setLoaderType(e) {
+    this.setState({loaderType: e.target.value});
+  }
+
+  render() {
+    return (
+      <div>
+        <BlockUi tag="div" blocking={this.state.blocking} loader={<Loader active type={this.state.loaderType} color="#02a17c"/>}>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </BlockUi>
+        <Row>
+          <Col xs={12} sm={6}>
+            <Input type="select" onChange={this.setLoaderType}>
+              {Object.keys(Types).map(type =>
+                <option key={type} value={type}>{type}</option>
+              )}
+            </Input>
+          </Col>
+          <Col xs={12} sm={3}>
+            <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}

docs/lib/examples/BlockUiNoChildren.js

@@ -24,7 +24,7 @@ export default class Example extends React.Component {
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </BlockUi>
-        <Button onClick={this.toggleBlocking}>Toggle Block</Button>
+        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
       </div>
     );
   }

docs/lib/examples/Loader.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from 'reactstrap';
 import { Loader } from 'react-block-ui';
 import 'react-block-ui/style.css';
 

docs/lib/examples/ReduxBlockUi.js

@@ -28,10 +28,10 @@ class Example extends React.Component {
         </ReduxBlockUi>
 
         {/* the rest is for the demo, to allow you to trigger redux actions and see the actions, this would usually be done by some API calls or something */}
-        <Button onClick={this.props.requestStart}>Request Start</Button>
+        <Button color="primary" onClick={this.props.requestStart}>Request Start</Button>
         <Button color="success" onClick={this.props.requestSuccess}>Request Success</Button>
         <Button color="danger" onClick={this.props.requestFailure}>Request Failure</Button>
-        <Button outline color="secondary" onClick={this.props.otherAction}>Other Action</Button>
+        <Button outline onClick={this.props.otherAction}>Other Action</Button>
         <p>Number of pending requests: {this.state.blockers}</p>
         <div style={{maxHeight: '125px', overflow: 'auto'}}>
           {this.props.actions.map((action, i) =>

docs/lib/examples/import-basic.js

@@ -24,7 +24,7 @@ export default class Example extends React.Component {
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </BlockUi>
-        <Button onClick={this.toggleBlocking}>Toggle Block</Button>
+        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
       </div>
     );
   }

docs/lib/routes.js

@@ -12,10 +12,10 @@ const routes = (
   <Route path="/" component={ UI.Layout }>
     <IndexRoute component={ Home } />
     <Route path="/components/" component={Components}>
-      <IndexRedirect to="BlockUi/" />
-      <Route path="BlockUi/" component={ BlockUiPage } />
-      <Route path="ReduxBlockUi/" component={ ReduxBlockUiPage } />
-      <Route path="Loader/" component={ LoaderPage } />
+      <IndexRedirect to="blockui/" />
+      <Route path="blockui/" component={ BlockUiPage } />
+      <Route path="reduxblockui/" component={ ReduxBlockUiPage } />
+      <Route path="loader/" component={ LoaderPage } />
     </Route>
     <Route path="*" component={NotFound} />
   </Route>

docs/static/docs.css

@@ -21,6 +21,10 @@
     }
 }
 
+.loader-inner {
+    display: inline-block;
+}
+
 .content {
     margin-top: 2rem;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-block-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": "Evan Sharp <[email protected]>",
   "description": "Block UI for react",
   "main": "lib/index.js",
@@ -69,13 +69,16 @@
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.5",
     "babel-plugin-istanbul": "^1.1.0",
+    "babel-plugin-transform-class-properties": "^6.18.0",
+    "babel-plugin-transform-proto-to-assign": "^6.9.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-es2015-loose": "^7.0.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.11.6",
-    "bootstrap": "^4.0.0-alpha.3",
+    "bootstrap": "^4.0.0-alpha.5",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.5.0",
     "cheerio": "^0.20.0",
@@ -97,6 +100,7 @@
     "jasmine-core": "^2.4.1",
     "jsdom": "^9.4.2",
     "json-loader": "^0.5.4",
+    "loaders.css": "^0.1.2",
     "mocha": "^3.0.2",
     "mocha-webpack": "^0.6.0",
     "nyc": "^8.1.0",
@@ -107,13 +111,15 @@
     "react-addons-pure-render-mixin": "^15.3.1",
     "react-addons-test-utils": "^15.3.1",
     "react-addons-transition-group": "^15.3.1",
+    "react-addons-css-transition-group": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-helmet": "^3.0.1",
     "react-highlight": "^0.8.0",
+    "react-loaders": "^2.3.0",
     "react-prism": "3.2.1",
     "react-redux": "^4.4.5",
     "react-router": "^2.0.1",
-    "reactstrap": "^2.6.0",
+    "reactstrap": "^3.9.0",
     "redux": "^3.5.2",
     "rimraf": "^2.5.4",
     "sinon": "^1.17.5",

src/BlockUi.js

@@ -1,13 +1,18 @@
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
-import Loader from './Loader';
+import DefaultLoader from './Loader';
 
 class BlockUi extends Component {
   static propTypes = {
     blocking: PropTypes.bool,
     children: PropTypes.node,
     renderChildren: PropTypes.bool,
     className: PropTypes.string,
+    loader: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+      PropTypes.node,
+    ]),
     tag: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.func,
@@ -17,6 +22,7 @@ class BlockUi extends Component {
   static defaultProps = {
     tag: 'div',
     renderChildren: true,
+    loader: DefaultLoader,
   };
 
   render () {
@@ -25,6 +31,7 @@ class BlockUi extends Component {
       blocking,
       className,
       children,
+      loader: Loader,
       renderChildren,
       ...attributes
     } = this.props;
@@ -34,15 +41,14 @@ class BlockUi extends Component {
         'av-block-ui',
         className
       );
-
       return (
         <Tag {...attributes} className={classes}>
           {renderChildren && children}
           <div className="av-block-ui-container">
             <div className="av-block-ui-overlay"></div>
             <div className="av-block-ui-message-container">
               <div className="av-block-ui-message">
-                <Loader />
+                {React.isValidElement(Loader) ? Loader : <Loader />}
               </div>
             </div>
           </div>