-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue #44. Added React Modal! #206
base: develop
Are you sure you want to change the base?
Changes from 7 commits
07467d2
ec14f03
d403f3f
14066a7
b910bb3
d20e017
85083d0
a921a96
e547ad4
b2b2f8d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,19 +9,64 @@ import DiscussView from './views/DiscussView'; | |
import ParticipantsView from './views/ParticipantsView'; | ||
import RightPanel from '../RightPanel/RightPanel'; | ||
import './PursuancePage.css'; | ||
import ReactModal from 'react-modal'; | ||
|
||
class PursuancePage extends Component { | ||
|
||
constructor(){ | ||
super(); | ||
this.state={ | ||
modalIsOpen : false | ||
} | ||
} | ||
componentWillMount() { | ||
let { setCurrentPursuance, match, currentPursuanceId } = this.props; | ||
currentPursuanceId = Number(match.params.pursuanceId) || currentPursuanceId; | ||
setCurrentPursuance(currentPursuanceId); | ||
ReactModal.setAppElement('body'); | ||
} | ||
componentDidMount(){ | ||
this.openModal(); | ||
} | ||
openModal = () => { | ||
this.setState({modalIsOpen : true}); | ||
} | ||
closeModal = () => { | ||
this.setState({modalIsOpen: false}); | ||
} | ||
handleKeyDown = (event) => { | ||
if(event.key === "?"){ | ||
this.setState({modalIsOpen : true}); | ||
} | ||
} | ||
|
||
render() { | ||
return ( | ||
<Router> | ||
<div id="pursuance-page" className="content-ctn"> | ||
<div id="pursuance-page" className="content-ctn" onKeyDown={this.handleKeyDown} tabIndex="-1"> | ||
<ReactModal className="Modal" shouldCloseOnEsc={true} shouldFocusAfterRender={true} isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} closeTimeoutMS={350} style={{overlay:{background:"none"}}}> | ||
<span className='close' onClick={this.closeModal}>×</span> | ||
<h3>Keyboard Shortcuts</h3> | ||
<hr style={{border:"1.5px solid grey"}}/> | ||
<div className="columns"> | ||
<div className="column one-half"> | ||
<table className="keyboard-mappings"> | ||
<tbody> | ||
<tr> | ||
<td className="keys"> | ||
<kbd>?</kbd> | ||
</td> | ||
<td> Open shortcut window</td> | ||
</tr> | ||
<tr> | ||
<td className="keys"> | ||
<kbd>Everything Else</kbd> | ||
</td> | ||
<td> Do Nothing</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</div> | ||
</div> | ||
</ReactModal> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @greg-han Please indent properly so it's clear which tags are nested inside other tags. Use 2 spaces of indentation per level. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @greg-han Turn this into its own component and then use it here just like There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @greg-han Sorry for all the changes, but the React way of doing things is very different from the vanilla JS way. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No problem, I appreciate the feedback! |
||
<nav id="pursuance-nav"> | ||
<PursuanceMenu /> | ||
</nav> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@greg-han One CSS rule per line, please 👍