Skip to content

Instantly share code, notes, and snippets.

@hackingbeauty
Created May 20, 2018 19:18
Show Gist options
  • Save hackingbeauty/fb53e4b80fde876f88cb3b41d6ca727c to your computer and use it in GitHub Desktop.
Save hackingbeauty/fb53e4b80fde876f88cb3b41d6ca727c to your computer and use it in GitHub Desktop.
ModalFooter component for a large-scale React application as taught in the course "How To Write A Single Page Application" - www.singlepageapplication.com
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { modalFooterStyles } from './styles.scss'
import { Modal as ReactBootstrapModal } from 'react-bootstrap'
class ModalFooter extends Component {
constructor(props) {
super(props)
}
onCancel=() => {
const { handleClose } = this.context
handleClose()
}
getContent=() =>{
const { children } = this.props
return (
<div>
<div onClick={this.onCancel} className="cancel-btn btn btn-link">Cancel</div>
<div className="custom-modal-footer-actions">{children}</div>
</div>
)
}
render() {
const content = this.getContent()
return (
<div className={modalFooterStyles}>
<ReactBootstrapModal.Footer>
{content}
</ReactBootstrapModal.Footer>
</div>
)
}
}
ModalFooter.propTypes = {
children: PropTypes.node
}
ModalFooter.contextTypes = {
handleClose: PropTypes.func.isRequired
}
export default ModalFooter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment