Feat #20 #21 / Fix #30 #31 / Documentations, public API modification …

…and fixes

README.md

@@ -22,14 +22,14 @@ In this case, the loader waits for `this.props.data` to be truthy, then mounts i
 
 The `wait` parameter should be an array of props to waits. All these props should become truthy at some point.
 
-Since the `Loader` is not specified, the default `Loader` is displayed while waiting for all the props. Here's an exemple with a specified loader:
+Since the `LoadingIndicator` is not specified, the default `LoadingIndicator` is displayed while waiting for all the props. Here's an exemple with a specified loader:
 ```es6
 import loader from 'hoc-react-loader'
 
-const MyLoader = () => <div>Waiting...</div>
+const MyLoadingIndicator = () => <div>Waiting...</div>
 const Component = ({ data }) => <div>Component {data}</div>
 
-export default loader(Component, { wait: ['data'], Loader: MyLoader })
+export default loader(Component, { wait: ['data'], LoadingIndicator: MyLoadingIndicator })
 ```
 
 ### Don't wait
@@ -40,7 +40,7 @@ const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div>
 
 export default loader(Component, { wait: false })
 ```
-In this example, the loader component doesn't wait for props. `this.props.load` is called once, but the `Loader` component isn't displayed.
+In this example, the loader component doesn't wait for props. `this.props.load` is called once, but the `LoadingIndicator` component isn't displayed.
 
 ### Load as a parameter
 ```es6
