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

Tweak Dialog to work with showModal and show LockNotifications

Browse Source
This commit is contained in:
G.Ambatte
2024-06-06 12:01:55 +12:00
parent 0efcd5d258
commit 556ded9b08
3 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/dialog.jsx
View File

@@ -8,18 +8,24 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest })
useEffect(()=>{ useEffect(()=>{
if(!dismissKey || !localStorage.getItem(dismissKey)) { if(!dismissKey || !localStorage.getItem(dismissKey)) {
blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); !open && setOpen(true);
setOpen(true);
} }
}, []); }, []);
useEffect(()=>{
if(open && !dialogRef.current?.open){
blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
} else {
dialogRef.current?.close();
}
}, [open]);
const dismiss = ()=>{ const dismiss = ()=>{
dismissKey && localStorage.setItem(dismissKey, true); dismissKey && localStorage.setItem(dismissKey, true);
dialogRef.current?.close(); dialogRef.current?.close();
setOpen(false); setOpen(false);
}; };
if(!open) return null;
return ( return (
<dialog ref={dialogRef} onCancel={dismiss} {...rest}> <dialog ref={dialogRef} onCancel={dismiss} {...rest}>
<button className='dismiss' onClick={dismiss}> <button className='dismiss' onClick={dismiss}>

47
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -396,31 +396,28 @@ const EditPage = createClass({
{this.renderNavbar()} {this.renderNavbar()}
<div className='content'> <div className='content'>
{this.state.displayLockMessage ? {this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
<LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} disableLock={()=>this.setState({ displayLockMessage: false })}/> <SplitPane onDragFinish={this.handleSplitMove}>
: <Editor
<SplitPane onDragFinish={this.handleSplitMove}> ref={this.editor}
<Editor brew={this.state.brew}
ref={this.editor} onTextChange={this.handleTextChange}
brew={this.state.brew} onStyleChange={this.handleStyleChange}
onTextChange={this.handleTextChange} onMetaChange={this.handleMetaChange}
onStyleChange={this.handleStyleChange} reportError={this.errorReported}
onMetaChange={this.handleMetaChange} renderer={this.state.brew.renderer}
reportError={this.errorReported} />
renderer={this.state.brew.renderer} <BrewRenderer
/> text={this.state.brew.text}
<BrewRenderer style={this.state.brew.style}
text={this.state.brew.text} renderer={this.state.brew.renderer}
style={this.state.brew.style} theme={this.state.brew.theme}
renderer={this.state.brew.renderer} errors={this.state.htmlErrors}
theme={this.state.brew.theme} lang={this.state.brew.lang}
errors={this.state.htmlErrors} currentEditorPage={this.state.currentEditorPage}
lang={this.state.brew.lang} allowPrint={true}
currentEditorPage={this.state.currentEditorPage} />
allowPrint={true} </SplitPane>
/>
</SplitPane>
}
</div> </div>
</div>; </div>;
} }

10
client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
View File

@@ -1,19 +1,20 @@
require('./lockNotification.less'); require('./lockNotification.less');
const React = require('react'); const React = require('react');
const Dialog = require('../../../../components/dialog.jsx'); import Dialog from '../../../../components/dialog.jsx';
function LockNotification(props) { function LockNotification(props) {
props = { props = {
shareId : 0, shareId : 0,
disableLock : ()=>{}, disableLock : ()=>{},
message : '',
...props ...props
} };
const removeLock = () => { const removeLock = ()=>{
alert(`Not yet implemented - ID ${props.shareId}`); alert(`Not yet implemented - ID ${props.shareId}`);
}; };
return <Dialog className='lockNotification'> return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
<h1>BREW LOCKED</h1> <h1>BREW LOCKED</h1>
<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p> <p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
<hr /> <hr />
@@ -22,7 +23,6 @@ function LockNotification(props) {
<hr /> <hr />
<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p> <p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p> <p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
<button onClick={props.disableLock}>CONTINUE TO EDITOR</button>
<button onClick={removeLock}>REQUEST LOCK REMOVAL</button> <button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
</Dialog>; </Dialog>;
}; };