f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 15:12:43 +00:00
Code Wiki Activity

Set button appearance based on state

Browse Source 
Avoid manually editing the DOM elements. Let the Render function update the appearance based on state.
This commit is contained in:
Trevor Buckner
2024-09-09 23:35:18 -04:00
parent 51c8973a85
commit 0fbb4879a9
1 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,19 +107,9 @@ const SplitPane = createClass({
}); });
}, },
liveScrollToggle : function(e) { liveScrollToggle : function() {
const flipLiveScroll = !this.state.liveScroll; window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
const toggle = e.target; this.setState({ liveScroll: !this.state.liveScroll });
const toggleDiv = toggle.parentElement;
if(flipLiveScroll) {
toggle.className = 'fas fa-lock';
toggleDiv.className = 'arrow lock';
} else {
toggle.className = 'fas fa-unlock';
toggleDiv.className = 'arrow unlock';
}
window.localStorage.setItem('liveScroll', String(flipLiveScroll));
this.setState({ liveScroll: flipLiveScroll });
}, },
/* /*
unFocus : function() { unFocus : function() {
@@ -152,10 +142,10 @@ const SplitPane = createClass({
onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} > onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
<i className='fas fa-arrow-right' /> <i className='fas fa-arrow-right' />
</div> </div>
<div id='scrollToggleDiv' className={`arrow lock`} <div id='scrollToggleDiv' className={this.state.liveScroll ? 'arrow lock' : 'arrow unlock'}
style={{ left: this.state.currentDividerPos-4 }} style={{ left: this.state.currentDividerPos-4 }}
onClick={this.liveScrollToggle} > onClick={this.liveScrollToggle} >
<i id='scrollToggle' className='fas fa-lock' /> <i id='scrollToggle' className={this.state.liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
</div> </div>
</>; </>;
} }