f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 07:42:39 +00:00
Code Wiki Activity

Run ESLint auto lint (spaces to tabs mostly)

Browse Source
This commit is contained in:
Gazook89
2024-08-17 13:57:50 -05:00
parent 5ee4ada112
commit ee4eb19f1e
1 changed files with 140 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -6,160 +6,160 @@ const maxZoom = 300;
const minZoom = 10; const minZoom = 10;
const zoomStep = 10; const zoomStep = 10;
const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => { const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{
const [state, setState] = useState({ const [state, setState] = useState({
currentPage: currentPage, currentPage : currentPage,
totalPages: totalPages, totalPages : totalPages,
zoomLevel: 100, zoomLevel : 100,
pageNumberInput: currentPage, pageNumberInput : currentPage,
zoomInput: 100, zoomInput : 100,
}); });
useEffect(() => { useEffect(()=>{
updateZoom(state.zoomLevel); updateZoom(state.zoomLevel);
}, [state.zoomLevel]); }, [state.zoomLevel]);
useEffect(() => { useEffect(()=>{
setState((prevState) => ({ setState((prevState)=>({
...prevState, ...prevState,
currentPage: currentPage, currentPage : currentPage,
pageNumberInput: currentPage, pageNumberInput : currentPage,
})); }));
}, [currentPage]); }, [currentPage]);
const setZoomLevel = (direction) => { const setZoomLevel = (direction)=>{
let zoomLevel = state.zoomLevel; let zoomLevel = state.zoomLevel;
if (direction === 'in') { if(direction === 'in') {
zoomLevel += zoomStep; zoomLevel += zoomStep;
} else { } else {
zoomLevel -= zoomStep; zoomLevel -= zoomStep;
} }
setState((prevState) => ({ setState((prevState)=>({
...prevState, ...prevState,
zoomLevel: zoomLevel, zoomLevel : zoomLevel,
zoomInput: zoomLevel, zoomInput : zoomLevel,
})); }));
}; };
const handleInputChange = (value, type) => { const handleInputChange = (value, type)=>{
const newValue = parseInt(value, 10); const newValue = parseInt(value, 10);
if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) { if(type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
setState((prevState) => ({ setState((prevState)=>({
...prevState, ...prevState,
zoomInput: newValue, zoomInput : newValue,
})); }));
} else if (type === 'page' && newValue >= 1 && newValue <= totalPages) { } else if(type === 'page' && newValue >= 1 && newValue <= totalPages) {
setState((prevState) => ({ setState((prevState)=>({
...prevState, ...prevState,
pageNumberInput: newValue, pageNumberInput : newValue,
})); }));
} }
}; };
return ( return (
<div className="toolBar"> <div className='toolBar'>
<div className="tool"> <div className='tool'>
<button <button
onClick={() => setZoomLevel('out')} onClick={()=>setZoomLevel('out')}
disabled={state.zoomLevel <= minZoom} disabled={state.zoomLevel <= minZoom}
> >
Zoom Out Zoom Out
</button> </button>
</div> </div>
<div className="tool"> <div className='tool'>
<input <input
className="slider" className='slider'
type="range" type='range'
name="zoom" name='zoom'
list="zoomLevels" list='zoomLevels'
min={minZoom} min={minZoom}
max={maxZoom} max={maxZoom}
step={zoomStep} step={zoomStep}
value={state.zoomInput} value={state.zoomInput}
onChange={(e) => handleInputChange(e.target.value, 'zoom')} onChange={(e)=>handleInputChange(e.target.value, 'zoom')}
onMouseUp={(e) => { onMouseUp={(e)=>{
const newZoomLevel = parseInt(e.target.value, 10); const newZoomLevel = parseInt(e.target.value, 10);
if (newZoomLevel !== state.zoomLevel) { if(newZoomLevel !== state.zoomLevel) {
setState((prevState) => ({ setState((prevState)=>({
...prevState, ...prevState,
zoomLevel: newZoomLevel, zoomLevel : newZoomLevel,
zoomInput: newZoomLevel, zoomInput : newZoomLevel,
})); }));
updateZoom(newZoomLevel); updateZoom(newZoomLevel);
} }
}} }}
/> />
<datalist id="zoomLevels"> <datalist id='zoomLevels'>
{Array.from( {Array.from(
{ {
length: length :
Math.floor((maxZoom - minZoom) / zoomStep) + 1, Math.floor((maxZoom - minZoom) / zoomStep) + 1,
}, },
(_, i) => minZoom + i * zoomStep (_, i)=>minZoom + i * zoomStep
).map((option) => ( ).map((option)=>(
<option key={option} value={option} /> <option key={option} value={option} />
))} ))}
</datalist> </datalist>
</div> </div>
<div className="tool"> <div className='tool'>
<button <button
onClick={() => setZoomLevel('in')} onClick={()=>setZoomLevel('in')}
disabled={state.zoomLevel >= maxZoom} disabled={state.zoomLevel >= maxZoom}
> >
Zoom In Zoom In
</button> </button>
</div> </div>
<div className="tool"> <div className='tool'>
<button <button
className="previousPage" className='previousPage'
onClick={() => { onClick={()=>{
console.log(`page is ${state.currentPage}`); console.log(`page is ${state.currentPage}`);
onPageChange(state.currentPage - 2); onPageChange(state.currentPage - 2);
}} }}
disabled={state.currentPage <= 1} disabled={state.currentPage <= 1}
> >
<i className="fas fa-arrow-left"></i> <i className='fas fa-arrow-left'></i>
</button> </button>
</div> </div>
<input <input
type="number" type='number'
name="page" name='page'
min={1} min={1}
max={state.totalPages} max={state.totalPages}
id="pageInput" id='pageInput'
value={state.pageNumberInput} value={state.pageNumberInput}
onChange={(e) => handleInputChange(e.target.value, 'page')} onChange={(e)=>handleInputChange(e.target.value, 'page')}
onBlur={(e) => { onBlur={(e)=>{
parseInt(state.pageNumberInput) === state.currentPage || parseInt(state.pageNumberInput) === state.currentPage ||
onPageChange(parseInt(state.pageNumberInput) - 1); onPageChange(parseInt(state.pageNumberInput) - 1);
}} }}
onKeyPress={(e) => { onKeyPress={(e)=>{
if (e.key === 'Enter') { if(e.key === 'Enter') {
e.target.blur(); e.target.blur();
} }
}} }}
/> />
<div className="tool"> <div className='tool'>
<button <button
className="nextPage" className='nextPage'
onClick={() => { onClick={()=>{
console.log( console.log(
`page is ${state.currentPage} and i move to ${state.currentPage}` `page is ${state.currentPage} and i move to ${state.currentPage}`
); );
onPageChange(state.currentPage); onPageChange(state.currentPage);
}} }}
disabled={state.currentPage >= state.totalPages} disabled={state.currentPage >= state.totalPages}
> >
<i className="fas fa-arrow-right"></i> <i className='fas fa-arrow-right'></i>
</button> </button>
</div> </div>
</div> </div>
); );
}; };
module.exports = ToolBar; module.exports = ToolBar;