m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Enhance global modal to accept styles from different components

Browse Source
This commit is contained in:
sdtsui 2017-08-21 03:53:01 -07:00
parent 66829b7a05
commit 80a2cba38e
1 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
ui/app/components/modals/modal.js
View File

@ -14,18 +14,63 @@ const EditAccountNameModal = require('./edit-account-name-modal')
const NewAccountModal = require('./new-account-modal') const NewAccountModal = require('./new-account-modal')
const MODALS = { const MODALS = {
BUY: [ BUY: {
contents: [
h(BuyOptions, {}, []), h(BuyOptions, {}, []),
], ],
EDIT_ACCOUNT_NAME: [ mobileModalStyle: {
width: '95%',
top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
},
laptopModalStyle: {
width: '66%',
top: 'calc(30% + 10px)',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
},
},
EDIT_ACCOUNT_NAME: {
contents: [
h(EditAccountNameModal, {}, []), h(EditAccountNameModal, {}, []),
], ],
ACCOUNT_DETAILS: [ mobileModalStyle: {
width: '95%',
top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
},
laptopModalStyle: {
width: '45%',
top: 'calc(30% + 10px)',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
},
},
ACCOUNT_DETAILS: {
contents: [
h(AccountDetailsModal, {}, []), h(AccountDetailsModal, {}, []),
], ],
NEW_ACCOUNT: [ mobileModalStyle: {},
laptopModalStyle: {},
},
NEW_ACCOUNT: {
contents: [
h(NewAccountModal, {}, []), h(NewAccountModal, {}, []),
] ],
mobileModalStyle: {},
laptopModalStyle: {}
},
DEFAULT: {
contents: [],
mobileModalStyle: {},
laptopModalStyle: {},
}
}
const BACKDROPSTYLE = {
backgroundColor: 'rgba(245, 245, 245, 0.85)',
} }
function mapStateToProps (state) { function mapStateToProps (state) {
@ -51,26 +96,11 @@ function Modal () {
module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
const mobileModalStyles = {
width: '95%',
// Used to create matching t/l/r/b space in mobile view.
top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
}
const laptopModalStyles = {
width: '66%',
top: 'calc(30% + 10px)',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
}
const backdropStyles = {
backgroundColor: 'rgba(245, 245, 245, 0.85)',
}
Modal.prototype.render = function () { Modal.prototype.render = function () {
const modal = MODALS[this.props.modalState.name || 'DEFAULT']
const children = MODALS[this.props.modalState.name] || [] const children = modal.contents
const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
return h(FadeModal, return h(FadeModal,
{ {
@ -80,8 +110,8 @@ Modal.prototype.render = function () {
ref: (ref) => { ref: (ref) => {
this.modalRef = ref this.modalRef = ref
}, },
modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles, modalStyle,
backdropStyle: backdropStyles, backdropStyle: BACKDROPSTYLE,
}, },
children, children,
) )
@ -109,16 +139,3 @@ Modal.prototype.hide = function() {
Modal.prototype.show = function() { Modal.prototype.show = function() {
this.modalRef.show() 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,
// }