Files
atom/src/scrollbar-component.coffee
Ben Ogle 2a9c78ef92 Move horiz scrollbar into the scrollView
Also remove all the gutter width calculation. It was flawed anyway,
2014-07-23 16:20:48 -07:00

71 lines
2.6 KiB
CoffeeScript

React = require 'react-atom-fork'
{div} = require 'reactionary-atom-fork'
{extend, isEqualForProperties} = require 'underscore-plus'
module.exports =
ScrollbarComponent = React.createClass
displayName: 'ScrollbarComponent'
render: ->
{orientation, className, scrollHeight, scrollWidth, visible} = @props
{scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props
style = {}
style.display = 'none' unless visible
switch orientation
when 'vertical'
style.width = verticalScrollbarWidth
style.bottom = horizontalScrollbarHeight if scrollableInOppositeDirection
when 'horizontal'
style.left = 0
style.right = verticalScrollbarWidth if scrollableInOppositeDirection
style.height = horizontalScrollbarHeight
div {className, style, @onScroll},
switch orientation
when 'vertical'
div className: 'scrollbar-content', style: {height: scrollHeight}
when 'horizontal'
div className: 'scrollbar-content', style: {width: scrollWidth}
componentDidMount: ->
{orientation} = @props
unless orientation is 'vertical' or orientation is 'horizontal'
throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'")
shouldComponentUpdate: (newProps) ->
return true if newProps.visible isnt @props.visible
switch @props.orientation
when 'vertical'
not isEqualForProperties(newProps, @props, 'scrollHeight', 'scrollTop', 'scrollableInOppositeDirection')
when 'horizontal'
not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'scrollableInOppositeDirection')
componentDidUpdate: ->
{orientation, scrollTop, scrollLeft} = @props
node = @getDOMNode()
switch orientation
when 'vertical'
node.scrollTop = scrollTop
@props.scrollTop = node.scrollTop # Ensure scrollTop reflects actual DOM without triggering another update
when 'horizontal'
node.scrollLeft = scrollLeft
@props.scrollLeft = node.scrollLeft # Ensure scrollLeft reflects actual DOM without triggering another update
onScroll: ->
{orientation, onScroll} = @props
node = @getDOMNode()
switch orientation
when 'vertical'
scrollTop = node.scrollTop
@props.scrollTop = scrollTop # Ensure scrollTop reflects actual DOM without triggering another update
onScroll(scrollTop)
when 'horizontal'
scrollLeft = node.scrollLeft
@props.scrollLeft = scrollLeft # Ensure scrollLeft reflects actual DOM without triggering another update
onScroll(scrollLeft)