├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── src
├── .npmignore
├── js
├── AutoAdjust.jsx
├── HorizontalWrapper.jsx
├── LightweightRow.jsx
├── Row.jsx
├── Scrollable.jsx
├── constants.js
├── index.jsx
├── models.js
├── propTypes.js
└── utils.js
└── less
└── scrollable.less
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["transform-object-rest-spread"],
3 | "presets": ["react", "es2015"]
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "ecmaFeatures": {
4 | "jsx": true
5 | },
6 | "env": {
7 | "es6": true,
8 | "node": true
9 | },
10 | "extends": "airbnb",
11 | "plugins": [
12 | "react"
13 | ],
14 | "globals": {
15 | "window": true,
16 | "document": true
17 | },
18 | "rules": {
19 | "camelcase": [
20 | 2,
21 | {
22 | "properties": "always"
23 | }
24 | ],
25 | "array-bracket-spacing": 0,
26 | "comma-dangle": [2, "never"],
27 | "func-names": 0,
28 | "import/prefer-default-export": 0,
29 | "indent": ["error", 2, { "SwitchCase": 1 }],
30 | "jsx-quotes": [2, "prefer-single"],
31 | "max-len": [2, 120],
32 | "new-cap": 0,
33 | "no-confusing-arrow": 0,
34 | "no-continue": 0,
35 | "no-mixed-spaces-and-tabs": 2,
36 | "no-multi-spaces": 2,
37 | "no-new": 2,
38 | "no-param-reassign": ["error", { props: false }],
39 | "no-trailing-spaces": 2,
40 | "no-undef": 2,
41 | "no-underscore-dangle": 0,
42 | "no-unused-vars": 2,
43 | "object-curly-spacing": 0,
44 | "object-shorthand": [2, "always"],
45 | "react/display-name": 2,
46 | "react/jsx-indent": "off",
47 | "react/jsx-no-undef": 2,
48 | "react/jsx-quotes": 0,
49 | "react/jsx-sort-props": 2,
50 | "react/prefer-stateless-function": 1,
51 | "react/sort-prop-types": 2,
52 | "sort-vars": 2,
53 | "space-before-function-paren": [2, "never"],
54 | "space-in-parens": [2, "never"],
55 | "space-unary-ops": [2, { "words": true, "nonwords": false }],
56 | "vars-on-top": 0
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016 Tyler Wanek
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Rickscroll
2 | **This package is deprecated, please use [https://www.npmjs.com/package/react-window](react-window) or [https://www.npmjs.com/package/react-virtualized](react-virtualized).**
3 |
4 | A high performance scrolling utility for React. Featured in [GitKraken](http://www.gitkraken.com/)
5 |
6 | Basic Usage
7 | ------
8 | Install with npm: `npm install rickscroll`
9 |
10 | ```javascript
11 | import { Rickscroll } from 'rickscroll';
12 |
13 | const list = new Array(10000).fill({}).map(() => ({
14 | contentComponent() { return Hello world!; },
15 | height: 20
16 | }));
17 |
18 | function renderList() {
19 | return ;
20 | }
21 | ```
22 |
23 | *Example written in ES6*
24 |
25 | Features
26 | ------
27 | Rickscroll offloads scrolling onto the GPU by using CSS 3d translations. Rickscroll partitions display rows in small groups that are easy for a browser to paint. This module tries to minimize repaints to at most 1 partition at a time during a scroll event. Not only does this work well, it is incredibly fast, and it can support millions of nodes.
28 |
29 | Rickscroll does not use an infinite loader. When you scroll, your scrollbar will not scale in response to adding more partitions to the DOM. Rickscroll will never grow the DOM to more than 2 + the number of partitions that would reasonably fit in a given display area.
30 |
31 | Rickscroll supports horizontal scrolling. There are other implementations of large, performant scrollers, but none that support decent horizontal scrolling. Rickscroll will horizontally scroll your content component for you but can optionally pass through scroll offsets to your content component, instead. For situations like the graph in GitKraken, it's necessary to have more fine grain control over horizontal scrolling.
32 |
33 | Rickscroll provides gutter functionality. Gutters are an option provided by Rickscroll to provide advanced horizontal scrolling. Often when building large display lists, we want to lock static content to the left or right of our main content. Rickscroll addresses this by providing gutters that work with horizontal scrolling and also provides resizable gutter capabilities.
34 |
35 | Rickscroll provides scrollTo methods for navigating to any location in Rickscroll through props.
36 |
37 | Rickscroll also works well with multi-lists. Multi-lists can specify headers for each list where these headers gain special properties in Rickscroll. Headers are collapsible. Headers are lockable. Headers are stackable. There are methods provided to scrollTo the exact location of a header. No calculations on your part.
38 |
39 | Most importantly, Rickscroll will:
40 | - always gonna scroll you up
41 | - always gonna scroll you down
42 | - never gonna run around and desert you
43 | - never gonna make you cry
44 | - never gonna say goodbye
45 | - never gonna tell a lie and hurt you
46 |
47 | Public Methods
48 | ------
49 | - scrollTo({ x: **integer**, y: **integer** }): Scrolls to the provided pixel value position.
50 | - scrollRowToMiddle(rowIndex: **integer**, x: **integer**): Scrolls the given row index into view with a preference toward the middle of the viewable content. Does not include headers in index calculations.
51 | - scrollToHeader(headerIndex: **integer**, x: **integer**): Scrolls to the header at headerIndex.
52 | - toggleSection(sectionIndex: **integer**): Toggles the visibility of the rows under headerIndex.
53 | - updateDimensions(): Calling this will internally recalculate the dimensions of rickscroll. Rick scroll is already listening to the window resize event, but if you wrap rickscroll with a resizable container, you may need to call updateDimensions when the resizable container is resized.
54 |
55 | PropTypes
56 | ------
57 | - className: **string** *(optional)*
58 | - disableBidirectionalScrolling: **bool** *(optional)* - [default: false]
59 | - dynamicColumn: **string** *(optional)* - [default: 'middle']
60 | - guttersConfig: **object** *(optional)*
61 | - left: **object** *(optional)*
62 | - className: **string** *(optional)*
63 | - handleClassName: **string** *(optional)*
64 | - handleWidth: **number** *(optional)*
65 | - maxPosition: **number** *(optional)*
66 | - minPosition: **number** *(optional)*
67 | - onResize: **function(number)** *(optional)*
68 | - onResizeEnd: **function(number)** *(optional)*
69 | - position: **number**
70 | - right: **object** *(optional)*
71 | - className: **string** *(optional)*
72 | - handleClassName: **string** *(optional)*
73 | - handleWidth: **number** *(optional)*
74 | - maxPosition: **number** *(optional)*
75 | - minPosition: **number** *(optional)*
76 | - onResize: **function(number)** *(optional)*
77 | - onResizeEnd: **function(number)** *(optional)*
78 | - position: **number**
79 | - headerType: **string** *(optional)* - [default: 'default']
80 | - heightAdjust: **string** *(optional)*
81 | - horizontalScrollConfig: **object** *(optional)*
82 | - className: **string** *(optional)*
83 | - contentWidth: **number**
84 | - passthroughOffsets: **bool** *(optional)* - [default: false]
85 | - scaleWithCenterContent: **bool** *(optional)* - [default: false]
86 | - scrollbarHeight: **number** *(optional)* - [default: 15]
87 | - onScroll: **function(number)** *(optional)*
88 | - light: **bool** *(optional)*
89 | - list \*: **array** of **objects** containing
90 | - className: **string** *(optional)*
91 | - contentClassName: **string** *(optional)*
92 | - contentComponent: **React.Component**
93 | - gutters: **object** *(optional)*
94 | - left: **object** *(optional)*
95 | - className: **string** *(optional)*
96 | - contentComponent: **React.Component**
97 | - handleClassName: **string** *(optional)*
98 | - props: **object** *(optional)*
99 | - right: **object** *(optional)*
100 | - className: **string** *(optional)*
101 | - contentComponent: **React.Component**
102 | - handleClassName: **string** *(optional)*
103 | - props: **object** *(optional)*
104 | - height: **number**
105 | - key: **string** *(optional)*
106 | - props: **object** *(optional)*
107 | - lists \*: **array** of **objects** containing
108 | - headerClassName: **string** *(optional)*
109 | - headerComponent: **React.Component**
110 | - headerKey: **string** *(optional)*
111 | - headerProps: **object** *(optional)*
112 | - height: **number**
113 | - initCollapsed: **boolean** *(optional)*
114 | - rows: *(see definition of **list** prop type above)*
115 | - onRegisteredScrollTo: **function** *(optional)*
116 | - scrollTo: **object** *(optional)*
117 | - location: **object** *(optional)*
118 | - x: **number** *(optional)* - [default: 0]
119 | - y: **number** *(optional)* - [default: 0]
120 | - preserveHorizontal: **booelan** *(optional)* - [default: false]
121 | - preserveVertical: **booelan** *(optional)* - [default: false]
122 | - type: **string** *(optional)* - [default: 'row']
123 | - verticalScrollConfig: **object** *(optional)*
124 | - className: **string** *(optional)*
125 | - scrollbarWidth: **number** *(optional)* - [default: 15]
126 | - onScroll: **function(number)** *(optional)*
127 | - widthAdjust: **string** *(optional)*
128 |
129 |
130 | \* rickscroll requires only one of list/lists. One must be set and no more than one should be set.
131 |
132 | Keying Rows
133 | ------
134 | If you choose to use the optional keys on the headers and rows, it's all-or-none.
135 | You must supply completely unique keys to all rows + headers, which are pooled together.
136 | If some keys are undefined, an error will occur. If some keys are duplicated, an error will occur.
137 | It's very important that these keys are unique, because if keys collide, you will see missing rows in viewable area.
138 |
139 | Positioning the Gutters
140 | ------
141 | There are 3 columns in Rickscroll, the left gutter, content area, and right gutter.
142 | The columns are partitioned by a handle, which is specified in the guttersconfig.
143 | The size of the columns are determined by the size position of the handles.
144 | There is now a configuration property on Rickscroll for which column inherits dynamic scaling, dynamicColumn.
145 |
146 | Dynamic column can be one of
147 | - left
148 | - middle
149 | - right
150 |
151 | When dynamic column is right the handle positions are 0 based with respect to the left border of Rickscroll, such that:
152 |
153 | ```
154 | | | | |
155 | 0 l r w
156 | ```
157 |
158 | With the left column being dynamic, the positions are 0 indexed from the right border, such that:
159 | ```
160 | | | | |
161 | w l r 0
162 | ```
163 |
164 | With the middle column being dynamic, the left gutter is indexed off of 0 from the left border and the right gutter is indexed off of 0 from the right border, such that:
165 | ```
166 | | | | |
167 | 0 l r 0
168 | ```
169 |
170 | Supplying a Static Width to Rickscroll
171 | ------
172 | If you have a situation where you need to control the width/height of rickscroll explicitly,
173 | on the Rickscroll import pull out the Static class:
174 |
175 | ```javascript
176 | import { Rickscroll } from 'rickscroll';
177 |
178 | const list = new Array(10000).fill({}).map(() => ({
179 | contentComponent() { return Hello world!; },
180 | height: 20
181 | }));
182 |
183 | function renderList() {
184 | return ;
185 | }
186 | ```
187 |
188 | *Example written in ES6*
189 |
190 | Triggering a ScrollTo Event through Props
191 | ------
192 | There are 3 types of scroll to events that can be triggered, row, header, and position.
193 | The location property of the scrollTo prop has an x and a y field, when the scroll type is set to header or row, y refers to the index of that header or row.
194 | X always refers to a pixel value location in the horizontal space.
195 | If a onRegisteredScrollTo callback is passed as a prop, Rickscroll will call that when it starts a scrollTo operation.
196 |
197 | Listening for Scroll Events
198 | ------
199 | Rickscroll will pass an additional prop to every row/gutter component describing scroll operations.
200 | The isScrolling prop will be true during scrolling.
201 | The isFastScrolling prop represents whether the velocity of a given scroll event is considered fast.
202 | If a scroll event has a sufficient velocity, every row will receive the true as isFastScrolling.
203 | If you are rendering heavy content in every row,
204 | you can use this prop to render a lighter weight representation of your rows.
205 |
206 | Lighter Render Steps
207 | ------
208 | Specify light on Rickscroll to bypass all gutter configuration at the row level.
209 |
210 | Dependencies
211 | ------
212 | Rickscroll is written using es6 via babel. So we ask that you provide `babel-polyfill@^0.6.13`
213 |
214 | Rickscroll is written for `react@^0.14.0`
215 |
216 | License
217 | ------
218 | Copyright (c) 2016 Tyler Wanek
219 |
220 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
221 |
222 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
223 |
224 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
225 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rickscroll",
3 | "version": "0.9.3",
4 | "description": "Optimized scrollable view for react",
5 | "main": "lib/js/index.js",
6 | "scripts": {
7 | "compile": "lessc src/less/scrollable.less lib/css/scrollable.css && babel -d ./lib/js ./src/js",
8 | "lint": "eslint --ext .jsx --ext .js src/js --quiet",
9 | "prepublish": "npm run compile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/Axosoft/rickscroll.git"
14 | },
15 | "files": [
16 | "lib"
17 | ],
18 | "author": "Axosoft, LLC",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/Axosoft/rickscroll/issues"
22 | },
23 | "homepage": "https://github.com/Axosoft/rickscroll",
24 | "dependencies": {
25 | "animation-timer": "^1.0.12",
26 | "classnames": "^2.2.5",
27 | "functional-easing": "^1.0.8",
28 | "lodash": "^4.14.2",
29 | "resize-observer-polyfill": "^1.2.1"
30 | },
31 | "devDependencies": {
32 | "babel-cli": "^6.11.4",
33 | "babel-core": "^6.9.1",
34 | "babel-eslint": "^6.1.2",
35 | "babel-plugin-transform-object-rest-spread": "^6.19.0",
36 | "babel-preset-es2015": "^6.9.0",
37 | "babel-preset-react": "^6.5.0",
38 | "eslint": "^3.3.1",
39 | "eslint-config-airbnb": "^10.0.1",
40 | "eslint-plugin-import": "^1.13.0",
41 | "eslint-plugin-jsx-a11y": "^2.1.0",
42 | "eslint-plugin-react": "^6.1.2",
43 | "less": "^2.7.1",
44 | "react": "^15.0.0"
45 | },
46 | "peerDependencies": {
47 | "babel-polyfill": "^6.13.0",
48 | "react": "^0.14.0 || ^15.0.0"
49 | },
50 | "keywords": [
51 | "scrolling",
52 | "scrollable",
53 | "scroll",
54 | "performance",
55 | "optimized",
56 | "gpu",
57 | "translate3d",
58 | "fast"
59 | ]
60 | }
61 |
--------------------------------------------------------------------------------
/src/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | .eslintrc
3 | src
4 |
--------------------------------------------------------------------------------
/src/js/AutoAdjust.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes as types } from 'react';
2 | import ResizeObserver from 'resize-observer-polyfill';
3 |
4 | import Rickscroll from './Scrollable';
5 |
6 | export default class AutoAdjust extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | height: 0,
11 | width: 0
12 | };
13 | this._autoAdjustDiv = null;
14 | this._getRef = this._getRef.bind(this);
15 | this._getRickscroll = this._getRickscroll.bind(this);
16 | this._updateDimensions = this._updateDimensions.bind(this);
17 | this._resizeObserver = new ResizeObserver(this._updateDimensions);
18 | this.scrollRowToMiddle = this.scrollRowToMiddle.bind(this);
19 | this.scrollTo = this.scrollTo.bind(this);
20 | this.scrollToHeader = this.scrollToHeader.bind(this);
21 | this.toggleSection = this.toggleSection.bind(this);
22 | }
23 |
24 | componentDidMount() {
25 | window.addEventListener('resize', this._updateDimensions);
26 | this._resizeObserver.observe(this._autoAdjustDiv);
27 | this._updateDimensions();
28 | }
29 |
30 | componentDidUpdate() {
31 | this._updateDimensions();
32 | }
33 |
34 | componentWillUnmount() {
35 | window.removeEventListener('resize', this._updateDimensions);
36 | this._resizeObserver.unobserve(this._autoAdjustDiv);
37 | this.setState({ height: 0, width: 0 });
38 | this.autoAdjustDiv = null;
39 | }
40 |
41 | _getRef(ref) {
42 | this._autoAdjustDiv = ref;
43 | }
44 |
45 | _getRickscroll(ref) {
46 | this._rickscroll = ref;
47 | }
48 |
49 | _updateDimensions() {
50 | const {
51 | _autoAdjustDiv,
52 | _autoAdjustDiv: {
53 | clientHeight: height,
54 | clientWidth: width
55 | },
56 | state: {
57 | height: prevHeight,
58 | width: prevWidth
59 | }
60 | } = this;
61 |
62 | if (!_autoAdjustDiv || (prevHeight === height && prevWidth === width)) {
63 | return;
64 | }
65 |
66 | this.setState({ height, width });
67 | }
68 |
69 | // forward rickscroll public functions
70 | scrollRowToMiddle(...args) {
71 | return this._rickscroll && this._rickscroll.scrollRowToMiddle(...args);
72 | }
73 |
74 | scrollTo(...args) {
75 | return this._rickscroll && this._rickscroll.scrollTo(...args);
76 | }
77 |
78 | scrollToHeader(...args) {
79 | return this._rickscroll && this._rickscroll.scrollToHeader(...args);
80 | }
81 |
82 | toggleSection(...args) {
83 | return this._rickscroll && this._rickscroll.toggleSection(...args);
84 | }
85 |
86 | render() {
87 | const {
88 | props: {
89 | heightAdjust,
90 | widthAdjust,
91 | ...props
92 | },
93 | state: {
94 | height,
95 | width
96 | },
97 | _autoAdjustDiv
98 | } = this;
99 |
100 | const style = {
101 | height: heightAdjust
102 | ? `calc(100% - ${heightAdjust})`
103 | : '100%',
104 | width: widthAdjust
105 | ? `calc(100% - ${widthAdjust})`
106 | : '100%'
107 | };
108 |
109 | const child = _autoAdjustDiv
110 | ?
111 | : null;
112 |
113 | return (
114 |
115 | {child}
116 |
117 | );
118 | }
119 | }
120 |
121 | AutoAdjust.propTypes = {
122 | heightAdjust: types.oneOfType([types.string, types.number]),
123 | widthAdjust: types.oneOfType([types.string, types.number])
124 | };
125 |
--------------------------------------------------------------------------------
/src/js/HorizontalWrapper.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes as types } from 'react';
2 | import _ from 'lodash';
3 |
4 | export default class HorizontalWrapper extends React.Component {
5 | shouldComponentUpdate(nextProps, nextState) {
6 | return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
7 | }
8 |
9 | render() {
10 | const { children, offset } = this.props;
11 | const horizontalWrapperStyle = {
12 | transform: `translate3d(-${offset}px, -0px, 0px)`
13 | };
14 | return {children}
;
15 | }
16 | }
17 |
18 | HorizontalWrapper.propTypes = {
19 | children: types.node.isRequired,
20 | offset: types.number.isRequired
21 | };
22 |
--------------------------------------------------------------------------------
/src/js/LightweightRow.jsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React, { PropTypes as types } from 'react';
3 |
4 | import HorizontalWrapper from './HorizontalWrapper';
5 | import * as customTypes from './propTypes';
6 |
7 | export default class LightweightRow extends React.Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this._buildContentComponent = this._buildContentComponent.bind(this);
12 | this._cacheMiss = this._cacheMiss.bind(this);
13 | this._getContentComponentWithShallowCaching = this._getContentComponentWithShallowCaching.bind(this);
14 | this._shouldWrapComponent = this._shouldWrapComponent.bind(this);
15 |
16 | this._cache = {
17 | props: {},
18 | renderedRow: null
19 | };
20 | }
21 |
22 | _buildContentComponent() {
23 | const {
24 | contentComponent: ContentComponent,
25 | horizontalTransform,
26 | isFastScrolling,
27 | isScrolling,
28 | passthroughOffsets,
29 | rowProps,
30 | scrollsHorizontally
31 | } = this.props;
32 |
33 | // save from last render
34 | this._cache.props = {
35 | horizontalTransform,
36 | isFastScrolling,
37 | isScrolling,
38 | passthroughOffsets,
39 | rowProps,
40 | scrollsHorizontally
41 | };
42 |
43 | if (scrollsHorizontally && !passthroughOffsets) {
44 | this._cache.renderedRow = (
45 |
52 | );
53 | } else {
54 | this._cache.renderedRow = (
55 |
62 | );
63 | }
64 |
65 | return this._cache.renderedRow;
66 | }
67 |
68 | _cacheMiss() {
69 | return !this._cache.renderedRow
70 | || this._cache.props.horizontalTransform !== this.props.horizontalTransform
71 | || this._cache.props.isFastScrolling !== this.props.isFastScrolling
72 | || this._cache.props.isScrolling !== this.props.isScrolling
73 | || this._cache.props.passthroughOffsets !== this.props.passthroughOffsets
74 | || this._cache.props.rowProps !== this.props.rowProps
75 | || this._cache.props.scrollsHorizontally !== this.props.scrollsHorizontally;
76 | }
77 |
78 | _getContentComponentWithShallowCaching() {
79 | return this._cacheMiss()
80 | ? this._buildContentComponent()
81 | : this._cache.renderedRow;
82 | }
83 |
84 | _shouldWrapComponent() {
85 | return this.props.scrollsHorizontally && !this.props.passthroughOffsets;
86 | }
87 |
88 | render() {
89 | const {
90 | className: thisRowClassName,
91 | contentClassName: thisContentClassName,
92 | horizontalTransform,
93 | onClick,
94 | rowHeight,
95 | width
96 | } = this.props;
97 | const rowStyle = {
98 | height: `${rowHeight}px`,
99 | width: `${width}px`
100 | };
101 |
102 | const contentComponent = this._getContentComponentWithShallowCaching();
103 |
104 | const horizontallyWrappedContentComponent =
105 | this._shouldWrapComponent()
106 | ? (
107 |
108 | {contentComponent}
109 |
110 | )
111 | : contentComponent;
112 |
113 | const rowClassName = classnames('rickscroll__row', thisRowClassName);
114 | const contentClassName = classnames('rickscroll__content', thisContentClassName);
115 |
116 | return (
117 |
118 |
119 | {horizontallyWrappedContentComponent}
120 |
121 |
122 | );
123 | }
124 | }
125 |
126 | LightweightRow.propTypes = {
127 | className: types.string,
128 | contentClassName: types.string,
129 | contentComponent: customTypes.renderableComponent,
130 | horizontalTransform: types.number,
131 | isFastScrolling: types.bool,
132 | isScrolling: types.bool,
133 | onClick: types.func,
134 | passthroughOffsets: types.bool,
135 | rowHeight: types.number.isRequired,
136 | rowProps: types.object,
137 | scrollsHorizontally: types.bool.isRequired,
138 | width: types.number.isRequired
139 | };
140 |
--------------------------------------------------------------------------------
/src/js/Row.jsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames';
2 | import React, { PropTypes as types } from 'react';
3 | import _ from 'lodash';
4 |
5 | import * as constants from './constants';
6 | import HorizontalWrapper from './HorizontalWrapper';
7 | import * as customTypes from './propTypes';
8 | import { getGutterWidths, getWidthStyle } from './utils';
9 |
10 | export default class Row extends React.Component {
11 | constructor(props) {
12 | super(props);
13 | this._getRenderableHandle = this._getRenderableHandle.bind(this);
14 | }
15 |
16 | shouldComponentUpdate(nextProps, nextState) {
17 | return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
18 | }
19 |
20 | _getRenderableGutter(side, index, {
21 | className: thisGutterClassName,
22 | contentComponent: ContentComponent,
23 | props = {}
24 | } = {}, width, gutterClassName) {
25 | const {
26 | isFastScrolling = false,
27 | isScrolling = false
28 | } = this.props;
29 | const gutterStyle = getWidthStyle(width);
30 | const className = classnames('rickscroll__gutter', gutterClassName, thisGutterClassName);
31 | return ContentComponent && gutterStyle ? (
32 |
33 |
39 |
40 | ) : undefined;
41 | }
42 |
43 | _getRenderableHandle(side, { contentComponent, handleClassName: thisHandleClassName } = {}, width, handleClassName) {
44 | const {
45 | guttersConfig: {
46 | [side]: {
47 | onResize
48 | } = {}
49 | } = {},
50 | onStartResize = (() => () => {})
51 | } = this.props;
52 | const handleStyle = getWidthStyle(width);
53 | const className = classnames(
54 | handleClassName,
55 | thisHandleClassName,
56 | 'rickscroll__handle',
57 | { 'rickscroll__handle--grabbable': !!onResize },
58 | `rickscroll__handle--${side}`
59 | );
60 | return contentComponent && handleStyle ? (
61 |
67 | ) : undefined;
68 | }
69 |
70 | render() {
71 | const {
72 | className: thisRowClassName,
73 | contentComponent: ContentComponent,
74 | contentClassName: thisContentClassName,
75 | dynamicColumn = constants.columns.MIDDLE,
76 | guttersConfig,
77 | guttersConfig: {
78 | left: leftCanExist,
79 | left: {
80 | className: leftGutterClassName,
81 | handleClassName: leftHandleClassName,
82 | handleWidth: leftHandleWidth,
83 | position: leftHandlePosition
84 | } = {},
85 | right: rightCanExist,
86 | right: {
87 | className: rightGutterClassName,
88 | handleClassName: rightHandleClassName,
89 | handleWidth: rightHandleWidth = constants.RIGHT_HANDLE_WIDTH,
90 | position: rightHandlePosition
91 | } = {}
92 | } = {},
93 | gutters = {},
94 | horizontalTransform,
95 | index,
96 | isFastScrolling = false,
97 | isScrolling = false,
98 | onClick,
99 | passthroughOffsets,
100 | rowHeight,
101 | rowProps = {},
102 | scrollsHorizontally = false,
103 | width
104 | } = this.props;
105 | const rowStyle = {
106 | height: `${rowHeight}px`,
107 | width: `${width}px`
108 | };
109 |
110 | const { leftGutterWidth, rightGutterWidth } = getGutterWidths({
111 | dynamicColumn: guttersConfig
112 | ? dynamicColumn
113 | : constants.columns.MIDDLE,
114 | leftHandlePosition,
115 | leftHandleWidth,
116 | rightHandlePosition,
117 | rightHandleWidth,
118 | width
119 | });
120 |
121 | const leftComponent = leftCanExist
122 | ? this._getRenderableGutter(
123 | constants.columns.LEFT,
124 | index,
125 | gutters.left,
126 | leftGutterWidth,
127 | leftGutterClassName
128 | )
129 | : null;
130 | const leftHandleComponent = leftCanExist
131 | ? this._getRenderableHandle(
132 | constants.columns.LEFT,
133 | gutters.left,
134 | leftHandleWidth,
135 | leftHandleClassName
136 | )
137 | : null;
138 | const rightComponent = rightCanExist
139 | ? this._getRenderableGutter(
140 | constants.columns.RIGHT,
141 | index,
142 | gutters.right,
143 | rightGutterWidth,
144 | rightGutterClassName
145 | )
146 | : null;
147 | const rightHandleComponent = rightCanExist
148 | ? this._getRenderableHandle(
149 | constants.columns.RIGHT,
150 | gutters.right,
151 | rightHandleWidth,
152 | rightHandleClassName
153 | )
154 | : null;
155 |
156 | let contentComponent;
157 | if (scrollsHorizontally) {
158 | contentComponent = passthroughOffsets
159 | ? (
160 |
167 | )
168 | : (
169 |
170 |
171 |
172 | );
173 | } else {
174 | contentComponent = (
175 |
176 | );
177 | }
178 |
179 | const rowClassName = classnames('rickscroll__row', thisRowClassName);
180 | const contentClassName = classnames('rickscroll__content', thisContentClassName);
181 |
182 | return (
183 |
184 | {leftComponent}
185 | {leftHandleComponent}
186 | {contentComponent}
187 | {rightHandleComponent}
188 | {rightComponent}
189 |
190 | );
191 | }
192 | }
193 |
194 | Row.propTypes = {
195 | className: types.string,
196 | contentClassName: types.string,
197 | contentComponent: customTypes.renderableComponent,
198 | dynamicColumn: customTypes.column,
199 | gutters: customTypes.gutters,
200 | guttersConfig: customTypes.guttersConfig,
201 | horizontalTransform: types.number,
202 | index: types.number.isRequired,
203 | isFastScrolling: types.bool,
204 | isScrolling: types.bool,
205 | onClick: types.func,
206 | onStartResize: types.func,
207 | passthroughOffsets: types.bool,
208 | rowHeight: types.number.isRequired,
209 | rowProps: types.object,
210 | scrollsHorizontally: types.bool.isRequired,
211 | width: types.number.isRequired
212 | };
213 |
--------------------------------------------------------------------------------
/src/js/Scrollable.jsx:
--------------------------------------------------------------------------------
1 | import { AnimationTimer } from 'animation-timer';
2 | import classnames from 'classnames';
3 | import { Easer } from 'functional-easing';
4 | import React, { PropTypes as types } from 'react';
5 | import _ from 'lodash';
6 |
7 | import * as constants from './constants';
8 | import * as customTypes from './propTypes';
9 | import LightweightRow from './LightweightRow';
10 | import { Point } from './models';
11 | import Row from './Row';
12 | import {
13 | buildRowConfig,
14 | getGutterWidths,
15 | getMaxHeight,
16 | getResizeValues,
17 | getVelocityInfo,
18 | getVerticalScrollValues,
19 | returnWidthIfComponentExists
20 | } from './utils';
21 |
22 | const easer = new Easer()
23 | .using('out-cubic');
24 |
25 | export default class Scrollable extends React.Component {
26 | constructor(props) {
27 | super(props);
28 | [
29 | '_applyScrollChange',
30 | '_getBottomGutterHeight',
31 | '_getContentWidth',
32 | '_getDimensions',
33 | '_getThrottledHorizontalAnimationFrameFn',
34 | '_getThrottledVerticalAnimationFrameFn',
35 | '_getTopGutterHeight',
36 | '_getWeightedWidth',
37 | '_onHorizontalScroll',
38 | '_onResize',
39 | '_onMouseWheel',
40 | '_onVerticalScroll',
41 | '_renderContents',
42 | '_renderCorner',
43 | '_renderHorizontalScrollbar',
44 | '_renderHeader',
45 | '_renderVerticalScrollbar',
46 | '_shouldRenderScrollbars',
47 | '_startResize',
48 | '_stopResize',
49 | '_switchScrollProp',
50 | 'scrollRowToMiddle',
51 | 'scrollToHeader',
52 | 'toggleSection'
53 | ].forEach(method => { this[method] = this[method].bind(this); });
54 | this._debouncedStartHorizontalScroll = _.debounce(this._startHorizontalScroll, 100);
55 | this._endScroll = _.debounce(() => this.setState({
56 | isFastScrolling: false,
57 | isScrolling: false,
58 | velocityQueue: [[0, 0]]
59 | }), 50, { trailing: true });
60 | this._endVerticalScroll = _.debounce(() => this.setState({
61 | isFastScrolling: false,
62 | isScrolling: false,
63 | velocityQueue: [[0, 0]]
64 | }), 200, { trailing: true });
65 | this._onThrottledMouseWheel = _.throttle(this._applyScrollChange, constants.ANIMATION_FPS_120, { trailing: true });
66 | const {
67 | headerType = constants.headerType.DEFAULT,
68 | height,
69 | list,
70 | lists,
71 | width
72 | } = props;
73 | const stackingHeaders = headerType === constants.headerType.STACKING;
74 | const listContainer = list || lists;
75 | const {
76 | avgRowHeight,
77 | collapsedSections,
78 | contentHeight,
79 | headers,
80 | partitions,
81 | rowOffsets,
82 | rows
83 | } = buildRowConfig(listContainer, stackingHeaders);
84 | const {
85 | displayBuffer,
86 | shouldRender
87 | } = this._getDimensions(avgRowHeight, contentHeight, height, width);
88 |
89 | this.state = {
90 | animation: null,
91 | avgRowHeight,
92 | collapsedSections,
93 | contentHeight,
94 | displayBuffer,
95 | isFastScrolling: false,
96 | headers,
97 | horizontalTransform: 0,
98 | partitions,
99 | resize: {
100 | basePosition: 0,
101 | currentPosition: 0,
102 | performing: false,
103 | side: '',
104 | startingPosition: 0
105 | },
106 | rowOffsets,
107 | rows,
108 | isScrolling: false,
109 | scrollingToPosition: new Point(0, 0),
110 | shouldRender,
111 | topPartitionIndex: 0,
112 | velocityQueue: [[0, 0]],
113 | verticalTransform: 0
114 | };
115 | }
116 |
117 | componentDidMount() {
118 | const {
119 | scrollTo: scrollToWithoutDefaults
120 | } = this.props;
121 |
122 | if (!scrollToWithoutDefaults) {
123 | return;
124 | }
125 |
126 | this._switchScrollProp(_.merge(
127 | _.cloneDeep(constants.defaultScrollTo),
128 | _.cloneDeep(scrollToWithoutDefaults)
129 | ));
130 | }
131 |
132 | componentWillReceiveProps({
133 | guttersConfig,
134 | headerType = constants.headerType.DEFAULT,
135 | height,
136 | horizontalScrollConfig,
137 | list: nextList,
138 | lists: nextLists,
139 | scrollTo: scrollToWithoutDefaults = {},
140 | verticalScrollConfig,
141 | width
142 | }) {
143 | const {
144 | props: {
145 | guttersConfig: prevGuttersConfig,
146 | height: prevHeight,
147 | horizontalScrollConfig: prevHorizontalScrollConfig,
148 | list: prevList,
149 | lists: prevLists,
150 | scrollTo: prevScrollToWithoutDefaults = {},
151 | verticalScrollConfig: prevVerticalScrollConfig,
152 | width: prevWidth
153 | },
154 | state: {
155 | avgRowHeight: prevAvgRowHeight,
156 | collapsedSections: oldCollapsedSections,
157 | contentHeight: prevContentHeight
158 | }
159 | } = this;
160 |
161 | const stackingHeaders = headerType === constants.headerType.STACKING;
162 | const prevListContainer = prevList || prevLists;
163 | const nextListContainer = nextList || nextLists;
164 |
165 | if (prevListContainer !== nextListContainer || !_.isEqual(prevListContainer, nextListContainer)) {
166 | const {
167 | avgRowHeight,
168 | collapsedSections,
169 | contentHeight,
170 | headers,
171 | partitions,
172 | rowOffsets,
173 | rows
174 | } = buildRowConfig(nextListContainer, stackingHeaders, oldCollapsedSections);
175 | this.setState({
176 | avgRowHeight,
177 | collapsedSections,
178 | contentHeight,
179 | headers,
180 | partitions,
181 | rowOffsets,
182 | rows,
183 | ...this._getDimensions(avgRowHeight, contentHeight, height, width)
184 | });
185 | } else if (
186 | height !== prevHeight
187 | || width !== prevWidth
188 | || !_.isEqual(prevGuttersConfig, guttersConfig)
189 | || !_.isEqual(prevHorizontalScrollConfig, horizontalScrollConfig)
190 | || !_.isEqual(prevVerticalScrollConfig, verticalScrollConfig)
191 | ) {
192 | this.setState(this._getDimensions(prevAvgRowHeight, prevContentHeight, height, width));
193 | }
194 |
195 | const prevScrollTo = _.merge(
196 | _.cloneDeep(constants.defaultScrollTo),
197 | _.cloneDeep(prevScrollToWithoutDefaults)
198 | );
199 | const scrollTo = _.merge(
200 | _.cloneDeep(constants.defaultScrollTo),
201 | _.cloneDeep(scrollToWithoutDefaults)
202 | );
203 |
204 | if (!_.isEqual(prevScrollTo, scrollTo)) {
205 | this._switchScrollProp(scrollTo);
206 | }
207 | }
208 |
209 | shouldComponentUpdate(nextProps, nextState) {
210 | return this.state.verticalTransform !== nextState.verticalTransform
211 | || this.state.horizontalTransform !== nextState.horizontalTransform
212 | || this.props.height !== nextProps.height
213 | || this.props.width !== nextProps.width
214 | || !_.isEqual(this.props, nextProps)
215 | || !_.isEqual(this.state, nextState);
216 | }
217 |
218 | // private
219 |
220 | _applyScrollChange({ deltaX: _deltaX, deltaY: _deltaY }) {
221 | const {
222 | props: {
223 | disableBidirectionalScrolling = false,
224 | height,
225 | horizontalScrollConfig,
226 | horizontalScrollConfig: {
227 | onScroll: onHorizontalScroll = () => {}
228 | } = {},
229 | verticalScrollConfig: {
230 | onScroll: onVerticalScroll = () => {}
231 | } = {}
232 | },
233 | state: {
234 | contentHeight,
235 | isFastScrolling: oldFastScrollTrip,
236 | partitions,
237 | shouldRender,
238 | velocityQueue: oldVelocityQueue
239 | },
240 | _horizontalScrollbar,
241 | _verticalScrollbar
242 | } = this;
243 | const withHorizontalScrolling = !!horizontalScrollConfig && shouldRender.horizontalScrollbar;
244 |
245 | let deltaX = _deltaX;
246 | let deltaY = _deltaY;
247 |
248 | if (disableBidirectionalScrolling) {
249 | if (Math.abs(deltaX) > Math.abs(deltaY)) {
250 | deltaY = 0;
251 | } else {
252 | deltaX = 0;
253 | }
254 | }
255 |
256 | const scrollChanges = {
257 | isScrolling: true
258 | };
259 |
260 | // vertical
261 | if (shouldRender.verticalScrollbar) {
262 | const maxHeight = getMaxHeight(contentHeight, _verticalScrollbar.offsetHeight);
263 | const verticalTransform = this.state.verticalTransform + deltaY;
264 | const { averageVelocity, velocityQueue } = getVelocityInfo(deltaY, oldVelocityQueue);
265 |
266 | const isFastScrolling = oldFastScrollTrip
267 | || Math.abs(averageVelocity) > (height * constants.USER_INITIATED_FAST_SCROLL_FACTOR);
268 |
269 | _.assign(
270 | scrollChanges,
271 | getVerticalScrollValues(verticalTransform, maxHeight, partitions),
272 | { isFastScrolling, velocityQueue }
273 | );
274 | }
275 |
276 | // horizontal scrolling
277 | if (withHorizontalScrolling) {
278 | scrollChanges.horizontalTransform = _.clamp(
279 | this.state.horizontalTransform + deltaX,
280 | 0,
281 | _horizontalScrollbar.scrollWidth - _horizontalScrollbar.offsetWidth
282 | );
283 | }
284 |
285 | this.setState(scrollChanges, () => {
286 | if (shouldRender.verticalScrollbar) {
287 | if (_verticalScrollbar.scrollTop !== scrollChanges.verticalTransform) {
288 | onVerticalScroll(scrollChanges.verticalTransform);
289 | }
290 | _verticalScrollbar.scrollTop = scrollChanges.verticalTransform;
291 | }
292 |
293 | if (withHorizontalScrolling) {
294 | if (_horizontalScrollbar.scrollLeft !== scrollChanges.horizontalTransform) {
295 | onHorizontalScroll(scrollChanges.horizontalTransform);
296 | }
297 | _horizontalScrollbar.scrollLeft = scrollChanges.horizontalTransform;
298 | }
299 |
300 | this._endScroll();
301 | });
302 | }
303 |
304 | _getBottomGutterHeight() {
305 | const {
306 | props: {
307 | height,
308 | headerType = constants.headerType.DEFAULT,
309 | horizontalScrollConfig: {
310 | scrollbarHeight = constants.HORIZONTAL_SCROLLBAR_HEIGHT
311 | } = {}
312 | },
313 | state: {
314 | headers,
315 | shouldRender,
316 | verticalTransform
317 | }
318 | } = this;
319 |
320 | if (headerType !== constants.headerType.STACKING) {
321 | return 0;
322 | }
323 |
324 | const adjustedHeight = shouldRender.horizontalScrollbar
325 | ? height - scrollbarHeight
326 | : height;
327 |
328 | let slidingWindowOfGutterHeight = 0;
329 | const indexOfFirstFreeGutter = headers.length - _.findIndex(
330 | _.reverse(_.clone(headers)),
331 | ({ height: headerHeight, realOffset }) => {
332 | const adjustedTransform = (verticalTransform + adjustedHeight) - slidingWindowOfGutterHeight;
333 | const gutterIsLocked = adjustedTransform < realOffset;
334 | if (gutterIsLocked) {
335 | slidingWindowOfGutterHeight = headerHeight;
336 | }
337 | return !gutterIsLocked;
338 | }
339 | );
340 |
341 | return _(headers)
342 | .slice(indexOfFirstFreeGutter)
343 | .reduce((prevHeight, { height: headerHeight }) => prevHeight + headerHeight, 0);
344 | }
345 |
346 | _getTopGutterHeight() {
347 | const {
348 | props: {
349 | headerType = constants.headerType.DEFAULT
350 | },
351 | state: {
352 | headers,
353 | verticalTransform
354 | }
355 | } = this;
356 |
357 | if (headerType === constants.headerType.DEFAULT) {
358 | return 0;
359 | }
360 |
361 | const findNextHeaderIndex = _.findIndex(headers, ({ lockPosition }) => lockPosition > verticalTransform);
362 | const nextHeaderIndex = findNextHeaderIndex === -1
363 | ? headers.length
364 | : findNextHeaderIndex;
365 |
366 | if (headerType === constants.headerType.LOCKING) {
367 | const header = headers[nextHeaderIndex - 1];
368 | return header.height;
369 | }
370 |
371 | return _(headers)
372 | .slice(0, nextHeaderIndex)
373 | .reduce((prevHeight, { height }) => prevHeight + height, 0);
374 | }
375 |
376 | _getContentWidth() {
377 | const {
378 | props: {
379 | dynamicColumn = constants.columns.MIDDLE,
380 | guttersConfig,
381 | guttersConfig: {
382 | left,
383 | left: {
384 | handleWidth: leftHandleWidth = constants.LEFT_HANDLE_WIDTH,
385 | position: leftGutterPosition = 0
386 | } = {},
387 | right,
388 | right: {
389 | handleWidth: rightHandleWidth = constants.RIGHT_HANDLE_WIDTH,
390 | position: rightGutterPosition = 0
391 | } = {}
392 | } = {},
393 | horizontalScrollConfig: {
394 | contentWidth = 0
395 | } = {},
396 | width
397 | }
398 | } = this;
399 |
400 | let leftGutterWidth;
401 | let rightGutterWidth;
402 | switch (guttersConfig ? dynamicColumn : constants.columns.MIDDLE) {
403 | case constants.columns.LEFT:
404 | leftGutterWidth = width - leftGutterPosition - leftHandleWidth;
405 | rightGutterWidth = rightGutterPosition;
406 | break;
407 | case constants.columns.RIGHT:
408 | leftGutterWidth = leftGutterPosition;
409 | rightGutterWidth = width - rightGutterPosition - rightHandleWidth;
410 | break;
411 | default:
412 | leftGutterWidth = leftGutterPosition;
413 | rightGutterWidth = rightGutterPosition;
414 | }
415 |
416 | return _.sum([
417 | contentWidth,
418 | leftGutterWidth,
419 | left ? leftHandleWidth : 0,
420 | right ? rightHandleWidth : 0,
421 | rightGutterWidth
422 | ]);
423 | }
424 |
425 | _getDimensions(avgRowHeight, contentHeight, height, width) {
426 | const {
427 | scrollbarHeight = constants.HORIZONTAL_SCROLLBAR_HEIGHT
428 | } = this.props.horizontalScrollConfig || {};
429 | const shouldRender = this._shouldRenderScrollbars(contentHeight, height, width);
430 | const contentsDivHeight = height - (shouldRender.horizontalScrollbar ? scrollbarHeight : 0);
431 | const numRowsInContents = _.ceil(contentsDivHeight / avgRowHeight);
432 |
433 | let displayBuffer = numRowsInContents + (2 * constants.OFFSET_BUFFER);
434 | displayBuffer += constants.OFFSET_BUFFER - (displayBuffer % constants.OFFSET_BUFFER);
435 |
436 | const newState = {
437 | displayBuffer,
438 | shouldRender
439 | };
440 |
441 | if (!shouldRender.verticalScrollbar) {
442 | newState.verticalTransform = 0;
443 | newState.topPartitionIndex = 0;
444 | if (this._verticalScrollbar) {
445 | this._verticalScrollbar.scrollTop = 0;
446 | }
447 | }
448 |
449 | if (!shouldRender.horizontalScrollbar) {
450 | newState.horizontalTransform = 0;
451 | if (this._horizontalScrollbar) {
452 | this._horizontalScrollbar.scrollLeft = 0;
453 | }
454 | }
455 |
456 | return newState;
457 | }
458 |
459 | _getThrottledHorizontalAnimationFrameFn(scrollTo) {
460 | const {
461 | props: {
462 | horizontalScrollConfig: {
463 | onScroll: onHorizontalScroll = () => {}
464 | } = {}
465 | },
466 | state: {
467 | horizontalTransform,
468 | verticalTransform
469 | }
470 | } = this;
471 |
472 | const delta = new Point(scrollTo.x, 0)
473 | .sub(new Point(horizontalTransform, 0));
474 |
475 | this.setState({
476 | scrolling: true
477 | });
478 |
479 | return _.throttle(easer(easedElapsedTime => {
480 | const {
481 | props: {
482 | horizontalScrollConfig
483 | },
484 | state: {
485 | scrollingToPosition: latestScrollingToPosition,
486 | shouldRender
487 | },
488 | _horizontalScrollbar
489 | } = this;
490 | if (!_.isEqual(scrollTo, latestScrollingToPosition)) {
491 | return;
492 | }
493 |
494 | const withHorizontalScrolling = !!horizontalScrollConfig && shouldRender.horizontalScrollbar;
495 | const elapsedTime = easedElapsedTime > 0.999 ? 1 : easedElapsedTime;
496 | const deltaScrolled = new Point(delta.x, delta.y)
497 | .scale(elapsedTime);
498 | const newTransform = new Point(horizontalTransform, verticalTransform)
499 | .add(deltaScrolled);
500 |
501 | const scrollChanges = {
502 | isScrolling: true
503 | };
504 |
505 | if (withHorizontalScrolling) {
506 | scrollChanges.horizontalTransform = _.clamp(
507 | newTransform.x,
508 | 0,
509 | _horizontalScrollbar.scrollWidth - _horizontalScrollbar.offsetWidth
510 | );
511 | }
512 |
513 | this.setState(scrollChanges, () => {
514 | if (withHorizontalScrolling) {
515 | if (_horizontalScrollbar.scrollLeft !== scrollChanges.horizontalTransform) {
516 | onHorizontalScroll(scrollChanges.horizontalTransform);
517 | }
518 | _horizontalScrollbar.scrollLeft = scrollChanges.horizontalTransform;
519 | }
520 |
521 | this._endScroll();
522 | });
523 | }), constants.ANIMATION_FPS_120, { leading: true });
524 | }
525 |
526 | _getThrottledVerticalAnimationFrameFn(scrollTo) {
527 | const {
528 | props: {
529 | height,
530 | verticalScrollConfig: {
531 | onScroll: onVerticalScroll = () => {}
532 | } = {}
533 | },
534 | state: {
535 | horizontalTransform,
536 | verticalTransform
537 | }
538 | } = this;
539 | const delta = new Point(0, scrollTo.y)
540 | .sub(new Point(0, verticalTransform));
541 |
542 | const initStateUpdate = {
543 | scrolling: true
544 | };
545 |
546 | if (Math.abs(delta.y) > height * constants.SCROLL_TO_FAST_SCROLL_FACTOR) {
547 | initStateUpdate.isFastScrolling = true;
548 | }
549 |
550 | this.setState(initStateUpdate);
551 |
552 | return _.throttle(easer(easedElapsedTime => {
553 | const {
554 | state: {
555 | contentHeight,
556 | partitions,
557 | scrollingToPosition: latestScrollingToPosition,
558 | shouldRender
559 | },
560 | _verticalScrollbar
561 | } = this;
562 | if (!_.isEqual(scrollTo, latestScrollingToPosition)) {
563 | return;
564 | }
565 |
566 | const elapsedTime = easedElapsedTime > 0.999 ? 1 : easedElapsedTime;
567 | const deltaScrolled = new Point(delta.x, delta.y)
568 | .scale(elapsedTime);
569 | const newTransform = new Point(horizontalTransform, verticalTransform)
570 | .add(deltaScrolled);
571 |
572 | const scrollChanges = {
573 | isScrolling: true
574 | };
575 |
576 | if (shouldRender.verticalScrollbar) {
577 | const maxHeight = getMaxHeight(contentHeight, _verticalScrollbar.offsetHeight);
578 | _.assign(scrollChanges, getVerticalScrollValues(newTransform.y, maxHeight, partitions));
579 | }
580 |
581 | this.setState(scrollChanges, () => {
582 | if (shouldRender.verticalScrollbar) {
583 | if (_verticalScrollbar.scrollTop !== scrollChanges.verticalTransform) {
584 | onVerticalScroll(scrollChanges.verticalTransform);
585 | }
586 | _verticalScrollbar.scrollTop = scrollChanges.verticalTransform;
587 | }
588 |
589 | this._endScroll();
590 | });
591 | }), constants.ANIMATION_FPS_120, { leading: true });
592 | }
593 |
594 | _getWeightedWidth() {
595 | const {
596 | props: {
597 | verticalScrollConfig: {
598 | scrollbarWidth = constants.VERTICAL_SCROLLBAR_WIDTH
599 | } = {},
600 | width
601 | },
602 | state: { shouldRender }
603 | } = this;
604 |
605 | return width - (shouldRender.verticalScrollbar ? scrollbarWidth : 0);
606 | }
607 |
608 | _onHorizontalScroll() {
609 | const {
610 | props: {
611 | horizontalScrollConfig: {
612 | onScroll = () => {}
613 | } = {}
614 | },
615 | state: {
616 | horizontalTransform
617 | },
618 | _horizontalScrollbar
619 | } = this;
620 |
621 | if (!_horizontalScrollbar || _horizontalScrollbar.scrollLeft === horizontalTransform) {
622 | return;
623 | }
624 |
625 | const { scrollLeft = 0 } = _horizontalScrollbar || {};
626 | this.setState({ horizontalTransform: scrollLeft });
627 | onScroll(scrollLeft);
628 | }
629 |
630 | _onMouseWheel({ deltaX, deltaY }) {
631 | this._onThrottledMouseWheel({ deltaX, deltaY });
632 | }
633 |
634 | /**
635 | * Performs a calculation to determine the size difference between each movement of the mouse cursor. Only occurs when
636 | * a resize is active. Will call the onResize handler for the gutter that is being resized with the new width of the
637 | * gutter.
638 | * @param {number} clientX the position of the mouse cursor horizontally
639 | */
640 | _onResize({ clientX }) {
641 | const { basePosition, performing, side, startingPosition } = this.state.resize;
642 | const width = this._getWeightedWidth();
643 | const {
644 | dynamicColumn = constants.columns.MIDDLE,
645 | guttersConfig,
646 | guttersConfig: {
647 | left,
648 | left: {
649 | handleWidth: leftHandleWidth = constants.LEFT_HANDLE_WIDTH,
650 | position: leftHandlePosition
651 | } = {},
652 | right,
653 | right: {
654 | handleWidth: rightHandleWidth = constants.RIGHT_HANDLE_WIDTH,
655 | position: rightHandlePosition
656 | } = {},
657 | [side]: {
658 | minPosition = 0,
659 | maxPosition = width,
660 | onResize = (() => {})
661 | } = {}
662 | } = {}
663 | } = this.props;
664 | if (performing) {
665 | const deltaPosition = startingPosition - clientX;
666 | const { max, min, mod } = getResizeValues({
667 | dynamicColumn: guttersConfig
668 | ? dynamicColumn
669 | : constants.columns.MIDDLE,
670 | leftExists: Boolean(left),
671 | leftHandlePosition,
672 | leftHandleWidth,
673 | rightExists: Boolean(right),
674 | rightHandlePosition,
675 | rightHandleWidth,
676 | side,
677 | width
678 | });
679 |
680 | onResize(_.clamp(
681 | basePosition + (mod * deltaPosition),
682 | Math.max(minPosition, min),
683 | Math.min(maxPosition, max)
684 | ));
685 | }
686 | }
687 |
688 | _onVerticalScroll() {
689 | const {
690 | props: {
691 | height,
692 | verticalScrollConfig: {
693 | onScroll = () => {}
694 | } = {}
695 | },
696 | state: {
697 | contentHeight,
698 | isFastScrolling: wasFastScrolling,
699 | partitions,
700 | velocityQueue: oldVelocityQueue,
701 | verticalTransform
702 | },
703 | _verticalScrollbar,
704 | _verticalScrollbar: {
705 | offsetHeight,
706 | scrollTop
707 | } = {}
708 | } = this;
709 |
710 | if (!_verticalScrollbar || scrollTop === verticalTransform) {
711 | return;
712 | }
713 |
714 | const maxHeight = getMaxHeight(contentHeight, offsetHeight);
715 |
716 | const nextScrollState = getVerticalScrollValues(scrollTop, maxHeight, partitions);
717 | const {
718 | averageVelocity,
719 | velocityQueue
720 | } = getVelocityInfo(nextScrollState.verticalTransform - verticalTransform, oldVelocityQueue);
721 | const isFastScrolling = wasFastScrolling || Math.abs(averageVelocity) > (height * 3) / 4;
722 |
723 | this.setState(_.assign(
724 | nextScrollState,
725 | {
726 | averageVelocity,
727 | isFastScrolling,
728 | isScrolling: true,
729 | velocityQueue
730 | }
731 | ), () => this._endScroll());
732 | onScroll(nextScrollState.verticalTransform);
733 | }
734 |
735 | _renderContents() {
736 | const {
737 | props: {
738 | dynamicColumn = constants.columns.MIDDLE,
739 | guttersConfig,
740 | horizontalScrollConfig,
741 | horizontalScrollConfig: {
742 | passthroughOffsets = false
743 | } = {},
744 | light = false,
745 | verticalScrollConfig: {
746 | scrollbarWidth = constants.VERTICAL_SCROLLBAR_WIDTH
747 | } = {}
748 | },
749 | state: {
750 | displayBuffer,
751 | isFastScrolling,
752 | horizontalTransform,
753 | partitions,
754 | rows,
755 | isScrolling,
756 | shouldRender,
757 | topPartitionIndex,
758 | verticalTransform
759 | }
760 | } = this;
761 |
762 | const contentsStyle = shouldRender.verticalScrollbar ? {
763 | width: `calc(100% - ${scrollbarWidth}px)`
764 | } : undefined;
765 |
766 | const weightedPartitionIndex = topPartitionIndex * constants.OFFSET_BUFFER;
767 | const startingRowIndex = Math.min(weightedPartitionIndex, rows.length);
768 | const endingRowIndex = weightedPartitionIndex + displayBuffer;
769 | const weightedWidth = this._getWeightedWidth();
770 |
771 | const rowsWeWillRender = _.slice(rows, startingRowIndex, endingRowIndex);
772 | const partitionedRows = _.chunk(rowsWeWillRender, constants.OFFSET_BUFFER);
773 | const renderedPartitions = _.map(partitionedRows, (row, outerIndex) => {
774 | const partitionIndex = outerIndex + topPartitionIndex;
775 | const basePartitionOffset = partitions[partitionIndex];
776 | const partitionStyle = {
777 | transform: `translate3d(-0px, ${basePartitionOffset - verticalTransform}px, 0px)`
778 | };
779 |
780 | return (
781 |
782 | {_.map(
783 | row,
784 | ({
785 | className,
786 | contentComponent,
787 | contentClassName,
788 | gutters,
789 | height,
790 | isHeader,
791 | key,
792 | props: rowProps
793 | }, innerIndex) => light
794 | ? (
795 |
809 | )
810 | : (
811 | |
830 | )
831 | )}
832 |
833 | );
834 | });
835 |
836 | const { bottomHeaderGutter, header, topHeaderGutter } = this._renderHeader();
837 |
838 | // TODO remove partitions and shift the contents of the div
839 | return (
840 |
841 | {header}
842 | {topHeaderGutter}
843 | {renderedPartitions}
844 | {bottomHeaderGutter}
845 |
846 | );
847 | }
848 |
849 | _renderCorner() {
850 | const {
851 | props: {
852 | horizontalScrollConfig,
853 | horizontalScrollConfig: {
854 | scrollbarHeight = constants.HORIZONTAL_SCROLLBAR_HEIGHT
855 | } = {},
856 | verticalScrollConfig: {
857 | scrollbarWidth = constants.VERTICAL_SCROLLBAR_WIDTH
858 | } = {}
859 | },
860 | state: { shouldRender }
861 | } = this;
862 |
863 | const shouldRenderCorner = !!horizontalScrollConfig && shouldRender.verticalScrollbar;
864 |
865 | if (!shouldRenderCorner) {
866 | return null;
867 | }
868 |
869 | const cornerStyle = {
870 | height: `${scrollbarHeight}px`,
871 | width: `${scrollbarWidth}px`
872 | };
873 |
874 | return ;
875 | }
876 |
877 | _renderHeader() {
878 | const {
879 | props: {
880 | dynamicColumn = constants.columns.MIDDLE,
881 | guttersConfig,
882 | headerType = constants.headerType.DEFAULT,
883 | height,
884 | horizontalScrollConfig: {
885 | scrollbarHeight = constants.HORIZONTAL_SCROLLBAR_HEIGHT
886 | } = {},
887 | light
888 | },
889 | state: {
890 | headers,
891 | isScrolling,
892 | isFastScrolling,
893 | rows,
894 | shouldRender,
895 | verticalTransform
896 | }
897 | } = this;
898 |
899 | if (!headers || headers.length === 0) {
900 | return {};
901 | }
902 |
903 | const { lockPosition: maxLockPosition } = headers[headers.length - 1];
904 | const findNextHeaderIndex = _.findIndex(headers, ({ lockPosition }) => lockPosition > verticalTransform);
905 | const nextHeaderIndex = findNextHeaderIndex === -1 ? headers.length : findNextHeaderIndex;
906 | const weightedWidth = this._getWeightedWidth();
907 |
908 | if (headerType === constants.headerType.STACKING) {
909 | const topHeaderGutter = (
910 |
911 | {_.times(nextHeaderIndex, headerIndex => {
912 | const { index: headerRowIndex } = headers[headerIndex];
913 | const { className, contentComponent, height: rowHeight, key, props: rowProps } = rows[headerRowIndex];
914 |
915 | return light
916 | ? (
917 |
930 | )
931 | : (
932 | |
948 | );
949 | })}
950 |
951 | );
952 |
953 | let bottomGutterStartIndex = nextHeaderIndex;
954 | /* We want to erase headers as they come into view in the contents view from the header gutter
955 | * We solve for the vertical transform that we need to remove a header from the bottom gutter:
956 | * height: height of the header we are transitioning
957 | * topHeight: height of all other gutters pinned to the top, not including baseHeight
958 | * realOffset: the verticalTransform that aligns the next header with the top of the rickscroll__contents
959 | * bottomHeight: the height of the bottom gutter of combined headers
960 | * adjustedBottomHeight: the total height of the headers in the bottom gutter with the baseHeight
961 | * adjustedTransform: the vertical transform that is adjusted to the scale of viewable contents
962 | * ------------------------------------------------------------------------------------------------------------
963 | * we should delete the top header from the bottom gutter if the adjusted transform is smaller than the
964 | * height of contents window
965 | */
966 | const contentsDivHeight = height - (shouldRender.horizontalScrollbar ? scrollbarHeight : 0);
967 | const { height: baseHeight } = headers[0];
968 | const {
969 | adjustHeaderOffset: topHeight,
970 | realOffset: removeFirstHeaderOffset
971 | } = headers[nextHeaderIndex] || headers[nextHeaderIndex - 1];
972 | const { adjustHeaderOffset: bottomHeight } = headers[headers.length - 1];
973 | const adjustedBottomHeight = (baseHeight + bottomHeight) - topHeight;
974 | const adjustedTransform = (removeFirstHeaderOffset - verticalTransform) + adjustedBottomHeight;
975 | if (bottomGutterStartIndex !== headers.length && adjustedTransform <= contentsDivHeight - 1) {
976 | bottomGutterStartIndex++;
977 | const skipHeadersUntil = _(headers)
978 | .slice(bottomGutterStartIndex)
979 | .findIndex(({ adjustHeaderOffset, realOffset }) => {
980 | const restHeight = bottomHeight - adjustHeaderOffset;
981 | return realOffset + topHeight >= ((contentsDivHeight + verticalTransform) - restHeight);
982 | });
983 |
984 | if (skipHeadersUntil >= 0) {
985 | bottomGutterStartIndex += skipHeadersUntil;
986 | } else {
987 | bottomGutterStartIndex = headers.length;
988 | }
989 | }
990 |
991 | const bottomHeaderGutter = (
992 |
993 | {_(headers).slice(bottomGutterStartIndex).map(({ index: headerRowIndex, lockPosition }, index) => {
994 | const headerIndex = bottomGutterStartIndex + index;
995 | const { className, contentComponent, height: rowHeight, key, props: rowProps } = rows[headerRowIndex];
996 |
997 | return light
998 | ? (
999 |
1012 | )
1013 | : (
1014 | |
1030 | );
1031 | }).value()}
1032 |
1033 | );
1034 |
1035 | return { bottomHeaderGutter, topHeaderGutter };
1036 | } else if (headerType === constants.headerType.LOCKING) {
1037 | const headerIndex = nextHeaderIndex - 1;
1038 | const { lockPosition } = headers[nextHeaderIndex] || headers[headerIndex];
1039 |
1040 | const { index: headerRowIndex } = headers[headerIndex];
1041 | const { className, contentComponent, height: rowHeight, key, props: rowProps } = rows[headerRowIndex];
1042 |
1043 | const headerStyle = {
1044 | height: `${rowHeight}px`,
1045 | transform: 'translate3d(0px, 0px, 0px)'
1046 | };
1047 |
1048 | if (verticalTransform < maxLockPosition && verticalTransform >= lockPosition - rowHeight) {
1049 | const overlap = (lockPosition - verticalTransform);
1050 | const headerOffset = rowHeight - overlap;
1051 | headerStyle.transform = `translate3d(0px, -${headerOffset}px, 0px)`;
1052 | }
1053 |
1054 | const rowContent = light
1055 | ? (
1056 |
1069 | )
1070 | : (
1071 | |
1087 | );
1088 |
1089 | const header = (
1090 |
1091 | {rowContent}
1092 |
1093 | );
1094 |
1095 | return { header };
1096 | }
1097 |
1098 | return {};
1099 | }
1100 |
1101 | /**
1102 | * Decides whether or not to render the horizontal scroll bar
1103 | * @return null or a container with horizontal scrollbar and maybe the corner piece
1104 | */
1105 | _renderHorizontalScrollbar() {
1106 | const {
1107 | props: {
1108 | dynamicColumn = constants.columns.MIDDLE,
1109 | guttersConfig,
1110 | guttersConfig: {
1111 | left,
1112 | left: {
1113 | handleWidth: leftHandleWidth = constants.LEFT_HANDLE_WIDTH,
1114 | position: leftHandlePosition
1115 | } = {},
1116 | right,
1117 | right: {
1118 | handleWidth: rightHandleWidth = constants.RIGHT_HANDLE_WIDTH,
1119 | position: rightHandlePosition
1120 | } = {}
1121 | } = {},
1122 | horizontalScrollConfig,
1123 | horizontalScrollConfig: {
1124 | className,
1125 | scaleWithCenterContent = false,
1126 | scrollbarHeight = constants.HORIZONTAL_SCROLLBAR_HEIGHT
1127 | } = {},
1128 | verticalScrollConfig: {
1129 | scrollbarWidth = constants.VERTICAL_SCROLLBAR_WIDTH
1130 | } = {}
1131 | },
1132 | state: { shouldRender }
1133 | } = this;
1134 |
1135 | const withHorizontalScrolling = !!horizontalScrollConfig && shouldRender.horizontalScrollbar;
1136 |
1137 | if (!withHorizontalScrolling) {
1138 | return null;
1139 | }
1140 |
1141 | // TODO fix scaleWithCenterContent
1142 | const contentWidth = this._getContentWidth();
1143 | const { leftGutterWidth, rightGutterWidth } = getGutterWidths({
1144 | dynamicColumn: guttersConfig
1145 | ? dynamicColumn
1146 | : constants.columns.MIDDLE,
1147 | leftHandlePosition,
1148 | leftHandleWidth,
1149 | rightHandlePosition,
1150 | rightHandleWidth,
1151 | width: this._getWeightedWidth()
1152 | });
1153 | const shouldRenderCorner = !!horizontalScrollConfig && shouldRender.verticalScrollbar;
1154 | const cornerWidth = returnWidthIfComponentExists(scrollbarWidth, shouldRenderCorner);
1155 | let adjustedContentWidth = contentWidth - cornerWidth;
1156 | let leftWidth;
1157 | let position;
1158 | let scaledWidth;
1159 |
1160 | // If the scale with center content flag is enabled, we will adjust the scrollbar to be in the correct position
1161 | // and set up the width to be equivelant to the center content
1162 | // we will also have to adjust the size of the filler content by the gutters
1163 | if (scaleWithCenterContent) {
1164 | const rightWidth = returnWidthIfComponentExists(rightHandleWidth + rightGutterWidth, right);
1165 |
1166 | leftWidth = returnWidthIfComponentExists(leftHandleWidth + leftGutterWidth, left);
1167 | adjustedContentWidth -= leftWidth + rightWidth;
1168 | position = 'relative';
1169 | scaledWidth = `calc(100% - ${leftWidth}px - ${rightWidth}px - ${cornerWidth}px)`;
1170 | }
1171 |
1172 | const wrapperStyle = {
1173 | height: `${scrollbarHeight}px`
1174 | };
1175 |
1176 | const scrollBarDivStyle = {
1177 | height: `${scrollbarHeight}px`,
1178 | left: leftWidth,
1179 | position,
1180 | width: scaledWidth
1181 | };
1182 |
1183 | const fillerStyle = { height: '1px', width: `${adjustedContentWidth}px` };
1184 |
1185 | const getHorizontalScrollbarRef = r => { this._horizontalScrollbar = r; };
1186 | const horizontalScrollbarClassName = classnames('rickscroll__horizontal-scrollbar', className);
1187 |
1188 | return (
1189 |
1190 |
1197 |
{/* this causes the scrollbar to appear */}
1198 |
1199 | {this._renderCorner()}
1200 |
1240 |
{/* this causes the scrollbar to appear */}
1241 |
1539 |
1547 | {this._renderContents()}
1548 | {this._renderVerticalScrollbar()}
1549 |
1550 | {this._renderHorizontalScrollbar()}
1551 |