2015-06-06 02:50:55 +08:00
_ = require 'underscore'
React = require 'react/addons'
2015-07-31 09:29:38 +08:00
{Utils} = require 'nylas-exports'
2015-06-06 02:50:55 +08:00
classNames = require 'classnames'
2015-06-24 06:21:25 +08:00
class Scrollbar extends React.Component
@displayName: 'Scrollbar'
@propTypes:
scrollTooltipComponent: React.PropTypes.func
getScrollRegion: React.PropTypes.func
constructor: (@props) ->
@state =
totalHeight: 0
trackHeight: 0
viewportHeight: 0
viewportScrollTop: 0
dragging: false
scrolling: false
componentWillUnmount: =>
@_onHandleUp({preventDefault: -> })
setStateFromScrollRegion: (state) ->
@setState(state)
render: ->
containerClasses = classNames
'scrollbar-track': true
'dragging': @state.dragging
'scrolling': @state.scrolling
tooltip = []
if @props.scrollTooltipComponent
tooltip = <@props.scrollTooltipComponent viewportCenter={@state.viewportScrollTop + @state.viewportHeight / 2} totalHeight={@state.totalHeight} />
<div className={containerClasses} 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>
recomputeDimensions: (options = {}) =>
if @props.getScrollRegion?
@props.getScrollRegion()._recomputeDimensions(options)
@_recomputeDimensions(options)
_recomputeDimensions: ({avoidForcingLayout}) =>
if not avoidForcingLayout
trackNode = React.findDOMNode(@refs.track)
trackHeight = trackNode.clientHeight
if trackHeight isnt @state.trackHeight
@setState({trackHeight})
_scrollbarHandleStyles: =>
handleHeight = @_getHandleHeight()
handleTop = (@state.viewportScrollTop / (@state.totalHeight - @state.viewportHeight)) * (@state.trackHeight - handleHeight)
position:'relative'
height: handleHeight
top: handleTop
_scrollbarWrapStyles: =>
position:'absolute'
top: 0
bottom: 0
right: 0
zIndex: 2
_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)
event.preventDefault()
_onHandleMove: (event) =>
trackY = event.pageY - @_trackOffset - @_mouseOffsetWithinHandle
trackPxToViewportPx = (@state.totalHeight - @state.viewportHeight) / (@state.trackHeight - @_getHandleHeight())
@props.getScrollRegion().scrollTop = trackY * trackPxToViewportPx
event.preventDefault()
_onHandleUp: (event) =>
window.removeEventListener("mousemove", @_onHandleMove)
window.removeEventListener("mouseup", @_onHandleUp)
@setState(dragging: false)
event.preventDefault()
_onHandleClick: (event) =>
# Avoid event propogating up to track
event.stopPropagation()
_onScrollJump: (event) =>
@_trackOffset = React.findDOMNode(@refs.track).getBoundingClientRect().top
@_mouseOffsetWithinHandle = @_getHandleHeight() / 2
@_onHandleMove(event)
_getHandleHeight: =>
Math.min(@state.totalHeight, Math.max(40, (@state.trackHeight / @state.totalHeight) * @state.trackHeight))
2015-06-06 02:50:55 +08:00
###
The ScrollRegion component attaches a custom scrollbar.
###
class ScrollRegion extends React.Component
@displayName: "ScrollRegion"
@propTypes:
onScroll: React.PropTypes.func
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
onScrollEnd: React.PropTypes.func
2015-06-06 02:50:55 +08:00
className: React.PropTypes.string
scrollTooltipComponent: React.PropTypes.func
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
children: React.PropTypes.oneOfType([React.PropTypes.element, React.PropTypes.array])
2015-06-24 06:21:25 +08:00
getScrollbar: React.PropTypes.func
2015-06-06 02:50:55 +08:00
2015-07-31 09:29:38 +08:00
# Concept from https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UITableView_Class/#//apple_ref/c/tdef/UITableViewScrollPosition
@ScrollPosition:
# Scroll so that the desired region is at the top of the viewport
Top: 'Top'
# Scroll so that the desired region is at the bottom of the viewport
Bottom: 'Bottom'
# Scroll so that the desired region is visible in the viewport, with the
# least movement possible.
Visible: 'Visible'
# Scroll so that the desired region is centered in the viewport
Center: 'Center'
# Scroll so that the desired region is centered in the viewport, only if it
# is currently not visible
CenterIfInvisible: 'CenterIfInvisible'
2015-06-06 02:50:55 +08:00
constructor: (@props) ->
2015-07-31 09:29:38 +08:00
@_scrollToTaskId = 0
@_scrollbarComponent = null
2015-06-06 02:50:55 +08:00
@state =
totalHeight:0
viewportHeight: 0
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
viewportScrollTop: 0
2015-06-06 02:50:55 +08:00
scrolling: false
Object.defineProperty(@, 'scrollTop', {
get: -> React.findDOMNode(@refs.content).scrollTop
set: (val) -> React.findDOMNode(@refs.content).scrollTop = val
})
componentDidMount: =>
2015-07-31 09:29:38 +08:00
@_mounted = true
2015-06-24 06:21:25 +08:00
@recomputeDimensions()
2015-06-06 02:50:55 +08:00
2015-07-31 09:29:38 +08:00
componentWillReceiveProps: (props) =>
if @shouldInvalidateScrollbarComponent(props)
@_scrollbarComponent = null
componentWillUnmount: =>
@_mounted = false
2015-06-06 02:50:55 +08:00
shouldComponentUpdate: (newProps, newState) =>
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
# 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
2015-06-06 02:50:55 +08:00
2015-07-31 09:29:38 +08:00
shouldInvalidateScrollbarComponent: (newProps) =>
return true if newProps.scrollTooltipComponent isnt @props.scrollTooltipComponent
return true if newProps.getScrollbar isnt @props.getScrollbar
return false
2015-06-06 02:50:55 +08:00
render: =>
containerClasses = "#{@props.className ? ''} " + classNames
'scroll-region': true
'dragging': @state.dragging
'scrolling': @state.scrolling
2015-06-24 06:21:25 +08:00
if not @props.getScrollbar
2015-07-31 09:29:38 +08:00
@_scrollbarComponent ?= <Scrollbar
2015-06-24 06:21:25 +08:00
ref="scrollbar"
scrollTooltipComponent={@props.scrollTooltipComponent}
getScrollRegion={@_getSelf} />
2015-06-06 02:50:55 +08:00
2015-06-24 06:21:25 +08:00
otherProps = _.omit(@props, _.keys(@constructor.propTypes))
2015-06-06 02:50:55 +08:00
<div className={containerClasses} {...otherProps}>
2015-07-31 09:29:38 +08:00
{@_scrollbarComponent}
2015-06-06 02:50:55 +08:00
<div className="scroll-region-content" onScroll={@_onScroll} ref="content">
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
<div className="scroll-region-content-inner">
{@props.children}
</div>
2015-06-06 02:50:55 +08:00
</div>
</div>
2015-06-09 08:02:50 +08:00
# Public: Scroll to the DOM Node provided.
#
2015-08-04 09:39:11 +08:00
scrollTo: (node, {position, settle, done} = {}) =>
2015-07-31 09:29:38 +08:00
if node instanceof React.Component
node = React.findDOMNode(node)
unless node instanceof Node
throw new Error("ScrollRegion.scrollTo: requires a DOM node or React element. Maybe you meant scrollToRect?")
2015-08-04 09:39:11 +08:00
@_scroll {position, settle, done}, =>
2015-07-31 09:29:38 +08:00
node.getBoundingClientRect()
# Public: Scroll to the client rectangle provided. Note: This method expects
# a ClientRect or similar object with top, left, width, height relative to the
# window, not the scroll region. This is designed to make it easy to use with
# node.getBoundingClientRect()
2015-08-04 09:39:11 +08:00
scrollToRect: (rect, {position, settle, done} = {}) ->
2015-07-31 09:29:38 +08:00
if rect instanceof Node
throw new Error("ScrollRegion.scrollToRect: requires a rect. Maybe you meant scrollTo?")
if not rect.top or not rect.height
throw new Error("ScrollRegion.scrollToRect: requires a rect with `top` and `height` attributes.")
2015-08-04 09:39:11 +08:00
@_scroll {position, settle, done}, => rect
2015-07-31 09:29:38 +08:00
2015-08-04 09:39:11 +08:00
_scroll: ({position, settle, done}, clientRectProviderCallback) ->
2015-07-31 09:29:38 +08:00
contentNode = React.findDOMNode(@refs.content)
position ?= ScrollRegion.ScrollPosition.Visible
if settle is true
settleFn = @_settleHeight
else
settleFn = (callback) -> callback()
@_scrollToTaskId += 1
taskId = @_scrollToTaskId
settleFn =>
# If another scroll call has been made since ours, don't do anything.
2015-08-04 09:39:11 +08:00
return done?(false) unless @_scrollToTaskId is taskId
2015-07-31 09:29:38 +08:00
contentClientRect = contentNode.getBoundingClientRect()
rect = _.clone(clientRectProviderCallback())
# For sanity's sake, convert the client rectangle we get into a rect
# relative to the contentRect of our scroll region.
rect.top = rect.top - contentClientRect.top + contentNode.scrollTop
rect.bottom = rect.bottom - contentClientRect.top + contentNode.scrollTop
# Also give ourselves a representation of the visible region, in the same
# coordinate space as `rect`
contentVisibleRect = _.clone(contentClientRect)
contentVisibleRect.top += contentNode.scrollTop
contentVisibleRect.bottom += contentNode.scrollTop
if position is ScrollRegion.ScrollPosition.Top
@scrollTop = rect.top
else if position is ScrollRegion.ScrollPosition.Bottom
@scrollTop = (rect.top + rect.height) - contentClientRect.height
else if position is ScrollRegion.ScrollPosition.Center
@scrollTop = rect.top - (contentClientRect.height - rect.height) / 2
else if position is ScrollRegion.ScrollPosition.CenterIfInvisible
if not Utils.rectVisibleInRect(rect, contentVisibleRect)
@scrollTop = rect.top - (contentClientRect.height - rect.height) / 2
else if position is ScrollRegion.ScrollPosition.Visible
distanceBelowBottom = (rect.top + rect.height) - (contentClientRect.height + contentNode.scrollTop)
distanceAboveTop = @scrollTop - rect.top
if distanceBelowBottom >= 0
@scrollTop += distanceBelowBottom
else if distanceAboveTop >= 0
@scrollTop -= distanceAboveTop
2015-08-04 09:39:11 +08:00
done?(true)
2015-07-31 09:29:38 +08:00
_settleHeight: (callback) =>
contentNode = React.findDOMNode(@refs.content)
lastContentHeight = -1
scrollIfSettled = =>
return unless @_mounted
contentRect = contentNode.getBoundingClientRect()
if contentRect.height isnt lastContentHeight
lastContentHeight = contentRect.height
else
2015-08-04 09:39:11 +08:00
return callback()
2015-07-31 09:29:38 +08:00
window.requestAnimationFrame(scrollIfSettled)
scrollIfSettled()
2015-06-09 08:02:50 +08:00
2015-06-24 06:21:25 +08:00
recomputeDimensions: (options = {}) =>
scrollbar = @props.getScrollbar?() ? @refs.scrollbar
scrollbar._recomputeDimensions(options)
@_recomputeDimensions(options)
2015-06-06 02:50:55 +08:00
2015-06-24 06:21:25 +08:00
_recomputeDimensions: ({avoidForcingLayout}) =>
2015-06-06 02:50:55 +08:00
return unless @refs.content
contentNode = React.findDOMNode(@refs.content)
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
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
viewportHeight = contentNode.clientHeight
2015-06-06 02:50:55 +08:00
if @state.totalHeight != totalHeight or
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
@state.viewportHeight != viewportHeight or
@state.viewportScrollTop != viewportScrollTop
2015-06-24 06:21:25 +08:00
@_setSharedState({totalHeight, viewportScrollTop, viewportHeight})
2015-06-06 02:50:55 +08:00
2015-06-24 06:21:25 +08:00
_setSharedState: (state) ->
scrollbar = @props.getScrollbar?() ? @refs.scrollbar
2015-07-14 07:30:02 +08:00
if scrollbar
scrollbar.setStateFromScrollRegion(state)
2015-06-24 06:21:25 +08:00
@setState(state)
2015-06-06 02:50:55 +08:00
_onScroll: (event) =>
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
if not @state.scrolling
2015-06-24 06:21:25 +08:00
@recomputeDimensions()
@_setSharedState(scrolling: true)
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
else
2015-06-24 06:21:25 +08:00
@recomputeDimensions({avoidForcingLayout: true})
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
@props.onScroll?(event)
@_onScrollEnd ?= _.debounce =>
2015-06-24 06:21:25 +08:00
@_setSharedState(scrolling: false)
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
@props.onScrollEnd?(event)
, 250
@_onScrollEnd()
2015-06-06 02:50:55 +08:00
2015-06-24 06:21:25 +08:00
_getSelf: =>
@
ScrollRegion.Scrollbar = Scrollbar
2015-06-06 02:50:55 +08:00
module.exports = ScrollRegion