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

Commit

Permalink
Converts bookmarksToolbar and bookmarkToolbarButton into redux
Browse files Browse the repository at this point in the history 
Resolves #9421

Auditors: @bsclifton @bridiver

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Jun 20, 2017
1 parent bddf5cc commit e21ade1
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 145 deletions.
19 changes: 19 additions & 0 deletions app/common/state/bookmarksState.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const Immutable = require('immutable')

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

const bookmarksState = {
getDNDBookmarkData: (state, bookmark) => {
const data = (state.getIn(['dragData', 'dragOverData', 'draggingOverType']) === dragTypes.BOOKMARK &&
state.getIn(['dragData', 'dragOverData'], Immutable.Map())) || Immutable.Map()

return (Immutable.is(data.get('draggingOverKey'), bookmark)) ? data : Immutable.Map()
}
}

module.exports = bookmarksState
166 changes: 95 additions & 71 deletions app/renderer/components/bookmarks/bookmarkToolbarButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,72 +8,88 @@ const Immutable = require('immutable')
const {StyleSheet, css} = require('aphrodite/no-important')

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

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

// Store
const windowStore = require('../../../../js/stores/windowStore')

// State
const bookmarkState = require('../../../common/state/bookmarksState')

// Constants
const siteTags = require('../../../../js/constants/siteTags')
const dragTypes = require('../../../../js/constants/dragTypes')
const {iconSize} = require('../../../../js/constants/config')
const {bookmarksToolbarMode} = require('../../../common/constants/settingsEnums')
const settings = require('../../../../js/constants/settings')

// Utils
const siteUtil = require('../../../../js/state/siteUtil')
const {getCurrentWindowId} = require('../../currentWindow')
const dnd = require('../../../../js/dnd')
const cx = require('../../../../js/lib/classSet')
const {getSetting} = require('../../../../js/settings')
const frameStateUtil = require('../../../../js/state/frameStateUtil')
const contextMenus = require('../../../../js/contextMenus')

// Styles
const globalStyles = require('../styles/global')

