Bookmark manager style update

js/about/bookmarks.js

@@ -169,18 +169,19 @@ class BookmarksList extends ImmutableComponent {
     }
   }
   render () {
-    const props = !this.props.sortable ? {
-      sortingDisabled: true
+    const props = !this.props.draggable ? {
+      sortingDisabled: !this.props.sortable
     } : {
       onDoubleClick: this.onDoubleClick,
       onDragStart: this.onDragStart,
       onDragOver: this.onDragOver,
       onDrop: this.onDrop,
-      sortingDisabled: false
+      sortingDisabled: !this.props.sortable
     }
 
     return <div>
       <SortableTable headings={['Title', 'Last Visited']}
+        defaultHeading='Title'
         rows={this.props.bookmarks.map((entry) => [
           {
             cell: <BookmarkTitleCell siteDetail={entry} />,
@@ -192,11 +193,12 @@ class BookmarksList extends ImmutableComponent {
           }
         ])}
         rowObjects={this.props.bookmarks}
-        defaultHeading='Title'
+        columnClassNames={['title', 'date']}
+        tableID={this.props.tableID}
         addHoverClass
+        multiSelect
         onDoubleClick={this.onDoubleClick}
         {...props}
-        columnClassNames={['title', 'date']}
         contextMenuName='bookmark'
         onContextMenu={aboutActions.contextMenu} />
     </div>
@@ -288,7 +290,9 @@ class AboutBookmarks extends React.Component {
               ? this.searchedBookmarks(this.state.search, this.state.bookmarks)
               : this.bookmarksInFolder
             }
-            sortable={!this.state.search} />
+            sortable={false}
+            draggable={!this.state.search}
+            tableID={this.selectedFolderId} />
         </div>
       </div>
     </div>

js/components/sortableTable.js

@@ -27,7 +27,13 @@ class SortableTable extends ImmutableComponent {
     return tableSort(this.table)
   }
   onClick (e) {
-    const targetElement = e.target.parentNode
+    // Work backwards until element is TR
+    let targetElement = e.target
+    while (targetElement) {
+      if (targetElement.tagName === 'TR') break
+      targetElement = targetElement.parentNode
+    }
+    if (!targetElement) return
 
     if (eventUtil.isForSecondaryAction(e)) {
       if (targetElement.className.includes(' selected')) {
@@ -81,7 +87,12 @@ class SortableTable extends ImmutableComponent {
         ? (typeof this.props.totalRowObjects[parseInt(tableID)][index].toJS === 'function'
           ? this.props.totalRowObjects[parseInt(tableID)][index].toJS()
           : this.props.totalRowObjects[parseInt(tableID)][index])
-        : null
+        : (this.props.rowObjects.size > 0 || this.props.rowObjects.length > 0)
+          ? (typeof this.props.rowObjects.toJS === 'function'
+            ? this.props.rowObjects.get(index).toJS()
+            : this.props.rowObjects[index])
+          : null
+
       if (handlerInput) {
         handlerInputs.push(handlerInput)
       }