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 React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const Close = require('../close');
const { const {
colors colors
} = constants; } = constants;
@ -19,17 +17,19 @@ const {
} = Styled; } = Styled;
const StyledModal = styled.div` 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%; max-width: 80%;
min-width: 50%; 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` const StyledOverlay = styled.div`
@ -39,35 +39,24 @@ const StyledOverlay = styled.div`
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 0; z-index: 1;
`; `;
const Modal = ({ const Modal = (props) => {
active = true, if (!props.active) {
children,
className,
customCloseStyle,
handleDismiss,
name,
style
}) => {
if (!active) {
return null; return null;
} }
return ( return (
<div className={className} style={style}> <div>
<StyledOverlay <StyledOverlay
aria-label='overlay' aria-label='overlay'
onClick={props.handleDismiss}
role='link' role='link'
tabIndex={-2} tabIndex={-2}
/> />
<StyledModal aria-label={name}> <StyledModal {...props}>
<Close {props.children}
customStyles={customCloseStyle}
onClick={handleDismiss}
/>
{children}
</StyledModal> </StyledModal>
</div> </div>
); );
@ -76,11 +65,7 @@ const Modal = ({
Modal.propTypes = { Modal.propTypes = {
active: React.PropTypes.bool, active: React.PropTypes.bool,
children: React.PropTypes.node, children: React.PropTypes.node,
className: React.PropTypes.string, handleDismiss: React.PropTypes.func
customCloseStyle: React.PropTypes.string,
handleDismiss: React.PropTypes.func,
name: React.PropTypes.string,
style: React.PropTypes.object
}; };
module.exports = Modal; module.exports = Modal;

View File

@ -1,46 +1,19 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react'); const React = require('react');
const {
colors
} = constants;
const {
remcalc
} = fns;
const { const {
storiesOf storiesOf
} = require('@kadira/storybook'); } = require('@kadira/storybook');
const Base= require('../base'); const Base = require('../base');
const Modal = require('./'); const Modal = require('./');
const Close = require('../close');
const _customCloseStyle = `
border: solid ${colors.alert} ${remcalc(5)};
border-radius: 50%;
`;
storiesOf('Modal', module) storiesOf('Modal', module)
.add('Default', () => ( .add('Default', () => (
<Base> <Base>
<Modal> <Modal>
<Close />
<h2>This is the Modal</h2> <h2>This is the Modal</h2>
</Modal> </Modal>
</Base> </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>
));