@@ -52,7 +52,7 @@ export default loader(Component, { load: () => console.log('here') })
 ```
 In this case, the loader calls `this.props.load` if it exists *AND* the `load` parameter, resulting in `here` to be printed.
 
-The default `wait` parameter value is `false`. It means that in this example the `Loader` isn't displayed.
+The default `wait` parameter value is `false`. It means that in this example the `LoadingIndicator` isn't displayed.
 
 ### Wait as a function
 The `wait` parameter can also be a function. Then the `context` and `props` are given to it, and it should return the array of props to wait for.

build/TailSpin/TailSpin.js

@@ -41,18 +41,19 @@ var TailSpin = function (_Component) {
 
     _this.setColor = function () {
       var parent = _this.svg.parentNode;
-      var parentColor = parent ? getBackgroundColor(parent) : '';
+      var parentColor = parent ? getBackgroundColor(parent) : undefined;
 
-      while (parent && parentColor && parentColor === '') {
+      while (parent && !parentColor) {
         parent = parent.parentNode;
-        parentColor = getBackgroundColor(parent);
+        if (parent) parentColor = getBackgroundColor(parent);
       }
 
-      if (parentColor && parentColor !== '') {
-        var color = (0, _tinycolor2.default)(parentColor).saturate(20).toHexString();
+      if (parentColor) {
+        var tinyC = (0, _tinycolor2.default)(parentColor);
+        var color = tinyC.isDark() ? tinyC.lighten(20) : tinyC.darken(20);
 
         _this.setState({
-          color: color
+          color: color.toHexString()
         });
       }
     };

build/core.js

@@ -34,7 +34,7 @@ exports.default = function (ComposedComponent) {
 
   var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 
-  var Loader = _ref.Loader;
+  var LoadingIndicator = _ref.LoadingIndicator;
   var _ref$wait = _ref.wait;
   var wait = _ref$wait === undefined ? ['loaded'] : _ref$wait;
   var _ref$load = _ref.load;
@@ -73,7 +73,7 @@ exports.default = function (ComposedComponent) {
         }
 
         // Anything else
-        return Boolean(wait);
+        return !wait;
       }, _this.omitLoadInProps = function (props) {
         var isLoadAFunction = isFunction(props.load);
 
@@ -110,7 +110,7 @@ exports.default = function (ComposedComponent) {
       key: 'render',
       value: function render() {
         if (!this.isLoaded()) {
-          return _react2.default.createElement(Loader, this.state.props);
+          return _react2.default.createElement(LoadingIndicator, this.state.props);
         }
 
         return _react2.default.createElement(ComposedComponent, this.state.props);

build/index.js

@@ -21,10 +21,10 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 exports.default = function (ComposedComponent) {
   var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 
-  var _ref$Loader = _ref.Loader;
-  var Loader = _ref$Loader === undefined ? _TailSpin2.default : _ref$Loader;
+  var _ref$LoadingIndicator = _ref.LoadingIndicator;
+  var LoadingIndicator = _ref$LoadingIndicator === undefined ? _TailSpin2.default : _ref$LoadingIndicator;
 
-  var rest = _objectWithoutProperties(_ref, ['Loader']);
+  var rest = _objectWithoutProperties(_ref, ['LoadingIndicator']);
 
-  return (0, _core2.default)(ComposedComponent, _extends({}, rest, { Loader: Loader }));
+  return (0, _core2.default)(ComposedComponent, _extends({}, rest, { LoadingIndicator: LoadingIndicator }));
 };

examples/.sass-lint.yml

@@ -6,7 +6,7 @@ rules:
   indentation: 2
   property-sort-order: 2
   variable-for-property: 2
-  no-color-literals: 2
+  no-color-literals: 0
   clean-import-paths: 2
   hex-length: 2
   force-pseudo-nesting: 2

examples/src/components/App.jsx

@@ -30,14 +30,15 @@ const App = () => (
     </div>
 
     <p className={styles.description}>
-      {'hoc-react-loader is an higher order component calling a function'}
-      {'when a watched prop value is not defined, false or null.'}
-      {'It shows a loading component when it\'s waiting for the props to be defined. '}
-      {'This loading component can be changed easely.'}
+      This is a higher order component ("HOC").
+      Its purpose is to call a <pre>load</pre> callback passed through the <pre>props</pre> of
+      a component only once (at <pre>componentWillMount</pre>). This is convenient to load
+      data from a backend for instance. The component shows a loading indicator when it's
+      waiting for the props to be defined. The loading indicator can be changed easily.
     </p>
 
     <p className={styles.description}>
-      {'Check out the examples below. Use the button to trigger stubed load.'}
+      Check out the examples below. Use the button to trigger a stubbed loading.
     </p>
 
     <Examples className={styles.app} />

examples/src/components/App.scss

@@ -14,6 +14,10 @@
   .description {
     margin-bottom: 30px;
     width: 50%;
+
+    > pre {
+      display: inline;
+    }
   }
 
   .github {

examples/src/components/Code/Code.scss

@@ -1,8 +1,6 @@
-@import '~styles/colors';
-
 .code {
   align-items: center;
-  background-color: darken($primary, 10);
+  background-color: #d1d1d1;
   display: flex;
   font-size: 80%;
   padding: 20px 10px;

examples/src/components/Example/Button/Button.jsx

@@ -3,9 +3,9 @@ import Ink from 'react-ink'
 
 import styles from './Button.scss'
 
-const Button = ({ style, className, onClick, loaded }) => (
+const Button = ({ style, className, onClick, loaded, text }) => (
   <button style={style} onClick={onClick} className={`${styles.button} ${className}`}>
-    {loaded ? 'Unload' : 'Load'} data !
+    {loaded ? 'Unload' : 'Load'} {text} !
     <Ink />
   </button>
 )
@@ -15,6 +15,7 @@ Button.propTypes = {
   className: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   loaded: PropTypes.bool.isRequired,
+  text: PropTypes.string.isRequired,
 }
 
 export default Button

examples/src/components/Example/Button/Button.scss

@@ -1,11 +1,10 @@
-@import '~styles/colors';
-
 .button {
-  background-color: darken($primary, 20);
+  background-color: #9577ba;
   border: 0;
   box-shadow: none;
-  color: lighten($secondary, 20);
+  color: darken(#fff, 10);
   cursor: pointer;
+  flex: 1;
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 1.2em;
   height: 50px;
@@ -15,6 +14,6 @@
   text-transform: uppercase;
 
   &:hover {
-    background-color: darken($primary, 22);
+    background-color: darken(#9577ba, 10);
   }
 }

examples/src/components/Example/Example.jsx

@@ -19,24 +19,63 @@ class Example extends Component {
     }
   }
 
-  onClick = () => {
+  onLoad = () => {
     this.setState({
       loaded: !this.state.loaded,
     })
   }
 
+  onProp = () => {
+    let { prop } = this.state
+    prop = prop ? undefined : 'Yeah it works !'
+    this.setState({
+      prop,
+    })
+  }
+
+  onProp2 = () => {
+    let { prop2 } = this.state
+    prop2 = prop2 ? undefined : 'Hello there :)'
+    this.setState({
+      prop2,
+    })
+  }
+
   render() {
-    const { style, className, code, children, link } = this.props
+    const { style, className, code, children, example, link, buttons = {} } = this.props
+    const { loaded, prop, prop2 } = this.state
 
     return (
-      <div style={style} className={`${styles.sample} ${className}`}>
-        {React.cloneElement(children, { loaded: this.state.loaded, className: styles.result })}
-        <a href={`${BASE_URL}${link}`}>
-          <Code className={styles.code}>{code}</Code>
-          <Ink />
-        </a>
-        <Button onClick={this.onClick} loaded={this.state.loaded} />
+      <div>
+        {children}
+        <div style={style} className={`${styles.sample} ${className}`}>
+          <a href={`${BASE_URL}${link}.jsx`}>
+            <Code className={styles.code}>{code}</Code>
+            <Ink />
+          </a>
+          {React.cloneElement(example, { ...this.state, className: styles.result })}
+          <div className={styles.debug}>
+            <h2>Props values</h2>
+            <pre className={styles.props}>
+              {buttons['0'] && `loaded: ${loaded ? 'true' : 'false'}\n`}
+              {buttons['1'] && `prop: ${prop || 'undefined'}\n`}
+              {buttons['2'] && `prop2: ${prop2 || 'undefined'}\n`}
+            </pre>
+          </div>
+          <div className={styles.buttons}>
+            {buttons['0'] &&
+              <Button onClick={this.onLoad} loaded={this.state.loaded} text="data" />
+            }
+            {buttons['1'] &&
+              <Button onClick={this.onProp} loaded={this.state.prop} text="prop" />
+            }
+            {buttons['2'] &&
+              <Button onClick={this.onProp2} loaded={this.state.prop2} text="prop2" />
+            }
+          </div>
+        </div>
       </div>
+
     )
   }
 }
@@ -45,8 +84,10 @@ Example.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   code: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
   link: PropTypes.string.isRequired,
+  buttons: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  example: PropTypes.node,
 }
 
 export default Example

examples/src/components/Example/Example.scss

@@ -1,26 +1,46 @@
-@import '~styles/colors';
-
 .sample {
-  background-color: $primary;
-  box-shadow: 0 2px 5px 0 $shadow-start, 0 2px 10px 0 $shadow-end;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
 
-
-  &:hover {
-    box-shadow: 0 4px 10px 0 $shadow-start, 0 4px 20px 0 $shadow-end;
-  }
-
   .render {
     display: flex;
   }
 
   .result {
+    align-items: center;
+    display: flex;
     height: 100px;
+    justify-content: center;
     margin: 10px 0;
     min-width: 900px;
   }
 
+  .buttons {
+    display: flex;
+
+    div {
+      flex: 1;
+    }
+  }
+
+  .debug {
+    background-color: #282828;
+    color: #fff;
+    padding-left: 10px;
+
+    .props {
+      font-size: 80%;
+      padding-bottom: 10px;
+      padding-left: 10px;
+    }
+
+    h2 {
+      font-size: 90%;
+      margin-bottom: 5px;
+    }
+  }
+
   a {
     flex: 1;
     position: relative;

examples/src/components/Examples/Base/index.jsx → examples/src/components/Examples/Base.jsx

@@ -1,10 +1,8 @@
 import React, { PropTypes } from 'react'
 import loader from 'hoc-react-loader'
 
-import styles from './Base.scss'
-
 const Base = ({ className = '' }) => (
-  <div className={`${styles.base} ${className}`}>Loaded ! </div>
+  <div className={className}>Loaded ! </div>
 )
 
 Base.propTypes = {

examples/src/components/Examples/DontWait.jsx

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react'
+import loader from 'hoc-react-loader'
+
+const DontWait = ({ className = '' }) => {
+  return (
+    <div className={className}>
+      Loaded without waiting!
+    </div>
+  )
+}
+
+DontWait.propTypes = {
+  className: PropTypes.string,
+  prop: PropTypes.string.isRequired,
+}
+
+export default loader(DontWait, { wait: false })