From 1e2240faff60042d6edbc1f3f81a09536786eca6 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Sun, 27 Aug 2017 04:05:51 -0400
Subject: [PATCH] fixed lint errors from stage zoom update
---
src/components/stage-header/stage-header.jsx | 46 ++++++++++----------
src/components/stage/stage.jsx | 12 ++---
src/containers/stage-header.jsx | 18 ++++----
src/containers/stage.jsx | 27 +++++++-----
4 files changed, 53 insertions(+), 50 deletions(-)
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index ffd7d0db6..635d161ba 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -11,26 +11,25 @@ import styles from './stage-header.css';
const StageHeaderComponent = function (props) {
const {
- isZoomed,
- onZoom,
- onUnzoom,
- width,
- height,
- vm,
className,
- title,
- titleZoomIcon,
+ height,
+ isZoomed,
+ onUnzoom,
+ onZoom,
+ titleZoomIcon,
+ vm,
+ width,
...componentProps
} = props;
return isZoomed === false ? (
<Box className={styles.stageHeaderWrapper}>
<Box
- className={styles.stageMenuWrapper}
- height={height}
+ className={styles.stageMenuWrapper}
+ height={height}
width={width}
- >
+ >
<Controls vm={vm} />
- <img
+ <img
className={classNames(
className,
styles.stageZoomIcon
@@ -44,11 +43,11 @@ const StageHeaderComponent = function (props) {
</Box>
) : (
<Box className={styles.stageHeaderWrapperOverlay}>
- <Box
- className={styles.stageMenuWrapper}
- height={"100%"}
- width={"100%"}
- >
+ <Box
+ className={styles.stageMenuWrapper}
+ height={'100%'}
+ width={'100%'}
+ >
<Controls vm={vm} />
<img
className={classNames(
@@ -65,19 +64,18 @@ const StageHeaderComponent = function (props) {
);
};
StageHeaderComponent.propTypes = {
+ className: PropTypes.string,
+ height: PropTypes.number,
isZoomed: PropTypes.bool.isRequired,
- onZoom: PropTypes.func.isRequired,
onUnzoom: PropTypes.func.isRequired,
- height: PropTypes.number,
- width: PropTypes.number,
- className: PropTypes.string,
- title: PropTypes.string,
- titleZoomIcon: PropTypes.string
+ onZoom: PropTypes.func.isRequired,
+ titleZoomIcon: PropTypes.string,
+ vm: PropTypes.instanceOf(VM).isRequired,
+ width: PropTypes.number
};
StageHeaderComponent.defaultProps = {
width: 480,
height: 360,
- title: 'Stage Header',
titleZoomIcon: 'Zoom Control'
};
export default StageHeaderComponent;
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 79133ebb0..afb68e2d0 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -7,10 +7,10 @@ import styles from './stage.css';
const StageComponent = props => {
const {
- isZoomed,
canvasRef,
- width,
height,
+ isZoomed,
+ width,
...boxProps
} = props;
return isZoomed === false ? (
@@ -33,20 +33,20 @@ const StageComponent = props => {
className={styles.stage}
componentRef={canvasRef}
element="canvas"
- height={"100%"}
- width={"100%"}
+ height={'100%'}
+ width={'100%'}
{...boxProps}
/>
<Box className={styles.monitorWrapper}>
<MonitorList />
</Box>
- </Box>
+ </Box>
);
};
StageComponent.propTypes = {
- isZoomed: PropTypes.bool.isRequired,
canvasRef: PropTypes.func,
height: PropTypes.number,
+ isZoomed: PropTypes.bool.isRequired,
width: PropTypes.number
};
StageComponent.defaultProps = {
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 8d5680bbd..8a853473b 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -19,16 +19,18 @@ class StageHeader extends React.Component {
};
}
shouldComponentUpdate (nextProps, nextState) {
- return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.state.isZoomed !== nextState.isZoomed;
+ return this.props.width !== nextProps.width ||
+ this.props.height !== nextProps.height ||
+ this.state.isZoomed !== nextState.isZoomed;
}
handleZoom () {
this.setState({isZoomed: true});
- this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: true });
+ this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: true});
}
handleUnzoom () {
this.setState({isZoomed: false});
- this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: false });
+ this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: false});
}
render () {
const {
@@ -38,9 +40,9 @@ class StageHeader extends React.Component {
return (
<StageHeaderComponent
isZoomed={this.state.isZoomed}
- onZoom={this.handleZoom}
+ vm={this.props.vm}
onUnzoom={this.handleUnzoom}
- vm={this.props.vm}
+ onZoom={this.handleZoom}
{...props}
/>
);
@@ -48,9 +50,10 @@ class StageHeader extends React.Component {
}
StageHeader.propTypes = {
+ dispatch: PropTypes.func.isRequired,
height: PropTypes.number,
- width: PropTypes.number,
- vm: PropTypes.instanceOf(VM).isRequired
+ vm: PropTypes.instanceOf(VM).isRequired,
+ width: PropTypes.number
};
const mapStateToProps = state => ({
@@ -60,4 +63,3 @@ const mapStateToProps = state => ({
export default connect(
mapStateToProps
)(StageHeader);
-
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 68854d3f6..e80ece5aa 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -34,13 +34,6 @@ class Stage extends React.Component {
isZoomed: false
};
}
- componentWillReceiveProps(nextProps) {
- const {
- isZoomed
- } = nextProps;
-
- this.setState({isZoomed: isZoomed});
- }
componentDidMount () {
this.attachRectEvents();
this.attachMouseEvents(this.canvas);
@@ -48,12 +41,21 @@ class Stage extends React.Component {
this.renderer = new Renderer(this.canvas);
this.props.vm.attachRenderer(this.renderer);
}
+ componentWillReceiveProps (nextProps) {
+ const {
+ isZoomed
+ } = nextProps;
+
+ this.setState({isZoomed: isZoomed});
+ }
shouldComponentUpdate (nextProps, nextState) {
- return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.state.isZoomed !== nextState.isZoomed;
+ return this.props.width !== nextProps.width ||
+ this.props.height !== nextProps.height ||
+ this.state.isZoomed !== nextState.isZoomed;
}
- componentDidUpdate() {
- this.updateRect();
- this.renderer.resize(this.rect.width, this.rect.height);
+ componentDidUpdate () {
+ this.updateRect();
+ this.renderer.resize(this.rect.width, this.rect.height);
}
componentWillUnmount () {
this.detachMouseEvents(this.canvas);
@@ -209,8 +211,8 @@ class Stage extends React.Component {
} = this.props;
return (
<StageComponent
- isZoomed={this.state.isZoomed}
canvasRef={this.setCanvas}
+ isZoomed={this.state.isZoomed}
onDoubleClick={this.handleDoubleClick}
{...props}
/>
@@ -220,6 +222,7 @@ class Stage extends React.Component {
Stage.propTypes = {
height: PropTypes.number,
+ isZoomed: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired,
width: PropTypes.number
};
--
GitLab