feat(queries): Expose "props" to the query functions.

The additional props being provided to the wrapped component are now exposed to the query functions as a secondary parameter.

Author: ctrlplusb

src/ComponentQueries.js

@@ -100,15 +100,16 @@ function componentQueries(...params) {
       }
 
       componentWillMount() {
-        this.runQueries(this.props.size);
+        const { size, ...otherProps } = this.props;
+        this.runQueries(size, otherProps);
       }
 
       componentWillReceiveProps(nextProps) {
         const { size } = this.props;
-        const { size: nextSize } = nextProps;
+        const { size: nextSize, ...nextOtherProps } = nextProps;
 
         if (!shallowEqual(size, nextSize)) {
-          this.runQueries(nextSize);
+          this.runQueries(nextSize, nextOtherProps);
         }
       }
 
@@ -127,14 +128,17 @@ function componentQueries(...params) {
           || !shallowEqual(this.state.queryResult, nextState.queryResult);
       }
 
-      runQueries({ width, height }) {
+      runQueries({ width, height }, otherProps) {
         const queryResult = queries.reduce((acc, cur) =>
           mergeWith(
             acc,
-            cur({
-              width: sizeMeConfig.monitorWidth ? width : null,
-              height: sizeMeConfig.monitorHeight ? height : null,
-            }),
+            cur(
+              {
+                width: sizeMeConfig.monitorWidth ? width : null,
+                height: sizeMeConfig.monitorHeight ? height : null,
+              },
+              otherProps
+            ),
             mergeWithCustomizer
           )
         , {});

test/ComponentQueries.test.js

@@ -207,15 +207,35 @@ describeWithDOM('Given the ComponentQueries library', () => {
       const renderSpy = sinonSandbox.spy(instance, 'render');
       expect(renderSpy.callCount).equals(0);
 
-      // Change the width so that the queries produce a new result.
+      // Set the props causes a rerender.
       mounted.setProps({ size: { width: 150 }, foo: 'bar' });
       expect(renderSpy.callCount).equals(1);
 
-      // Change the width so that the queries produce the same result.
-      mounted.setProps({ size: { width: 120 }, foo: 'bar' });
+      // Set the same props causes a rerender.
+      mounted.setProps({ size: { width: 150 }, foo: 'bar' });
       expect(renderSpy.callCount).equals(2);
     });
 
+    it('Then it should pass the "other" props to the queries', () => {
+      let actualProps;
+
+      const ComponentQueriedComponent = componentQueries(
+        (_, props) => { actualProps = props; return {}; }
+      )(() => <div />);
+
+      // Initial mount should call queries.
+      const expectedMountProps = { foo: 'bar', baz: 1 };
+      const mounted = mount(
+        <ComponentQueriedComponent size={{ width: 50 }} {...expectedMountProps} />
+      );
+      expect(actualProps).eql(expectedMountProps);
+
+      // Update should call queries with updated props.
+      const expectedUpdateProps = { foo: 'bob', baz: 2 };
+      mounted.setProps(Object.assign({}, { size: { width: 100 } }, expectedUpdateProps));
+      expect(actualProps).eql(expectedUpdateProps);
+    });
+
     it('Then height should be undefined if we are not monitoring height', () => {
       let actualHeight;