Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Converts PopupWindow into redux
Browse files Browse the repository at this point in the history
Resolves #9416

Auditors: @bsclifton @bridiver

Test Plan:
  • Loading branch information
NejcZdovc committed Jun 13, 2017
1 parent d66351b commit 8f0f178
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 53 deletions.
3 changes: 1 addition & 2 deletions app/renderer/components/main/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -729,8 +729,7 @@ class Main extends ImmutableComponent {
}
{
this.props.windowState.get('popupWindowDetail')
? <PopupWindow
detail={this.props.windowState.get('popupWindowDetail')} />
? <PopupWindow />
: null
}
<div className='top'>
Expand Down
114 changes: 63 additions & 51 deletions app/renderer/components/main/popupWindow.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const Immutable = require('immutable')
const ReactDOM = require('react-dom')
const {StyleSheet, css} = require('aphrodite/no-important')

// Components
const ImmutableComponent = require('../immutableComponent')
const ReduxComponent = require('../reduxComponent')

// Constants
const KeyCodes = require('../../../common/constants/keyCodes')
Expand All @@ -18,33 +19,22 @@ const windowActions = require('../../../../js/actions/windowActions')
// Styles
const globalStyles = require('../styles/global')

/**
* Represents a popup window
*/
class PopupWindow extends ImmutableComponent {
componentWillMount () {
this.width = this.props.detail.get('width')
this.height = this.props.detail.get('height')
this.top = this.props.detail.get('top')
this.left = this.props.detail.get('left')
}

onKeyDown (e) {
if (e.keyCode === KeyCodes.ESC) {
windowActions.setPopupWindowDetail()
}
class PopupWindow extends React.Component {
constructor (props) {
super(props)
this.onKeyDown = this.onKeyDown.bind(this)
}

componentWillUnmount () {
window.removeEventListener('keydown', this.onKeyDown.bind(this))
window.removeEventListener('keydown', this.onKeyDown)
}

componentDidMount () {
window.addEventListener('keydown', this.onKeyDown.bind(this))
let src = this.props.detail.get('src')
if (src) {
window.addEventListener('keydown', this.onKeyDown)

if (this.props.src) {
let webview = document.createElement('webview')
webview.setAttribute('src', src)
webview.setAttribute('src', this.props.src)
webview.addEventListener('crashed', () => {
windowActions.setPopupWindowDetail()
})
Expand All @@ -54,52 +44,74 @@ class PopupWindow extends ImmutableComponent {
webview.addEventListener('close', () => {
windowActions.setPopupWindowDetail()
})
let updateSize = () => {
webview.addEventListener('did-attach', () => {
webview.enablePreferredSizeMode(true)
})
webview.addEventListener('preferred-size-changed', () => {
webview.getPreferredSize((preferredSize) => {
let width = preferredSize.width
let height = preferredSize.height
if (width !== this.width || height !== this.height) {
this.width = width
this.height = height
webview.style.height = height + 'px'
webview.style.width = width + 'px'
this.forceUpdate()
}
webview.style.height = height + 'px'
webview.style.width = width + 'px'

windowActions.setPopupWindowDetail(Immutable.fromJS({
left: this.props.left,
top: this.props.top,
height: height,
width: width,
src: this.props.src
}))
})
}
webview.addEventListener('did-attach', () => {
webview.enablePreferredSizeMode(true)
})
webview.addEventListener('preferred-size-changed', (e) => {
updateSize()
})
ReactDOM.findDOMNode(this).appendChild(webview)
}
}

onKeyDown (e) {
if (e.keyCode === KeyCodes.ESC) {
windowActions.setPopupWindowDetail()
}
}

mergeProps (state, ownProps) {
const currentWindow = state.get('currentWindow')
const detail = currentWindow.get('popupWindowDetail', Immutable.Map())

const props = {}
// used in renderer
props.width = parseInt(detail.get('width'))
props.height = parseInt(detail.get('height'))
props.top = parseInt(detail.get('top'))
props.left = parseInt(detail.get('left'))

// used in other functions
props.src = detail.get('src')

return props
}

render () {
let style = {}
let width = parseInt(this.width)
let height = parseInt(this.height)
let top = parseInt(this.top)
let left = parseInt(this.left)

if (width) {
style.width = width + 2
if (this.props.width) {
style.width = this.props.width + 2
}
if (height) {
style.height = height + 2

if (this.props.height) {
style.height = this.props.height + 2
}
if (top) {
if (top + height < window.innerHeight) {
style.top = top

if (this.props.top) {
if (this.props.top + this.props.height < window.innerHeight) {
style.top = this.props.top
} else {
style.bottom = 0
}
}
if (left) {
if (left + width < window.innerWidth) {
style.left = left

if (this.props.left) {
if (this.props.left + this.props.width < window.innerWidth) {
style.left = this.props.left
} else {
style.right = '1em'
}
Expand All @@ -114,6 +126,8 @@ class PopupWindow extends ImmutableComponent {
}
}

module.exports = ReduxComponent.connect(PopupWindow)

const styles = StyleSheet.create({
popupWindow: {
border: `solid 1px ${globalStyles.color.gray}`,
Expand All @@ -132,5 +146,3 @@ const styles = StyleSheet.create({
flexDirection: 'row-reverse'
}
})

module.exports = PopupWindow

0 comments on commit 8f0f178

Please sign in to comment.