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 
Auditors:

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed May 22, 2017
1 parent da41b7e commit a3d9ee0
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 45 deletions.
59 changes: 50 additions & 9 deletions app/renderer/components/bookmarks/bookmarkToolbarButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ 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')
Expand All @@ -20,18 +20,24 @@ const windowStore = require('../../../../js/stores/windowStore')
// Constants
const siteTags = require('../../../../js/constants/siteTags')
const dragTypes = require('../../../../js/constants/dragTypes')
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 iconSize = require('../../../common/lib/faviconUtil').iconSize
const {iconSize} = require('../../../common/lib/faviconUtil')
const cx = require('../../../../js/lib/classSet')
const {getSetting} = require('../../../../js/settings')

// Styles
const globalStyles = require('../styles/global')
const contextMenus = require('../../../../js/contextMenus')
const bookmarkActions = require('../../../../js/actions/bookmarkActions')
const frameStateUtil = require('../../../../js/state/frameStateUtil')

class BookmarkToolbarButton extends ImmutableComponent {
class BookmarkToolbarButton extends React.Component {
constructor () {
super()
this.onClick = this.onClick.bind(this)
Expand All @@ -42,6 +48,9 @@ class BookmarkToolbarButton extends ImmutableComponent {
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))
Expand All @@ -55,14 +64,14 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
}
onClick (e) {
if (!this.props.clickBookmarkItem(this.props.bookmark, e) &&
if (!this.clickBookmarkItem(this.props.bookmark, e) &&
this.props.bookmark.get('tags').includes(siteTags.BOOKMARK_FOLDER)) {
if (this.props.contextMenuDetail) {
windowActions.setContextMenuDetail()
return
}
e.target = ReactDOM.findDOMNode(this)
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
this.showBookmarkFolderMenu(this.props.bookmark, e)
}
}

Expand All @@ -72,7 +81,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
if (this.isFolder && this.props.selectedFolderId !== this.props.bookmark.get('folderId')) {
// Auto-expand the menu if user mouses over another folder
e.target = ReactDOM.findDOMNode(this)
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
this.showBookmarkFolderMenu(this.props.bookmark, e)
} else if (!this.isFolder && this.props.selectedFolderId !== -1) {
// Hide the currently expanded menu if user mouses over a non-folder
windowActions.setBookmarksToolbarSelectedFolderId(-1)
Expand All @@ -94,7 +103,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
if (this.isFolder) {
e.target = ReactDOM.findDOMNode(this)
if (dnd.isMiddle(e.target, e.clientX)) {
this.props.showBookmarkFolderMenu(this.props.bookmark, e)
this.showBookmarkFolderMenu(this.props.bookmark, e)
appActions.draggedOver({
draggingOverKey: this.props.bookmark,
draggingOverType: dragTypes.BOOKMARK,
Expand Down Expand Up @@ -160,7 +169,39 @@ class BookmarkToolbarButton extends ImmutableComponent {
}

onContextMenu (e) {
this.props.openContextMenu(this.props.bookmark, e)
this.openContextMenu(this.props.bookmark, e)
}

openContextMenu (bookmark, e) {
contextMenus.onSiteDetailContextMenu(bookmark, this.activeFrame, e)
}

clickBookmarkItem (bookmark, e) {
return bookmarkActions.clickBookmarkItem(this.bookmarks, bookmark, this.activeFrame, e)
}

showBookmarkFolderMenu (bookmark, e) {
windowActions.setBookmarksToolbarSelectedFolderId(bookmark.get('folderId'))
contextMenus.onShowBookmarkFolderMenu(this.bookmarks, bookmark, this.activeFrame, e)
}

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow)
const btbMode = getSetting(settings.BOOKMARKS_TOOLBAR_MODE)

const props = {}
props.bookmark = ownProps.bookmark
props.contextMenuDetail = currentWindow.get('contextMenuDetail')
props.activeFrameKey = (activeFrame && activeFrame.get('key')) || undefined
props.draggingOverData = state.getIn(['dragData', 'dragOverData', 'draggingOverType']) === dragTypes.BOOKMARK &&
state.getIn(['dragData', 'dragOverData'])
props.showFavicon = btbMode === bookmarksToolbarMode.TEXT_AND_FAVICONS ||
btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.showOnlyFavicon = btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.selectedFolderId = currentWindow.getIn(['ui', 'bookmarksToolbar', 'selectedFolderId'])

return props
}

render () {
Expand Down Expand Up @@ -273,7 +314,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
}
}

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

const bookmarkItemMaxWidth = '100px'
const bookmarkItemPadding = '4px'
Expand Down
75 changes: 54 additions & 21 deletions app/renderer/components/bookmarks/bookmarksToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const ReactDOM = require('react-dom')
const {StyleSheet, css} = require('aphrodite/no-important')

// Components
const ImmutableComponent = require('../immutableComponent')
const ReduxComponent = require('../reduxComponent')
const BrowserButton = require('../common/browserButton')
const BookmarkToolbarButton = require('./bookmarkToolbarButton')

Expand All @@ -16,26 +16,35 @@ const windowActions = require('../../../../js/actions/windowActions')
const bookmarkActions = require('../../../../js/actions/bookmarkActions')
const appActions = require('../../../../js/actions/appActions')

// State
const windowState = require('../../../common/state/windowState')

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

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

// Utils
const {isFocused} = require('../../currentWindow')
const siteUtil = require('../../../../js/state/siteUtil')
const contextMenus = require('../../../../js/contextMenus')
const cx = require('../../../../js/lib/classSet')
const dnd = require('../../../../js/dnd')
const dndData = require('../../../../js/dndData')
const calculateTextWidth = require('../../../../js/lib/textCalculator').calculateTextWidth
const iconSize = require('../../../common/lib/faviconUtil').iconSize
const {calculateTextWidth} = require('../../../../js/lib/textCalculator')
const {iconSize} = require('../../../common/lib/faviconUtil')
const {isWindows} = require('../../../common/lib/platformUtil')
const {getSetting} = require('../../../../js/settings')

// Styles
const globalStyles = require('../styles/global')
var frameStateUtil = require('../../../../js/state/frameStateUtil.js')

class BookmarksToolbar extends ImmutableComponent {
class BookmarksToolbar extends React.Component {
constructor () {
super()
this.onDrop = this.onDrop.bind(this)
Expand All @@ -47,9 +56,11 @@ class BookmarksToolbar extends ImmutableComponent {
this.clickBookmarkItem = this.clickBookmarkItem.bind(this)
this.showBookmarkFolderMenu = this.showBookmarkFolderMenu.bind(this)
}

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

onDrop (e) {
e.preventDefault()
const bookmark = dnd.prepareBookmarkDataFromCompatible(e.dataTransfer)
Expand Down Expand Up @@ -97,16 +108,20 @@ class BookmarksToolbar extends ImmutableComponent {
.forEach((url) =>
appActions.addSite({ location: url }, siteTags.BOOKMARK))
}

openContextMenu (bookmark, e) {
contextMenus.onSiteDetailContextMenu(bookmark, this.activeFrame, e)
}

clickBookmarkItem (bookmark, e) {
return bookmarkActions.clickBookmarkItem(this.bookmarks, bookmark, this.activeFrame, e)
}

showBookmarkFolderMenu (bookmark, e) {
windowActions.setBookmarksToolbarSelectedFolderId(bookmark.get('folderId'))
contextMenus.onShowBookmarkFolderMenu(this.bookmarks, bookmark, this.activeFrame, e)
}

updateBookmarkData (props) {
this.bookmarks = siteUtil.getBookmarks(props.sites).toList().sort(siteUtil.siteSort)

Expand Down Expand Up @@ -157,9 +172,11 @@ class BookmarksToolbar extends ImmutableComponent {
// Show at most 100 items in the overflow menu
this.overflowBookmarkItems = noParentItems.skip(i).take(100).sort(siteUtil.siteSort)
}

componentWillMount () {
this.updateBookmarkData(this.props)
}

componentWillUpdate (nextProps) {
if (nextProps.sites !== this.props.sites ||
nextProps.windowWidth !== this.props.windowWidth ||
Expand All @@ -168,13 +185,15 @@ class BookmarksToolbar extends ImmutableComponent {
this.updateBookmarkData(nextProps)
}
}

onDragEnter (e) {
if (dndData.hasDragData(e.dataTransfer, dragTypes.BOOKMARK)) {
if (Array.from(e.target.classList).includes('overflowIndicator')) {
this.onMoreBookmarksMenu(e)
}
}
}

onDragOver (e) {
const sourceDragData = dndData.getDragData(e.dataTransfer, dragTypes.BOOKMARK)
if (sourceDragData) {
Expand All @@ -190,23 +209,46 @@ class BookmarksToolbar extends ImmutableComponent {
e.preventDefault()
}
}

onMoreBookmarksMenu (e) {
contextMenus.onMoreBookmarksMenu(this.activeFrame, this.bookmarks, this.overflowBookmarkItems, e)
}

onContextMenu (e) {
const closest = dnd.closestFromXOffset(this.bookmarkRefs.filter((x) => !!x), e.clientX).selectedRef
contextMenus.onTabsToolbarContextMenu(this.activeFrame.get('title'), this.activeFrame.get('location'), (closest && closest.props.bookmark) || undefined, closest && closest.isDroppedOn, e)
}
render () {
let showFavicon = this.props.showFavicon
let showOnlyFavicon = this.props.showOnlyFavicon

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow)
const btbMode = getSetting(settings.BOOKMARKS_TOOLBAR_MODE)

const props = {}

props.draggingOverData = state.getIn(['dragData', 'dragOverData', 'draggingOverType']) === dragTypes.BOOKMARK &&
state.getIn(['dragData', 'dragOverData'])
props.showFavicon = btbMode === bookmarksToolbarMode.TEXT_AND_FAVICONS ||
btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.showOnlyFavicon = btbMode === bookmarksToolbarMode.FAVICONS_ONLY
props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused()) &&
!isWindows()
props.activeFrameKey = (activeFrame && activeFrame.get('key')) || undefined
props.windowWidth = window.innerWidth
props.contextMenuDetail = currentWindow.get('contextMenuDetail')
props.sites = state.get('sites')
props.selectedFolderId = currentWindow.getIn(['ui', 'bookmarksToolbar', 'selectedFolderId'])

return props
}

render () {
this.bookmarkRefs = []
return <div
className={cx({
bookmarksToolbar: true,
showFavicon,
showOnlyFavicon,
showFavicon: this.props.showFavicon,
showOnlyFavicon: this.props.showOnlyFavicon,
[css(styles.bookmarksToolbar)]: true,
[css(this.props.shouldAllowWindowDrag && styles.bookmarksToolbar__allowDragging)]: true,
[css(styles.bookmarksToolbar__showOnlyFavicon)]: true
Expand All @@ -220,17 +262,8 @@ class BookmarksToolbar extends ImmutableComponent {
this.bookmarksForToolbar.map((bookmark, i) =>
<BookmarkToolbarButton
ref={(node) => this.bookmarkRefs.push(node)}
key={i}
contextMenuDetail={this.props.contextMenuDetail}
activeFrameKey={this.props.activeFrameKey}
draggingOverData={this.props.draggingOverData}
openContextMenu={this.openContextMenu}
clickBookmarkItem={this.clickBookmarkItem}
showBookmarkFolderMenu={this.showBookmarkFolderMenu}
bookmark={bookmark}
showFavicon={this.props.showFavicon}
showOnlyFavicon={this.props.showOnlyFavicon}
selectedFolderId={this.props.selectedFolderId} />)
key={`toolbar-button-${i}`}
bookmark={bookmark} />)
}
{
this.overflowBookmarkItems.size !== 0
Expand Down Expand Up @@ -278,4 +311,4 @@ const styles = StyleSheet.create({
}
})

module.exports = BookmarksToolbar
module.exports = ReduxComponent.connect(BookmarksToolbar)
17 changes: 2 additions & 15 deletions app/renderer/components/main/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const appActions = require('../../../../js/actions/appActions')
const windowActions = require('../../../../js/actions/windowActions')
const webviewActions = require('../../../../js/actions/webviewActions')
const contextMenus = require('../../../../js/contextMenus')
const getSetting = require('../../../../js/settings').getSetting
const {getSetting} = require('../../../../js/settings')

// Components
const Navigator = require('../navigation/navigator')
Expand Down Expand Up @@ -47,7 +47,6 @@ const settings = require('../../../../js/constants/settings')
const dragTypes = require('../../../../js/constants/dragTypes')
const keyCodes = require('../../../common/constants/keyCodes')
const keyLocations = require('../../../common/constants/keyLocations')
const {bookmarksToolbarMode} = require('../../../common/constants/settingsEnums')

// State handling
const basicAuthState = require('../../../common/state/basicAuthState')
Expand Down Expand Up @@ -670,9 +669,6 @@ class Main extends ImmutableComponent {
const nonPinnedFrames = frameStateUtil.getNonPinnedFrames(this.props.windowState)
const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE))
const showBookmarksToolbar = getSetting(settings.SHOW_BOOKMARKS_TOOLBAR)
const btbMode = getSetting(settings.BOOKMARKS_TOOLBAR_MODE)
const showFavicon = (btbMode === bookmarksToolbarMode.TEXT_AND_FAVICONS || btbMode === bookmarksToolbarMode.FAVICONS_ONLY)
const showOnlyFavicon = btbMode === bookmarksToolbarMode.FAVICONS_ONLY
const siteInfoIsVisible = this.props.windowState.getIn(['ui', 'siteInfo', 'isVisible'])
const braveryPanelIsVisible = shieldState.braveShieldsEnabled(activeFrame) &&
this.props.windowState.get('braveryPanelDetail')
Expand Down Expand Up @@ -820,16 +816,7 @@ class Main extends ImmutableComponent {
<UpdateBar updates={this.props.appState.get('updates')} />
{
showBookmarksToolbar
? <BookmarksToolbar
draggingOverData={this.props.appState.getIn(['dragData', 'dragOverData', 'draggingOverType']) === dragTypes.BOOKMARK && this.props.appState.getIn(['dragData', 'dragOverData'])}
showFavicon={showFavicon}
showOnlyFavicon={showOnlyFavicon}
shouldAllowWindowDrag={shouldAllowWindowDrag && !isWindows()}
activeFrameKey={(activeFrame && activeFrame.get('key')) || undefined}
windowWidth={window.innerWidth}
contextMenuDetail={contextMenuDetail}
sites={appStateSites}
selectedFolderId={this.props.windowState.getIn(['ui', 'bookmarksToolbar', 'selectedFolderId'])} />
? <BookmarksToolbar />
: null
}
<div className={cx({
Expand Down

0 comments on commit a3d9ee0

Please sign in to comment.