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

use storage instead of state to correctly save position while resizing

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-27 10:13:59 +01:00
parent 46eac41021
commit 987063422d
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -11,7 +11,7 @@ const SplitPane = (props)=>{
} = props; } = props;
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null` const [dividerPos, setDividerPos] = useState(null);
const [moveSource, setMoveSource] = useState(false); const [moveSource, setMoveSource] = useState(false);
const [moveBrew, setMoveBrew] = useState(false); const [moveBrew, setMoveBrew] = useState(false);
const [showMoveArrows, setShowMoveArrows] = useState(true); const [showMoveArrows, setShowMoveArrows] = useState(true);
@@ -20,7 +20,7 @@ const SplitPane = (props)=>{
// Set initial divider position and liveScroll only after mounting // Set initial divider position and liveScroll only after mounting
useEffect(()=>{ useEffect(()=>{
const savedPos = window.localStorage.getItem(storageKey); const savedPos = window.localStorage.getItem(storageKey);
setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2); setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
setLiveScroll(window.localStorage.getItem('liveScroll') === 'true'); setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
const handleResize = ()=>setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleUp =(e)=>{ const handleUp =(e)=>{
e.preventDefault(); e.preventDefault();
if(isDragging) { if(isDragging) {
@@ -84,7 +84,7 @@ const SplitPane = (props)=>{
</div> </div>
</div> </div>
); );
return ( return (
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}> <div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}> <Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>