Refactor variable names

This commit is contained in:
Vitor Mateus 2019-02-06 14:05:24 -02:00
parent 3948c8adb6
commit 100d9a4825
3 changed files with 41 additions and 31 deletions

View File

@ -244,7 +244,7 @@ class PresentationToolbar extends Component {
? (
<span className={styles.zoomWrapper}>
<ZoomTool
value={zoom}
zoomValue={zoom}
change={this.change}
minBound={HUNDRED_PERCENT}
maxBound={MAX_PERCENT}

View File

@ -122,4 +122,14 @@
display: flex;
align-items: center;
justify-content: center;
border-top: 0 !important;
border-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
&:hover{
opacity: .5;
border-left: var(--toolbar-button-border) solid var(--toolbar-button-border-color) !important;
border-right: var(--toolbar-button-border) solid var(--toolbar-button-border-color) !important;
}
}

View File

@ -61,29 +61,29 @@ export default class ZoomTool extends Component {
this.onChanger = this.onChanger.bind(this);
this.setInt = 0;
this.state = {
stateValue: props.value,
initialStateValue: props.value,
stateZoomValue: props.zoomValue,
initialstateZoomValue: props.zoomValue,
mouseHolding: false,
};
}
componentDidUpdate() {
const { value } = this.props;
const { stateValue } = this.state;
const isDifferent = value !== stateValue;
if (isDifferent) this.onChanger(value);
const { zoomValue } = this.props;
const { stateZoomValue } = this.state;
const isDifferent = zoomValue !== stateZoomValue;
if (isDifferent) this.onChanger(zoomValue);
}
onChanger(val) {
onChanger(value) {
const {
maxBound,
minBound,
change,
value,
zoomValue,
} = this.props;
const { stateValue } = this.state;
let newValue = val;
const isDifferent = newValue !== stateValue;
const { stateZoomValue } = this.state;
let newValue = value;
const isDifferent = newValue !== stateZoomValue;
if (newValue <= minBound) {
newValue = minBound;
@ -91,21 +91,21 @@ export default class ZoomTool extends Component {
newValue = maxBound;
}
const propsIsDifferente = value !== newValue;
const propsIsDifferente = zoomValue !== newValue;
if (isDifferent && propsIsDifferente) {
this.setState({ stateValue: newValue }, () => {
this.setState({ stateZoomValue: newValue }, () => {
change(newValue);
});
}
if (isDifferent && !propsIsDifferente) this.setState({ stateValue: newValue });
if (isDifferent && !propsIsDifferente) this.setState({ stateZoomValue: newValue });
}
increment() {
const {
step,
} = this.props;
const { stateValue } = this.state;
const increaseZoom = stateValue + step;
const { stateZoomValue } = this.state;
const increaseZoom = stateZoomValue + step;
this.onChanger(increaseZoom);
}
@ -113,8 +113,8 @@ export default class ZoomTool extends Component {
const {
step,
} = this.props;
const { stateValue } = this.state;
const decreaseZoom = stateValue - step;
const { stateZoomValue } = this.state;
const decreaseZoom = stateZoomValue - step;
this.onChanger(decreaseZoom);
}
@ -149,17 +149,17 @@ export default class ZoomTool extends Component {
}
resetZoom() {
const { stateValue, initialStateValue } = this.state;
if (stateValue !== initialStateValue) this.onChanger(initialStateValue);
const { stateZoomValue, initialstateZoomValue } = this.state;
if (stateZoomValue !== initialstateZoomValue) this.onChanger(initialstateZoomValue);
}
render() {
const {
value,
zoomValue,
minBound,
maxBound,
} = this.props;
const { stateValue } = this.state;
const { stateZoomValue } = this.state;
return (
[
ZoomTool.renderAriaLabelsDescs(),
@ -167,7 +167,7 @@ export default class ZoomTool extends Component {
<HoldButton
key="zoom-tool-1"
exec={this.decrement}
value={value}
value={zoomValue}
minBound={minBound}
>
<Button
@ -178,7 +178,7 @@ export default class ZoomTool extends Component {
label="-"
icon="minus"
onClick={() => { }}
disabled={(value <= minBound)}
disabled={(zoomValue <= minBound)}
className={styles.prevSlide}
hideLabel
/>
@ -189,21 +189,21 @@ export default class ZoomTool extends Component {
key="zoom-tool-2"
role="button"
aria-labelledby="zoomIndicator"
aria-describedby={stateValue}
aria-describedby={stateZoomValue}
color="default"
customIcon={`${stateValue}%`}
customIcon={`${stateZoomValue}%`}
size="md"
onClick={() => this.resetZoom()}
label="Reset Zoom"
hideLabel
className={styles.prevSlide}
className={styles.zoomPercentageDisplay}
/>
),
(
<HoldButton
key="zoom-tool-3"
exec={this.increment}
value={value}
value={zoomValue}
maxBound={maxBound}
>
<Button
@ -214,7 +214,7 @@ export default class ZoomTool extends Component {
label="+"
icon="plus"
onClick={() => { }}
disabled={(value >= maxBound)}
disabled={(zoomValue >= maxBound)}
className={styles.skipSlide}
hideLabel
/>
@ -226,7 +226,7 @@ export default class ZoomTool extends Component {
}
const propTypes = {
value: PropTypes.number.isRequired,
zoomValue: PropTypes.number.isRequired,
change: PropTypes.func.isRequired,
minBound: PropTypes.number.isRequired,
maxBound: PropTypes.number.isRequired,