#39 / Custom name for load function in props (#40)

Fabien JUIF · web-flow · commit 95a3ff34b78c · 2017-01-31T18:24:32.000+01:00
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ 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 `LoadingIndicator` component isn't displayed.
 
-### Load as a parameter
+### Load as a function parameter
 ```es6
 import loader from 'hoc-react-loader'
 
@@ -54,5 +54,17 @@ In this case, the loader calls `this.props.load` if it exists *AND* the `load` p
 
 The default `wait` parameter value is `false`. It means that in this example the `LoadingIndicator` isn't displayed.
 
+### Load as a string parameter
+```es6
+import loader from 'hoc-react-loader'
+
+const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div>
+
+export default loader(Component, { load: 'myLoader' })
+```
+In this case, the loader calls `this.props.myLoader` if it exists.
+
+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.
diff --git a/build/core.js b/build/core.js
@@ -14,31 +14,45 @@ var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var getTypeOf = function getTypeOf(something) {
+  var getType = {};
+  return something && getType.toString.call(something);
+};
+
 // http://stackoverflow.com/a/7356528
 var isFunction = function isFunction(functionToCheck) {
-  var getType = {};
-  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+  var type = getTypeOf(functionToCheck);
+  return type && type === '[object Function]';
+};
+
+var isString = function isString(stringToCheck) {
+  var type = getTypeOf(stringToCheck);
+  return type && type === '[object String]';
 };
+
 var getDisplayName = function getDisplayName(c) {
   return c.displayName || c.name || 'Component';
 };
 
 exports.default = function (ComposedComponent) {
   var _class, _temp2;
 
-  var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      LoadingIndicator = _ref.LoadingIndicator,
+      _ref$wait = _ref.wait,
+      wait = _ref$wait === undefined ? ['loaded'] : _ref$wait,
+      _ref$load = _ref.load,
+      load = _ref$load === undefined ? undefined : _ref$load;
 
-  var LoadingIndicator = _ref.LoadingIndicator;
-  var _ref$wait = _ref.wait;
-  var wait = _ref$wait === undefined ? ['loaded'] : _ref$wait;
-  var _ref$load = _ref.load;
-  var load = _ref$load === undefined ? undefined : _ref$load;
+  var loadFunctionName = isString(load) ? load : 'load';
 
   return _temp2 = _class = function (_Component) {
     _inherits(_class, _Component);
@@ -75,13 +89,11 @@ exports.default = function (ComposedComponent) {
         // Anything else
         return !wait;
       }, _this.omitLoadInProps = function (props) {
-        var isLoadAFunction = isFunction(props.load);
+        var isLoadAFunction = isFunction(props[loadFunctionName]);
 
         if (isLoadAFunction) {
           _this.setState({
-            props: _extends({}, props, {
-              load: undefined
-            })
+            props: _extends({}, props, _defineProperty({}, loadFunctionName, undefined))
           });
         } else {
           _this.setState({ props: props });
@@ -96,15 +108,15 @@ exports.default = function (ComposedComponent) {
     _createClass(_class, [{
       key: 'componentWillMount',
       value: function componentWillMount() {
-        // Load from props
-        if (this.omitLoadInProps(this.props)) {
-          this.props.load();
-        }
-
         // Load from hoc argument
         if (isFunction(load)) {
           load();
         }
+
+        // Load from props
+        if (this.omitLoadInProps(this.props)) {
+          this.props[loadFunctionName]();
+        }
       }
     }, {
       key: 'render',
diff --git a/build/index.js b/build/index.js
@@ -19,12 +19,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 exports.default = function (ComposedComponent) {
-  var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  var _ref$LoadingIndicator = _ref.LoadingIndicator;
-  var LoadingIndicator = _ref$LoadingIndicator === undefined ? _TailSpin2.default : _ref$LoadingIndicator;
-
-  var rest = _objectWithoutProperties(_ref, ['LoadingIndicator']);
+  var _ref$LoadingIndicator = _ref.LoadingIndicator,
+      LoadingIndicator = _ref$LoadingIndicator === undefined ? _TailSpin2.default : _ref$LoadingIndicator,
+      rest = _objectWithoutProperties(_ref, ['LoadingIndicator']);
 
   return (0, _core2.default)(ComposedComponent, _extends({}, rest, { LoadingIndicator: LoadingIndicator }));
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hoc-react-loader",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Higher order component to call a load function from props at mount.",
   "main": "build/index.js",
   "peerDependencies": {
@@ -50,7 +50,8 @@
   },
   "author": "Fabien JUIF <fabien.juif@zenika.com>",
   "contributors": [
-    "Yvonnick FRIN <yvonnick.frin@zenika.com>"
+    "Yvonnick FRIN <yvonnick.frin@zenika.com>",
+    "Benjamin CAVY <benjamin.cavy@gmail.com>"
   ],
   "license": "MIT",
   "keywords": [
diff --git a/src/core.jsx b/src/core.jsx
@@ -1,10 +1,21 @@
 import React, { Component, PropTypes } from 'react'
 
+const getTypeOf = (something) => {
+  const getType = {}
+  return something && getType.toString.call(something)
+}
+
 // http://stackoverflow.com/a/7356528
 const isFunction = (functionToCheck) => {
-  const getType = {}
-  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'
+  const type = getTypeOf(functionToCheck)
+  return type && type === '[object Function]'
 }
+
+const isString = (stringToCheck) => {
+  const type = getTypeOf(stringToCheck)
+  return type && type === '[object String]'
+}
+
 const getDisplayName = (c) => c.displayName || c.name || 'Component'
 
 export default (
@@ -15,6 +26,8 @@ export default (
     load = undefined,
   } = {},
 ) => {
+  const loadFunctionName = isString(load) ? load : 'load'
+
   return class extends Component {
     static displayName = `Loader(${getDisplayName(ComposedComponent)})`
     static propTypes = {
@@ -44,13 +57,13 @@ export default (
     }
 
     omitLoadInProps = (props) => {
-      const isLoadAFunction = isFunction(props.load)
+      const isLoadAFunction = isFunction(props[loadFunctionName])
 
       if (isLoadAFunction) {
         this.setState({
           props: {
             ...props,
-            load: undefined,
+            [loadFunctionName]: undefined,
           },
         })
       } else {
@@ -61,15 +74,15 @@ export default (
     }
 
     componentWillMount() {
-      // Load from props
-      if (this.omitLoadInProps(this.props)) {
-        this.props.load()
-      }
-
       // Load from hoc argument
       if (isFunction(load)) {
         load()
       }
+
+      // Load from props
+      if (this.omitLoadInProps(this.props)) {
+        this.props[loadFunctionName]()
+      }
     }
 
     componentWillReceiveProps = (nextProps) => {
diff --git a/src/index.spec.js b/src/index.spec.js
@@ -162,6 +162,20 @@ describe('react-loader', () => {
     loaded.find(TailSpin).node.should.exists
   })
 
+  it('should call matching props if the load parameter is a string', () => {
+    // Mount
+    const loadProp = spy(() => {})
+    const loadPropName = 'customLoadFunction'
+    const loaded = getWrapped({ load: loadPropName }, { [loadPropName]: loadProp })
+
+    // Load function is called
+    // Graphic component isn't called
+    // Loader should be Dots
+    loadProp.should.have.been.called.once
+    expect(loaded.find(Component).node).to.be.undefined
+    loaded.find(TailSpin).node.should.exists
+  })
+
   it('should handle a `null` `load` props/parameter', () => {
     // Mount
     const loaded = getWrapped()
diff --git a/yarn.lock b/yarn.lock
