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

last changes as suggested

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-26 22:54:16 +02:00
parent 843aa6d769
commit 43441f3185
1 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
require('./splitPane.less'); require('./splitPane.less');
const React = require('react'); const React = require('react');
const { useState, useEffect, useRef } = React; const { useState, useEffect } = React;
const cx = require('classnames');
const storageKey = 'naturalcrit-pane-split';
const SplitPane = (props)=>{ const SplitPane = (props)=>{
const { const {
storageKey = 'naturalcrit-pane-split',
onDragFinish = ()=>{}, onDragFinish = ()=>{},
showDividerButtons = true showDividerButtons = true
} = props; } = props;
@@ -17,26 +17,25 @@ const SplitPane = (props)=>{
const [showMoveArrows, setShowMoveArrows] = useState(true); const [showMoveArrows, setShowMoveArrows] = useState(true);
const [liveScroll, setLiveScroll] = useState(false); const [liveScroll, setLiveScroll] = useState(false);
const dividerRef = useRef(null);
// 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 ? parseInt(savedPos, 10) : window.innerWidth / 2);
setLiveScroll(window.localStorage.getItem('liveScroll') === 'true'); setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
const handleResize = ()=>{
setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))
);
};
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return ()=>window.removeEventListener('resize', handleResize); return ()=>window.removeEventListener('resize', handleResize);
}, [storageKey]); }, []);
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{ const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{
return Math.round(Math.min(max, Math.max(min, x))); return 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 handleUp =(e)=>{ const handleUp =(e)=>{
e.preventDefault(); e.preventDefault();
if(isDragging) { if(isDragging) {
@@ -63,30 +62,26 @@ const SplitPane = (props)=>{
setLiveScroll(!liveScroll); setLiveScroll(!liveScroll);
}; };
const moveArrows = showMoveArrows && ( const renderMoveArrows = (showMoveArrows &&
<> <>
{['left', 'right'].map((direction, index) => ( <div className='arrow left'
<div onClick={()=>setMoveSource(!moveSource)} >
key={direction} <i className='fas fa-arrow-left' />
className={`arrow ${direction}`} </div>
onClick={index === 0 ? () => setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)} <div className='arrow right'
> onClick={()=>setMoveBrew(!moveBrew)} >
<i className={`fas fa-arrow-${direction}`} /> <i className='fas fa-arrow-right' />
</div> </div>
))} <div id='scrollToggleDiv' className={liveScroll ? 'arrow lock' : 'arrow unlock'}
<div onClick={liveScrollToggle} >
id='scrollToggleDiv' <i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
className={`arrow ${liveScroll ? 'lock' : 'unlock'}`}
onClick={liveScrollToggle}
>
<i id='scrollToggle' className={`fas fa-${liveScroll ? 'lock' : 'unlock'}`} />
</div> </div>
</> </>
); );
const renderDivider = ()=>( const renderDivider = (
<div className='divider' onPointerDown={handleDown} ref={dividerRef}> <div className='divider' onPointerDown={handleDown}>
{showDividerButtons && moveArrows} {showDividerButtons && renderMoveArrows}
<div className='dots'> <div className='dots'>
<i className='fas fa-circle' /> <i className='fas fa-circle' />
<i className='fas fa-circle' /> <i className='fas fa-circle' />
@@ -100,19 +95,19 @@ const SplitPane = (props)=>{
<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}> <Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
{props.children[0]} {props.children[0]}
</Pane> </Pane>
{renderDivider()} {renderDivider}
<Pane isDragging={isDragging}>{props.children[1]}</Pane> <Pane isDragging={isDragging}>{props.children[1]}</Pane>
</div> </div>
); );
}; };
const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{ const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
const styles = width const styles = width
? { flex: 'none', width: `${width}px` } ? { flex: 'none', width: `${width}px` }
: { pointerEvents: isDragging ? 'none' : 'auto' }; : { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
return ( return (
<div className={cx('pane', className)} style={styles}> <div className='pane' style={styles}>
{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })} {React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
</div> </div>
); );