YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed modal

Browse Source
This commit is contained in:
Dominic Masters
2018-10-27 09:07:56 +11:00
parent 2280239870
commit 8cf714500c
2 changed files with 39 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/components/App.jsx
View File

@ -35,13 +35,11 @@ import Favicon from './Favicon';
//Routes Definitions
const AppRoutes = (props) => {
return (
<React.Fragment>
<Routes onEntering={ props.onEntering }>
<RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
<RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
<RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
</Routes>
</React.Fragment>
<Routes onEntering={ props.onEntering }>
<RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
<RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
<RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
</Routes>
);
};
@ -61,12 +59,15 @@ class App extends React.Component {
}
render() {
let { className } = this.props;
let newProps= {...this.props};
let { className, modal } = newProps;
["dispatch"].forEach(e => delete newProps[e]);
//Generate base clazzes
let clazz = "c-app";
//Append any other clazzes there may be.
if(modal.open) clazz += ' is-modal-open';
if(className) clazz += ` ${className}`;
//For testing you can switch the router type
@ -75,7 +76,8 @@ class App extends React.Component {
return (
<RouterType>
<div {...this.props} className={ clazz } ref="app">
<div {...newProps} className={ clazz } ref="app">
{ modal.modal }
<Favicon />
<Header />
<main>
@ -88,4 +90,6 @@ class App extends React.Component {
}
}
export default App;
export default connect(state => {
return { modal: state.modal };
})(App);

69
public/objects/modal/Modal.jsx
View File

@ -54,15 +54,15 @@ class Modal extends React.Component {
}
render() {
let { buttons, closeModal, close, title, children, large, modal } = this.props;
let newProps = {...this.props};
let { buttons, closeModal, close, title, children, large, modal } = newProps;
["onExited"].forEach(e => delete newProps[e]);
//Add necessary buttons
buttons = buttons || [];
if(!Array.isArray(buttons)) buttons = [ buttons ];
if(close) {
buttons.push(<Button key="close" onClick={closeModal}>{ Language.get("modal.close") }</Button>);
}
if(close) buttons = [...buttons,<Button key="close" onClick={closeModal} children={Language.get("modal.close")} />];
//Inner divs
let heading,body,footer;
@ -70,59 +70,40 @@ class Modal extends React.Component {
if(title) {
heading = (
<div className="o-modal__box-heading">
<Heading4 className="o-modal__title">\{ title }</Heading4>
<Heading4 className="o-modal__title">{ title }</Heading4>
</div>
);
}
if(children) {
body = <div className="o-modal__box-body" children={ children } />;
}
if(buttons && buttons.length) {
footer = <div className="o-modal__box-footer">{ buttons }</div>;
}
if(children) body = <div className="o-modal__box-body" children={ children } />;
if(buttons && buttons.length) footer = <div className="o-modal__box-footer">{ buttons }</div>;
//Create our modal contents
let contents = (
<div className="o-modal">
<div className="o-modal__inner">
{/* Provides both a good overlay, and a nice clickable area */}
<div className="o-modal__backdrop" onClick={closeModal}>
</div>
{/* Box itself, has a background and a shadow */}
<div className={"o-modal__box"+(large ? " is-large":"")}>
{ heading }
{ body }
{ footer }
</div>
</div>
</div>
);
//Display?
let displayedContents = <div></div>;
let contents = <div />;
if(modal.open) {
displayedContents = (
<CSSTransition
appear={true}
timeout={200}
classNames="o-modal__transition"
mountOnEnter={ true }
unmountOnExit={ true }
key="modal"
>
{ contents }
</CSSTransition>
contents = (
<div className="o-modal">
<div className="o-modal__inner">
{/* Provides both a good overlay, and a nice clickable area */}
<div className="o-modal__backdrop" onClick={closeModal} />
{/* Box itself, has a background and a shadow */}
<div className={"o-modal__box"+(large ? " is-large":"")}>
{ heading }
{ body }
{ footer }
</div>
</div>
</div>
);
}
//Wrap entire contents of modal in transitional container.
return (
<TransitionGroup className="o-modal__transition-container">
{ displayedContents }
<CSSTransition appear={true} timeout={200} classNames="o-modal__transition" mountOnEnter={ true } unmountOnExit={ true } key="modal">
{ contents }
</CSSTransition>
</TransitionGroup>
);
}