Skip to content

Commit

Permalink
feat(queries): Expose "props" to the query functions.
Browse files Browse the repository at this point in the history
The additional props being provided to the wrapped component are now exposed to the query functions as a secondary parameter.
  • Loading branch information
ctrlplusb committed Sep 1, 2016
1 parent f29398a commit 538b46b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 11 deletions.
20 changes: 12 additions & 8 deletions src/ComponentQueries.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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
)
, {});
Expand Down
26 changes: 23 additions & 3 deletions test/ComponentQueries.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit 538b46b

Please sign in to comment.