1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const FadeModal = require('boron').FadeModal
const actions = require('../actions')
const isMobileView = require('../../lib/is-mobile-view')
function mapStateToProps (state) {
return {
active: state.appState.modalOpen
}
}
function mapDispatchToProps (dispatch) {
return {
hideModal: () => {
dispatch(actions.hideModal())
},
}
}
inherits(Modal, Component)
function Modal () {
Component.call(this)
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
const mobileModalStyles = {
width: '95%',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
}
const laptopModalStyles = {
width: '66%',
top: '30%',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
}
const backdropStyles = {
backgroundColor: 'rgba(245, 245, 245, 0.85)',
}
Modal.prototype.render = function () {
return h(FadeModal,
{
className: 'modal',
keyboard: false,
onHide: () => {this.onHide()},
ref: (ref) => {
this.modalRef = ref
},
modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
backdropStyle: backdropStyles,
},
this.props.children,
)
}
Modal.prototype.componentWillReceiveProps = function(nextProps) {
if (nextProps.active) {
this.show()
} else if (this.props.active) {
this.hide()
}
}
Modal.prototype.onHide = function() {
if (this.props.onHideCallback) {
this.props.onHideCallback()
}
this.props.hideModal()
}
Modal.prototype.hide = function() {
this.modalRef.hide()
}
Modal.prototype.show = function() {
this.modalRef.show()
}
// TODO: specify default props and proptypes
// Modal.defaultProps = {}
// const elementType = require('react-prop-types/lib/elementType')
// const PropTypes from 'prop-types'
// Modal.propTypes = {
// active: PropTypes.bool,
// hideModal: PropTypes.func.isRequired,
// component: elementType,
// onHideCallback: PropTypes.func,
// }
|
