1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 16x 16x 20x 36x 36x 36x 36x 36x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 4x 4x | /** * Copyright 2018, Plotly, Inc. * All rights reserved. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import createRef from 'create-react-ref/lib/createRef'; import { movePosition } from '../../store/positionReducers'; import withPositionStore from '../../store/withPositionStore'; import requestAnimation from '../../utils/requestAnimation'; /** * Creates a DOM element with absolute position that can have scrollbars. * However, no actual content is displayed by this element. */ class FakeScroll extends PureComponent { constructor(props) { super(props); this.el = createRef(); } onScroll = (e) => { requestAnimation(this, () => { const movement = { xMovement: this.el.current.scrollLeft - this.props.position.xPos, yMovement: this.el.current.scrollTop - this.props.position.yPos, }; this.props.positionDispatch(movePosition(movement)); }); }; updateScrollPosition = () => { Eif (!this.el || !this.el.current) return; this.el.current.scrollTop = this.props.position.yPos; this.el.current.scrollLeft = this.props.position.xPos; } checkOverflow(overflow, {withX = false, withY = false}) { let show = false; switch(this.props.overflow) { case "auto": if (withX) { show |= this.props.fullWidth > this.props.width; } if (withY) { show |= this.props.fullHeight > this.props.height; } break; case "hidden": show = false; break; case "scroll": show = true; break; default: } return show; } shouldShow() { const withX = {withX: true}; const withY = {withY: true}; const overflowX = this.props.overflowX === "initial" ? this.props.overflow : this.props.overflowX; const overflowY = this.props.overflowY === "initial" ? this.props.overflow : this.props.overflowY; const showX = this.checkOverflow(overflowX, withX) && this.checkOverflow(this.props.overflow, withX); const showY = this.checkOverflow(overflowY, withY) && this.checkOverflow(this.props.overflow, withY); return {showX, showY}; } render() { const { width, height, fullWidth, fullHeight } = this.props; const style = { position: "absolute", overflowX: "auto", overflowY: "auto", width, height, transform: "", }; const {showX, showY} = this.shouldShow(); const childStyle = { height: 1, width: 1, }; Eif (!showY && !showX) { return <div />; } if (showX) { childStyle.width = fullWidth; style.overflowX = "scroll"; if (this.props.positionX === "top") { style.transform += "rotateX(180deg)"; } } if (showY) { childStyle.height = fullHeight; style.overflowY = "scroll"; if (this.props.positionY === "left") { style.transform += "rotateY(180deg)"; } } return <div style={style} onScroll={this.onScroll} ref={this.el}> <div style={childStyle} /> </div>; } } FakeScroll.defaultProps = { overflow: "auto", overflowX: "initial", overflowY: "initial", positionX: "bottom", positionY: "right", scrollBarWidth: 5, } FakeScroll.propTypes = { overflow: PropTypes.oneOf(["hidden", "auto", "scroll"]), overflowX: PropTypes.oneOf(["hidden", "auto", "scroll", "initial"]), overflowY: PropTypes.oneOf(["hidden", "auto", "scroll", "initial"]), width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, fullHeight: PropTypes.number.isRequired, fullWidth: PropTypes.number.isRequired, positionX: PropTypes.oneOf(["top", "bottom"]), positionY: PropTypes.oneOf(["left", "right"]), } export default withPositionStore(FakeScroll, {withX: true, withY: true}); |