f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 18:32:41 +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(()=>{
if(!dismissKey || !localStorage.getItem(dismissKey)) {
blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
setOpen(true);
!open && setOpen(true);
}
}, []);
useEffect(()=>{
if(open && !dialogRef.current?.open){
blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
} else {
dialogRef.current?.close();
}
}, [open]);
const dismiss = ()=>{
dismissKey && localStorage.setItem(dismissKey, true);
dialogRef.current?.close();
setOpen(false);
};
if(!open) return null;
return (
<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
<button className='dismiss' onClick={dismiss}>

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

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

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

@@ -1,19 +1,20 @@
require('./lockNotification.less');
const React = require('react');
const Dialog = require('../../../../components/dialog.jsx');
import Dialog from '../../../../components/dialog.jsx';
function LockNotification(props) {
props = {
shareId : 0,
disableLock : ()=>{},
message : '',
...props
}
};
const removeLock = () => {
const removeLock = ()=>{
alert(`Not yet implemented - ID ${props.shareId}`);
};
return <Dialog className='lockNotification'>
return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
<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>
<hr />
@@ -22,7 +23,6 @@ function LockNotification(props) {
<hr />
<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>
<button onClick={props.disableLock}>CONTINUE TO EDITOR</button>
<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
</Dialog>;
};