diff --git a/opentech/apply/funds/templates/funds/submissions_by_round.html b/opentech/apply/funds/templates/funds/submissions_by_round.html index 170c27c17bd98c78e2fbd4a4fdb5d1318e690f63..326399521c16a58484908aa2bc0ae19edd78c90c 100644 --- a/opentech/apply/funds/templates/funds/submissions_by_round.html +++ b/opentech/apply/funds/templates/funds/submissions_by_round.html @@ -4,7 +4,6 @@ {% block title %}{{ object }}{% endblock %} {% block content %} -<div id="react-app"> <div class="admin-bar"> <div class="admin-bar__inner admin-bar__inner--with-button"> <div> @@ -16,13 +15,13 @@ </div> </div> - <div id="react-original-content" class="wrapper wrapper--large"> - {% block table %} - {{ block.super }} - {% endblock %} + <div id="react-app"> + <div class="wrapper wrapper--large"> + {% block table %} + {{ block.super }} + {% endblock %} + </div> </div> - -</div> {% render_bundle 'main' %} {% endblock %} diff --git a/opentech/static_src/src/app/src/App.js b/opentech/static_src/src/app/src/App.js index b95913442ed0e2ca366cc7dcd2d6ff7aaa65989f..b0468f3dddb764358d9a76474f696a5b013aff0f 100644 --- a/opentech/static_src/src/app/src/App.js +++ b/opentech/static_src/src/app/src/App.js @@ -1,26 +1,12 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { hot } from 'react-hot-loader' -import ArrayIcon from './../../images/icon-array.svg'; -import GridIcon from './../../images/icon-grid.svg'; - +import Switcher from './components/Switcher' import './App.scss'; + class App extends React.Component { constructor(props) { super(props); - this.originalContent = null; - this.setOriginalContentRef = element => { - this.originalContent = element.querySelector('#react-original-content'); - - ReactDOM.render( - <div> - <button onClick={this.detailOpen}><ArrayIcon /></button> - <button onClick={this.detailClose}><GridIcon /></button> - </div>, - element.querySelector('#react-switcher') - ); - }; this.state = { detailOpen: false @@ -28,13 +14,11 @@ class App extends React.Component { } detailOpen = (state) => { - this.originalContent.style.display = 'none'; - this.setState({ style: { display: 'None' } }) + this.setState({ style: { display: 'none' } }) this.setState({ detailOpen: true }) } detailClose = () => { - this.originalContent.style.display = null; this.setState({ style: {} }) this.setState({ detailOpen: false }) } @@ -42,7 +26,8 @@ class App extends React.Component { render() { return ( <div> - <div ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} /> + <Switcher selector='react-switcher' open={this.state.detailOpen} handleOpen={this.detailOpen} handleClose={this.detailClose} /> + <div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} /> {this.state.detailOpen && <div><h2>THIS IS REACT</h2></div>} </div> ) diff --git a/opentech/static_src/src/app/src/components/Switcher/index.js b/opentech/static_src/src/app/src/components/Switcher/index.js new file mode 100644 index 0000000000000000000000000000000000000000..1ece00ecff1271d821fc3c67ce0763190cfd4e5a --- /dev/null +++ b/opentech/static_src/src/app/src/components/Switcher/index.js @@ -0,0 +1,25 @@ +import React from 'react' +import ReactDOM from 'react-dom'; +import ArrayIcon from 'images/icon-array.svg' +import GridIcon from 'images/icon-grid.svg'; + +class Switcher extends React.Component { + constructor(props) { + super(props); + this.el = document.getElementById(props.selector); + } + + render() { + const { handleOpen, handleClose, open } = this.props; + + return ReactDOM.createPortal( + <> + <button className={`button button--switcher ${open ? 'is-active' : ''}`} onClick={handleOpen}><ArrayIcon /></button> + <button className={`button button--switcher ${open ? '' : 'is-active'}`} onClick={handleClose}><GridIcon /></button> + </>, + this.el, + ); + } +} + +export default Switcher diff --git a/opentech/static_src/src/app/src/index.js b/opentech/static_src/src/app/src/index.js index d51ab9ce9a94a22949e7e7b4bfa8fa4fc71d7980..fc13e89343078cb163670fd80e7886d33459b815 100644 --- a/opentech/static_src/src/app/src/index.js +++ b/opentech/static_src/src/app/src/index.js @@ -8,6 +8,6 @@ const container = document.getElementById('react-app'); ReactDOM.render( - <App pageContent={container.innerHTML} originalContent={document.getElementById('react-original-content')} />, + <App pageContent={container.innerHTML} />, container ); diff --git a/opentech/static_src/src/app/webpack.base.config.js b/opentech/static_src/src/app/webpack.base.config.js index cfc0d9dddf3c79e98f94a64c548758672aa2570b..4d97df9e838ccebf582025962c471e396d369557 100644 --- a/opentech/static_src/src/app/webpack.base.config.js +++ b/opentech/static_src/src/app/webpack.base.config.js @@ -42,7 +42,7 @@ module.exports = { }, resolve: { - modules: ['node_modules'], + modules: ['node_modules', './src'], extensions: ['.js', '.jsx'] } };