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

Commit

Permalink
Fixes logic for components
Browse files Browse the repository at this point in the history 
Addresses #9283
  • Loading branch information
@NejcZdovc
NejcZdovc authored and Suguru Hirahara committed Jul 23, 2017
1 parent e14d06c commit 84b5f89
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 210 deletions.
3 changes: 2 additions & 1 deletion app/renderer/components/navigation/browserAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ class BrowserAction extends React.Component {
// TODO(bridiver) should have some visual notification of hover/press
return <NavigationBarButtonContainer
isSquare
containerFor={styles.browserActionButton}>
containerFor={styles.browserActionButton}
>
<BrowserButton
extensionItem
l10nId='browserActionButton'
Expand Down
72 changes: 16 additions & 56 deletions app/renderer/components/navigation/buttons/bookmarkButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,91 +3,51 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const Immutable = require('immutable')
const ipc = require('electron').ipcRenderer
const {StyleSheet} = require('aphrodite/no-important')

// Components
const ReduxComponent = require('../../reduxComponent')
const ImmutableComponent = require('../../immutableComponent')
const {NormalizedButton} = require('../../common/browserButton')

// Actions
const windowActions = require('../../../../../js/actions/windowActions')

// Constants
const siteTags = require('../../../../../js/constants/siteTags')
const messages = require('../../../../../js/constants/messages')

// State
const tabState = require('../../../../common/state/tabState')
const frameStateUtil = require('../../../../../js/state/frameStateUtil')

// Utils
const siteUtil = require('../../../../../js/state/siteUtil')
const UrlUtil = require('../../../../../js/lib/urlutil')

const {StyleSheet} = require('aphrodite/no-important')

// Style
const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')

class BookmarkButton extends React.Component {
class BookmarkButton extends ImmutableComponent {
constructor (props) {
super(props)
this.onToggleBookmark = this.onToggleBookmark.bind(this)
}

onToggleBookmark () {
const editing = this.bookmarked
// show the AddEditBookmarkHanger control; saving/deleting takes place there
let siteDetail = siteUtil.getDetailFromFrame(
this.activeFrame,
siteTags.BOOKMARK
)
const key = siteUtil.getSiteKey(siteDetail)

if (key !== null) {
siteDetail = siteDetail.set(
'parentFolderId',
this.props.sites.getIn([key, 'parentFolderId'])
)
siteDetail = siteDetail.set(
'customTitle',
this.props.sites.getIn([key, 'customTitle'])
)
}
siteDetail = siteDetail.set(
'location',
UrlUtil.getLocationIfPDF(siteDetail.get('location'))
)
windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true)
}

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
const activeTab = tabState.getByTabId(state, activeTabId)

const props = {}
props.bookmarked = activeTab && activeTab.get('bookmarked')

return props
}

componentDidMount () {
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
}

onToggleBookmark () {
if (this.props.isBookmarked) {
windowActions.editBookmark(true, this.props.bookmarkKey)
} else {
windowActions.onBookmarkAdded(true, this.props.bookmarkKey)
}
}

render () {
return (
<NormalizedButton navigationButton
custom={[
styles.bookmarkButton,
this.bookmarked && styles.bookmarkButton_bookmarked
this.props.isBookmarked && styles.bookmarkButton_bookmarked
]}
l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
testId={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
l10nId={this.props.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
testId={this.props.isBookmarked ? 'bookmarked' : 'notBookmarked'}
onClick={this.onToggleBookmark}
/>
)
Expand All @@ -105,4 +65,4 @@ const styles = StyleSheet.create({
}
})

module.exports = ReduxComponent.connect(BookmarkButton)
module.exports = BookmarkButton
39 changes: 18 additions & 21 deletions app/renderer/components/navigation/buttons/homeButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

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

// Components
const ReduxComponent = require('../../reduxComponent')
const ImmutableComponent = require('../../immutableComponent')
const {NormalizedButton} = require('../../common/browserButton')

// Actions
Expand All @@ -16,23 +15,32 @@ const appActions = require('../../../../../js/actions/appActions')
// Constants
const settings = require('../../../../../js/constants/settings')

// State
const tabState = require('../../../../common/state/tabState')
const frameStateUtil = require('../../../../../js/state/frameStateUtil')

// Utils
const eventUtil = require('../../../../../js/lib/eventUtil')
const {getSetting} = require('../../../../../js/settings')
const eventUtil = require('../../../../../js/lib/eventUtil')

// Styles
const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg')

class HomeButton extends React.Component {
class HomeButton extends ImmutableComponent {
constructor (props) {
super(props)
this.onHome = this.onHome.bind(this)
}

componentDidMount () {
this.homeButton.addEventListener('auxclick', this.onHome)
}

componentWillUnmount () {
this.homeButton.removeEventListener('auxclick', this.onHome)
}

onHome (e) {
if (e.button === 2) {
return
}

getSetting(settings.HOMEPAGE).split('|')
.forEach((homepage, i) => {
if (i === 0 && !eventUtil.isForSecondaryAction(e)) {
Expand All @@ -46,25 +54,14 @@ class HomeButton extends React.Component {
})
}

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)

const props = {}

props.activeTabId = activeTabId

return props
}

// BEM Level: navigationBar__buttonContainer
render () {
return <NormalizedButton
navigationButton
custom={styles.homeButton}
testId='homeButton'
l10nId='homeButton'
ref={(node) => { this.homeButton = node }}
onClick={this.onHome}
/>
}
Expand All @@ -77,4 +74,4 @@ const styles = StyleSheet.create({
}
})

module.exports = ReduxComponent.connect(HomeButton)
module.exports = HomeButton
6 changes: 3 additions & 3 deletions app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@

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

const ImmutableComponent = require('../../immutableComponent')
const globalStyles = require('../../styles/global')

// This component normalizes the wrapper for buttons called on files
// under app/renderer/components/navigation/buttons/ ro reduce the risk of
// visual regressions and style inconsistency.
// Ref https://github.com/brave/browser-laptop/pull/9299#discussion_r124714562

// TODO (Cezar): Check if stateless components can benefit
// from reduxComponent by setting ownProps to stateless props.
class NavigationBarButtonContainer extends React.Component {
class NavigationBarButtonContainer extends ImmutableComponent {
render () {
return (
<div className={css(
Expand Down
27 changes: 5 additions & 22 deletions app/renderer/components/navigation/buttons/reloadButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const Immutable = require('immutable')
const ipc = require('electron').ipcRenderer
const {StyleSheet} = require('aphrodite/no-important')

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

// Actions
Expand All @@ -16,19 +16,14 @@ const appActions = require('../../../../../js/actions/appActions')
// Constants
const messages = require('../../../../../js/constants/messages')

// State
const tabState = require('../../../../common/state/tabState')
const frameStateUtil = require('../../../../../js/state/frameStateUtil')

// Utils
const eventUtil = require('../../../../../js/lib/eventUtil')
const contextMenus = require('../../../../../js/contextMenus')

const {StyleSheet} = require('aphrodite/no-important')

// Styles
const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')

class ReloadButton extends React.Component {
class ReloadButton extends ImmutableComponent {
constructor (props) {
super(props)
this.onReload = this.onReload.bind(this)
Expand All @@ -47,18 +42,6 @@ class ReloadButton extends React.Component {
contextMenus.onReloadContextMenu(target)
}

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)

const props = {}

props.activeTabId = activeTabId

return props
}

render () {
// BEM Level: navigationBar__buttonContainer
return <LongPressButton
Expand All @@ -79,4 +62,4 @@ const styles = StyleSheet.create({
}
})

module.exports = ReduxComponent.connect(ReloadButton)
module.exports = ReloadButton
35 changes: 24 additions & 11 deletions app/renderer/components/navigation/buttons/stopButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,41 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const ipc = require('electron').ipcRenderer
const {StyleSheet} = require('aphrodite/no-important')

// Components
const ImmutableComponent = require('../../immutableComponent')
const {NormalizedButton} = require('../../common/browserButton')

// Constants
const messages = require('../../../../../js/constants/messages')

// Actions
const windowActions = require('../../../../../js/actions/windowActions')

// Styles
const stopLoadingButtonIcon = require('../../../../../img/toolbar/stoploading_btn.svg')

class StopButton extends React.Component {
class StopButton extends ImmutableComponent {
constructor (props) {
super(props)
this.onStop = this.onStop.bind(this)
}

onStop () {
// TODO (bridiver) - remove shortcut
ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_STOP)
windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
}

// BEM Level: navigationBar__buttonContainer
render () {
return <NormalizedButton
navigationButton
custom={styles.stopButton}
l10nid='stopButton'
onClick={
/*
TODO: check if this is ok to ship as-is.
This is likely not the best way given it is
expecting the property from parent component but this
was a quick workaround to avoid dupping code in both navigationbar
and this component.
*/
this.props.onStop
}
onClick={this.onStop}
/>
}
}
Expand Down
Loading

0 comments on commit 84b5f89

Please sign in to comment.