mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-08 09:42:43 +00:00
setZoomLevel to no longer use if/else
Remove the 'in'/'out' parameter of the function and just have the buttons send postive or negative integers equal to the desired change in the zoom. No need for if/else statements using strings.
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
require('./toolBar.less');
|
require('./toolBar.less');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const { useState, useEffect } = React;
|
const { useState, useEffect } = React;
|
||||||
|
const _ = require('lodash')
|
||||||
|
|
||||||
const maxZoom = 300;
|
const maxZoom = 300;
|
||||||
const minZoom = 10;
|
const minZoom = 10;
|
||||||
@@ -26,13 +27,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
|
|||||||
}));
|
}));
|
||||||
}, [currentPage]);
|
}, [currentPage]);
|
||||||
|
|
||||||
const setZoomLevel = (direction)=>{
|
const setZoomLevel = (delta)=>{
|
||||||
let zoomLevel = state.zoomLevel;
|
const zoomLevel = _.clamp(state.zoomLevel + delta, minZoom, maxZoom);
|
||||||
if(direction === 'in') {
|
|
||||||
zoomLevel += zoomStep;
|
|
||||||
} else {
|
|
||||||
zoomLevel -= zoomStep;
|
|
||||||
}
|
|
||||||
|
|
||||||
setState((prevState)=>({
|
setState((prevState)=>({
|
||||||
...prevState,
|
...prevState,
|
||||||
@@ -45,7 +41,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
|
|||||||
<div className='toolBar'>
|
<div className='toolBar'>
|
||||||
<div className='tool'>
|
<div className='tool'>
|
||||||
<button
|
<button
|
||||||
onClick={()=>setZoomLevel('out')}
|
onClick={()=>setZoomLevel(-20)}
|
||||||
disabled={state.zoomLevel <= minZoom}
|
disabled={state.zoomLevel <= minZoom}
|
||||||
>
|
>
|
||||||
<i className='fas fa-magnifying-glass-minus' />
|
<i className='fas fa-magnifying-glass-minus' />
|
||||||
@@ -80,7 +76,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
|
|||||||
|
|
||||||
<div className='tool'>
|
<div className='tool'>
|
||||||
<button
|
<button
|
||||||
onClick={()=>setZoomLevel('in')}
|
onClick={()=>setZoomLevel(20)}
|
||||||
disabled={state.zoomLevel >= maxZoom}
|
disabled={state.zoomLevel >= maxZoom}
|
||||||
>
|
>
|
||||||
<i className='fas fa-magnifying-glass-plus' />
|
<i className='fas fa-magnifying-glass-plus' />
|
||||||
|
|||||||
Reference in New Issue
Block a user