Merge pull request #732 from prymitive/fix-resize

fix(ui): use width passed by ReactResizeDetector instead of body width
This commit is contained in:
Łukasz Mierzwa
2019-05-27 14:06:31 +02:00
committed by GitHub
4 changed files with 20 additions and 20 deletions
+6
View File
@@ -36,3 +36,9 @@ require (
)
replace github.com/ugorji/go v1.1.4 => github.com/ugorji/go/codec v0.0.0-20190204201341-e444a5086c43
replace mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b => github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b
replace mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed => github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed
replace mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34 => github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34
+6 -6
View File
@@ -253,6 +253,12 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJ
github.com/modern-go/reflect2 v1.0.1 h1:9f412s+6RmYXLWZSEzVVgPGK7C2PphHj5RJrvfx9AWI=
github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
github.com/mozilla/tls-observatory v0.0.0-20180409132520-8791a200eb40/go.mod h1:SrKMQvPiws7F7iqYp8/TX+IhxCYhzr6N/1yb8cwHsGk=
github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed h1:mGBgkU/wFP6546zxexkPvWKPnrhQyIKjwaftXE9FsUg=
github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed/go.mod h1:HZyYWztN8sP9MkjbyBePK07am8lX+41udLsQYR4on7I=
github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b h1:FXf3dVRWKHVhfcpN1MljYg2chYEgZHvef2cxW7f1sbE=
github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b/go.mod h1:XD5S+wekDbY/hz8elAl7F+EtNk9+ZGhSoxUUPVvX2L8=
github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34 h1:AROwEpyhD+3eg48uFC6+Lq3faBJzg5GYltD7TK0ITeU=
github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34/go.mod h1:H6SUd1XjIs+qQCyskXg5OFSrilMRUkD8ePJpHKDPaeY=
github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
github.com/nbutton23/zxcvbn-go v0.0.0-20160627004424-a22cb81b2ecd/go.mod h1:o96djdrsSGy3AWPyBgZMAGfxZNfgntdJG+11KU4QvbU=
github.com/nbutton23/zxcvbn-go v0.0.0-20171102151520-eafdab6b0663 h1:Ri1EhipkbhWsffPJ3IPlrb4SkTOPa2PfRXp3jchBczw=
@@ -428,12 +434,6 @@ gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed h1:WX1yoOaKQfddO/mLzdV4wptyWgoH/6hwLs7QHTixo0I=
mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed/go.mod h1:Xkxe497xwlCKkIaQYRfC7CSLworTXY9RMqwhhCm+8Nc=
mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b h1:DxJ5nJdkhDlLok9K6qO+5290kphDJbHOQO1DFFFTeBo=
mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b/go.mod h1:2odslEg/xrtNQqCYg2/jCoyKnw3vv5biOc3JnIcYfL4=
mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34 h1:B1LAOfRqg2QUyCdzfjf46quTSYUTAK5OCwbh6pljHbM=
mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34/go.mod h1:H6SUd1XjIs+qQCyskXg5OFSrilMRUkD8ePJpHKDPaeY=
sourcegraph.com/sourcegraph/go-diff v0.5.1-0.20190210232911-dee78e514455 h1:qoQ5Kt+Zm+GXBtz49YwD3juBhr/E0U25jO6bBzxW6NI=
sourcegraph.com/sourcegraph/go-diff v0.5.1-0.20190210232911-dee78e514455/go.mod h1:kuch7UrkMzY0X+p9CRK03kfuPQ2zzQcaEFbx8wA8rck=
sourcegraph.com/sqs/pbtypes v0.0.0-20180604144634-d3ebe8f20ae4 h1:JPJh2pk3+X4lXAkZIk2RuE/7/FoK9maXw+TNPJhVS/c=
+3 -2
View File
@@ -82,8 +82,8 @@ const AlertGrid = observer(
this.viewport = observable(
{
width: document.body.clientWidth,
update() {
this.width = document.body.clientWidth;
update(width, height) {
this.width = width;
},
get gridSizesConfig() {
return GridSizesConfig(
@@ -240,6 +240,7 @@ const AlertGrid = observer(
<React.Fragment>
<ReactResizeDetector
handleWidth
handleHeight
onResize={debounce(this.viewport.update, 100)}
/>
<MasonryInfiniteScroller
+5 -12
View File
@@ -14,15 +14,9 @@ import { AlertGrid } from ".";
let alertStore;
let settingsStore;
let silenceFormStore;
let bodyWidth;
beforeAll(() => {
jest.useFakeTimers();
Object.defineProperty(document.body, "clientWidth", {
get: () => {
return bodyWidth;
}
});
});
beforeEach(() => {
@@ -82,9 +76,9 @@ const MockGroupList = (count, alertPerGroup) => {
};
const VerifyColumnCount = (innerWidth, columns) => {
bodyWidth = innerWidth;
MockGroupList(60, 5);
const tree = ShallowAlertGrid();
tree.instance().viewport.update(innerWidth, 500);
expect(
tree
.find("AlertGroup")
@@ -444,9 +438,10 @@ describe("<AlertGrid />", () => {
});
it("viewport resize also resizes alert groups", () => {
bodyWidth = 1980;
MockGroupList(60, 5);
const tree = ShallowAlertGrid();
// set initial width
tree.instance().viewport.update(1980, 500);
expect(
tree
.find("AlertGroup")
@@ -454,10 +449,8 @@ describe("<AlertGrid />", () => {
.props().style.width
).toBe(1980 / 4);
bodyWidth = 1000;
// not sure how to force ReactResizeDetector to detect width change, so
// we directly call viewport update here
tree.instance().viewport.update();
// then resize and verify if column count was changed
tree.instance().viewport.update(1000, 500);
expect(
tree
.find("AlertGroup")