mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-11-10 10:17:11 +03:00
bdd605e85b
Previously, dummy scrollbars were always 15px wide/tall. This caused them to obscure the ability to click for the entire 15px region, even if the actual scrollbar was styled to be much thinner. Now we explicitly measure the size of scrollbars on mount and when the stylesheets change and set the height/width explicitly.
68 lines
2.5 KiB
CoffeeScript
68 lines
2.5 KiB
CoffeeScript
React = require 'react'
|
|
{div} = require 'reactionary'
|
|
{extend, isEqualForProperties} = require 'underscore-plus'
|
|
|
|
module.exports =
|
|
ScrollbarComponent = React.createClass
|
|
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.height = horizontalScrollbarHeight
|
|
style.right = verticalScrollbarWidth if scrollableInOppositeDirection
|
|
|
|
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)
|