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