Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic columns as a function prop #124

Merged
merged 3 commits into from
Dec 31, 2018
Merged

Dynamic columns as a function prop #124

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a47ff5
Dynamic columns as a function prop
levibuzolic Dec 30, 2018
2c613c4
Remove out-of-date package-lock.json
levibuzolic Dec 30, 2018
a37ef73
Update example
levibuzolic Dec 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ yarn add react-photo-gallery
* [Custom Dynamic Columns](https://codesandbox.io/s/ll7ym48027)
* [Selection using custom ImageComponent](https://codesandbox.io/s/o7o241q09)
* [Sortable with drag and drop](https://codesandbox.io/s/8y7n1r9y5j)
* [Dynamic Columns Function](https://codesandbox.io/s/o5mnq449)

To build some examples locally, run:

Expand Down Expand Up @@ -81,7 +82,7 @@ const PHOTO_SET = [
Property | Type | Default | Description
:-----------------------|:--------------|:--------------|:--------------------------------
photos | array | undefined | required; array of objects
columns | number | undefined | optional; number of photos per row; defaults to Gallery's breakpoint choosing
columns | number or function | undefined | optional; number of photos per row or a function which receives the container width and should return the desired number of photos per row; defaults to Gallery's breakpoint choosing
onClick | function | undefined | optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist
margin | number | 2 | optional; number of margin pixels around each entire image
direction | string | 'row' | optional; `column` or `row` based layout
Expand Down
23 changes: 17 additions & 6 deletions __test__/Gallery.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,37 +20,48 @@ describe('Gallery', () => {
wrapper = mount(
<Gallery photos={photos} onClick={handleClick}/>
);
wrapper.setState({containerWidth: '1139'})
wrapper.setState({containerWidth: 1139})
expect(wrapper).toMatchSnapshot();
});

it('renders correctly if there are more columns than photos', () => {
wrapper = mount(
<Gallery photos={photos} columns={10} onClick={handleClick}/>
);
wrapper.setState({containerWidth: '1139'})
wrapper.setState({containerWidth: 1139})
expect(wrapper).toMatchSnapshot();
});

it('renders correctly after click', () => {
wrapper = mount(
<Gallery photos={photos} onClick={handleClick} />
);
wrapper.setState({containerWidth: '1139'})
wrapper.setState({containerWidth: 1139})
wrapper.find('img').first().simulate('click');
expect(wrapper).toMatchSnapshot();
});

it('renders correctly with direction set to column', () => {
wrapper = mount(
wrapper = mount(
<Gallery photos={photos} onClick={handleClick} direction={'column'}/>
);
wrapper.setState({containerWidth: '1139'})
wrapper.setState({containerWidth: 1139})
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed these setStates were setting the width as a string, which doesn't seem correct, so i've updated them.

expect(wrapper).toMatchSnapshot();
});

it('renders correctly with a column function', () => {
const columns = jest.fn(_ => 3);
wrapper = mount(
<Gallery photos={photos} onClick={handleClick} columns={columns}/>
);
wrapper.setState({containerWidth: 1139})
expect(columns).toBeCalledWith(1139);
expect(wrapper).toMatchSnapshot();
});

it('unmounts', () => {
wrapper = mount(<Gallery photos={photos} />);
wrapper.setState({'containerWidth':500});
wrapper.setState({containerWidth: 500});
wrapper.unmount();
});
})
Loading