react-photo-gallery
Advanced tools
Comparing version 6.2.1 to 6.2.2
import React from 'react'; | ||
import Gallery from '../src/Gallery'; | ||
import photos from './test-photo-data'; | ||
import { shallow, mount, render } from 'enzyme'; | ||
import { mount } from 'enzyme'; | ||
@@ -9,37 +9,49 @@ function handleClick(){ | ||
} | ||
it('renders correctly', () => { | ||
const component = mount( | ||
<Gallery photos={photos} onClick={handleClick}/> | ||
); | ||
component.setState({containerWidth: '1139'}) | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
it('renders correctly if there are more columns than photos', () => { | ||
const component = mount( | ||
<Gallery photos={photos} columns={10} onClick={handleClick}/> | ||
); | ||
component.setState({containerWidth: '1139'}) | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
it('renders correctly after click', () => { | ||
const component = mount( | ||
<Gallery photos={photos} onClick={handleClick} /> | ||
); | ||
component.setState({containerWidth: '1139'}) | ||
component.find('img').first().simulate('click'); | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
it('renders correctly with direction set to column', () => { | ||
const component = mount( | ||
<Gallery photos={photos} onClick={handleClick} direction={'column'}/> | ||
); | ||
component.setState({containerWidth: '1139'}) | ||
expect(component).toMatchSnapshot(); | ||
}); | ||
describe('Gallery', () => { | ||
let wrapper; | ||
it('unmounts', () => { | ||
const wrapper = mount(<Gallery photos={photos} />); | ||
wrapper.setState({'containerWidth':500}); | ||
wrapper.unmount(); | ||
}); | ||
afterEach(() => { | ||
if (wrapper && wrapper.length > 0) { | ||
wrapper.unmount(); | ||
} | ||
}); | ||
it('renders correctly', () => { | ||
wrapper = mount( | ||
<Gallery photos={photos} onClick={handleClick}/> | ||
); | ||
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'}) | ||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
it('renders correctly after click', () => { | ||
wrapper = mount( | ||
<Gallery photos={photos} onClick={handleClick} /> | ||
); | ||
wrapper.setState({containerWidth: '1139'}) | ||
wrapper.find('img').first().simulate('click'); | ||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
it('renders correctly with direction set to column', () => { | ||
wrapper = mount( | ||
<Gallery photos={photos} onClick={handleClick} direction={'column'}/> | ||
); | ||
wrapper.setState({containerWidth: '1139'}) | ||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
it('unmounts', () => { | ||
wrapper = mount(<Gallery photos={photos} />); | ||
wrapper.setState({'containerWidth':500}); | ||
wrapper.unmount(); | ||
}); | ||
}) |
global.requestAnimationFrame = callback => setTimeout(callback, 0); | ||
global.cancelAnimationFrame = () => true; |
@@ -7,11 +7,11 @@ import { ratio } from '../src/utils'; | ||
describe('the round function', () => { | ||
test('100.12345 to two places', () => expect(round(100.12345,2)).toBe(100.12)); | ||
test('100.29 to three places', () => expect(round(100.29,1)).toBe(100.3)); | ||
test('100.9 with no decimals arg', () => expect(round(100.9)).toBe(101)); | ||
it('100.12345 to two places', () => expect(round(100.12345,2)).toBe(100.12)); | ||
it('100.29 to three places', () => expect(round(100.29,1)).toBe(100.3)); | ||
it('100.9 with no decimals arg', () => expect(round(100.9)).toBe(101)); | ||
}); | ||
describe('the ratio function', () => { | ||
test('width of 3 and height of 4', () => expect(ratio({width:3,height:4})).toBe(0.75)); | ||
test('width of 800 and height of 600', () => expect(ratio({width:800,height:600})).toBe(1.33)); | ||
test('width of 1 and height of 1', () => expect(ratio({width:1,height:1})).toBe(1)); | ||
it('width of 3 and height of 4', () => expect(ratio({width:3,height:4})).toBe(0.75)); | ||
it('width of 800 and height of 600', () => expect(ratio({width:800,height:600})).toBe(1.33)); | ||
it('width of 1 and height of 1', () => expect(ratio({width:1,height:1})).toBe(1)); | ||
}); | ||
@@ -26,18 +26,18 @@ | ||
test('width of no length to return empty array', () => expect(newPhotosNoWidth.length).toBe(0)); | ||
test('photos array to be same length', () => expect(newPhotos.length).toBe(photos.length)); | ||
test('1st image width', () => expect(newPhotos[0].width).toBe(370.4)); | ||
test('1st image height', () => expect(newPhotos[0].height).toBe(246.9)); | ||
test('2nd image width', () => expect(newPhotos[1].width).toBe(370.4)); | ||
test('2nd image height', () => expect(newPhotos[1].height).toBe(246.9)); | ||
test('3rd image width', () => expect(newPhotos[2].width).toBe(385.2)); | ||
test('3rd image height', () => expect(newPhotos[2].height).toBe(246.9)); | ||
test('4th image width', () => expect(newPhotos[3].width).toBe(276)); | ||
test('4th image height', () => expect(newPhotos[3].height).toBe(184)); | ||
test('5th image width', () => expect(newPhotos[4].width).toBe(574)); | ||
test('5th image height', () => expect(newPhotos[4].height).toBe(184)); | ||
test('6th image width', () => expect(newPhotos[5].width).toBe(276)); | ||
test('6th image height', () => expect(newPhotos[5].height).toBe(184)); | ||
test('7th image width', () => expect(newPhotos[6].width).toBe(314.3)); | ||
test('7th image height', () => expect(newPhotos[6].height).toBe(212.4)); | ||
it('width of no length to return empty array', () => expect(newPhotosNoWidth.length).toBe(0)); | ||
it('photos array to be same length', () => expect(newPhotos.length).toBe(photos.length)); | ||
it('1st image width', () => expect(newPhotos[0].width).toBe(370.4)); | ||
it('1st image height', () => expect(newPhotos[0].height).toBe(246.9)); | ||
it('2nd image width', () => expect(newPhotos[1].width).toBe(370.4)); | ||
it('2nd image height', () => expect(newPhotos[1].height).toBe(246.9)); | ||
it('3rd image width', () => expect(newPhotos[2].width).toBe(385.2)); | ||
it('3rd image height', () => expect(newPhotos[2].height).toBe(246.9)); | ||
it('4th image width', () => expect(newPhotos[3].width).toBe(276)); | ||
it('4th image height', () => expect(newPhotos[3].height).toBe(184)); | ||
it('5th image width', () => expect(newPhotos[4].width).toBe(574)); | ||
it('5th image height', () => expect(newPhotos[4].height).toBe(184)); | ||
it('6th image width', () => expect(newPhotos[5].width).toBe(276)); | ||
it('6th image height', () => expect(newPhotos[5].height).toBe(184)); | ||
it('7th image width', () => expect(newPhotos[6].width).toBe(314.3)); | ||
it('7th image height', () => expect(newPhotos[6].height).toBe(212.4)); | ||
}); |
@@ -1,4 +0,4 @@ | ||
{"/Users/octavia/dev/react-photo-gallery/src/Gallery.js": {"path":"/Users/octavia/dev/react-photo-gallery/src/Gallery.js","statementMap":{"0":{"start":{"line":12,"column":4},"end":{"line":18,"column":7}},"1":{"start":{"line":14,"column":23},"end":{"line":14,"column":51}},"2":{"start":{"line":15,"column":6},"end":{"line":17,"column":7}},"3":{"start":{"line":16,"column":8},"end":{"line":16,"column":64}},"4":{"start":{"line":19,"column":4},"end":{"line":19,"column":41}},"5":{"start":{"line":22,"column":4},"end":{"line":22,"column":31}},"6":{"start":{"line":25,"column":32},"end":{"line":25,"column":42}},"7":{"start":{"line":26,"column":4},"end":{"line":31,"column":7}},"8":{"start":{"line":35,"column":27},"end":{"line":35,"column":52}},"9":{"start":{"line":37,"column":4},"end":{"line":37,"column":71}},"10":{"start":{"line":37,"column":25},"end":{"line":37,"column":71}},"11":{"start":{"line":37,"column":48},"end":{"line":37,"column":65}},"12":{"start":{"line":38,"column":39},"end":{"line":38,"column":49}},"13":{"start":{"line":40,"column":43},"end":{"line":40,"column":53}},"14":{"start":{"line":41,"column":22},"end":{"line":41,"column":32}},"15":{"start":{"line":44,"column":4},"end":{"line":49,"column":5}},"16":{"start":{"line":45,"column":6},"end":{"line":45,"column":18}},"17":{"start":{"line":46,"column":6},"end":{"line":46,"column":45}},"18":{"start":{"line":46,"column":33},"end":{"line":46,"column":45}},"19":{"start":{"line":47,"column":6},"end":{"line":47,"column":45}},"20":{"start":{"line":47,"column":33},"end":{"line":47,"column":45}},"21":{"start":{"line":48,"column":6},"end":{"line":48,"column":46}},"22":{"start":{"line":48,"column":34},"end":{"line":48,"column":46}},"23":{"start":{"line":50,"column":19},"end":{"line":50,"column":36}},"24":{"start":{"line":51,"column":18},"end":{"line":51,"column":36}},"25":{"start":{"line":54,"column":4},"end":{"line":57,"column":5}},"26":{"start":{"line":55,"column":6},"end":{"line":55,"column":81}},"27":{"start":{"line":56,"column":6},"end":{"line":56,"column":64}},"28":{"start":{"line":58,"column":4},"end":{"line":62,"column":5}},"29":{"start":{"line":59,"column":6},"end":{"line":59,"column":46}},"30":{"start":{"line":60,"column":6},"end":{"line":60,"column":71}},"31":{"start":{"line":61,"column":6},"end":{"line":61,"column":70}},"32":{"start":{"line":63,"column":4},"end":{"line":83,"column":6}},"33":{"start":{"line":65,"column":24},"end":{"line":65,"column":41}},"34":{"start":{"line":67,"column":60},"end":{"line":67,"column":65}},"35":{"start":{"line":68,"column":12},"end":{"line":79,"column":14}},"36":{"start":{"line":87,"column":0},"end":{"line":94,"column":2}},"37":{"start":{"line":96,"column":0},"end":{"line":99,"column":2}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":11,"column":2},"end":{"line":11,"column":3}},"loc":{"start":{"line":11,"column":22},"end":{"line":20,"column":3}},"line":11},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":39},"end":{"line":12,"column":40}},"loc":{"start":{"line":12,"column":50},"end":{"line":18,"column":5}},"line":12},"2":{"name":"(anonymous_2)","decl":{"start":{"line":21,"column":2},"end":{"line":21,"column":3}},"loc":{"start":{"line":21,"column":25},"end":{"line":23,"column":3}},"line":21},"3":{"name":"(anonymous_3)","decl":{"start":{"line":24,"column":16},"end":{"line":24,"column":17}},"loc":{"start":{"line":24,"column":38},"end":{"line":32,"column":3}},"line":24},"4":{"name":"(anonymous_4)","decl":{"start":{"line":34,"column":2},"end":{"line":34,"column":3}},"loc":{"start":{"line":34,"column":11},"end":{"line":84,"column":3}},"line":34},"5":{"name":"(anonymous_5)","decl":{"start":{"line":37,"column":42},"end":{"line":37,"column":43}},"loc":{"start":{"line":37,"column":48},"end":{"line":37,"column":65}},"line":37},"6":{"name":"(anonymous_6)","decl":{"start":{"line":65,"column":18},"end":{"line":65,"column":19}},"loc":{"start":{"line":65,"column":24},"end":{"line":65,"column":41}},"line":65},"7":{"name":"(anonymous_7)","decl":{"start":{"line":66,"column":22},"end":{"line":66,"column":23}},"loc":{"start":{"line":66,"column":40},"end":{"line":80,"column":11}},"line":66}},"branchMap":{"0":{"loc":{"start":{"line":15,"column":6},"end":{"line":17,"column":7}},"type":"if","locations":[{"start":{"line":15,"column":6},"end":{"line":17,"column":7}},{"start":{"line":15,"column":6},"end":{"line":17,"column":7}}],"line":15},"1":{"loc":{"start":{"line":29,"column":16},"end":{"line":29,"column":41}},"type":"binary-expr","locations":[{"start":{"line":29,"column":16},"end":{"line":29,"column":33}},{"start":{"line":29,"column":37},"end":{"line":29,"column":41}}],"line":29},"2":{"loc":{"start":{"line":30,"column":12},"end":{"line":30,"column":37}},"type":"binary-expr","locations":[{"start":{"line":30,"column":12},"end":{"line":30,"column":29}},{"start":{"line":30,"column":33},"end":{"line":30,"column":37}}],"line":30},"3":{"loc":{"start":{"line":37,"column":4},"end":{"line":37,"column":71}},"type":"if","locations":[{"start":{"line":37,"column":4},"end":{"line":37,"column":71}},{"start":{"line":37,"column":4},"end":{"line":37,"column":71}}],"line":37},"4":{"loc":{"start":{"line":38,"column":12},"end":{"line":38,"column":34}},"type":"default-arg","locations":[{"start":{"line":38,"column":29},"end":{"line":38,"column":34}}],"line":38},"5":{"loc":{"start":{"line":44,"column":4},"end":{"line":49,"column":5}},"type":"if","locations":[{"start":{"line":44,"column":4},"end":{"line":49,"column":5}},{"start":{"line":44,"column":4},"end":{"line":49,"column":5}}],"line":44},"6":{"loc":{"start":{"line":46,"column":6},"end":{"line":46,"column":45}},"type":"if","locations":[{"start":{"line":46,"column":6},"end":{"line":46,"column":45}},{"start":{"line":46,"column":6},"end":{"line":46,"column":45}}],"line":46},"7":{"loc":{"start":{"line":47,"column":6},"end":{"line":47,"column":45}},"type":"if","locations":[{"start":{"line":47,"column":6},"end":{"line":47,"column":45}},{"start":{"line":47,"column":6},"end":{"line":47,"column":45}}],"line":47},"8":{"loc":{"start":{"line":48,"column":6},"end":{"line":48,"column":46}},"type":"if","locations":[{"start":{"line":48,"column":6},"end":{"line":48,"column":46}},{"start":{"line":48,"column":6},"end":{"line":48,"column":46}}],"line":48},"9":{"loc":{"start":{"line":54,"column":4},"end":{"line":57,"column":5}},"type":"if","locations":[{"start":{"line":54,"column":4},"end":{"line":57,"column":5}},{"start":{"line":54,"column":4},"end":{"line":57,"column":5}}],"line":54},"10":{"loc":{"start":{"line":58,"column":4},"end":{"line":62,"column":5}},"type":"if","locations":[{"start":{"line":58,"column":4},"end":{"line":62,"column":5}},{"start":{"line":58,"column":4},"end":{"line":62,"column":5}}],"line":58},"11":{"loc":{"start":{"line":70,"column":21},"end":{"line":70,"column":43}},"type":"binary-expr","locations":[{"start":{"line":70,"column":21},"end":{"line":70,"column":30}},{"start":{"line":70,"column":34},"end":{"line":70,"column":43}}],"line":70},"12":{"loc":{"start":{"line":77,"column":25},"end":{"line":77,"column":58}},"type":"cond-expr","locations":[{"start":{"line":77,"column":35},"end":{"line":77,"column":51}},{"start":{"line":77,"column":54},"end":{"line":77,"column":58}}],"line":77}},"s":{"0":5,"1":0,"2":0,"3":0,"4":5,"5":1,"6":1,"7":1,"8":10,"9":10,"10":5,"11":10,"12":5,"13":5,"14":5,"15":5,"16":4,"17":4,"18":4,"19":4,"20":3,"21":4,"22":0,"23":5,"24":5,"25":5,"26":4,"27":4,"28":5,"29":1,"30":1,"31":1,"32":5,"33":6,"34":35,"35":35,"36":1,"37":1},"f":{"0":5,"1":0,"2":1,"3":1,"4":10,"5":10,"6":6,"7":35},"b":{"0":[0,0],"1":[1,1],"2":[1,0],"3":[5,5],"4":[5],"5":[4,1],"6":[4,0],"7":[3,1],"8":[0,4],"9":[4,1],"10":[1,4],"11":[35,35],"12":[28,7]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"04af1dea83d1f23443c5027cf3204b0c54768e92"} | ||
{"/Users/octavia/dev/react-photo-gallery/src/Gallery.js": {"path":"/Users/octavia/dev/react-photo-gallery/src/Gallery.js","statementMap":{"0":{"start":{"line":12,"column":4},"end":{"line":12,"column":33}},"1":{"start":{"line":13,"column":4},"end":{"line":23,"column":7}},"2":{"start":{"line":15,"column":23},"end":{"line":15,"column":51}},"3":{"start":{"line":16,"column":6},"end":{"line":22,"column":7}},"4":{"start":{"line":19,"column":8},"end":{"line":21,"column":11}},"5":{"start":{"line":20,"column":10},"end":{"line":20,"column":66}},"6":{"start":{"line":24,"column":4},"end":{"line":24,"column":41}},"7":{"start":{"line":27,"column":4},"end":{"line":27,"column":31}},"8":{"start":{"line":28,"column":4},"end":{"line":28,"column":55}},"9":{"start":{"line":31,"column":32},"end":{"line":31,"column":42}},"10":{"start":{"line":32,"column":4},"end":{"line":37,"column":7}},"11":{"start":{"line":41,"column":27},"end":{"line":41,"column":52}},"12":{"start":{"line":43,"column":4},"end":{"line":43,"column":81}},"13":{"start":{"line":43,"column":25},"end":{"line":43,"column":81}},"14":{"start":{"line":43,"column":48},"end":{"line":43,"column":65}},"15":{"start":{"line":44,"column":39},"end":{"line":44,"column":49}},"16":{"start":{"line":46,"column":43},"end":{"line":46,"column":53}},"17":{"start":{"line":47,"column":22},"end":{"line":47,"column":32}},"18":{"start":{"line":50,"column":4},"end":{"line":55,"column":5}},"19":{"start":{"line":51,"column":6},"end":{"line":51,"column":18}},"20":{"start":{"line":52,"column":6},"end":{"line":52,"column":45}},"21":{"start":{"line":52,"column":33},"end":{"line":52,"column":45}},"22":{"start":{"line":53,"column":6},"end":{"line":53,"column":45}},"23":{"start":{"line":53,"column":33},"end":{"line":53,"column":45}},"24":{"start":{"line":54,"column":6},"end":{"line":54,"column":46}},"25":{"start":{"line":54,"column":34},"end":{"line":54,"column":46}},"26":{"start":{"line":56,"column":19},"end":{"line":56,"column":36}},"27":{"start":{"line":57,"column":18},"end":{"line":57,"column":36}},"28":{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},"29":{"start":{"line":61,"column":6},"end":{"line":61,"column":81}},"30":{"start":{"line":62,"column":6},"end":{"line":62,"column":64}},"31":{"start":{"line":64,"column":4},"end":{"line":68,"column":5}},"32":{"start":{"line":65,"column":6},"end":{"line":65,"column":46}},"33":{"start":{"line":66,"column":6},"end":{"line":66,"column":71}},"34":{"start":{"line":67,"column":6},"end":{"line":67,"column":70}},"35":{"start":{"line":69,"column":4},"end":{"line":89,"column":6}},"36":{"start":{"line":71,"column":24},"end":{"line":71,"column":41}},"37":{"start":{"line":73,"column":60},"end":{"line":73,"column":65}},"38":{"start":{"line":74,"column":12},"end":{"line":85,"column":14}},"39":{"start":{"line":93,"column":0},"end":{"line":100,"column":2}},"40":{"start":{"line":102,"column":0},"end":{"line":105,"column":2}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":11,"column":2},"end":{"line":11,"column":3}},"loc":{"start":{"line":11,"column":22},"end":{"line":25,"column":3}},"line":11},"1":{"name":"(anonymous_1)","decl":{"start":{"line":13,"column":39},"end":{"line":13,"column":40}},"loc":{"start":{"line":13,"column":50},"end":{"line":23,"column":5}},"line":13},"2":{"name":"(anonymous_2)","decl":{"start":{"line":19,"column":61},"end":{"line":19,"column":62}},"loc":{"start":{"line":19,"column":67},"end":{"line":21,"column":9}},"line":19},"3":{"name":"(anonymous_3)","decl":{"start":{"line":26,"column":2},"end":{"line":26,"column":3}},"loc":{"start":{"line":26,"column":25},"end":{"line":29,"column":3}},"line":26},"4":{"name":"(anonymous_4)","decl":{"start":{"line":30,"column":16},"end":{"line":30,"column":17}},"loc":{"start":{"line":30,"column":38},"end":{"line":38,"column":3}},"line":30},"5":{"name":"(anonymous_5)","decl":{"start":{"line":40,"column":2},"end":{"line":40,"column":3}},"loc":{"start":{"line":40,"column":11},"end":{"line":90,"column":3}},"line":40},"6":{"name":"(anonymous_6)","decl":{"start":{"line":43,"column":42},"end":{"line":43,"column":43}},"loc":{"start":{"line":43,"column":48},"end":{"line":43,"column":65}},"line":43},"7":{"name":"(anonymous_7)","decl":{"start":{"line":71,"column":18},"end":{"line":71,"column":19}},"loc":{"start":{"line":71,"column":24},"end":{"line":71,"column":41}},"line":71},"8":{"name":"(anonymous_8)","decl":{"start":{"line":72,"column":22},"end":{"line":72,"column":23}},"loc":{"start":{"line":72,"column":40},"end":{"line":86,"column":11}},"line":72}},"branchMap":{"0":{"loc":{"start":{"line":16,"column":6},"end":{"line":22,"column":7}},"type":"if","locations":[{"start":{"line":16,"column":6},"end":{"line":22,"column":7}},{"start":{"line":16,"column":6},"end":{"line":22,"column":7}}],"line":16},"1":{"loc":{"start":{"line":35,"column":16},"end":{"line":35,"column":41}},"type":"binary-expr","locations":[{"start":{"line":35,"column":16},"end":{"line":35,"column":33}},{"start":{"line":35,"column":37},"end":{"line":35,"column":41}}],"line":35},"2":{"loc":{"start":{"line":36,"column":12},"end":{"line":36,"column":37}},"type":"binary-expr","locations":[{"start":{"line":36,"column":12},"end":{"line":36,"column":29}},{"start":{"line":36,"column":33},"end":{"line":36,"column":37}}],"line":36},"3":{"loc":{"start":{"line":43,"column":4},"end":{"line":43,"column":81}},"type":"if","locations":[{"start":{"line":43,"column":4},"end":{"line":43,"column":81}},{"start":{"line":43,"column":4},"end":{"line":43,"column":81}}],"line":43},"4":{"loc":{"start":{"line":44,"column":12},"end":{"line":44,"column":34}},"type":"default-arg","locations":[{"start":{"line":44,"column":29},"end":{"line":44,"column":34}}],"line":44},"5":{"loc":{"start":{"line":50,"column":4},"end":{"line":55,"column":5}},"type":"if","locations":[{"start":{"line":50,"column":4},"end":{"line":55,"column":5}},{"start":{"line":50,"column":4},"end":{"line":55,"column":5}}],"line":50},"6":{"loc":{"start":{"line":52,"column":6},"end":{"line":52,"column":45}},"type":"if","locations":[{"start":{"line":52,"column":6},"end":{"line":52,"column":45}},{"start":{"line":52,"column":6},"end":{"line":52,"column":45}}],"line":52},"7":{"loc":{"start":{"line":53,"column":6},"end":{"line":53,"column":45}},"type":"if","locations":[{"start":{"line":53,"column":6},"end":{"line":53,"column":45}},{"start":{"line":53,"column":6},"end":{"line":53,"column":45}}],"line":53},"8":{"loc":{"start":{"line":54,"column":6},"end":{"line":54,"column":46}},"type":"if","locations":[{"start":{"line":54,"column":6},"end":{"line":54,"column":46}},{"start":{"line":54,"column":6},"end":{"line":54,"column":46}}],"line":54},"9":{"loc":{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},"type":"if","locations":[{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},{"start":{"line":60,"column":4},"end":{"line":63,"column":5}}],"line":60},"10":{"loc":{"start":{"line":64,"column":4},"end":{"line":68,"column":5}},"type":"if","locations":[{"start":{"line":64,"column":4},"end":{"line":68,"column":5}},{"start":{"line":64,"column":4},"end":{"line":68,"column":5}}],"line":64},"11":{"loc":{"start":{"line":76,"column":21},"end":{"line":76,"column":43}},"type":"binary-expr","locations":[{"start":{"line":76,"column":21},"end":{"line":76,"column":30}},{"start":{"line":76,"column":34},"end":{"line":76,"column":43}}],"line":76},"12":{"loc":{"start":{"line":83,"column":25},"end":{"line":83,"column":58}},"type":"cond-expr","locations":[{"start":{"line":83,"column":35},"end":{"line":83,"column":51}},{"start":{"line":83,"column":54},"end":{"line":83,"column":58}}],"line":83}},"s":{"0":5,"1":5,"2":0,"3":0,"4":0,"5":0,"6":5,"7":5,"8":5,"9":1,"10":1,"11":10,"12":10,"13":5,"14":10,"15":5,"16":5,"17":5,"18":5,"19":4,"20":4,"21":4,"22":4,"23":3,"24":4,"25":0,"26":5,"27":5,"28":5,"29":4,"30":4,"31":5,"32":1,"33":1,"34":1,"35":5,"36":10,"37":35,"38":35,"39":1,"40":1},"f":{"0":5,"1":0,"2":0,"3":5,"4":1,"5":10,"6":10,"7":10,"8":35},"b":{"0":[0,0],"1":[1,1],"2":[1,0],"3":[5,5],"4":[5],"5":[4,1],"6":[4,0],"7":[3,1],"8":[0,4],"9":[4,1],"10":[1,4],"11":[35,35],"12":[28,7]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"ffe66d60f9eea8947fa05572d956b83b39af6aeb"} | ||
,"/Users/octavia/dev/react-photo-gallery/src/Photo.js": {"path":"/Users/octavia/dev/react-photo-gallery/src/Photo.js","statementMap":{"0":{"start":{"line":4,"column":21},"end":{"line":4,"column":42}},"1":{"start":{"line":6,"column":14},"end":{"line":25,"column":1}},"2":{"start":{"line":7,"column":19},"end":{"line":7,"column":37}},"3":{"start":{"line":8,"column":2},"end":{"line":12,"column":3}},"4":{"start":{"line":9,"column":4},"end":{"line":9,"column":35}},"5":{"start":{"line":10,"column":4},"end":{"line":10,"column":25}},"6":{"start":{"line":11,"column":4},"end":{"line":11,"column":23}},"7":{"start":{"line":14,"column":22},"end":{"line":16,"column":3}},"8":{"start":{"line":15,"column":4},"end":{"line":15,"column":37}},"9":{"start":{"line":18,"column":2},"end":{"line":24,"column":4}},"10":{"start":{"line":27,"column":29},"end":{"line":35,"column":2}},"11":{"start":{"line":37,"column":0},"end":{"line":53,"column":2}},"12":{"start":{"line":43,"column":4},"end":{"line":45,"column":5}},"13":{"start":{"line":44,"column":6},"end":{"line":44,"column":85}},"14":{"start":{"line":48,"column":4},"end":{"line":50,"column":5}},"15":{"start":{"line":49,"column":6},"end":{"line":49,"column":86}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":6,"column":14},"end":{"line":6,"column":15}},"loc":{"start":{"line":6,"column":75},"end":{"line":25,"column":1}},"line":6},"1":{"name":"(anonymous_1)","decl":{"start":{"line":14,"column":22},"end":{"line":14,"column":23}},"loc":{"start":{"line":14,"column":31},"end":{"line":16,"column":3}},"line":14},"2":{"name":"(anonymous_2)","decl":{"start":{"line":42,"column":7},"end":{"line":42,"column":8}},"loc":{"start":{"line":42,"column":16},"end":{"line":46,"column":3}},"line":42},"3":{"name":"(anonymous_3)","decl":{"start":{"line":47,"column":8},"end":{"line":47,"column":9}},"loc":{"start":{"line":47,"column":17},"end":{"line":51,"column":3}},"line":47}},"branchMap":{"0":{"loc":{"start":{"line":8,"column":2},"end":{"line":12,"column":3}},"type":"if","locations":[{"start":{"line":8,"column":2},"end":{"line":12,"column":3}},{"start":{"line":8,"column":2},"end":{"line":12,"column":3}}],"line":8},"1":{"loc":{"start":{"line":20,"column":13},"end":{"line":20,"column":66}},"type":"cond-expr","locations":[{"start":{"line":20,"column":23},"end":{"line":20,"column":55}},{"start":{"line":20,"column":58},"end":{"line":20,"column":66}}],"line":20},"2":{"loc":{"start":{"line":22,"column":15},"end":{"line":22,"column":43}},"type":"cond-expr","locations":[{"start":{"line":22,"column":25},"end":{"line":22,"column":36}},{"start":{"line":22,"column":39},"end":{"line":22,"column":43}}],"line":22},"3":{"loc":{"start":{"line":43,"column":4},"end":{"line":45,"column":5}},"type":"if","locations":[{"start":{"line":43,"column":4},"end":{"line":45,"column":5}},{"start":{"line":43,"column":4},"end":{"line":45,"column":5}}],"line":43},"4":{"loc":{"start":{"line":43,"column":8},"end":{"line":43,"column":69}},"type":"binary-expr","locations":[{"start":{"line":43,"column":8},"end":{"line":43,"column":36}},{"start":{"line":43,"column":40},"end":{"line":43,"column":69}}],"line":43},"5":{"loc":{"start":{"line":48,"column":4},"end":{"line":50,"column":5}},"type":"if","locations":[{"start":{"line":48,"column":4},"end":{"line":50,"column":5}},{"start":{"line":48,"column":4},"end":{"line":50,"column":5}}],"line":48},"6":{"loc":{"start":{"line":48,"column":8},"end":{"line":48,"column":70}},"type":"binary-expr","locations":[{"start":{"line":48,"column":8},"end":{"line":48,"column":36}},{"start":{"line":48,"column":40},"end":{"line":48,"column":70}}],"line":48}},"s":{"0":1,"1":1,"2":35,"3":35,"4":7,"5":7,"6":7,"7":35,"8":1,"9":35,"10":1,"11":1,"12":35,"13":0,"14":35,"15":0},"f":{"0":35,"1":1,"2":35,"3":35},"b":{"0":[7,28],"1":[28,7],"2":[28,7],"3":[0,35],"4":[35,7],"5":[0,35],"6":[35,7]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"8e97c59ced2924f69110d5ddbe4f02080e891eee"} | ||
,"/Users/octavia/dev/react-photo-gallery/src/utils.js": {"path":"/Users/octavia/dev/react-photo-gallery/src/utils.js","statementMap":{"0":{"start":{"line":2,"column":2},"end":{"line":2,"column":30}},"1":{"start":{"line":2,"column":17},"end":{"line":2,"column":30}},"2":{"start":{"line":3,"column":2},"end":{"line":3,"column":70}},"3":{"start":{"line":8,"column":2},"end":{"line":8,"column":34}},"4":{"start":{"line":16,"column":2},"end":{"line":18,"column":3}},"5":{"start":{"line":17,"column":4},"end":{"line":17,"column":14}},"6":{"start":{"line":21,"column":15},"end":{"line":25,"column":8}},"7":{"start":{"line":22,"column":16},"end":{"line":22,"column":41}},"8":{"start":{"line":23,"column":4},"end":{"line":23,"column":55}},"9":{"start":{"line":24,"column":4},"end":{"line":24,"column":15}},"10":{"start":{"line":28,"column":15},"end":{"line":28,"column":17}},"11":{"start":{"line":29,"column":24},"end":{"line":57,"column":4}},"12":{"start":{"line":30,"column":23},"end":{"line":30,"column":78}},"13":{"start":{"line":30,"column":53},"end":{"line":30,"column":74}},"14":{"start":{"line":31,"column":21},"end":{"line":31,"column":54}},"15":{"start":{"line":34,"column":4},"end":{"line":34,"column":62}},"16":{"start":{"line":34,"column":38},"end":{"line":34,"column":62}},"17":{"start":{"line":46,"column":6},"end":{"line":50,"column":88}},"18":{"start":{"line":50,"column":53},"end":{"line":50,"column":63}},"19":{"start":{"line":52,"column":4},"end":{"line":56,"column":8}},"20":{"start":{"line":52,"column":29},"end":{"line":56,"column":5}},"21":{"start":{"line":58,"column":2},"end":{"line":58,"column":66}},"22":{"start":{"line":58,"column":44},"end":{"line":58,"column":60}},"23":{"start":{"line":62,"column":17},"end":{"line":62,"column":57}},"24":{"start":{"line":65,"column":26},"end":{"line":72,"column":4}},"25":{"start":{"line":66,"column":22},"end":{"line":66,"column":59}},"26":{"start":{"line":67,"column":4},"end":{"line":71,"column":6}},"27":{"start":{"line":76,"column":27},"end":{"line":76,"column":29}},"28":{"start":{"line":77,"column":30},"end":{"line":77,"column":32}},"29":{"start":{"line":78,"column":2},"end":{"line":81,"column":3}},"30":{"start":{"line":79,"column":4},"end":{"line":79,"column":64}},"31":{"start":{"line":80,"column":4},"end":{"line":80,"column":31}},"32":{"start":{"line":86,"column":27},"end":{"line":103,"column":4}},"33":{"start":{"line":87,"column":24},"end":{"line":90,"column":9}},"34":{"start":{"line":88,"column":6},"end":{"line":88,"column":54}},"35":{"start":{"line":89,"column":6},"end":{"line":89,"column":17}},"36":{"start":{"line":92,"column":4},"end":{"line":92,"column":49}},"37":{"start":{"line":93,"column":4},"end":{"line":93,"column":47}},"38":{"start":{"line":94,"column":4},"end":{"line":94,"column":100}},"39":{"start":{"line":97,"column":23},"end":{"line":100,"column":9}},"40":{"start":{"line":98,"column":6},"end":{"line":98,"column":54}},"41":{"start":{"line":99,"column":6},"end":{"line":99,"column":17}},"42":{"start":{"line":101,"column":4},"end":{"line":101,"column":60}},"43":{"start":{"line":102,"column":4},"end":{"line":102,"column":17}},"44":{"start":{"line":104,"column":2},"end":{"line":104,"column":26}}},"fnMap":{"0":{"name":"round","decl":{"start":{"line":1,"column":16},"end":{"line":1,"column":21}},"loc":{"start":{"line":1,"column":39},"end":{"line":4,"column":1}},"line":1},"1":{"name":"ratio","decl":{"start":{"line":7,"column":16},"end":{"line":7,"column":21}},"loc":{"start":{"line":7,"column":41},"end":{"line":9,"column":1}},"line":7},"2":{"name":"computeSizes","decl":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}},"loc":{"start":{"line":15,"column":65},"end":{"line":59,"column":1}},"line":15},"3":{"name":"(anonymous_3)","decl":{"start":{"line":21,"column":29},"end":{"line":21,"column":30}},"loc":{"start":{"line":21,"column":49},"end":{"line":25,"column":3}},"line":21},"4":{"name":"(anonymous_4)","decl":{"start":{"line":29,"column":33},"end":{"line":29,"column":34}},"loc":{"start":{"line":29,"column":52},"end":{"line":57,"column":3}},"line":29},"5":{"name":"(anonymous_5)","decl":{"start":{"line":30,"column":34},"end":{"line":30,"column":35}},"loc":{"start":{"line":30,"column":53},"end":{"line":30,"column":74}},"line":30},"6":{"name":"(anonymous_6)","decl":{"start":{"line":50,"column":38},"end":{"line":50,"column":39}},"loc":{"start":{"line":50,"column":53},"end":{"line":50,"column":63}},"line":50},"7":{"name":"(anonymous_7)","decl":{"start":{"line":52,"column":19},"end":{"line":52,"column":20}},"loc":{"start":{"line":52,"column":29},"end":{"line":56,"column":5}},"line":52},"8":{"name":"(anonymous_8)","decl":{"start":{"line":58,"column":30},"end":{"line":58,"column":31}},"loc":{"start":{"line":58,"column":44},"end":{"line":58,"column":60}},"line":58},"9":{"name":"computeSizesColumns","decl":{"start":{"line":60,"column":16},"end":{"line":60,"column":35}},"loc":{"start":{"line":60,"column":72},"end":{"line":105,"column":1}},"line":60},"10":{"name":"(anonymous_10)","decl":{"start":{"line":65,"column":37},"end":{"line":65,"column":38}},"loc":{"start":{"line":65,"column":46},"end":{"line":72,"column":3}},"line":65},"11":{"name":"(anonymous_11)","decl":{"start":{"line":86,"column":47},"end":{"line":86,"column":48}},"loc":{"start":{"line":86,"column":56},"end":{"line":103,"column":3}},"line":86},"12":{"name":"(anonymous_12)","decl":{"start":{"line":87,"column":51},"end":{"line":87,"column":52}},"loc":{"start":{"line":87,"column":69},"end":{"line":90,"column":5}},"line":87},"13":{"name":"(anonymous_13)","decl":{"start":{"line":97,"column":50},"end":{"line":97,"column":51}},"loc":{"start":{"line":97,"column":68},"end":{"line":100,"column":5}},"line":97}},"branchMap":{"0":{"loc":{"start":{"line":2,"column":2},"end":{"line":2,"column":30}},"type":"if","locations":[{"start":{"line":2,"column":2},"end":{"line":2,"column":30}},{"start":{"line":2,"column":2},"end":{"line":2,"column":30}}],"line":2},"1":{"loc":{"start":{"line":16,"column":2},"end":{"line":18,"column":3}},"type":"if","locations":[{"start":{"line":16,"column":2},"end":{"line":18,"column":3}},{"start":{"line":16,"column":2},"end":{"line":18,"column":3}}],"line":16},"2":{"loc":{"start":{"line":23,"column":15},"end":{"line":23,"column":54}},"type":"cond-expr","locations":[{"start":{"line":23,"column":26},"end":{"line":23,"column":45}},{"start":{"line":23,"column":48},"end":{"line":23,"column":54}}],"line":23},"3":{"loc":{"start":{"line":34,"column":4},"end":{"line":34,"column":62}},"type":"if","locations":[{"start":{"line":34,"column":4},"end":{"line":34,"column":62}},{"start":{"line":34,"column":4},"end":{"line":34,"column":62}}],"line":34},"4":{"loc":{"start":{"line":46,"column":6},"end":{"line":50,"column":88}},"type":"cond-expr","locations":[{"start":{"line":47,"column":10},"end":{"line":47,"column":31}},{"start":{"line":48,"column":10},"end":{"line":50,"column":88}}],"line":46},"5":{"loc":{"start":{"line":48,"column":10},"end":{"line":50,"column":88}},"type":"cond-expr","locations":[{"start":{"line":49,"column":12},"end":{"line":49,"column":58}},{"start":{"line":50,"column":12},"end":{"line":50,"column":88}}],"line":48},"6":{"loc":{"start":{"line":88,"column":12},"end":{"line":88,"column":53}},"type":"cond-expr","locations":[{"start":{"line":88,"column":46},"end":{"line":88,"column":47}},{"start":{"line":88,"column":50},"end":{"line":88,"column":53}}],"line":88},"7":{"loc":{"start":{"line":98,"column":12},"end":{"line":98,"column":53}},"type":"cond-expr","locations":[{"start":{"line":98,"column":46},"end":{"line":98,"column":47}},{"start":{"line":98,"column":50},"end":{"line":98,"column":53}}],"line":98}},"s":{"0":163,"1":1,"2":163,"3":73,"4":6,"5":1,"6":5,"7":35,"8":35,"9":35,"10":5,"11":5,"12":14,"13":35,"14":14,"15":14,"16":9,"17":14,"18":9,"19":14,"20":35,"21":5,"22":14,"23":1,"24":1,"25":7,"26":7,"27":1,"28":1,"29":1,"30":3,"31":3,"32":1,"33":7,"34":21,"35":21,"36":7,"37":7,"38":7,"39":7,"40":21,"41":21,"42":7,"43":7,"44":1},"f":{"0":163,"1":73,"2":6,"3":35,"4":14,"5":35,"6":9,"7":35,"8":14,"9":1,"10":7,"11":7,"12":21,"13":21},"b":{"0":[1,162],"1":[1,5],"2":[21,14],"3":[9,5],"4":[9,5],"5":[1,4],"6":[4,17],"7":[3,18]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"e1b2f718cfd375bee65a977c6e12582177eb17d4"} | ||
} |
@@ -453,2 +453,3 @@ import React from 'react'; | ||
this.animationFrameID = null; | ||
this.observer = new ResizeObserver(function (entries) { | ||
@@ -458,3 +459,7 @@ // only do something if width changes | ||
if (_this2.state.containerWidth !== newWidth) { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
// put in an animation frame to stop "benign errors" from | ||
// ResizObserver https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded | ||
_this2.animationFrameID = window.requestAnimationFrame(function () { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
}); | ||
} | ||
@@ -468,2 +473,3 @@ }); | ||
this.observer.disconnect(); | ||
window.cancelAnimationFrame(this.animationFrameID); | ||
} | ||
@@ -477,5 +483,9 @@ }, { | ||
// no containerWidth until after first render with refs, skip calculations and render nothing | ||
if (!containerWidth) return React.createElement('div', { ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }); | ||
if (!containerWidth) return React.createElement( | ||
'div', | ||
{ ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }, | ||
'\xA0' | ||
); | ||
var _props$ImageComponent = this.props.ImageComponent, | ||
@@ -482,0 +492,0 @@ ImageComponent = _props$ImageComponent === undefined ? Photo : _props$ImageComponent; |
@@ -459,2 +459,3 @@ (function (global, factory) { | ||
this.animationFrameID = null; | ||
this.observer = new ResizeObserver(function (entries) { | ||
@@ -464,3 +465,7 @@ // only do something if width changes | ||
if (_this2.state.containerWidth !== newWidth) { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
// put in an animation frame to stop "benign errors" from | ||
// ResizObserver https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded | ||
_this2.animationFrameID = window.requestAnimationFrame(function () { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
}); | ||
} | ||
@@ -474,2 +479,3 @@ }); | ||
this.observer.disconnect(); | ||
window.cancelAnimationFrame(this.animationFrameID); | ||
} | ||
@@ -483,5 +489,9 @@ }, { | ||
// no containerWidth until after first render with refs, skip calculations and render nothing | ||
if (!containerWidth) return React.createElement('div', { ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }); | ||
if (!containerWidth) return React.createElement( | ||
'div', | ||
{ ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }, | ||
'\xA0' | ||
); | ||
var _props$ImageComponent = this.props.ImageComponent, | ||
@@ -488,0 +498,0 @@ ImageComponent = _props$ImageComponent === undefined ? Photo : _props$ImageComponent; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["react","prop-types","resize-observer-polyfill"],t):e.Gallery=t(e.React,e.PropTypes,e.ResizeObserver)}(this,function(e,t,n){"use strict";function r(e,t){return t||(t=0),Number(Math.round(e+"e"+t)+"e-"+t)}function o(e){return r(e.width/e.height,2)}function i(e){var t=e.photos,n=e.columns,i=e.width,u=e.margin;if(!i)return[];var a=t.reduce(function(e,t,r){var o=Math.floor(r/n);return e[o]=e[o]?[].concat(h(e[o]),[t]):[t],e},[]),c=[];return a.map(function(e,s){var f=e.reduce(function(e,t){return e+o(t)},0),p=i-e.length*(2*u);s!==a.length-1&&c.push(f);var h=e.length===n?p/f:t.length<n?p/f*(e.length/n):p/(c.reduce(function(e,t){return e+t},0)/(a.length-1));return e.map(function(e){return l({},e,{height:r(h,1),width:r(h*o(e),1)})})}).reduce(function(e,t){return[].concat(h(e),h(t))},[])}function u(e){for(var t=e.photos,n=e.columns,o=e.width,i=e.margin,u=(o-2*i*n)/n,a=t.map(function(e){var t=e.height/e.width*u;return l({},e,{width:r(u,1),height:r(t,1)})}),c=[],s=[],f=0;f<n;f++)c[f]=r(f*(u+2*i),1),s[f]=0;return a.map(function(e){var t=s.reduce(function(e,t,n){return e=t<s[e]?n:e},0);e.top=s[t],e.left=c[t],s[t]=s[t]+e.height+2*i;var n=s.reduce(function(e,t,n){return e=t>s[e]?n:e},0);return e.containerHeight=s[n],e})}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n;!function(){function e(e){this.value=e}function t(t){function n(o,i){try{var u=t[o](i),a=u.value;a instanceof e?Promise.resolve(a.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(u.done?"return":"normal",u.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,u){var a={key:e,arg:t,resolve:r,reject:u,next:null};i?i=i.next=a:(o=i=a,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},f=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},p=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},h=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},d={cursor:"pointer"},v=function(t){var n=t.index,r=t.onClick,o=t.photo,i=t.margin,u=t.direction,a=t.top,c=t.left,s={margin:i};"column"===u&&(s.position="absolute",s.left=c,s.top=a);return e.createElement("img",l({style:r?l({},s,d):s},o,{onClick:r?function(e){r(e,{photo:o,index:n})}:null}))},y=(t.shape({src:t.string.isRequired,width:t.number.isRequired,height:t.number.isRequired,alt:t.string,title:t.string,srcSet:t.oneOfType([t.string,t.array]),sizes:t.oneOfType([t.string,t.array])}),function(t){function r(){var e,t,n,o;a(this,r);for(var i=arguments.length,u=Array(i),c=0;c<i;c++)u[c]=arguments[c];return t=n=p(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(u))),n.state={containerWidth:0},n.handleClick=function(e,t){var r=t.index,o=n.props,i=o.photos;(0,o.onClick)(e,{index:r,photo:i[r],previous:i[r-1]||null,next:i[r+1]||null})},o=t,p(n,o)}return s(r,t),c(r,[{key:"componentDidMount",value:function(){var e=this;this.observer=new n(function(t){var n=t[0].contentRect.width;e.state.containerWidth!==n&&e.setState({containerWidth:Math.floor(n)})}),this.observer.observe(this._gallery)}},{key:"componentWillUnmount",value:function(){this.observer.disconnect()}},{key:"render",value:function(){var t=this,n=this.state.containerWidth;if(!n)return e.createElement("div",{ref:function(e){return t._gallery=e}});var r=this.props.ImageComponent,o=void 0===r?v:r,a=this.props,c=a.margin,l=a.onClick,s=a.direction,p=this.props.columns;void 0===p&&(p=1,n>=500&&(p=2),n>=900&&(p=3),n>=1500&&(p=4));var h=this.props.photos,d=n-1,y=void 0,m=void 0;return"row"===s&&(y={display:"flex",flexWrap:"wrap",flexDirection:"row"},m=i({width:d,columns:p,margin:c,photos:h})),"column"===s&&(y={position:"relative"},m=u({width:d,columns:p,margin:c,photos:h}),y.height=m[m.length-1].containerHeight),e.createElement("div",{className:"react-photo-gallery--gallery"},e.createElement("div",{ref:function(e){return t._gallery=e},style:y},m.map(function(n,r){var i=n.left,u=n.top,a=(n.containerHeight,f(n,["left","top","containerHeight"]));return e.createElement(o,{key:n.key||n.src,margin:c,index:r,photo:a,direction:s,left:i,top:u,onClick:l?t.handleClick:null})})))}}]),r}(e.Component));return y.defaultProps={margin:2,direction:"row"},y}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["react","prop-types","resize-observer-polyfill"],t):e.Gallery=t(e.React,e.PropTypes,e.ResizeObserver)}(this,function(e,t,n){"use strict";function r(e,t){return t||(t=0),Number(Math.round(e+"e"+t)+"e-"+t)}function o(e){return r(e.width/e.height,2)}function i(e){var t=e.photos,n=e.columns,i=e.width,a=e.margin;if(!i)return[];var u=t.reduce(function(e,t,r){var o=Math.floor(r/n);return e[o]=e[o]?[].concat(p(e[o]),[t]):[t],e},[]),c=[];return u.map(function(e,s){var f=e.reduce(function(e,t){return e+o(t)},0),h=i-e.length*(2*a);s!==u.length-1&&c.push(f);var p=e.length===n?h/f:t.length<n?h/f*(e.length/n):h/(c.reduce(function(e,t){return e+t},0)/(u.length-1));return e.map(function(e){return l({},e,{height:r(p,1),width:r(p*o(e),1)})})}).reduce(function(e,t){return[].concat(p(e),p(t))},[])}function a(e){for(var t=e.photos,n=e.columns,o=e.width,i=e.margin,a=(o-2*i*n)/n,u=t.map(function(e){var t=e.height/e.width*a;return l({},e,{width:r(a,1),height:r(t,1)})}),c=[],s=[],f=0;f<n;f++)c[f]=r(f*(a+2*i),1),s[f]=0;return u.map(function(e){var t=s.reduce(function(e,t,n){return e=t<s[e]?n:e},0);e.top=s[t],e.left=c[t],s[t]=s[t]+e.height+2*i;var n=s.reduce(function(e,t,n){return e=t>s[e]?n:e},0);return e.containerHeight=s[n],e})}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n;!function(){function e(e){this.value=e}function t(t){function n(o,i){try{var a=t[o](i),u=a.value;u instanceof e?Promise.resolve(u.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(a.done?"return":"normal",a.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,a){var u={key:e,arg:t,resolve:r,reject:a,next:null};i?i=i.next=u:(o=i=u,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},f=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},h=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},p=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},d={cursor:"pointer"},v=function(t){var n=t.index,r=t.onClick,o=t.photo,i=t.margin,a=t.direction,u=t.top,c=t.left,s={margin:i};"column"===a&&(s.position="absolute",s.left=c,s.top=u);return e.createElement("img",l({style:r?l({},s,d):s},o,{onClick:r?function(e){r(e,{photo:o,index:n})}:null}))},y=(t.shape({src:t.string.isRequired,width:t.number.isRequired,height:t.number.isRequired,alt:t.string,title:t.string,srcSet:t.oneOfType([t.string,t.array]),sizes:t.oneOfType([t.string,t.array])}),function(t){function r(){var e,t,n,o;u(this,r);for(var i=arguments.length,a=Array(i),c=0;c<i;c++)a[c]=arguments[c];return t=n=h(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(a))),n.state={containerWidth:0},n.handleClick=function(e,t){var r=t.index,o=n.props,i=o.photos;(0,o.onClick)(e,{index:r,photo:i[r],previous:i[r-1]||null,next:i[r+1]||null})},o=t,h(n,o)}return s(r,t),c(r,[{key:"componentDidMount",value:function(){var e=this;this.animationFrameID=null,this.observer=new n(function(t){var n=t[0].contentRect.width;e.state.containerWidth!==n&&(e.animationFrameID=window.requestAnimationFrame(function(){e.setState({containerWidth:Math.floor(n)})}))}),this.observer.observe(this._gallery)}},{key:"componentWillUnmount",value:function(){this.observer.disconnect(),window.cancelAnimationFrame(this.animationFrameID)}},{key:"render",value:function(){var t=this,n=this.state.containerWidth;if(!n)return e.createElement("div",{ref:function(e){return t._gallery=e}}," ");var r=this.props.ImageComponent,o=void 0===r?v:r,u=this.props,c=u.margin,l=u.onClick,s=u.direction,h=this.props.columns;void 0===h&&(h=1,n>=500&&(h=2),n>=900&&(h=3),n>=1500&&(h=4));var p=this.props.photos,d=n-1,y=void 0,m=void 0;return"row"===s&&(y={display:"flex",flexWrap:"wrap",flexDirection:"row"},m=i({width:d,columns:h,margin:c,photos:p})),"column"===s&&(y={position:"relative"},m=a({width:d,columns:h,margin:c,photos:p}),y.height=m[m.length-1].containerHeight),e.createElement("div",{className:"react-photo-gallery--gallery"},e.createElement("div",{ref:function(e){return t._gallery=e},style:y},m.map(function(n,r){var i=n.left,a=n.top,u=(n.containerHeight,f(n,["left","top","containerHeight"]));return e.createElement(o,{key:n.key||n.src,margin:c,index:r,photo:u,direction:s,left:i,top:a,onClick:l?t.handleClick:null})})))}}]),r}(e.Component));return y.defaultProps={margin:2,direction:"row"},y}); |
@@ -73,2 +73,3 @@ 'use strict'; | ||
this.animationFrameID = null; | ||
this.observer = new _resizeObserverPolyfill2.default(function (entries) { | ||
@@ -78,3 +79,7 @@ // only do something if width changes | ||
if (_this2.state.containerWidth !== newWidth) { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
// put in an animation frame to stop "benign errors" from | ||
// ResizObserver https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded | ||
_this2.animationFrameID = window.requestAnimationFrame(function () { | ||
_this2.setState({ containerWidth: Math.floor(newWidth) }); | ||
}); | ||
} | ||
@@ -88,2 +93,3 @@ }); | ||
this.observer.disconnect(); | ||
window.cancelAnimationFrame(this.animationFrameID); | ||
} | ||
@@ -97,5 +103,9 @@ }, { | ||
// no containerWidth until after first render with refs, skip calculations and render nothing | ||
if (!containerWidth) return _react2.default.createElement('div', { ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }); | ||
if (!containerWidth) return _react2.default.createElement( | ||
'div', | ||
{ ref: function ref(c) { | ||
return _this3._gallery = c; | ||
} }, | ||
'\xA0' | ||
); | ||
var _props$ImageComponent = this.props.ImageComponent, | ||
@@ -102,0 +112,0 @@ ImageComponent = _props$ImageComponent === undefined ? _Photo2.default : _props$ImageComponent; |
{ | ||
"name": "react-photo-gallery", | ||
"version": "6.2.1", | ||
"version": "6.2.2", | ||
"description": "Responsive React Masonry Photo Gallery Component", | ||
@@ -47,4 +47,4 @@ "main": "lib/Gallery.js", | ||
"prettier": "^1.6.1", | ||
"react": "^16.3.2", | ||
"react-dom": "^16.3.2", | ||
"react": "16.6.3", | ||
"react-dom": "16.6.3", | ||
"react-images": "^0.5.18", | ||
@@ -51,0 +51,0 @@ "react-test-renderer": "^16.1.1", |
@@ -12,2 +12,3 @@ import React from 'react'; | ||
componentDidMount() { | ||
this.animationFrameID = null; | ||
this.observer = new ResizeObserver(entries => { | ||
@@ -17,3 +18,7 @@ // only do something if width changes | ||
if (this.state.containerWidth !== newWidth) { | ||
this.setState({ containerWidth: Math.floor(newWidth) }); | ||
// put in an animation frame to stop "benign errors" from | ||
// ResizObserver https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded | ||
this.animationFrameID = window.requestAnimationFrame(() => { | ||
this.setState({ containerWidth: Math.floor(newWidth) }); | ||
}); | ||
} | ||
@@ -25,2 +30,3 @@ }); | ||
this.observer.disconnect(); | ||
window.cancelAnimationFrame(this.animationFrameID); | ||
} | ||
@@ -40,3 +46,3 @@ handleClick = (event, { index }) => { | ||
// no containerWidth until after first render with refs, skip calculations and render nothing | ||
if (!containerWidth) return <div ref={c => (this._gallery = c)} />; | ||
if (!containerWidth) return <div ref={c => (this._gallery = c)}> </div>; | ||
const { ImageComponent = Photo } = this.props; | ||
@@ -43,0 +49,0 @@ // subtract 1 pixel because the browser may round up a pixel |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
905987
2817