Skip to content

Commit

Permalink
Merge 0deafad into 92f83ad
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrismanciero
chrismanciero committed Jan 16, 2019
2 parents 92f83ad + 0deafad commit 8074e07
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 61 deletions.
30 changes: 30 additions & 0 deletions src/Modal/Modal.Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,36 @@ export class ModalComponent extends Component {
{
name: 'actions',
description: 'React.Fragment which contains <Button /> controls to render in the footer'
},
{
name: 'contentProps',
description:
'object - additional props to be spread to the content section of Modal dialog'
},
{
name: 'headerProps',
description:
'object - additional props to be spread to the header section of Modal dialog'
},
{
name: 'titleProps',
description:
'object - additional props to be spread to the title section of Modal dialog'
},
{
name: 'closeProps',
description:
'object - additional props to be spread to the close button of Modal dialog'
},
{
name: 'bodyProps',
description:
'object - additional props to be spread to the body section of Modal dialog'
},
{
name: 'footerProps',
description:
'object - additional props to be spread to the footer section of Modal dialog'
}
]}
type='Inputs' />
Expand Down
130 changes: 74 additions & 56 deletions src/Modal/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,71 +3,89 @@ import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

export class Modal extends Component {
// select body element to add Modal component too
bodyElm = document.querySelector('body');
// select body element to add Modal component too
bodyElm = document.querySelector('body');

handleCloseClick = () => {
this.props.onClose();
};
handleCloseClick = () => {
this.props.onClose();
};

// check for Escape key press
handleKeyPress = event => {
if (event.key === 'Escape' || event.key === 'Esc') {
this.handleCloseClick();
}
};
// check for Escape key press
handleKeyPress = event => {
if (event.key === 'Escape' || event.key === 'Esc') {
this.handleCloseClick();
}
};

// add event listener for escape key
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress, false);
}
// add event listener for escape key
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress, false);
}

// remove event listener for escape key
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress, false);
}
// remove event listener for escape key
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress, false);
}

render() {
const { children, title, actions, className, show, ...rest } = this.props;
render() {
const { children, title, actions, className, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;

if (!show) {
return null;
}
if (!show) {
return null;
}

return ReactDOM.createPortal(
<div
className={`fd-ui__overlay fd-overlay fd-overlay--modal${
className ? ' ' + className : ''
}`}
{...rest}>
<div className='modal-demo-bg'>
<div className='fd-modal'>
<div className='fd-modal__content' role='document'>
<div className='fd-modal__header'>
<h1 className='fd-modal__title'>{title}</h1>
<button
aria-label='close'
className='fd-button--light fd-modal__close'
onClick={this.handleCloseClick} />
</div>
<div className='fd-modal__body'>{children}</div>
{actions ? (
<footer className='fd-modal__footer'>
<div className='fd-modal__actions'>{actions}</div>
</footer>
) : (
''
)}
</div>
</div>
</div>
</div>,
this.bodyElm
);
}
return ReactDOM.createPortal(
<div
className={`fd-ui__overlay fd-overlay fd-overlay--modal${
className ? ' ' + className : ''
}`}
{...rest}>
<div className='modal-demo-bg'>
<div className='fd-modal'>
<div
{...contentProps}
className='fd-modal__content'
role='document'>
<div {...headerProps} className='fd-modal__header'>
<h1 {...titleProps} className='fd-modal__title'>
{title}
</h1>
<button
{...closeProps}
aria-label='close'
className='fd-button--light fd-modal__close'
onClick={this.handleCloseClick} />
</div>
<div {...bodyProps} className='fd-modal__body'>
{children}
</div>
{actions ? (
<footer
{...footerProps}
className='fd-modal__footer'>
<div className='fd-modal__actions'>
{actions}
</div>
</footer>
) : (
''
)}
</div>
</div>
</div>
</div>,
this.bodyElm
);
}
}

Modal.propTypes = {
title: PropTypes.string.isRequired,
show: PropTypes.bool
bodyProps: PropTypes.object,
closeProps: PropTypes.object,
contentProps: PropTypes.object,
footerProps: PropTypes.object,
headerProps: PropTypes.object,
show: PropTypes.bool,
titleProps: PropTypes.object
};
96 changes: 91 additions & 5 deletions src/Modal/Modal.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,24 +131,110 @@ describe('<Modal />', () => {

describe('Prop spreading', () => {
test('should allow props to be spread to the Modal component', () => {
component = mount(
<Modal data-sample='Sample' show
title='Title' />
);

expect(component.getDOMNode().attributes['data-sample'].value).toBe(
'Sample'
);
});

test('should allow props to be spread to the Modal component\'s content section', () => {
component = mount(
<Modal
contentProps={{ 'data-sample': 'Sample Title' }}
show
title='Title' />
);

expect(
component.find('div.fd-modal__content').getDOMNode().attributes[
'data-sample'
].value
).toBe('Sample Title');
});

test('should allow props to be spread to the Modal component\'s header section', () => {
component = mount(
<Modal
headerProps={{ 'data-sample': 'Sample Title' }}
show
title='Title' />
);

expect(
component.find('div.fd-modal__header').getDOMNode().attributes[
'data-sample'
].value
).toBe('Sample Title');
});

test('should allow props to be spread to the Modal component\'s h1 element', () => {
component = mount(
<Modal
show
title='Title'
titleProps={{ 'data-sample': 'Sample Title' }} />
);

expect(
component.find('h1').getDOMNode().attributes['data-sample']
.value
).toBe('Sample Title');
});

test('should allow props to be spread to the Modal component\'s body section', () => {
// TODO: placeholder for this test description once that functionality is built
component = mount(
<Modal
data-sample='Sample'
bodyProps={{ 'data-sample': 'Sample Title' }}
show
title='Title' />
);

expect(
component.getDOMNode().attributes['data-sample'].value
).toBe('Sample');
component.find('div.fd-modal__body').getDOMNode().attributes[
'data-sample'
].value
).toBe('Sample Title');
});

xtest('should allow props to be spread to the Modal component\'s h1 element', () => {
test('should allow props to be spread to the Modal component\'s footer section', () => {
// TODO: placeholder for this test description once that functionality is built
component = mount(
<Modal
actions={
<React.Fragment>
<button>Cancel</button>
<button>Invite</button>
</React.Fragment>
}
footerProps={{ 'data-sample': 'Sample Title' }}
show
title='Title' />
);

expect(
component.find('footer').getDOMNode().attributes['data-sample']
.value
).toBe('Sample Title');
});

xtest('should allow props to be spread to the Modal component\'s button element', () => {
test('should allow props to be spread to the Modal component\'s button element', () => {
// TODO: placeholder for this test description once that functionality is built
component = mount(
<Modal
closeProps={{ 'data-sample': 'Sample Button' }}
show
title='Title' />
);

expect(
component.find('button').getDOMNode().attributes['data-sample']
.value
).toBe('Sample Button');
});
});
});

0 comments on commit 8074e07

Please sign in to comment.