Skip to content

Commit 68256bf

Browse files
author
Andrew Dillon
committed
Fix layout when panels are hidden/shown
1 parent 2e0c740 commit 68256bf

File tree

5 files changed

+43
-58
lines changed

5 files changed

+43
-58
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"react": "^16.7.0",
1010
"react-ace": "^6.3.2",
1111
"react-dom": "^16.7.0",
12+
"react-measure": "^2.2.4",
1213
"react-pose": "^4.0.6",
1314
"react-scripts": "2.1.3",
1415
"uuid": "^3.3.2"

src/components/CallStack.js

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* @flow */
22
import React from 'react';
33
import posed, { PoseGroup } from 'react-pose'
4+
import Measure from 'react-measure';
45

56
import { withStyles } from '@material-ui/core/styles';
67
import RootRef from '@material-ui/core/RootRef';
@@ -79,57 +80,35 @@ type Props = {
7980
};
8081

8182
class CallStack extends React.Component<Props> {
82-
state = { contentWidth: undefined, contentHeight: undefined };
83+
state = { width: undefined, height: undefined };
8384

84-
contentRef = React.createRef();
85-
86-
componentDidMount() {
87-
this.handleResize();
88-
window.addEventListener('resize', this.handleResize);
89-
}
90-
91-
componentWillUnmount() {
92-
window.removeEventListener('resize', this.handleResize);
93-
}
94-
95-
handleResize = () => {
96-
const { width, height } = this.getContentDims();
97-
this.setState({ contentWidth: width, contentHeight: height });
98-
}
99-
100-
getContentDims = () => {
101-
const contentDiv = this.contentRef.current;
102-
return contentDiv
103-
? { width: contentDiv.clientWidth, height: contentDiv.clientHeight }
104-
: { width: undefined, height: undefined };
85+
handleResize = ({ bounds: { width, height } }) => {
86+
this.setState({ width, height });
10587
}
10688

10789
render() {
10890
const { classes, frames, onClickAbout } = this.props;
109-
const { contentWidth, contentHeight } = this.state;
91+
const { width, height } = this.state;
11092

11193
return (
11294
<Card className={classes.card}>
11395
<CardContent className={classes.content}>
11496
<CardHeaderWithAbout title="Call Stack" onClickAbout={onClickAbout} />
11597
<div style={{ display: 'flex', flexDirection: 'row', flex: 1 }}>
116-
<div ref={this.contentRef} style={{ flex: 1 }} />
98+
<Measure bounds onResize={this.handleResize}>
99+
{({ measureRef: ref }) => <div ref={ref} style={{ flex: 1 }} />}
100+
</Measure>
117101
<div
118-
style={{
119-
width: contentWidth,
120-
height: contentHeight,
121-
position: 'absolute',
122-
}}
102+
style={{ width, height, position: 'absolute' }}
123103
className="scroll-on-hover-y"
124104
>
125105
<div
126106
style={{
127107
display: 'flex',
128108
flexDirection: 'column-reverse',
129-
minHeight: contentHeight,
109+
minHeight: height,
130110
}}
131111
>
132-
{/*<PoseGroup preEnterPose="preEnter">*/}
133112
<PoseGroup>
134113
{frames.map(({ id, name }, idx) => (
135114
<FrameDiv

src/components/Drawer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Drawer = ({
3838
onClose: void => any,
3939
|}) => (
4040
<MUIDrawer open={open} onClose={onClose}>
41-
<FormControl component="visiblePanels" className={classes.formControl}>
41+
<FormControl component="div" className={classes.formControl}>
4242
<FormLabel component="legend">Visible Panels</FormLabel>
4343
<FormGroup>
4444
<FormControlLabel

src/components/TaskQueue.js

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* @flow */
22
import React from 'react';
33
import posed, { PoseGroup } from 'react-pose'
4+
import Measure from 'react-measure';
45

56
import { withStyles } from '@material-ui/core/styles';
67
import RootRef from '@material-ui/core/RootRef';
@@ -34,6 +35,7 @@ const styles = theme => ({
3435
margin: theme.spacing.unit,
3536
display: 'inline-block',
3637
textAlign: 'center',
38+
minWidth: 125,
3739
},
3840
});
3941

@@ -83,45 +85,28 @@ type Props = {
8385
};
8486

8587
class TaskQueue extends React.Component<Props> {
86-
state = { contentWidth: undefined, contentHeight: undefined };
88+
state = { width: undefined, height: undefined };
8789

88-
contentRef = React.createRef();
89-
90-
componentDidMount() {
91-
this.handleResize();
92-
window.addEventListener('resize', this.handleResize);
93-
}
94-
95-
componentWillUnmount() {
96-
window.removeEventListener('resize', this.handleResize);
97-
}
98-
99-
handleResize = () => {
100-
const { width, height } = this.getContentDims();
101-
this.setState({ contentWidth: width, contentHeight: height });
102-
}
103-
104-
getContentDims = () => {
105-
const contentDiv = this.contentRef.current;
106-
return contentDiv
107-
? { width: contentDiv.clientWidth, height: contentDiv.clientHeight }
108-
: { width: undefined, height: undefined };
90+
handleResize = ({ bounds: { width, height } }) => {
91+
this.setState({ width, height });
10992
}
11093

11194
render() {
11295
const { classes, tasks, title, onClickAbout } = this.props;
113-
const { contentWidth, contentHeight } = this.state;
96+
const { width, height } = this.state;
11497

11598
return (
11699
<Card className={classes.card}>
117100
<CardContent className={classes.content}>
118101
<CardHeaderWithAbout title={title} onClickAbout={onClickAbout} slideButtonLeft />
119102
<div style={{ display: 'flex', flexDirection: 'row', flex: 1 }}>
120-
<div ref={this.contentRef} style={{ flex: 1 }} />
103+
<Measure bounds onResize={this.handleResize}>
104+
{({ measureRef: ref }) => <div ref={ref} style={{ flex: 1 }} />}
105+
</Measure>
121106
<div
122107
style={{
123-
width: contentWidth,
124-
height: contentHeight,
108+
width,
109+
height,
125110
position: 'absolute',
126111
display: 'flex',
127112
flexWrap: 'nowrap',

yarn.lock

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4264,6 +4264,11 @@ get-caller-file@^1.0.1:
42644264
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
42654265
integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
42664266

4267+
get-node-dimensions@^1.2.1:
4268+
version "1.2.1"
4269+
resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
4270+
integrity sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==
4271+
42674272
get-own-enumerable-property-symbols@^3.0.0:
42684273
version "3.0.0"
42694274
resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
@@ -8329,6 +8334,16 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
83298334
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
83308335
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
83318336

8337+
react-measure@^2.2.4:
8338+
version "2.2.4"
8339+
resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.2.4.tgz#cec3d96d3c39e22660e958e26d5498e4a342b9e4"
8340+
integrity sha512-gpZA4J8sKy1TzTfnOXiiTu01GV8B5OyfF9k7Owt38T6Xxlll19PBE13HKTtauEmDdJO5u4o3XcTiGqCw5wpfjw==
8341+
dependencies:
8342+
"@babel/runtime" "^7.2.0"
8343+
get-node-dimensions "^1.2.1"
8344+
prop-types "^15.6.2"
8345+
resize-observer-polyfill "^1.5.0"
8346+
83328347
react-pose@^4.0.6:
83338348
version "4.0.6"
83348349
resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-4.0.6.tgz#265a9814eea48898dd653a92e998fc86a1366fb4"
@@ -8717,6 +8732,11 @@ requires-port@^1.0.0:
87178732
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
87188733
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
87198734

8735+
resize-observer-polyfill@^1.5.0:
8736+
version "1.5.1"
8737+
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
8738+
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
8739+
87208740
resolve-cwd@^2.0.0:
87218741
version "2.0.0"
87228742
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

0 commit comments

Comments
 (0)