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

remove Close dependency from Modal

This commit is contained in:
Sérgio Ramos 2017-01-16 19:44:33 +00:00
parent 8ac2a7c60f
commit 7e157a15a1
2 changed files with 23 additions and 65 deletions

View File

@ -4,8 +4,6 @@ const constants = require('../../shared/constants');
const React = require('react');
const Styled = require('styled-components');
const Close = require('../close');
const {
colors
} = constants;
@ -19,17 +17,19 @@ const {
} = Styled;
const StyledModal = styled.div`
background: ${colors.brandSecondary};
display: block;
left: 50%;
margin: 0 auto;
padding: ${remcalc(20)};
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
max-width: 80%;
min-width: 50%;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
padding: ${remcalc(20)};
z-index: 1;
background: ${colors.brandSecondary};
border: ${remcalc(1)} solid ${colors.borderSecondary};
`;
const StyledOverlay = styled.div`
@ -39,35 +39,24 @@ const StyledOverlay = styled.div`
position: absolute;
top: 0;
width: 100%;
z-index: 0;
z-index: 1;
`;
const Modal = ({
active = true,
children,
className,
customCloseStyle,
handleDismiss,
name,
style
}) => {
if (!active) {
const Modal = (props) => {
if (!props.active) {
return null;
}
return (
<div className={className} style={style}>
<div>
<StyledOverlay
aria-label='overlay'
onClick={props.handleDismiss}
role='link'
tabIndex={-2}
/>
<StyledModal aria-label={name}>
<Close
customStyles={customCloseStyle}
onClick={handleDismiss}
/>
{children}
<StyledModal {...props}>
{props.children}
</StyledModal>
</div>
);
@ -76,11 +65,7 @@ const Modal = ({
Modal.propTypes = {
active: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
customCloseStyle: React.PropTypes.string,
handleDismiss: React.PropTypes.func,
name: React.PropTypes.string,
style: React.PropTypes.object
handleDismiss: React.PropTypes.func
};
module.exports = Modal;

View File

@ -1,46 +1,19 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Base = require('../base');
const Modal = require('./');
const _customCloseStyle = `
border: solid ${colors.alert} ${remcalc(5)};
border-radius: 50%;
`;
const Close = require('../close');
storiesOf('Modal', module)
.add('Default', () => (
<Base>
<Modal>
<Close />
<h2>This is the Modal</h2>
</Modal>
</Base>
))
.add('Custom Styles on Close', () => (
<Base>
<Modal customCloseStyle={_customCloseStyle}>
<h2>This is the Modal</h2>
</Modal>
</Base>
))
.add('Dismiss Function', () => (
<Base>
<Modal handleDismiss={function noop() {}}>
<p>This has a handleDismiss (noop) function</p>
</Modal>
</Base>
));
));