1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

Adding modal to side nav and refactoring

This commit is contained in:
Alex Windett 2016-11-23 11:59:37 +00:00
parent 01a527063e
commit 9e0193de7d
5 changed files with 82 additions and 29 deletions

View File

@ -8,6 +8,7 @@ const Modal = React.createClass({
children: React.PropTypes.node,
className: React.PropTypes.string,
name: React.PropTypes.string,
trigger: React.PropTypes.func.isRequired
},
getInitialState: function() {
@ -19,7 +20,7 @@ const Modal = React.createClass({
handleReveal: function(e) {
e.preventDefault();
this.setState({
active: true
active: this.state.active ? false : true
});
},
@ -27,37 +28,68 @@ const Modal = React.createClass({
const {
children,
className,
name
name,
trigger
} = this.props;
const {
active
} = this.state;
const {
handleReveal
} = this;
const triggerClass = classNames(
className,
styles.trigger
);
const modal = classNames(
className,
styles.modal,
this.state.active ? styles['modal-active'] : ''
);
const overlay = classNames(
className,
styles.overlay,
this.state.active ? styles['overlay-active'] : ''
);
return (
<div>
<a
<span
aria-label={name}
onClick={this.handleReveal}
className={triggerClass}
href="#"
onClick={handleReveal}
role="link"
tabIndex={0}
>
Click me to reveal modal
</a>
{trigger()}
</span>
<div className={overlay} />
<section aria-label={name} className={modal} >
<span className={styles.close}>X</span>
<h2>This is the Modal</h2>
{children}
</section>
{ active ? (
<div
aria-label="overlay"
className={overlay}
onClick={handleReveal}
role="link"
tabIndex={-2}
/>
) : null }
{ active ? (
<div aria-label={name} className={modal} >
<button
className={styles.close}
href='#'
onClick={handleReveal}
role="dialog"
tabIndex={-1}
>X</button>
{children}
</div>
) : null }
</div>
);
}

View File

@ -12,15 +12,21 @@ const Column = require('../column');
const Modal = require('./index.js');
const styles = require('./style.css');
const trigger = () => {
return (
<p>This is the trigger</p>
)
};
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Modal active name="modal1" >
Create an Instance
<Modal name="modal1" trigger={trigger} >
<h2>This is the Modal</h2>
</Modal>
</Column>
</Row>
</Row>
</Base>
);
```
@ -31,10 +37,16 @@ nmodule.exports = ReactDOM.renderToString(
const React = require('react');
const Modal = require('ui/button');
const trigger = () => {
return (
<p>This is the trigger</p>
)
};
module.exports = () => {
return (
<Modal>
Hello World
<Modal name="modal1" trigger={trigger} >
<h2>This is the Modal</h2>
</Modal>
);
}

View File

@ -1,4 +1,4 @@
.overlay-active {
.overlay {
background: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
@ -10,7 +10,7 @@
.modal {
background: white;
display: none;
display: block;
left: 50%;
margin: 0 auto;
padding: 20px;
@ -20,17 +20,24 @@
z-index: 1;
}
.modal-active {
display: block;
}
.close {
background: red;
background-color: #FFFFFF;
border: solid 1px #D8D8D8;
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
color: black;
font-size: 24px;
cursor: #000000;
font-size: 20px;
padding: 0 10px;
position: absolute;
right: -20px;
text-align: center;
text-decoration: none;
top: -15px;
}
.trigger {
cursor: pointer;
display: inline-block;
outline: none;
}

View File

@ -21,7 +21,8 @@ module.exports = {
Tab: require('./components/tab/readme.md'),
Tabs: require('./components/tabs/readme.md'),
Widget: require('./components/widget/readme.md'),
Pagination: require('./components/pagination/readme.md')
Pagination: require('./components/pagination/readme.md'),
Modal: require('./components/modal/readme.md')
},
FAQ: require('./faq.md')
};

View File

@ -15,5 +15,6 @@ module.exports = {
RadioGroup: require('./components/radio-group'),
Select: require('./components/select'),
Widget: require('./components/widget'),
Pagination: require('./components/pagination')
Pagination: require('./components/pagination'),
Modal: require('./components/modal')
};