class BookmarkToolbarButton extends ImmutableComponent {
constructor () {
super()
class BookmarkToolbarButton extends React.Component {
constructor (props) {
super(props)
this.onClick = this.onClick.bind(this)
this.onAuxClick = this.onAuxClick.bind(this)
this.onMouseOver = this.onMouseOver.bind(this)
this.onDragStart = this.onDragStart.bind(this)
this.onDragEnd = this.onDragEnd.bind(this)
this.onDragEnter = this.onDragEnter.bind(this)
this.onDragLeave = this.onDragLeave.bind(this)
this.onDragOver = this.onDragOver.bind(this)
this.onContextMenu = this.onContextMenu.bind(this)
this.openContextMenu = this.openContextMenu.bind(this)
this.clickBookmarkItem = this.clickBookmarkItem.bind(this)
this.showBookmarkFolderMenu = this.showBookmarkFolderMenu.bind(this)
}

componentDidMount () {
this.bookmarkNode.addEventListener('auxclick', this.onAuxClick.bind(this))
this.bookmarkNode.addEventListener('auxclick', this.onAuxClick)
}

get activeFrame () {
return windowStore.getFrame(this.props.activeFrameKey)
}

onAuxClick (e) {
if (e.button === 1) {
this.onClick(e)
}
}

onClick (e) {
if (!this.props.clickBookmarkItem(this.props.bookmark, e) &&
this.props.bookmark.get('tags').includes(siteTags.BOOKMARK_FOLDER)) {
if (!this.clickBookmarkItem(e) && this.props.isFolder) {
if (this.props.contextMenuDetail) {
windowActions.setContextMenuDetail()
return
}

e.target = ReactDOM.findDOMNode(this)
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
this.showBookmarkFolderMenu(e)
}
}

onMouseOver (e) {
// Behavior when a bookmarks toolbar folder has its list expanded
if (this.props.selectedFolderId) {
if (this.isFolder && this.props.selectedFolderId !== this.props.bookmark.get('folderId')) {
if (this.props.isFolder && this.props.selectedFolderId !== this.props.folderId) {
// Auto-expand the menu if user mouses over another folder
e.target = ReactDOM.findDOMNode(this)
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
} else if (!this.isFolder && this.props.selectedFolderId !== -1) {
this.showBookmarkFolderMenu(e)
} else if (!this.props.isFolder && this.props.selectedFolderId !== -1) {
// Hide the currently expanded menu if user mouses over a non-folder
windowActions.setBookmarksToolbarSelectedFolderId(-1)
windowActions.setContextMenuDetail()
Expand All @@ -91,10 +107,10 @@ class BookmarkToolbarButton extends ImmutableComponent {

onDragEnter (e) {
// Bookmark specific DND code to expand hover when on a folder item
if (this.isFolder) {
if (this.props.isFolder) {
e.target = ReactDOM.findDOMNode(this)
if (dnd.isMiddle(e.target, e.clientX)) {
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
this.showBookmarkFolderMenu(e)
appActions.draggedOver({
draggingOverKey: this.props.bookmark,
draggingOverType: dragTypes.BOOKMARK,
Expand All @@ -105,9 +121,9 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
}

onDragLeave (e) {
onDragLeave () {
// Bookmark specific DND code to expand hover when on a folder item
if (this.isFolder) {
if (this.props.isFolder) {
appActions.draggedOver({
draggingOverKey: this.props.bookmark,
draggingOverType: dragTypes.BOOKMARK,
Expand All @@ -118,49 +134,63 @@ class BookmarkToolbarButton extends ImmutableComponent {
}

onDragOver (e) {
dnd.onDragOver(dragTypes.BOOKMARK, this.bookmarkNode.getBoundingClientRect(), this.props.bookmark, this.draggingOverData, e)
dnd.onDragOver(
dragTypes.BOOKMARK,
this.bookmarkNode.getBoundingClientRect(),
this.props.bookmark,
this.props.draggingOverData,
e
)
}

get draggingOverData () {
if (!this.props.draggingOverData ||
!Immutable.is(this.props.draggingOverData.get('draggingOverKey'), this.props.bookmark)) {
return
}

return this.props.draggingOverData
onContextMenu (e) {
this.openContextMenu(e)
}

get isDragging () {
return Immutable.is(this.props.bookmark, dnd.getInterBraveDragData())
openContextMenu (e) {
contextMenus.onSiteDetailContextMenu(this.props.bookmark, this.activeFrame, e)
}

get isDraggingOverLeft () {
if (!this.draggingOverData) {
return false
}
return this.draggingOverData.get('draggingOverLeftHalf')
clickBookmarkItem (e) {
return bookmarkActions.clickBookmarkItem(this.props.bookmarks, this.props.bookmark, this.activeFrame, e)
}

get isExpanded () {
if (!this.props.draggingOverData) {
return false
}
return this.props.draggingOverData.get('expanded')
showBookmarkFolderMenu (e) {
windowActions.setBookmarksToolbarSelectedFolderId(this.props.folderId)
contextMenus.onShowBookmarkFolderMenu(this.props.bookmarks, this.props.bookmark, this.activeFrame, e)
}

get isDraggingOverRight () {
if (!this.draggingOverData) {
return false
}
return this.draggingOverData.get('draggingOverRightHalf')
}
mergeProps (state, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
const btbMode = getSetting(settings.BOOKMARKS_TOOLBAR_MODE)
const bookmark = ownProps.bookmark
const draggingOverData = bookmarkState.getDNDBookmarkData(state, bookmark)

get isFolder () {
return siteUtil.isFolder(this.props.bookmark)
}
const props = {}
// used in renderer
props.showFavicon = btbMode === bookmarksToolbarMode.TEXT_AND_FAVICONS ||
btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.showOnlyFavicon = btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.favIcon = bookmark.get('favicon')
props.title = bookmark.get('customTitle', bookmark.get('title'))
props.location = bookmark.get('location')
props.isFolder = siteUtil.isFolder(bookmark)
props.isDraggingOverLeft = draggingOverData.get('draggingOverLeftHalf', false)
props.isDraggingOverRight = draggingOverData.get('draggingOverRightHalf', false)
props.isExpanded = draggingOverData.get('expanded', false)
props.isDragging = Immutable.is(dnd.getInterBraveDragData(), bookmark)

onContextMenu (e) {
this.props.openContextMenu(this.props.bookmark, e)
// used in other function
props.bookmark = bookmark // TODO (nejc) only primitives
props.bookmarks = siteUtil.getBookmarks(state.get('sites')) // TODO (nejc) only primitives
props.contextMenuDetail = currentWindow.get('contextMenuDetail') // TODO (nejc) only primitives
props.draggingOverData = draggingOverData // TODO (nejc) only primitives
props.activeFrameKey = activeFrame.get('key')
props.selectedFolderId = currentWindow.getIn(['ui', 'bookmarksToolbar', 'selectedFolderId'])
props.folderId = bookmark.get('folderId')

return props
}

render () {
Expand All @@ -171,36 +201,30 @@ class BookmarkToolbarButton extends ImmutableComponent {
}

if (showingFavicon) {
let icon = this.props.bookmark.get('favicon')

if (icon) {
if (this.props.favIcon) {
iconStyle = Object.assign(iconStyle, {
backgroundImage: `url(${icon})`,
backgroundImage: `url(${this.props.favIcon})`,
backgroundSize: iconSize,
height: iconSize
})
} else if (!this.isFolder) {
} else if (!this.props.isFolder) {
showingFavicon = false
}
}

const siteDetailTitle = this.props.bookmark.get('customTitle') || this.props.bookmark.get('title')
const siteDetailLocation = this.props.bookmark.get('location')
let hoverTitle
if (this.isFolder) {
hoverTitle = siteDetailTitle
} else {
hoverTitle = siteDetailTitle
? siteDetailTitle + '\n' + siteDetailLocation
: siteDetailLocation
let hoverTitle = this.props.title
if (!this.props.isFolder) {
hoverTitle = this.props.title
? this.props.title + '\n' + this.props.location
: this.props.location
}

return <span
className={css(
styles.bookmarkToolbarButton,
(this.isDraggingOverLeft && !this.isExpanded && !this.isDragging) && styles.bookmarkToolbarButton__draggingOverLeft,
(this.isDraggingOverRight && !this.isExpanded && !this.isDragging) && styles.bookmarkToolbarButton__draggingOverRight,
this.isDragging && styles.bookmarkToolbarButton__isDragging,
(this.props.isDraggingOverLeft && !this.props.isExpanded && !this.props.isDragging) && styles.bookmarkToolbarButton__draggingOverLeft,
(this.props.isDraggingOverRight && !this.props.isExpanded && !this.props.isDragging) && styles.bookmarkToolbarButton__draggingOverRight,
this.props.isDragging && styles.bookmarkToolbarButton__isDragging,
(this.props.showFavicon && this.props.showOnlyFavicon) && styles.bookmarkToolbarButton__showOnlyFavicon
)}
data-test-id='bookmarkToolbarButton'
Expand All @@ -216,7 +240,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
onDragOver={this.onDragOver}
onContextMenu={this.onContextMenu}>
{
this.isFolder && this.props.showFavicon
this.props.isFolder && this.props.showFavicon
? <span className={cx({
fa: true,
'fa-folder-o': true,
Expand All @@ -229,7 +253,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
{
// Fill in a favicon if we want one but there isn't one
!this.isFolder && this.props.showFavicon && !showingFavicon
!this.props.isFolder && this.props.showFavicon && !showingFavicon
? <span className={cx({
bookmarkFile: true,
fa: true,
Expand All @@ -243,7 +267,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
: null
}
{
!this.isFolder && showingFavicon
!this.props.isFolder && showingFavicon
? <span className={css(
styles.bookmarkToolbarButton__bookmarkFavicon,
this.props.showOnlyFavicon && styles.bookmarkToolbarButton__marginRightZero
Expand All @@ -254,13 +278,13 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
<span className={css(styles.bookmarkToolbarButton__bookmarkText)} data-test-id='bookmarkText'>
{
(this.isFolder ? false : (this.props.showFavicon && this.props.showOnlyFavicon))
(this.props.isFolder ? false : (this.props.showFavicon && this.props.showOnlyFavicon))
? ''
: siteDetailTitle || siteDetailLocation
: this.props.title || this.props.location
}
</span>
{
this.isFolder
this.props.isFolder
? <span className={cx({
fa: true,
'fa-chevron-down': true,
Expand All @@ -273,7 +297,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
}

module.exports = BookmarkToolbarButton
module.exports = ReduxComponent.connect(BookmarkToolbarButton)

const bookmarkItemMaxWidth = '100px'
const bookmarkItemPadding = '4px'
Expand Down
Loading

0 comments on commit e21ade1

Please sign in to comment.