mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 09:16:07 +08:00
31037dfa1b
Summary: Allow Database models to create indexes, but don't autocreate bad ones fix minor bug in error-reporter Fix index on message list to make thread list lookups use proper index Developer bar ignores state changes unless it's open DatabaseView now asks for metadata for a set of items rather than calling a function for every item. Promise.props was cute but we really needed to make a single database query for all message metadata. New "in" matcher so you can say `thread_id IN (1,2,3)` Add .scroll-region-content-inner which is larger than the viewport by 1 page size, and uses transform(0,0,0) trick ScrollRegion exposes `onScrollEnd` so listTabular, et al don't need to re-implement it with more timers. Also removing requestAnimationFrame which was causing us to request scrollTop when it was not ready, and caching the values of... ...clientHeight/scrollHeight while scrolling is in-flight Updating rendered content 10 rows at a time (RangeChunkSize) was a bad idea. Instead, add every row in a render: pass as it comes in (less work all the time vs more work intermittently). Also remove bad requestAnimationFrame, and prevent calls to... ...updateRangeState from triggering additional calls to updateRangeState by removing `componentDidUpdate => updateRangeState ` Turning off hover (pointer-events:none) is now standard in ScrollRegion Loading text in the scroll tooltip, instead of random date shown Handle query parse errors by catching error and throwing a better more explanatory error Replace "quick action" retina images with background images to make React render easier Replace hasTagId with a faster implementation which doesn't call functions and doesn't build a temporary array Print query durations when printing to console instead of only in metadata Remove headers from support from ListTabular, we'll never use it Making columns part of state was a good idea but changing the array causes the entire ListTabular to re-render. To avoid this, be smarter about updating columns. This logic could potentially go in `componentDidReceiveProps` too. Fix specs and add 6 more for new database store functionality Test Plan: Run 6 new specs. More in the works? Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D1651
169 lines
5.7 KiB
CoffeeScript
169 lines
5.7 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require 'react/addons'
|
|
{Utils} = require 'nylas-exports'
|
|
classNames = require 'classnames'
|
|
|
|
###
|
|
The ScrollRegion component attaches a custom scrollbar.
|
|
###
|
|
|
|
class ScrollRegion extends React.Component
|
|
@displayName: "ScrollRegion"
|
|
|
|
@propTypes:
|
|
onScroll: React.PropTypes.func
|
|
onScrollEnd: React.PropTypes.func
|
|
className: React.PropTypes.string
|
|
scrollTooltipComponent: React.PropTypes.func
|
|
children: React.PropTypes.oneOfType([React.PropTypes.element, React.PropTypes.array])
|
|
|
|
constructor: (@props) ->
|
|
@state =
|
|
totalHeight:0
|
|
viewportHeight: 0
|
|
viewportScrollTop: 0
|
|
dragging: false
|
|
scrolling: false
|
|
|
|
Object.defineProperty(@, 'scrollTop', {
|
|
get: -> React.findDOMNode(@refs.content).scrollTop
|
|
set: (val) -> React.findDOMNode(@refs.content).scrollTop = val
|
|
})
|
|
|
|
componentDidMount: =>
|
|
@_recomputeDimensions()
|
|
|
|
componentWillUnmount: =>
|
|
@_onHandleUp()
|
|
|
|
shouldComponentUpdate: (newProps, newState) =>
|
|
# Because this component renders @props.children, it needs to update
|
|
# on props.children changes. Unfortunately, computing isEqual on the
|
|
# @props.children tree extremely expensive. Just let React's algorithm do it's work.
|
|
true
|
|
|
|
render: =>
|
|
containerClasses = "#{@props.className ? ''} " + classNames
|
|
'scroll-region': true
|
|
'dragging': @state.dragging
|
|
'scrolling': @state.scrolling
|
|
|
|
otherProps = _.omit(@props, _.keys(@constructor.propTypes))
|
|
|
|
tooltip = []
|
|
if @props.scrollTooltipComponent
|
|
tooltip = <@props.scrollTooltipComponent viewportCenter={@state.viewportScrollTop + @state.viewportHeight / 2} totalHeight={@state.totalHeight} />
|
|
|
|
<div className={containerClasses} {...otherProps}>
|
|
<div className="scrollbar-track" style={@_scrollbarWrapStyles()} onMouseEnter={@_recomputeDimensions}>
|
|
<div className="scrollbar-track-inner" ref="track" onClick={@_onScrollJump}>
|
|
<div className="scrollbar-handle" onMouseDown={@_onHandleDown} style={@_scrollbarHandleStyles()} ref="handle" onClick={@_onHandleClick} >
|
|
<div className="tooltip">{tooltip}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="scroll-region-content" onScroll={@_onScroll} ref="content">
|
|
<div className="scroll-region-content-inner">
|
|
{@props.children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
# Public: Scroll to the DOM Node provided.
|
|
#
|
|
scrollTo: (node) =>
|
|
container = React.findDOMNode(@)
|
|
adjustment = Utils.scrollAdjustmentToMakeNodeVisibleInContainer(node, container)
|
|
@scrollTop += adjustment if adjustment isnt 0
|
|
|
|
_scrollbarWrapStyles: =>
|
|
position:'absolute'
|
|
top: 0
|
|
bottom: 0
|
|
right: 0
|
|
zIndex: 2
|
|
|
|
_scrollbarHandleStyles: =>
|
|
handleHeight = @_getHandleHeight()
|
|
handleTop = (@state.viewportScrollTop / (@state.totalHeight - @state.viewportHeight)) * (@state.trackHeight - handleHeight)
|
|
|
|
position:'relative'
|
|
height: handleHeight
|
|
top: handleTop
|
|
|
|
_getHandleHeight: =>
|
|
Math.min(@state.totalHeight, Math.max(40, (@state.trackHeight / @state.totalHeight) * @state.trackHeight))
|
|
|
|
_recomputeDimensions: ({avoidForcingLayout} = {}) =>
|
|
return unless @refs.content
|
|
|
|
contentNode = React.findDOMNode(@refs.content)
|
|
trackNode = React.findDOMNode(@refs.track)
|
|
viewportScrollTop = contentNode.scrollTop
|
|
|
|
# While we're scrolling, calls to contentNode.scrollHeight / clientHeight
|
|
# force the browser to immediately flush any DOM changes and compute the
|
|
# height of the node. This hurts performance and also kind of unnecessary,
|
|
# since it's unlikely these values will change while scrolling.
|
|
if avoidForcingLayout
|
|
totalHeight = @state.totalHeight ? contentNode.scrollHeight
|
|
trackHeight = @state.trackHeight ? contentNode.scrollHeight
|
|
viewportHeight = @state.viewportHeight ? contentNode.clientHeight
|
|
else
|
|
totalHeight = contentNode.scrollHeight
|
|
trackHeight = trackNode.clientHeight
|
|
viewportHeight = contentNode.clientHeight
|
|
|
|
if @state.totalHeight != totalHeight or
|
|
@state.trackHeight != trackHeight or
|
|
@state.viewportHeight != viewportHeight or
|
|
@state.viewportScrollTop != viewportScrollTop
|
|
@setState({totalHeight, trackHeight, viewportScrollTop, viewportHeight})
|
|
|
|
_onHandleDown: (event) =>
|
|
handleNode = React.findDOMNode(@refs.handle)
|
|
@_trackOffset = React.findDOMNode(@refs.track).getBoundingClientRect().top
|
|
@_mouseOffsetWithinHandle = event.pageY - handleNode.getBoundingClientRect().top
|
|
window.addEventListener("mousemove", @_onHandleMove)
|
|
window.addEventListener("mouseup", @_onHandleUp)
|
|
@setState(dragging: true)
|
|
|
|
_onHandleMove: (event) =>
|
|
trackY = event.pageY - @_trackOffset - @_mouseOffsetWithinHandle
|
|
trackPxToViewportPx = (@state.totalHeight - @state.viewportHeight) / (@state.trackHeight - @_getHandleHeight())
|
|
|
|
contentNode = React.findDOMNode(@refs.content)
|
|
contentNode.scrollTop = trackY * trackPxToViewportPx
|
|
|
|
_onHandleUp: (event) =>
|
|
window.removeEventListener("mousemove", @_onHandleMove)
|
|
window.removeEventListener("mouseup", @_onHandleUp)
|
|
@setState(dragging: false)
|
|
|
|
_onHandleClick: (event) =>
|
|
# Avoid event propogating up to track
|
|
event.stopPropagation()
|
|
|
|
_onScrollJump: (event) =>
|
|
@_trackOffset = React.findDOMNode(@refs.track).getBoundingClientRect().top
|
|
@_mouseOffsetWithinHandle = @_getHandleHeight() / 2
|
|
@_onHandleMove(event)
|
|
|
|
_onScroll: (event) =>
|
|
if not @state.scrolling
|
|
@_recomputeDimensions()
|
|
@setState(scrolling: true)
|
|
else
|
|
@_recomputeDimensions({avoidForcingLayout: true})
|
|
|
|
@props.onScroll?(event)
|
|
|
|
@_onScrollEnd ?= _.debounce =>
|
|
@setState(scrolling: false)
|
|
@props.onScrollEnd?(event)
|
|
, 250
|
|
@_onScrollEnd()
|
|
|
|
|
|
module.exports = ScrollRegion
|