chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 (#28408)
1. Bumps `react-virtualized-auto-sizer` to 1.0.23, which has a fix for cases with multiple realms - https://github.com/bvaughn/react-virtualized-auto-sizer/pull/82 2. Removes `react-window` from react-devtools-shared/src/node_modules, now listed as dependency in `package.json` and bumped to 1.8.10 Tested: - Chrome extension - Standalone shell with RN
Ruslan Lesiutin committed
Feb 22, 2024 at 11:31 UTC
404ed926588ec1cb7e9524d4dbb75b7297130adc
25 files changed
+32
-7511
packages/react-devtools-shared/package.json
+2
-1
@@ -23,6 +23,7 @@
23
"local-storage-fallback": "^4.1.1",
24
"lodash.throttle": "^4.1.1",
25
"memoize-one": "^3.1.1",
26
- "react-virtualized-auto-sizer": "^1.0.6"
26
+ "react-virtualized-auto-sizer": "^1.0.23",
27
+ "react-window": "^1.8.10"
28
}
29
}
packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md
deleted
-96
@@ -1,96 +0,0 @@
1
-Changelog
2
-------------
3
-
4
-### 1.8.0
5
-* 🎉 Added new "smart" align option for grid and list scroll-to-item methods ([gaearon](https://github.com/gaearon) - [#209](https://github.com/bvaughn/react-window/pull/209))
6
-
7
-### 1.7.2
8
-* 🐛 Add guards to avoid invalid scroll offsets when `scrollTo()` is called with a negative offset or when `scrollToItem` is called with invalid indices (negative or too large).
9
-
10
-### 1.7.1
11
-* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https://github.com/Betree) - [#185](https://github.com/bvaughn/react-window/pull/185))
12
-
13
-### 1.7.0
14
-* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https://github.com/jgoz) - [#174](https://github.com/bvaughn/react-window/pull/174))
15
-* DEV mode checks for `WeakSet` support before using it to avoid requiring a polyfill for IE11 - ([jgoz](https://github.com/jgoz) - [#167](https://github.com/bvaughn/react-window/pull/167))
16
-
17
-### 1.6.2
18
-* 🐛 Bugfix for RTL when scrolling back towards the beginning (right) of the list.
19
-
20
-### 1.6.1
21
-* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.
22
-
23
-### 1.6.0
24
-* 🎉 RTL support added for lists and grids. Special thanks to [davidgarsan](https://github.com/davidgarsan) for his support. - [#156](https://github.com/bvaughn/react-window/pull/156)
25
-* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https://github.com/bvaughn/react-window/issues/153)
26
-
27
-### 1.5.2
28
-* 🐛 Edge case bug fix for `VariableSizeList` and `VariableSizeGrid` when the number of items decreases while a scroll is in progress. - ([iamsolankiamit](https://github.com/iamsolankiamit) - [#138](https://github.com/bvaughn/react-window/pull/138))
29
-
30
-### 1.5.1
31
-* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.
32
-
33
-### 1.5.0
34
-* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https://github.com/bvaughn/react-window/issues/114)
35
-
36
-### 1.4.0
37
-* 🎉 List and Grid components now "overscan" (pre-render) in both directions when scrolling is not active. When scrolling is in progress, cells are only pre-rendered in the direction being scrolled. This change has been made in an effort to reduce visible flicker when scrolling starts without adding additional overhead during scroll (which is the most performance sensitive time).
38
-* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.
39
-* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https://github.com/bvaughn/react-window/issues/106)
40
-* 🎉 Renamed List and Grid `innerTagName` and `outerTagName` props to `innerElementType` and `outerElementType` to formalize support for attaching arbitrary props (e.g. test ids) to List and Grid inner and outer DOM elements. Legacy `innerTagName` and `outerTagName` props will continue to work, but with a deprecation warning in DEV mode.
41
-* 🐛 List re-renders items if `direction` prop changes. - [#104](https://github.com/bvaughn/react-window/issues/104)
42
-
43
-### 1.3.1
44
-* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https://github.com/bvaughn/react-window/issues/90))
45
-
46
-### 1.3.0
47
-* (Skipped)
48
-
49
-### 1.2.4
50
-* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow
51
-
52
-### 1.2.3
53
-* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.
54
-
55
-### 1.2.2
56
-* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https://github.com/nicholas-l) - [#77](https://github.com/bvaughn/react-window/pull/77))
57
-
58
-### 1.2.1
59
-* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https://github.com/TrySound) - [#66](https://github.com/bvaughn/react-window/pull/66))
60
-* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.
61
-
62
-### 1.2.0
63
-* 🎉 Flow types added to NPM package. ([TrySound](https://github.com/TrySound) - [#40](https://github.com/bvaughn/react-window/pull/40))
64
-* 🎉 Relaxed grid `scrollTo` method to make `scrollLeft` and `scrollTop` params _optional_ (so you can only update one axis if desired). - [#63](https://github.com/bvaughn/react-window/pull/63))
65
-* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https://github.com/bvaughn/react-window/pull/58))
66
-* Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. ([TrySound](https://github.com/TrySound) - [#48](https://github.com/bvaughn/react-window/pull/48))
67
-* Remove `overflow:hidden` from inner container ([souporserious](https://github.com/souporserious) - [#56](https://github.com/bvaughn/react-window/pull/56))
68
-
69
-### 1.1.2
70
-* 🐛 Fixed edge case `scrollToItem` bug that caused lists/grids with very few items to have negative scroll offsets.
71
-
72
-### 1.1.1
73
-* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.
74
-
75
-### 1.1.0
76
-* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https://github.com/Andarist) - [#26](https://github.com/bvaughn/react-window/pull/26))
77
-* 🎉 Add optional `shouldForceUpdate` param reset-index methods to specify `forceUpdate` behavior. ([nihgwu](https://github.com/nihgwu) - [#32](https://github.com/bvaughn/react-window/pull/32))
78
-
79
-### 1.0.3
80
-* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.
81
-
82
-### 1.0.2
83
-
84
-* 🎉 Enable Babel `annotate-pure-calls` option so that classes compiled by "transform-es2015-classes" are annotated with `#__PURE__`. This enables [UglifyJS to remove them if they are not referenced](https://github.com/mishoo/UglifyJS2/pull/1448), improving dead code elimination in application code. ([Andarist](https://github.com/Andarist) - [#20](https://github.com/bvaughn/react-window/pull/20))
85
-* 🎉 Update "rollup-plugin-peer-deps-external" and use new `includeDependencies` flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. ([Andarist](https://github.com/Andarist) - [#19](https://github.com/bvaughn/react-window/pull/19))
86
-* 🎉 Enable [Babel "loose" mode](https://babeljs.io/docs/en/babel-preset-env#loose) to reduce package size (-8%). ([Andarist](https://github.com/Andarist) - [#18](https://github.com/bvaughn/react-window/pull/18))
87
-
88
-### 1.0.1
89
-Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.
90
-
91
-# 1.0.0
92
-Initial release of library. Includes the following components:
93
-* `FixedSizeGrid`
94
-* `FixedSizeList`
95
-* `VariableSizeGrid`
96
-* `VariableSizeList`
packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md
deleted
-21
@@ -1,21 +0,0 @@
1
-The MIT License (MIT)
2
-
3
-Copyright (c) 2018 Brian Vaughn
4
-
5
-Permission is hereby granted, free of charge, to any person obtaining a copy
6
-of this software and associated documentation files (the "Software"), to deal
7
-in the Software without restriction, including without limitation the rights
8
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
-copies of the Software, and to permit persons to whom the Software is
10
-furnished to do so, subject to the following conditions:
11
-
12
-The above copyright notice and this permission notice shall be included in all
13
-copies or substantial portions of the Software.
14
-
15
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
-SOFTWARE.
packages/react-devtools-shared/src/node_modules/react-window/README.md
deleted
-88
@@ -1,88 +0,0 @@
1
-# react-window
2
-
3
-> React components for efficiently rendering large lists and tabular data
4
-
5
-[](https://yarnpkg.com/en/package/react-window) [](https://travis-ci.org/bvaughn/react-window) [](LICENSE.md)
6
-
7
-## Install
8
-
9
-```bash
10
-# Yarn
11
-yarn add react-window
12
-
13
-# NPM
14
-npm install --save react-window
15
-```
16
-
17
-## Usage
18
-
19
-Learn more at [react-window.now.sh](https://react-window.now.sh/):
20
-
21
-## Related libraries
22
-
23
-* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
24
-* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
25
-
26
-## Frequently asked questions
27
-
28
-### How is `react-window` different from `react-virtualized`?
29
-I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
30
-
31
-`react-window` is a complete rewrite of `react-virtualized`. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package **smaller**<sup>1</sup> and **faster**. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
32
-
33
-If `react-window` provides the functionality your project needs, I would strongly recommend using it instead of `react-virtualized`. However if you need features that only `react-virtualized` provides, you have two options:
34
-
35
-1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)
36
-2. Create a component that decorates one of the `react-window` primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂
37
-
38
-<sup>1 - Adding a `react-virtualized` list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a `react-window` list to a CRA project increases the (gzipped) build size by <2 KB.</sup>
39
-
40
-### Can a list or a grid fill 100% the width or height of a page?
41
-
42
-Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
43
-
44
-<img width="336" alt="screen shot 2019-03-07 at 7 29 08 pm" src="https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png">
45
-
46
-Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
47
-
48
-### Why is my list blank when I scroll?
49
-
50
-If your list looks something like this...
51
-
52
-<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152">
53
-
54
-...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
55
-
56
-<img width="257" alt="screen shot 2019-03-07 at 7 21 48 pm" src="https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png">
57
-
58
-### Can I lazy load data for my list?
59
-
60
-Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
61
-
62
-<img width="368" alt="screen shot 2019-03-07 at 7 32 32 pm" src="https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png">
63
-
64
-Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
65
-
66
-### Can I attach custom properties or event handlers?
67
-
68
-Yes, using the `outerElementType` prop.
69
-
70
-<img width="412" alt="Screen Shot 2019-03-12 at 8 58 09 AM" src="https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png">
71
-
72
-Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
73
-
74
-### Can I add gutter or padding between items?
75
-
76
-Yes, although it requires a bit of inline styling.
77
-
78
-<img width="416" alt="Screen Shot 2019-03-26 at 6 33 56 PM" src="https://user-images.githubusercontent.com/29597/55043972-c14ad700-4ff5-11e9-9caa-2e9f4d85f96c.png">
79
-
80
-Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
81
-
82
-### Does this library support "sticky" items?
83
-
84
-Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
85
-
86
-## License
87
-
88
-MIT © [bvaughn](https://github.com/bvaughn)
packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js
deleted
-2
@@ -1,2 +0,0 @@
1
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactWindow={},e.React)}(this,function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var i=function(e,t){return e.length===t.length&&e.every(function(e,r){return n=e,o=t[r],n===o;var n,o})};function a(e,t){var r;void 0===t&&(t=i);var n,o=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&t(l,o)?n:(n=e.apply(this,l),a=!0,r=this,o=l,n)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(e){cancelAnimationFrame(e.id)}function c(e,t){var r=l();var n={id:requestAnimationFrame(function o(){l()-r>=t?e.call(null):n.id=requestAnimationFrame(o)})};return n}var u=-1;var d=null;function f(e){if(void 0===e&&(e=!1),null===d||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var n=document.createElement("div"),o=n.style;return o.width="100px",o.height="100px",t.appendChild(n),document.body.appendChild(t),t.scrollLeft>0?d="positive-descending":(t.scrollLeft=1,d=0===t.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(t),d}return d}var h=150,p=function(e){var t=e.columnIndex;e.data;return e.rowIndex+":"+t},m=null,v=null,g=null;function w(e){var i,l,d=e.getColumnOffset,m=e.getColumnStartIndexForOffset,v=e.getColumnStopIndexForStartIndex,g=e.getColumnWidth,w=e.getEstimatedTotalHeight,I=e.getEstimatedTotalWidth,M=e.getOffsetForColumnAndAlignment,y=e.getOffsetForRowAndAlignment,x=e.getRowHeight,C=e.getRowOffset,_=e.getRowStartIndexForOffset,b=e.getRowStopIndexForStartIndex,R=e.initInstanceProps,T=e.shouldResetStyleCacheOnItemSizeChange,z=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=R(r.props,o(o(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:o(o(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:e,overscanColumnStopIndex:t,overscanRowStartIndex:n,overscanRowStopIndex:o,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n,o,i){return r.props.onScroll({horizontalScrollDirection:n,scrollLeft:e,scrollTop:t,verticalScrollDirection:o,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(e,t){var n,o,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(T&&a,T&&l,T&&s),u=e+":"+t;c.hasOwnProperty(u)?n=c[u]:c[u]=((o={position:"absolute"})["rtl"===l?"right":"left"]=d(r.props,t,r._instanceProps),o.top=C(r.props,e,r._instanceProps),o.height=x(r.props,e,r._instanceProps),o.width=g(r.props,t,r._instanceProps),n=o);return n},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScroll=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.clientWidth,i=t.scrollLeft,a=t.scrollTop,l=t.scrollHeight,s=t.scrollWidth;r.setState(function(e){if(e.scrollLeft===i&&e.scrollTop===a)return null;var t=r.props.direction,c=i;if("rtl"===t)switch(f()){case"negative":c=-i;break;case"positive-descending":c=s-o-i}c=Math.max(0,Math.min(c,s-o));var u=Math.max(0,Math.min(a,l-n));return{isScrolling:!0,horizontalScrollDirection:e.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:e.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return S(e,t),z(e),null};var l=i.prototype;return l.scrollTo=function(e){var t=e.scrollLeft,r=e.scrollTop;void 0!==t&&(t=Math.max(0,t)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(e){return void 0===t&&(t=e.scrollLeft),void 0===r&&(r=e.scrollTop),e.scrollLeft===t&&e.scrollTop===r?null:{horizontalScrollDirection:e.scrollLeft<t?"forward":"backward",scrollLeft:t,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:e.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e){var t=e.align,r=void 0===t?"auto":t,n=e.columnIndex,o=e.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,d=this.state,f=d.scrollLeft,h=d.scrollTop,p=function(e){if(void 0===e&&(e=!1),-1===u||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(t),u=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return u}();void 0!==n&&(n=Math.max(0,Math.min(n,a-1))),void 0!==o&&(o=Math.max(0,Math.min(o,s-1)));var m=w(this.props,this._instanceProps),v=I(this.props,this._instanceProps)>c?p:0,g=m>l?p:0;this.scrollTo({scrollLeft:void 0!==n?M(this.props,n,r,f,this._instanceProps,g):f,scrollTop:void 0!==o?y(this.props,o,r,h,this._instanceProps,v):h})},l.componentDidMount=function(){var e=this.props,t=e.initialScrollLeft,r=e.initialScrollTop;if(null!=this._outerRef){var n=this._outerRef;"number"==typeof t&&(n.scrollLeft=t),"number"==typeof r&&(n.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props.direction,t=this.state,r=t.scrollLeft,n=t.scrollTop;if(t.scrollUpdateWasRequested&&null!=this._outerRef){var o=this._outerRef;if("rtl"===e)switch(f()){case"negative":o.scrollLeft=-r;break;case"positive-ascending":o.scrollLeft=r;break;default:var i=o.clientWidth,a=o.scrollWidth;o.scrollLeft=a-i-r}else o.scrollLeft=Math.max(0,r);o.scrollTop=Math.max(0,n)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.columnCount,a=e.direction,l=e.height,s=e.innerRef,c=e.innerElementType,u=e.innerTagName,d=e.itemData,f=e.itemKey,h=void 0===f?p:f,m=e.outerElementType,v=e.outerTagName,g=e.rowCount,S=e.style,M=e.useIsScrolling,y=e.width,x=this.state.isScrolling,C=this._getHorizontalRangeToRender(),_=C[0],b=C[1],R=this._getVerticalRangeToRender(),T=R[0],z=R[1],O=[];if(i>0&&g)for(var P=T;P<=z;P++)for(var W=_;W<=b;W++)O.push(t.createElement(n,{columnIndex:W,data:d,isScrolling:M?x:void 0,key:h({columnIndex:W,data:d,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var E=w(this.props,this._instanceProps),A=I(this.props,this._instanceProps);return t.createElement(m||v||"div",{className:o,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:y,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},t.createElement(c||u||"div",{children:O,ref:s,style:{height:E,pointerEvents:x?"none":void 0,width:A}}))},l._callPropsCallbacks=function(){var e=this.props,t=e.columnCount,r=e.onItemsRendered,n=e.onScroll,o=e.rowCount;if("function"==typeof r&&t>0&&o>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),d=u[0],f=u[1],h=u[2],p=u[3];this._callOnItemsRendered(a,l,d,f,s,c,h,p)}if("function"==typeof n){var m=this.state,v=m.horizontalScrollDirection,g=m.scrollLeft,w=m.scrollTop,S=m.scrollUpdateWasRequested,I=m.verticalScrollDirection;this._callOnScroll(g,w,v,I,S)}},l._getHorizontalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanColumnCount,n=e.overscanColumnsCount,o=e.overscanCount,i=e.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||n||o||1;if(0===t||0===i)return[0,0,0,0];var d=m(this.props,c,this._instanceProps),f=v(this.props,d,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),p=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(t-1,f+p)),d,f]},l._getVerticalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanCount,n=e.overscanRowCount,o=e.overscanRowsCount,i=e.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=n||o||r||1;if(0===t||0===i)return[0,0,0,0];var d=_(this.props,c,this._instanceProps),f=b(this.props,d,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),p=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(i-1,f+p)),d,f]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(m=new WeakSet,v=new WeakSet,g=new WeakSet);var S=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.innerTagName,a=e.outerTagName,l=e.overscanColumnsCount,s=e.overscanCount,c=e.overscanRowsCount,u=e.width,d=t.instance;if("number"==typeof s&&m&&!m.has(d)&&(m.add(d),console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),"number"!=typeof l&&"number"!=typeof c||v&&!v.has(d)&&(v.add(d),console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),null==i&&null==a||g&&!g.has(d)&&(g.add(d),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")),null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');switch(n){case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}if("number"!=typeof u)throw Error('An invalid "width" prop has been specified. Grids must specify a number for width. "'+(null===u?"null":typeof u)+'" was specified.');if("number"!=typeof o)throw Error('An invalid "height" prop has been specified. Grids must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},I=function(e,t){var r=e.rowCount,n=t.rowMetadataMap,o=t.estimatedRowHeight,i=t.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},M=function(e,t){var r=e.columnCount,n=t.columnMetadataMap,o=t.estimatedColumnWidth,i=t.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},y=function(e,t,r,n){var o,i,a;if("column"===e?(o=n.columnMetadataMap,i=t.columnWidth,a=n.lastMeasuredColumnIndex):(o=n.rowMetadataMap,i=t.rowHeight,a=n.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=o[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);o[c]={offset:l,size:u},l+=u}"column"===e?n.lastMeasuredColumnIndex=r:n.lastMeasuredRowIndex=r}return o[r]},x=function(e,t,r,n){var o,i;return"column"===e?(o=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(o=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?o[i].offset:0)>=n?C(e,t,r,i,0,n):_(e,t,r,Math.max(0,i),n)},C=function(e,t,r,n,o,i){for(;o<=n;){var a=o+Math.floor((n-o)/2),l=y(e,t,a,r).offset;if(l===i)return a;l<i?o=a+1:l>i&&(n=a-1)}return o>0?o-1:0},_=function(e,t,r,n,o){for(var i="column"===e?t.columnCount:t.rowCount,a=1;n<i&&y(e,t,n,r).offset<o;)n+=a,a*=2;return C(e,t,r,Math.min(n,i-1),Math.floor(n/2),o)},b=function(e,t,r,n,o,i,a){var l="column"===e?t.width:t.height,s=y(e,t,r,i),c="column"===e?M(t,i):I(t,i),u=Math.max(0,Math.min(c-l,s.offset)),d=Math.max(0,s.offset-l+a+s.size);switch("smart"===n&&(n=o>=d-l&&o<=u+l?"auto":"center"),n){case"start":return u;case"end":return d;case"center":return Math.round(d+(u-d)/2);case"auto":default:return o>=d&&o<=u?o:d>u?d:o<d?d:u}},R=w({getColumnOffset:function(e,t,r){return y("column",e,t,r).offset},getColumnStartIndexForOffset:function(e,t,r){return x("column",e,r,t)},getColumnStopIndexForStartIndex:function(e,t,r,n){for(var o=e.columnCount,i=e.width,a=y("column",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("column",e,++c,n).size;return c},getColumnWidth:function(e,t,r){return r.columnMetadataMap[t].size},getEstimatedTotalHeight:I,getEstimatedTotalWidth:M,getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){return b("column",e,t,r,n,o,i)},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){return b("row",e,t,r,n,o,i)},getRowOffset:function(e,t,r){return y("row",e,t,r).offset},getRowHeight:function(e,t,r){return r.rowMetadataMap[t].size},getRowStartIndexForOffset:function(e,t,r){return x("row",e,r,t)},getRowStopIndexForStartIndex:function(e,t,r,n){for(var o=e.rowCount,i=e.height,a=y("row",e,t,n),l=r+i,s=a.offset+a.size,c=t;c<o-1&&s<l;)s+=y("row",e,++c,n).size;return c},initInstanceProps:function(e,t){var r=e,n={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return t.resetAfterColumnIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({columnIndex:e,shouldForceUpdate:r})},t.resetAfterRowIndex=function(e,r){void 0===r&&(r=!0),t.resetAfterIndices({rowIndex:e,shouldForceUpdate:r})},t.resetAfterIndices=function(e){var r=e.columnIndex,o=e.rowIndex,i=e.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(n.lastMeasuredColumnIndex=Math.min(n.lastMeasuredColumnIndex,r-1)),"number"==typeof o&&(n.lastMeasuredRowIndex=Math.min(n.lastMeasuredRowIndex,o-1)),t._getItemStyleCache(-1),a&&t.forceUpdate()},n},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("function"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.');if("function"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a function. "'+(null===r?"null":typeof r)+'" was specified.')}}),T=150,z=function(e,t){return e},O=null,P=null;function W(e){var i,l,u=e.getItemOffset,d=e.getEstimatedTotalSize,h=e.getItemSize,p=e.getOffsetForIndexAndAlignment,m=e.getStartIndexForOffset,v=e.getStopIndexForStartIndex,g=e.initInstanceProps,w=e.shouldResetStyleCacheOnItemSizeChange,S=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=g(r.props,o(o(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:o(o(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o){return r.props.onItemsRendered({overscanStartIndex:e,overscanStopIndex:t,visibleStartIndex:n,visibleStopIndex:o})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n){return r.props.onScroll({scrollDirection:e,scrollOffset:t,scrollUpdateWasRequested:n})}),r._getItemStyle=void 0,r._getItemStyle=function(e){var t,n=r.props,o=n.direction,i=n.itemSize,a=n.layout,l=r._getItemStyleCache(w&&i,w&&a,w&&o);if(l.hasOwnProperty(e))t=l[e];else{var s,c=u(r.props,e,r._instanceProps),d=h(r.props,e,r._instanceProps),f="horizontal"===o||"horizontal"===a;l[e]=((s={position:"absolute"})["rtl"===o?"right":"left"]=f?c:0,s.top=f?0:c,s.height=f?"100%":d,s.width=f?d:"100%",t=s)}return t},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScrollHorizontal=function(e){var t=e.currentTarget,n=t.clientWidth,o=t.scrollLeft,i=t.scrollWidth;r.setState(function(e){if(e.scrollOffset===o)return null;var t=r.props.direction,a=o;if("rtl"===t)switch(f()){case"negative":a=-o;break;case"positive-descending":a=i-n-o}return a=Math.max(0,Math.min(a,i-n)),{isScrolling:!0,scrollDirection:e.scrollOffset<o?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.scrollHeight,i=t.scrollTop;r.setState(function(e){if(e.scrollOffset===i)return null;var t=Math.max(0,Math.min(i,o-n));return{isScrolling:!0,scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(e){var t=r.props.outerRef;r._outerRef=e,"function"==typeof t?t(e):null!=t&&"object"==typeof t&&t.hasOwnProperty("current")&&(t.current=e)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,T)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}n(i,e),i.getDerivedStateFromProps=function(e,t){return E(e,t),S(e),null};var l=i.prototype;return l.scrollTo=function(e){e=Math.max(0,e),this.setState(function(t){return t.scrollOffset===e?null:{scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(e,t){void 0===t&&(t="auto");var r=this.props.itemCount,n=this.state.scrollOffset;e=Math.max(0,Math.min(e,r-1)),this.scrollTo(p(this.props,e,t,n,this._instanceProps))},l.componentDidMount=function(){var e=this.props,t=e.direction,r=e.initialScrollOffset,n=e.layout;if("number"==typeof r&&null!=this._outerRef){var o=this._outerRef;"horizontal"===t||"horizontal"===n?o.scrollLeft=r:o.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props,t=e.direction,r=e.layout,n=this.state,o=n.scrollOffset;if(n.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===t||"horizontal"===r)if("rtl"===t)switch(f()){case"negative":i.scrollLeft=-o;break;case"positive-ascending":i.scrollLeft=o;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-o}else i.scrollLeft=o;else i.scrollTop=o}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.direction,a=e.height,l=e.innerRef,s=e.innerElementType,c=e.innerTagName,u=e.itemCount,f=e.itemData,h=e.itemKey,p=void 0===h?z:h,m=e.layout,v=e.outerElementType,g=e.outerTagName,w=e.style,S=e.useIsScrolling,I=e.width,M=this.state.isScrolling,y="horizontal"===i||"horizontal"===m,x=y?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),_=C[0],b=C[1],R=[];if(u>0)for(var T=_;T<=b;T++)R.push(t.createElement(n,{data:f,key:p(T,f),index:T,isScrolling:S?M:void 0,style:this._getItemStyle(T)}));var O=d(this.props,this._instanceProps);return t.createElement(v||g||"div",{className:o,onScroll:x,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:I,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},w)},t.createElement(s||c||"div",{children:R,ref:l,style:{height:y?"100%":O,pointerEvents:M?"none":void 0,width:y?O:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var e=this._getRangeToRender(),t=e[0],r=e[1],n=e[2],o=e[3];this._callOnItemsRendered(t,r,n,o)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var e=this.props,t=e.itemCount,r=e.overscanCount,n=this.state,o=n.isScrolling,i=n.scrollDirection,a=n.scrollOffset;if(0===t)return[0,0,0,0];var l=m(this.props,a,this._instanceProps),s=v(this.props,l,a,this._instanceProps),c=o&&"backward"!==i?1:Math.max(1,r),u=o&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(t-1,s+u)),l,s]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(O=new WeakSet,P=new WeakSet);var E=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.layout,a=e.innerTagName,l=e.outerTagName,s=e.width,c=t.instance;null==a&&null==l||P&&!P.has(c)&&(P.add(c),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));var u="horizontal"===n||"horizontal"===i;switch(n){case"horizontal":case"vertical":O&&!O.has(c)&&(O.add(c),console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));break;case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}switch(i){case"horizontal":case"vertical":break;default:throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". "'+i+'" was specified.')}if(null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');if(u&&"number"!=typeof s)throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. "'+(null===s?"null":typeof s)+'" was specified.');if(!u&&"number"!=typeof o)throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},A=function(e,t,r){var n=e.itemSize,o=r.itemMetadataMap,i=r.lastMeasuredIndex;if(t>i){var a=0;if(i>=0){var l=o[i];a=l.offset+l.size}for(var s=i+1;s<=t;s++){var c=n(s);o[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=t}return o[t]},k=function(e,t,r,n,o){for(;n<=r;){var i=n+Math.floor((r-n)/2),a=A(e,i,t).offset;if(a===o)return i;a<o?n=i+1:a>o&&(r=i-1)}return n>0?n-1:0},D=function(e,t,r,n){for(var o=e.itemCount,i=1;r<o&&A(e,r,t).offset<n;)r+=i,i*=2;return k(e,t,Math.min(r,o-1),Math.floor(r/2),n)},F=function(e,t){var r=e.itemCount,n=t.itemMetadataMap,o=t.estimatedItemSize,i=t.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},L=W({getItemOffset:function(e,t,r){return A(e,t,r).offset},getItemSize:function(e,t,r){return r.itemMetadataMap[t].size},getEstimatedTotalSize:F,getOffsetForIndexAndAlignment:function(e,t,r,n,o){var i=e.direction,a=e.height,l=e.layout,s=e.width,c="horizontal"===i||"horizontal"===l?s:a,u=A(e,t,o),d=F(e,o),f=Math.max(0,Math.min(d-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=n>=h-c&&n<=f+c?"auto":"center"),r){case"start":return f;case"end":return h;case"center":return Math.round(h+(f-h)/2);case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t,r){return function(e,t,r){var n=t.itemMetadataMap,o=t.lastMeasuredIndex;return(o>0?n[o].offset:0)>=r?k(e,t,o,0,r):D(e,t,Math.max(0,o),r)}(e,r,t)},getStopIndexForStartIndex:function(e,t,r,n){for(var o=e.direction,i=e.height,a=e.itemCount,l=e.layout,s=e.width,c="horizontal"===o||"horizontal"===l?s:i,u=A(e,t,n),d=r+c,f=u.offset+u.size,h=t;h<a-1&&f<d;)f+=A(e,++h,n).size;return h},initInstanceProps:function(e,t){var r={itemMetadataMap:{},estimatedItemSize:e.estimatedItemSize||50,lastMeasuredIndex:-1};return t.resetAfterIndex=function(e,n){void 0===n&&(n=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,e-1),t._getItemStyleCache(-1),n&&t.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(e){var t=e.itemSize;if("function"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a function. "'+(null===t?"null":typeof t)+'" was specified.')}}),H=w({getColumnOffset:function(e,t){return t*e.columnWidth},getColumnWidth:function(e,t){return e.columnWidth},getRowOffset:function(e,t){return t*e.rowHeight},getRowHeight:function(e,t){return e.rowHeight},getEstimatedTotalHeight:function(e){var t=e.rowCount;return e.rowHeight*t},getEstimatedTotalWidth:function(e){var t=e.columnCount;return e.columnWidth*t},getOffsetForColumnAndAlignment:function(e,t,r,n,o,i){var a=e.columnCount,l=e.columnWidth,s=e.width,c=Math.max(0,a*l-s),u=Math.min(c,t*l),d=Math.max(0,t*l-s+i+l);switch("smart"===r&&(r=n>=d-s&&n<=u+s?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(s/2)?0:f>c+Math.floor(s/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getOffsetForRowAndAlignment:function(e,t,r,n,o,i){var a=e.rowHeight,l=e.height,s=e.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,t*a),d=Math.max(0,t*a-l+i+a);switch("smart"===r&&(r=n>=d-l&&n<=u+l?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return f<Math.ceil(l/2)?0:f>c+Math.floor(l/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n<d?d:u}},getColumnStartIndexForOffset:function(e,t){var r=e.columnWidth,n=e.columnCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getColumnStopIndexForStartIndex:function(e,t,r){var n=e.columnWidth,o=e.columnCount,i=e.width,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},getRowStartIndexForOffset:function(e,t){var r=e.rowHeight,n=e.rowCount;return Math.max(0,Math.min(n-1,Math.floor(t/r)))},getRowStopIndexForStartIndex:function(e,t,r){var n=e.rowHeight,o=e.rowCount,i=e.height,a=t*n,l=Math.ceil((i+r-a)/n);return Math.max(0,Math.min(o-1,t+l-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.columnWidth,r=e.rowHeight;if("number"!=typeof t)throw Error('An invalid "columnWidth" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.');if("number"!=typeof r)throw Error('An invalid "rowHeight" prop has been specified. Value should be a number. "'+(null===r?"null":typeof r)+'" was specified.')}}),U=W({getItemOffset:function(e,t){return t*e.itemSize},getItemSize:function(e,t){return e.itemSize},getEstimatedTotalSize:function(e){var t=e.itemCount;return e.itemSize*t},getOffsetForIndexAndAlignment:function(e,t,r,n){var o=e.direction,i=e.height,a=e.itemCount,l=e.itemSize,s=e.layout,c=e.width,u="horizontal"===o||"horizontal"===s?c:i,d=Math.max(0,a*l-u),f=Math.min(d,t*l),h=Math.max(0,t*l-u+l);switch("smart"===r&&(r=n>=h-u&&n<=f+u?"auto":"center"),r){case"start":return f;case"end":return h;case"center":var p=Math.round(h+(f-h)/2);return p<Math.ceil(u/2)?0:p>d+Math.floor(u/2)?d:p;case"auto":default:return n>=h&&n<=f?n:n<h?h:f}},getStartIndexForOffset:function(e,t){var r=e.itemCount,n=e.itemSize;return Math.max(0,Math.min(r-1,Math.floor(t/n)))},getStopIndexForStartIndex:function(e,t,r){var n=e.direction,o=e.height,i=e.itemCount,a=e.itemSize,l=e.layout,s=e.width,c=t*a,u="horizontal"===n||"horizontal"===l?s:o,d=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,t+d-1))},initInstanceProps:function(e){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(e){var t=e.itemSize;if("number"!=typeof t)throw Error('An invalid "itemSize" prop has been specified. Value should be a number. "'+(null===t?"null":typeof t)+'" was specified.')}});function V(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function q(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1}function N(e,t){var r=e.style,n=V(e,["style"]),o=t.style,i=V(t,["style"]);return!q(r,o)&&!q(n,i)}e.VariableSizeGrid=R,e.VariableSizeList=L,e.FixedSizeGrid=H,e.FixedSizeList=U,e.areEqual=N,e.shouldComponentUpdate=function(e,t){return!N(this.props,e)||q(this.state,t)},Object.defineProperty(e,"__esModule",{value:!0})});
2
-//# sourceMappingURL=index-dev.umd.js.map
packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js
deleted
-2
@@ -1,2 +0,0 @@
1
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactWindow={},t.React)}(this,function(t,e){"use strict";function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t}).apply(this,arguments)}function o(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var i=function(t,e){return t.length===e.length&&t.every(function(t,r){return o=t,n=e[r],o===n;var o,n})};function a(t,e){var r;void 0===e&&(e=i);var o,n=[],a=!1;return function(){for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];return a&&r===this&&e(l,n)?o:(o=t.apply(this,l),a=!0,r=this,n=l,o)}}var l="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()};function s(t){cancelAnimationFrame(t.id)}function c(t,e){var r=l();var o={id:requestAnimationFrame(function n(){l()-r>=e?t.call(null):o.id=requestAnimationFrame(n)})};return o}var u=-1;var f=null;function d(t){if(void 0===t&&(t=!1),null===f||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var o=document.createElement("div"),n=o.style;return n.width="100px",n.height="100px",e.appendChild(o),document.body.appendChild(e),e.scrollLeft>0?f="positive-descending":(e.scrollLeft=1,f=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),f}return f}var h=150,m=function(t){var e=t.columnIndex;t.data;return t.rowIndex+":"+e};function p(t){var i,l,f=t.getColumnOffset,p=t.getColumnStartIndexForOffset,v=t.getColumnStopIndexForStartIndex,S=t.getColumnWidth,I=t.getEstimatedTotalHeight,w=t.getEstimatedTotalWidth,M=t.getOffsetForColumnAndAlignment,x=t.getOffsetForRowAndAlignment,_=t.getRowHeight,C=t.getRowOffset,R=t.getRowStartIndexForOffset,y=t.getRowStopIndexForStartIndex,T=t.initInstanceProps,O=t.shouldResetStyleCacheOnItemSizeChange,z=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=T(r.props,n(n(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:n(n(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:t,overscanColumnStopIndex:e,overscanRowStartIndex:o,overscanRowStopIndex:n,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o,n,i){return r.props.onScroll({horizontalScrollDirection:o,scrollLeft:t,scrollTop:e,verticalScrollDirection:n,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(t,e){var o,n,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(O&&a,O&&l,O&&s),u=t+":"+e;c.hasOwnProperty(u)?o=c[u]:c[u]=((n={position:"absolute"})["rtl"===l?"right":"left"]=f(r.props,e,r._instanceProps),n.top=C(r.props,t,r._instanceProps),n.height=_(r.props,t,r._instanceProps),n.width=S(r.props,e,r._instanceProps),o=n);return o},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScroll=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.clientWidth,i=e.scrollLeft,a=e.scrollTop,l=e.scrollHeight,s=e.scrollWidth;r.setState(function(t){if(t.scrollLeft===i&&t.scrollTop===a)return null;var e=r.props.direction,c=i;if("rtl"===e)switch(d()){case"negative":c=-i;break;case"positive-descending":c=s-n-i}c=Math.max(0,Math.min(c,s-n));var u=Math.max(0,Math.min(a,l-o));return{isScrolling:!0,horizontalScrollDirection:t.scrollLeft<i?"forward":"backward",scrollLeft:c,scrollTop:u,verticalScrollDirection:t.scrollTop<a?"forward":"backward",scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,h)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return g(t,e),z(t),null};var l=i.prototype;return l.scrollTo=function(t){var e=t.scrollLeft,r=t.scrollTop;void 0!==e&&(e=Math.max(0,e)),void 0!==r&&(r=Math.max(0,r)),this.setState(function(t){return void 0===e&&(e=t.scrollLeft),void 0===r&&(r=t.scrollTop),t.scrollLeft===e&&t.scrollTop===r?null:{horizontalScrollDirection:t.scrollLeft<e?"forward":"backward",scrollLeft:e,scrollTop:r,scrollUpdateWasRequested:!0,verticalScrollDirection:t.scrollTop<r?"forward":"backward"}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t){var e=t.align,r=void 0===e?"auto":e,o=t.columnIndex,n=t.rowIndex,i=this.props,a=i.columnCount,l=i.height,s=i.rowCount,c=i.width,f=this.state,d=f.scrollLeft,h=f.scrollTop,m=function(t){if(void 0===t&&(t=!1),-1===u||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(e),u=e.offsetWidth-e.clientWidth,document.body.removeChild(e)}return u}();void 0!==o&&(o=Math.max(0,Math.min(o,a-1))),void 0!==n&&(n=Math.max(0,Math.min(n,s-1)));var p=I(this.props,this._instanceProps),g=w(this.props,this._instanceProps)>c?m:0,v=p>l?m:0;this.scrollTo({scrollLeft:void 0!==o?M(this.props,o,r,d,this._instanceProps,v):d,scrollTop:void 0!==n?x(this.props,n,r,h,this._instanceProps,g):h})},l.componentDidMount=function(){var t=this.props,e=t.initialScrollLeft,r=t.initialScrollTop;if(null!=this._outerRef){var o=this._outerRef;"number"==typeof e&&(o.scrollLeft=e),"number"==typeof r&&(o.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props.direction,e=this.state,r=e.scrollLeft,o=e.scrollTop;if(e.scrollUpdateWasRequested&&null!=this._outerRef){var n=this._outerRef;if("rtl"===t)switch(d()){case"negative":n.scrollLeft=-r;break;case"positive-ascending":n.scrollLeft=r;break;default:var i=n.clientWidth,a=n.scrollWidth;n.scrollLeft=a-i-r}else n.scrollLeft=Math.max(0,r);n.scrollTop=Math.max(0,o)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.columnCount,a=t.direction,l=t.height,s=t.innerRef,c=t.innerElementType,u=t.innerTagName,f=t.itemData,d=t.itemKey,h=void 0===d?m:d,p=t.outerElementType,g=t.outerTagName,v=t.rowCount,S=t.style,M=t.useIsScrolling,x=t.width,_=this.state.isScrolling,C=this._getHorizontalRangeToRender(),R=C[0],y=C[1],T=this._getVerticalRangeToRender(),O=T[0],z=T[1],b=[];if(i>0&&v)for(var P=O;P<=z;P++)for(var W=R;W<=y;W++)b.push(e.createElement(o,{columnIndex:W,data:f,isScrolling:M?_:void 0,key:h({columnIndex:W,data:f,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var D=I(this.props,this._instanceProps),F=w(this.props,this._instanceProps);return e.createElement(p||g||"div",{className:n,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:x,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},e.createElement(c||u||"div",{children:b,ref:s,style:{height:D,pointerEvents:_?"none":void 0,width:F}}))},l._callPropsCallbacks=function(){var t=this.props,e=t.columnCount,r=t.onItemsRendered,o=t.onScroll,n=t.rowCount;if("function"==typeof r&&e>0&&n>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),f=u[0],d=u[1],h=u[2],m=u[3];this._callOnItemsRendered(a,l,f,d,s,c,h,m)}if("function"==typeof o){var p=this.state,g=p.horizontalScrollDirection,v=p.scrollLeft,S=p.scrollTop,I=p.scrollUpdateWasRequested,w=p.verticalScrollDirection;this._callOnScroll(v,S,g,w,I)}},l._getHorizontalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanColumnCount,o=t.overscanColumnsCount,n=t.overscanCount,i=t.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||o||n||1;if(0===e||0===i)return[0,0,0,0];var f=p(this.props,c,this._instanceProps),d=v(this.props,f,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),m=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(e-1,d+m)),f,d]},l._getVerticalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanCount,o=t.overscanRowCount,n=t.overscanRowsCount,i=t.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=o||n||r||1;if(0===e||0===i)return[0,0,0,0];var f=R(this.props,c,this._instanceProps),d=y(this.props,f,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),m=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(i-1,d+m)),f,d]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}var g=function(t,e){t.children,t.direction,t.height,t.innerTagName,t.outerTagName,t.overscanColumnsCount,t.overscanCount,t.overscanRowsCount,t.width,e.instance},v=function(t,e){var r=t.rowCount,o=e.rowMetadataMap,n=e.estimatedRowHeight,i=e.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},S=function(t,e){var r=t.columnCount,o=e.columnMetadataMap,n=e.estimatedColumnWidth,i=e.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},I=function(t,e,r,o){var n,i,a;if("column"===t?(n=o.columnMetadataMap,i=e.columnWidth,a=o.lastMeasuredColumnIndex):(n=o.rowMetadataMap,i=e.rowHeight,a=o.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=n[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);n[c]={offset:l,size:u},l+=u}"column"===t?o.lastMeasuredColumnIndex=r:o.lastMeasuredRowIndex=r}return n[r]},w=function(t,e,r,o){var n,i;return"column"===t?(n=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(n=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?n[i].offset:0)>=o?M(t,e,r,i,0,o):x(t,e,r,Math.max(0,i),o)},M=function(t,e,r,o,n,i){for(;n<=o;){var a=n+Math.floor((o-n)/2),l=I(t,e,a,r).offset;if(l===i)return a;l<i?n=a+1:l>i&&(o=a-1)}return n>0?n-1:0},x=function(t,e,r,o,n){for(var i="column"===t?e.columnCount:e.rowCount,a=1;o<i&&I(t,e,o,r).offset<n;)o+=a,a*=2;return M(t,e,r,Math.min(o,i-1),Math.floor(o/2),n)},_=function(t,e,r,o,n,i,a){var l="column"===t?e.width:e.height,s=I(t,e,r,i),c="column"===t?S(e,i):v(e,i),u=Math.max(0,Math.min(c-l,s.offset)),f=Math.max(0,s.offset-l+a+s.size);switch("smart"===o&&(o=n>=f-l&&n<=u+l?"auto":"center"),o){case"start":return u;case"end":return f;case"center":return Math.round(f+(u-f)/2);case"auto":default:return n>=f&&n<=u?n:f>u?f:n<f?f:u}},C=p({getColumnOffset:function(t,e,r){return I("column",t,e,r).offset},getColumnStartIndexForOffset:function(t,e,r){return w("column",t,r,e)},getColumnStopIndexForStartIndex:function(t,e,r,o){for(var n=t.columnCount,i=t.width,a=I("column",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("column",t,++c,o).size;return c},getColumnWidth:function(t,e,r){return r.columnMetadataMap[e].size},getEstimatedTotalHeight:v,getEstimatedTotalWidth:S,getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){return _("column",t,e,r,o,n,i)},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){return _("row",t,e,r,o,n,i)},getRowOffset:function(t,e,r){return I("row",t,e,r).offset},getRowHeight:function(t,e,r){return r.rowMetadataMap[e].size},getRowStartIndexForOffset:function(t,e,r){return w("row",t,r,e)},getRowStopIndexForStartIndex:function(t,e,r,o){for(var n=t.rowCount,i=t.height,a=I("row",t,e,o),l=r+i,s=a.offset+a.size,c=e;c<n-1&&s<l;)s+=I("row",t,++c,o).size;return c},initInstanceProps:function(t,e){var r=t,o={columnMetadataMap:{},estimatedColumnWidth:r.estimatedColumnWidth||50,estimatedRowHeight:r.estimatedRowHeight||50,lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,rowMetadataMap:{}};return e.resetAfterColumnIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({columnIndex:t,shouldForceUpdate:r})},e.resetAfterRowIndex=function(t,r){void 0===r&&(r=!0),e.resetAfterIndices({rowIndex:t,shouldForceUpdate:r})},e.resetAfterIndices=function(t){var r=t.columnIndex,n=t.rowIndex,i=t.shouldForceUpdate,a=void 0===i||i;"number"==typeof r&&(o.lastMeasuredColumnIndex=Math.min(o.lastMeasuredColumnIndex,r-1)),"number"==typeof n&&(o.lastMeasuredRowIndex=Math.min(o.lastMeasuredRowIndex,n-1)),e._getItemStyleCache(-1),a&&e.forceUpdate()},o},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.columnWidth,t.rowHeight}}),R=150,y=function(t,e){return t};function T(t){var i,l,u=t.getItemOffset,f=t.getEstimatedTotalSize,h=t.getItemSize,m=t.getOffsetForIndexAndAlignment,p=t.getStartIndexForOffset,g=t.getStopIndexForStartIndex,v=t.initInstanceProps,S=t.shouldResetStyleCacheOnItemSizeChange,I=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=v(r.props,n(n(r))),r._outerRef=void 0,r._resetIsScrollingTimeoutId=null,r.state={instance:n(n(r)),isScrolling:!1,scrollDirection:"forward",scrollOffset:"number"==typeof r.props.initialScrollOffset?r.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n){return r.props.onItemsRendered({overscanStartIndex:t,overscanStopIndex:e,visibleStartIndex:o,visibleStopIndex:n})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o){return r.props.onScroll({scrollDirection:t,scrollOffset:e,scrollUpdateWasRequested:o})}),r._getItemStyle=void 0,r._getItemStyle=function(t){var e,o=r.props,n=o.direction,i=o.itemSize,a=o.layout,l=r._getItemStyleCache(S&&i,S&&a,S&&n);if(l.hasOwnProperty(t))e=l[t];else{var s,c=u(r.props,t,r._instanceProps),f=h(r.props,t,r._instanceProps),d="horizontal"===n||"horizontal"===a;l[t]=((s={position:"absolute"})["rtl"===n?"right":"left"]=d?c:0,s.top=d?0:c,s.height=d?"100%":f,s.width=d?f:"100%",e=s)}return e},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScrollHorizontal=function(t){var e=t.currentTarget,o=e.clientWidth,n=e.scrollLeft,i=e.scrollWidth;r.setState(function(t){if(t.scrollOffset===n)return null;var e=r.props.direction,a=n;if("rtl"===e)switch(d()){case"negative":a=-n;break;case"positive-descending":a=i-o-n}return a=Math.max(0,Math.min(a,i-o)),{isScrolling:!0,scrollDirection:t.scrollOffset<n?"forward":"backward",scrollOffset:a,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._onScrollVertical=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.scrollHeight,i=e.scrollTop;r.setState(function(t){if(t.scrollOffset===i)return null;var e=Math.max(0,Math.min(i,n-o));return{isScrolling:!0,scrollDirection:t.scrollOffset<e?"forward":"backward",scrollOffset:e,scrollUpdateWasRequested:!1}},r._resetIsScrollingDebounced)},r._outerRefSetter=function(t){var e=r.props.outerRef;r._outerRef=t,"function"==typeof e?e(t):null!=e&&"object"==typeof e&&e.hasOwnProperty("current")&&(e.current=t)},r._resetIsScrollingDebounced=function(){null!==r._resetIsScrollingTimeoutId&&s(r._resetIsScrollingTimeoutId),r._resetIsScrollingTimeoutId=c(r._resetIsScrolling,R)},r._resetIsScrolling=function(){r._resetIsScrollingTimeoutId=null,r.setState({isScrolling:!1},function(){r._getItemStyleCache(-1,null)})},r}o(i,t),i.getDerivedStateFromProps=function(t,e){return O(t,e),I(t),null};var l=i.prototype;return l.scrollTo=function(t){t=Math.max(0,t),this.setState(function(e){return e.scrollOffset===t?null:{scrollDirection:e.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},l.scrollToItem=function(t,e){void 0===e&&(e="auto");var r=this.props.itemCount,o=this.state.scrollOffset;t=Math.max(0,Math.min(t,r-1)),this.scrollTo(m(this.props,t,e,o,this._instanceProps))},l.componentDidMount=function(){var t=this.props,e=t.direction,r=t.initialScrollOffset,o=t.layout;if("number"==typeof r&&null!=this._outerRef){var n=this._outerRef;"horizontal"===e||"horizontal"===o?n.scrollLeft=r:n.scrollTop=r}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props,e=t.direction,r=t.layout,o=this.state,n=o.scrollOffset;if(o.scrollUpdateWasRequested&&null!=this._outerRef){var i=this._outerRef;if("horizontal"===e||"horizontal"===r)if("rtl"===e)switch(d()){case"negative":i.scrollLeft=-n;break;case"positive-ascending":i.scrollLeft=n;break;default:var a=i.clientWidth,l=i.scrollWidth;i.scrollLeft=l-a-n}else i.scrollLeft=n;else i.scrollTop=n}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.direction,a=t.height,l=t.innerRef,s=t.innerElementType,c=t.innerTagName,u=t.itemCount,d=t.itemData,h=t.itemKey,m=void 0===h?y:h,p=t.layout,g=t.outerElementType,v=t.outerTagName,S=t.style,I=t.useIsScrolling,w=t.width,M=this.state.isScrolling,x="horizontal"===i||"horizontal"===p,_=x?this._onScrollHorizontal:this._onScrollVertical,C=this._getRangeToRender(),R=C[0],T=C[1],O=[];if(u>0)for(var z=R;z<=T;z++)O.push(e.createElement(o,{data:d,key:m(z,d),index:z,isScrolling:I?M:void 0,style:this._getItemStyle(z)}));var b=f(this.props,this._instanceProps);return e.createElement(g||v||"div",{className:n,onScroll:_,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:w,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},S)},e.createElement(s||c||"div",{children:O,ref:l,style:{height:x?"100%":b,pointerEvents:M?"none":void 0,width:x?b:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var t=this._getRangeToRender(),e=t[0],r=t[1],o=t[2],n=t[3];this._callOnItemsRendered(e,r,o,n)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var t=this.props,e=t.itemCount,r=t.overscanCount,o=this.state,n=o.isScrolling,i=o.scrollDirection,a=o.scrollOffset;if(0===e)return[0,0,0,0];var l=p(this.props,a,this._instanceProps),s=g(this.props,l,a,this._instanceProps),c=n&&"backward"!==i?1:Math.max(1,r),u=n&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(e-1,s+u)),l,s]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}var O=function(t,e){t.children,t.direction,t.height,t.layout,t.innerTagName,t.outerTagName,t.width,e.instance},z=function(t,e,r){var o=t.itemSize,n=r.itemMetadataMap,i=r.lastMeasuredIndex;if(e>i){var a=0;if(i>=0){var l=n[i];a=l.offset+l.size}for(var s=i+1;s<=e;s++){var c=o(s);n[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=e}return n[e]},b=function(t,e,r,o,n){for(;o<=r;){var i=o+Math.floor((r-o)/2),a=z(t,i,e).offset;if(a===n)return i;a<n?o=i+1:a>n&&(r=i-1)}return o>0?o-1:0},P=function(t,e,r,o){for(var n=t.itemCount,i=1;r<n&&z(t,r,e).offset<o;)r+=i,i*=2;return b(t,e,Math.min(r,n-1),Math.floor(r/2),o)},W=function(t,e){var r=t.itemCount,o=e.itemMetadataMap,n=e.estimatedItemSize,i=e.lastMeasuredIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},D=T({getItemOffset:function(t,e,r){return z(t,e,r).offset},getItemSize:function(t,e,r){return r.itemMetadataMap[e].size},getEstimatedTotalSize:W,getOffsetForIndexAndAlignment:function(t,e,r,o,n){var i=t.direction,a=t.height,l=t.layout,s=t.width,c="horizontal"===i||"horizontal"===l?s:a,u=z(t,e,n),f=W(t,n),d=Math.max(0,Math.min(f-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=o>=h-c&&o<=d+c?"auto":"center"),r){case"start":return d;case"end":return h;case"center":return Math.round(h+(d-h)/2);case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e,r){return function(t,e,r){var o=e.itemMetadataMap,n=e.lastMeasuredIndex;return(n>0?o[n].offset:0)>=r?b(t,e,n,0,r):P(t,e,Math.max(0,n),r)}(t,r,e)},getStopIndexForStartIndex:function(t,e,r,o){for(var n=t.direction,i=t.height,a=t.itemCount,l=t.layout,s=t.width,c="horizontal"===n||"horizontal"===l?s:i,u=z(t,e,o),f=r+c,d=u.offset+u.size,h=e;h<a-1&&d<f;)d+=z(t,++h,o).size;return h},initInstanceProps:function(t,e){var r={itemMetadataMap:{},estimatedItemSize:t.estimatedItemSize||50,lastMeasuredIndex:-1};return e.resetAfterIndex=function(t,o){void 0===o&&(o=!0),r.lastMeasuredIndex=Math.min(r.lastMeasuredIndex,t-1),e._getItemStyleCache(-1),o&&e.forceUpdate()},r},shouldResetStyleCacheOnItemSizeChange:!1,validateProps:function(t){t.itemSize}}),F=p({getColumnOffset:function(t,e){return e*t.columnWidth},getColumnWidth:function(t,e){return t.columnWidth},getRowOffset:function(t,e){return e*t.rowHeight},getRowHeight:function(t,e){return t.rowHeight},getEstimatedTotalHeight:function(t){var e=t.rowCount;return t.rowHeight*e},getEstimatedTotalWidth:function(t){var e=t.columnCount;return t.columnWidth*e},getOffsetForColumnAndAlignment:function(t,e,r,o,n,i){var a=t.columnCount,l=t.columnWidth,s=t.width,c=Math.max(0,a*l-s),u=Math.min(c,e*l),f=Math.max(0,e*l-s+i+l);switch("smart"===r&&(r=o>=f-s&&o<=u+s?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(s/2)?0:d>c+Math.floor(s/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getOffsetForRowAndAlignment:function(t,e,r,o,n,i){var a=t.rowHeight,l=t.height,s=t.rowCount,c=Math.max(0,s*a-l),u=Math.min(c,e*a),f=Math.max(0,e*a-l+i+a);switch("smart"===r&&(r=o>=f-l&&o<=u+l?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return d<Math.ceil(l/2)?0:d>c+Math.floor(l/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o<f?f:u}},getColumnStartIndexForOffset:function(t,e){var r=t.columnWidth,o=t.columnCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getColumnStopIndexForStartIndex:function(t,e,r){var o=t.columnWidth,n=t.columnCount,i=t.width,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},getRowStartIndexForOffset:function(t,e){var r=t.rowHeight,o=t.rowCount;return Math.max(0,Math.min(o-1,Math.floor(e/r)))},getRowStopIndexForStartIndex:function(t,e,r){var o=t.rowHeight,n=t.rowCount,i=t.height,a=e*o,l=Math.ceil((i+r-a)/o);return Math.max(0,Math.min(n-1,e+l-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.columnWidth,t.rowHeight}}),L=T({getItemOffset:function(t,e){return e*t.itemSize},getItemSize:function(t,e){return t.itemSize},getEstimatedTotalSize:function(t){var e=t.itemCount;return t.itemSize*e},getOffsetForIndexAndAlignment:function(t,e,r,o){var n=t.direction,i=t.height,a=t.itemCount,l=t.itemSize,s=t.layout,c=t.width,u="horizontal"===n||"horizontal"===s?c:i,f=Math.max(0,a*l-u),d=Math.min(f,e*l),h=Math.max(0,e*l-u+l);switch("smart"===r&&(r=o>=h-u&&o<=d+u?"auto":"center"),r){case"start":return d;case"end":return h;case"center":var m=Math.round(h+(d-h)/2);return m<Math.ceil(u/2)?0:m>f+Math.floor(u/2)?f:m;case"auto":default:return o>=h&&o<=d?o:o<h?h:d}},getStartIndexForOffset:function(t,e){var r=t.itemCount,o=t.itemSize;return Math.max(0,Math.min(r-1,Math.floor(e/o)))},getStopIndexForStartIndex:function(t,e,r){var o=t.direction,n=t.height,i=t.itemCount,a=t.itemSize,l=t.layout,s=t.width,c=e*a,u="horizontal"===o||"horizontal"===l?s:n,f=Math.ceil((u+r-c)/a);return Math.max(0,Math.min(i-1,e+f-1))},initInstanceProps:function(t){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(t){t.itemSize}});function A(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}function H(t,e){for(var r in t)if(!(r in e))return!0;for(var o in e)if(t[o]!==e[o])return!0;return!1}function k(t,e){var r=t.style,o=A(t,["style"]),n=e.style,i=A(e,["style"]);return!H(r,n)&&!H(o,i)}t.VariableSizeGrid=C,t.VariableSizeList=D,t.FixedSizeGrid=F,t.FixedSizeList=L,t.areEqual=k,t.shouldComponentUpdate=function(t,e){return!k(this.props,t)||H(this.state,e)},Object.defineProperty(t,"__esModule",{value:!0})});
2
-//# sourceMappingURL=index-prod.umd.js.map
packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js
deleted
-2079
@@ -1,2079 +0,0 @@
1
-'use strict';
2
-
3
-Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
8
-var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
9
-var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
10
-var memoizeOne = _interopDefault(require('memoize-one'));
11
-var react = require('react');
12
-var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
13
-
14
-// Animation frame based implementation of setTimeout.
15
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
16
-var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
17
-var now = hasNativePerformanceNow ? function () {
18
- return performance.now();
19
-} : function () {
20
- return Date.now();
21
-};
22
-function cancelTimeout(timeoutID) {
23
- cancelAnimationFrame(timeoutID.id);
24
-}
25
-function requestTimeout(callback, delay) {
26
- var start = now();
27
-
28
- function tick() {
29
- if (now() - start >= delay) {
30
- callback.call(null);
31
- } else {
32
- timeoutID.id = requestAnimationFrame(tick);
33
- }
34
- }
35
-
36
- var timeoutID = {
37
- id: requestAnimationFrame(tick)
38
- };
39
- return timeoutID;
40
-}
41
-
42
-var size = -1; // This utility copied from "dom-helpers" package.
43
-
44
-function getScrollbarSize(recalculate) {
45
- if (recalculate === void 0) {
46
- recalculate = false;
47
- }
48
-
49
- if (size === -1 || recalculate) {
50
- var div = document.createElement('div');
51
- var style = div.style;
52
- style.width = '50px';
53
- style.height = '50px';
54
- style.overflow = 'scroll';
55
- document.body.appendChild(div);
56
- size = div.offsetWidth - div.clientWidth;
57
- document.body.removeChild(div);
58
- }
59
-
60
- return size;
61
-}
62
-var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
63
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
64
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
65
-// The safest way to check this is to intentionally set a negative offset,
66
-// and then verify that the subsequent "scroll" event matches the negative offset.
67
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
68
-
69
-function getRTLOffsetType(recalculate) {
70
- if (recalculate === void 0) {
71
- recalculate = false;
72
- }
73
-
74
- if (cachedRTLResult === null || recalculate) {
75
- var outerDiv = document.createElement('div');
76
- var outerStyle = outerDiv.style;
77
- outerStyle.width = '50px';
78
- outerStyle.height = '50px';
79
- outerStyle.overflow = 'scroll';
80
- outerStyle.direction = 'rtl';
81
- var innerDiv = document.createElement('div');
82
- var innerStyle = innerDiv.style;
83
- innerStyle.width = '100px';
84
- innerStyle.height = '100px';
85
- outerDiv.appendChild(innerDiv);
86
- document.body.appendChild(outerDiv);
87
-
88
- if (outerDiv.scrollLeft > 0) {
89
- cachedRTLResult = 'positive-descending';
90
- } else {
91
- outerDiv.scrollLeft = 1;
92
-
93
- if (outerDiv.scrollLeft === 0) {
94
- cachedRTLResult = 'negative';
95
- } else {
96
- cachedRTLResult = 'positive-ascending';
97
- }
98
- }
99
-
100
- document.body.removeChild(outerDiv);
101
- return cachedRTLResult;
102
- }
103
-
104
- return cachedRTLResult;
105
-}
106
-
107
-var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
108
-
109
-var defaultItemKey = function defaultItemKey(_ref) {
110
- var columnIndex = _ref.columnIndex,
111
- data = _ref.data,
112
- rowIndex = _ref.rowIndex;
113
- return rowIndex + ":" + columnIndex;
114
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
115
-// This avoids spamming the console every time a render happens.
116
-
117
-
118
-var devWarningsOverscanCount = null;
119
-var devWarningsOverscanRowsColumnsCount = null;
120
-var devWarningsTagName = null;
121
-
122
-if (process.env.NODE_ENV !== 'production') {
123
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
124
- devWarningsOverscanCount =
125
- /*#__PURE__*/
126
- new WeakSet();
127
- devWarningsOverscanRowsColumnsCount =
128
- /*#__PURE__*/
129
- new WeakSet();
130
- devWarningsTagName =
131
- /*#__PURE__*/
132
- new WeakSet();
133
- }
134
-}
135
-
136
-function createGridComponent(_ref2) {
137
- var _class, _temp;
138
-
139
- var getColumnOffset = _ref2.getColumnOffset,
140
- getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
141
- getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
142
- getColumnWidth = _ref2.getColumnWidth,
143
- getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
144
- getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
145
- getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
146
- getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
147
- getRowHeight = _ref2.getRowHeight,
148
- getRowOffset = _ref2.getRowOffset,
149
- getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
150
- getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
151
- initInstanceProps = _ref2.initInstanceProps,
152
- shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
153
- validateProps = _ref2.validateProps;
154
- return _temp = _class =
155
- /*#__PURE__*/
156
- function (_PureComponent) {
157
- _inheritsLoose(Grid, _PureComponent);
158
-
159
- // Always use explicit constructor for React components.
160
- // It produces less code after transpilation. (#26)
161
- // eslint-disable-next-line no-useless-constructor
162
- function Grid(props) {
163
- var _this;
164
-
165
- _this = _PureComponent.call(this, props) || this;
166
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
167
- _this._resetIsScrollingTimeoutId = null;
168
- _this._outerRef = void 0;
169
- _this.state = {
170
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
171
- isScrolling: false,
172
- horizontalScrollDirection: 'forward',
173
- scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
174
- scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
175
- scrollUpdateWasRequested: false,
176
- verticalScrollDirection: 'forward'
177
- };
178
- _this._callOnItemsRendered = void 0;
179
- _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
180
- return _this.props.onItemsRendered({
181
- overscanColumnStartIndex: overscanColumnStartIndex,
182
- overscanColumnStopIndex: overscanColumnStopIndex,
183
- overscanRowStartIndex: overscanRowStartIndex,
184
- overscanRowStopIndex: overscanRowStopIndex,
185
- visibleColumnStartIndex: visibleColumnStartIndex,
186
- visibleColumnStopIndex: visibleColumnStopIndex,
187
- visibleRowStartIndex: visibleRowStartIndex,
188
- visibleRowStopIndex: visibleRowStopIndex
189
- });
190
- });
191
- _this._callOnScroll = void 0;
192
- _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
193
- return _this.props.onScroll({
194
- horizontalScrollDirection: horizontalScrollDirection,
195
- scrollLeft: scrollLeft,
196
- scrollTop: scrollTop,
197
- verticalScrollDirection: verticalScrollDirection,
198
- scrollUpdateWasRequested: scrollUpdateWasRequested
199
- });
200
- });
201
- _this._getItemStyle = void 0;
202
-
203
- _this._getItemStyle = function (rowIndex, columnIndex) {
204
- var _this$props = _this.props,
205
- columnWidth = _this$props.columnWidth,
206
- direction = _this$props.direction,
207
- rowHeight = _this$props.rowHeight;
208
-
209
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
210
-
211
- var key = rowIndex + ":" + columnIndex;
212
- var style;
213
-
214
- if (itemStyleCache.hasOwnProperty(key)) {
215
- style = itemStyleCache[key];
216
- } else {
217
- var _style;
218
-
219
- itemStyleCache[key] = style = (_style = {
220
- position: 'absolute'
221
- }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
222
- }
223
-
224
- return style;
225
- };
226
-
227
- _this._getItemStyleCache = void 0;
228
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
229
- return {};
230
- });
231
-
232
- _this._onScroll = function (event) {
233
- var _event$currentTarget = event.currentTarget,
234
- clientHeight = _event$currentTarget.clientHeight,
235
- clientWidth = _event$currentTarget.clientWidth,
236
- scrollLeft = _event$currentTarget.scrollLeft,
237
- scrollTop = _event$currentTarget.scrollTop,
238
- scrollHeight = _event$currentTarget.scrollHeight,
239
- scrollWidth = _event$currentTarget.scrollWidth;
240
-
241
- _this.setState(function (prevState) {
242
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
243
- // Scroll position may have been updated by cDM/cDU,
244
- // In which case we don't need to trigger another render,
245
- // And we don't want to update state.isScrolling.
246
- return null;
247
- }
248
-
249
- var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
250
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
251
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
252
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
253
-
254
- var calculatedScrollLeft = scrollLeft;
255
-
256
- if (direction === 'rtl') {
257
- switch (getRTLOffsetType()) {
258
- case 'negative':
259
- calculatedScrollLeft = -scrollLeft;
260
- break;
261
-
262
- case 'positive-descending':
263
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
264
- break;
265
- }
266
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
267
-
268
-
269
- calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
270
- var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
271
- return {
272
- isScrolling: true,
273
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
274
- scrollLeft: calculatedScrollLeft,
275
- scrollTop: calculatedScrollTop,
276
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
277
- scrollUpdateWasRequested: false
278
- };
279
- }, _this._resetIsScrollingDebounced);
280
- };
281
-
282
- _this._outerRefSetter = function (ref) {
283
- var outerRef = _this.props.outerRef;
284
- _this._outerRef = ref;
285
-
286
- if (typeof outerRef === 'function') {
287
- outerRef(ref);
288
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
289
- outerRef.current = ref;
290
- }
291
- };
292
-
293
- _this._resetIsScrollingDebounced = function () {
294
- if (_this._resetIsScrollingTimeoutId !== null) {
295
- cancelTimeout(_this._resetIsScrollingTimeoutId);
296
- }
297
-
298
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
299
- };
300
-
301
- _this._resetIsScrolling = function () {
302
- _this._resetIsScrollingTimeoutId = null;
303
-
304
- _this.setState({
305
- isScrolling: false
306
- }, function () {
307
- // Clear style cache after state update has been committed.
308
- // This way we don't break pure sCU for items that don't use isScrolling param.
309
- _this._getItemStyleCache(-1);
310
- });
311
- };
312
-
313
- return _this;
314
- }
315
-
316
- Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
317
- validateSharedProps(nextProps, prevState);
318
- validateProps(nextProps);
319
- return null;
320
- };
321
-
322
- var _proto = Grid.prototype;
323
-
324
- _proto.scrollTo = function scrollTo(_ref3) {
325
- var scrollLeft = _ref3.scrollLeft,
326
- scrollTop = _ref3.scrollTop;
327
-
328
- if (scrollLeft !== undefined) {
329
- scrollLeft = Math.max(0, scrollLeft);
330
- }
331
-
332
- if (scrollTop !== undefined) {
333
- scrollTop = Math.max(0, scrollTop);
334
- }
335
-
336
- this.setState(function (prevState) {
337
- if (scrollLeft === undefined) {
338
- scrollLeft = prevState.scrollLeft;
339
- }
340
-
341
- if (scrollTop === undefined) {
342
- scrollTop = prevState.scrollTop;
343
- }
344
-
345
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
346
- return null;
347
- }
348
-
349
- return {
350
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
351
- scrollLeft: scrollLeft,
352
- scrollTop: scrollTop,
353
- scrollUpdateWasRequested: true,
354
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
355
- };
356
- }, this._resetIsScrollingDebounced);
357
- };
358
-
359
- _proto.scrollToItem = function scrollToItem(_ref4) {
360
- var _ref4$align = _ref4.align,
361
- align = _ref4$align === void 0 ? 'auto' : _ref4$align,
362
- columnIndex = _ref4.columnIndex,
363
- rowIndex = _ref4.rowIndex;
364
- var _this$props2 = this.props,
365
- columnCount = _this$props2.columnCount,
366
- height = _this$props2.height,
367
- rowCount = _this$props2.rowCount,
368
- width = _this$props2.width;
369
- var _this$state = this.state,
370
- scrollLeft = _this$state.scrollLeft,
371
- scrollTop = _this$state.scrollTop;
372
- var scrollbarSize = getScrollbarSize();
373
-
374
- if (columnIndex !== undefined) {
375
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
376
- }
377
-
378
- if (rowIndex !== undefined) {
379
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
380
- }
381
-
382
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
383
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
384
- // to ensure it's fully visible.
385
- // But we only need to account for its size when it's actually visible.
386
-
387
- var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
388
- var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
389
- this.scrollTo({
390
- scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
391
- scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
392
- });
393
- };
394
-
395
- _proto.componentDidMount = function componentDidMount() {
396
- var _this$props3 = this.props,
397
- initialScrollLeft = _this$props3.initialScrollLeft,
398
- initialScrollTop = _this$props3.initialScrollTop;
399
-
400
- if (this._outerRef != null) {
401
- var outerRef = this._outerRef;
402
-
403
- if (typeof initialScrollLeft === 'number') {
404
- outerRef.scrollLeft = initialScrollLeft;
405
- }
406
-
407
- if (typeof initialScrollTop === 'number') {
408
- outerRef.scrollTop = initialScrollTop;
409
- }
410
- }
411
-
412
- this._callPropsCallbacks();
413
- };
414
-
415
- _proto.componentDidUpdate = function componentDidUpdate() {
416
- var direction = this.props.direction;
417
- var _this$state2 = this.state,
418
- scrollLeft = _this$state2.scrollLeft,
419
- scrollTop = _this$state2.scrollTop,
420
- scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
421
-
422
- if (scrollUpdateWasRequested && this._outerRef != null) {
423
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
424
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
425
- // So we need to determine which browser behavior we're dealing with, and mimic it.
426
- var outerRef = this._outerRef;
427
-
428
- if (direction === 'rtl') {
429
- switch (getRTLOffsetType()) {
430
- case 'negative':
431
- outerRef.scrollLeft = -scrollLeft;
432
- break;
433
-
434
- case 'positive-ascending':
435
- outerRef.scrollLeft = scrollLeft;
436
- break;
437
-
438
- default:
439
- var clientWidth = outerRef.clientWidth,
440
- scrollWidth = outerRef.scrollWidth;
441
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
442
- break;
443
- }
444
- } else {
445
- outerRef.scrollLeft = Math.max(0, scrollLeft);
446
- }
447
-
448
- outerRef.scrollTop = Math.max(0, scrollTop);
449
- }
450
-
451
- this._callPropsCallbacks();
452
- };
453
-
454
- _proto.componentWillUnmount = function componentWillUnmount() {
455
- if (this._resetIsScrollingTimeoutId !== null) {
456
- cancelTimeout(this._resetIsScrollingTimeoutId);
457
- }
458
- };
459
-
460
- _proto.render = function render() {
461
- var _this$props4 = this.props,
462
- children = _this$props4.children,
463
- className = _this$props4.className,
464
- columnCount = _this$props4.columnCount,
465
- direction = _this$props4.direction,
466
- height = _this$props4.height,
467
- innerRef = _this$props4.innerRef,
468
- innerElementType = _this$props4.innerElementType,
469
- innerTagName = _this$props4.innerTagName,
470
- itemData = _this$props4.itemData,
471
- _this$props4$itemKey = _this$props4.itemKey,
472
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
473
- outerElementType = _this$props4.outerElementType,
474
- outerTagName = _this$props4.outerTagName,
475
- rowCount = _this$props4.rowCount,
476
- style = _this$props4.style,
477
- useIsScrolling = _this$props4.useIsScrolling,
478
- width = _this$props4.width;
479
- var isScrolling = this.state.isScrolling;
480
-
481
- var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
482
- columnStartIndex = _this$_getHorizontalR[0],
483
- columnStopIndex = _this$_getHorizontalR[1];
484
-
485
- var _this$_getVerticalRan = this._getVerticalRangeToRender(),
486
- rowStartIndex = _this$_getVerticalRan[0],
487
- rowStopIndex = _this$_getVerticalRan[1];
488
-
489
- var items = [];
490
-
491
- if (columnCount > 0 && rowCount) {
492
- for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
493
- for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
494
- items.push(react.createElement(children, {
495
- columnIndex: _columnIndex,
496
- data: itemData,
497
- isScrolling: useIsScrolling ? isScrolling : undefined,
498
- key: itemKey({
499
- columnIndex: _columnIndex,
500
- data: itemData,
501
- rowIndex: _rowIndex
502
- }),
503
- rowIndex: _rowIndex,
504
- style: this._getItemStyle(_rowIndex, _columnIndex)
505
- }));
506
- }
507
- }
508
- } // Read this value AFTER items have been created,
509
- // So their actual sizes (if variable) are taken into consideration.
510
-
511
-
512
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
513
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
514
- return react.createElement(outerElementType || outerTagName || 'div', {
515
- className: className,
516
- onScroll: this._onScroll,
517
- ref: this._outerRefSetter,
518
- style: _extends({
519
- position: 'relative',
520
- height: height,
521
- width: width,
522
- overflow: 'auto',
523
- WebkitOverflowScrolling: 'touch',
524
- willChange: 'transform',
525
- direction: direction
526
- }, style)
527
- }, react.createElement(innerElementType || innerTagName || 'div', {
528
- children: items,
529
- ref: innerRef,
530
- style: {
531
- height: estimatedTotalHeight,
532
- pointerEvents: isScrolling ? 'none' : undefined,
533
- width: estimatedTotalWidth
534
- }
535
- }));
536
- };
537
-
538
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
539
- var _this$props5 = this.props,
540
- columnCount = _this$props5.columnCount,
541
- onItemsRendered = _this$props5.onItemsRendered,
542
- onScroll = _this$props5.onScroll,
543
- rowCount = _this$props5.rowCount;
544
-
545
- if (typeof onItemsRendered === 'function') {
546
- if (columnCount > 0 && rowCount > 0) {
547
- var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
548
- _overscanColumnStartIndex = _this$_getHorizontalR2[0],
549
- _overscanColumnStopIndex = _this$_getHorizontalR2[1],
550
- _visibleColumnStartIndex = _this$_getHorizontalR2[2],
551
- _visibleColumnStopIndex = _this$_getHorizontalR2[3];
552
-
553
- var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
554
- _overscanRowStartIndex = _this$_getVerticalRan2[0],
555
- _overscanRowStopIndex = _this$_getVerticalRan2[1],
556
- _visibleRowStartIndex = _this$_getVerticalRan2[2],
557
- _visibleRowStopIndex = _this$_getVerticalRan2[3];
558
-
559
- this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
560
- }
561
- }
562
-
563
- if (typeof onScroll === 'function') {
564
- var _this$state3 = this.state,
565
- _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
566
- _scrollLeft = _this$state3.scrollLeft,
567
- _scrollTop = _this$state3.scrollTop,
568
- _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
569
- _verticalScrollDirection = _this$state3.verticalScrollDirection;
570
-
571
- this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
572
- }
573
- }; // Lazily create and cache item styles while scrolling,
574
- // So that pure component sCU will prevent re-renders.
575
- // We maintain this cache, and pass a style prop rather than index,
576
- // So that List can clear cached styles and force item re-render if necessary.
577
-
578
-
579
- _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
580
- var _this$props6 = this.props,
581
- columnCount = _this$props6.columnCount,
582
- overscanColumnCount = _this$props6.overscanColumnCount,
583
- overscanColumnsCount = _this$props6.overscanColumnsCount,
584
- overscanCount = _this$props6.overscanCount,
585
- rowCount = _this$props6.rowCount;
586
- var _this$state4 = this.state,
587
- horizontalScrollDirection = _this$state4.horizontalScrollDirection,
588
- isScrolling = _this$state4.isScrolling,
589
- scrollLeft = _this$state4.scrollLeft;
590
- var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
591
-
592
- if (columnCount === 0 || rowCount === 0) {
593
- return [0, 0, 0, 0];
594
- }
595
-
596
- var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
597
- var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
598
- // If there isn't at least one extra item, tab loops back around.
599
-
600
- var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
601
- var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
602
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
603
- };
604
-
605
- _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
606
- var _this$props7 = this.props,
607
- columnCount = _this$props7.columnCount,
608
- overscanCount = _this$props7.overscanCount,
609
- overscanRowCount = _this$props7.overscanRowCount,
610
- overscanRowsCount = _this$props7.overscanRowsCount,
611
- rowCount = _this$props7.rowCount;
612
- var _this$state5 = this.state,
613
- isScrolling = _this$state5.isScrolling,
614
- verticalScrollDirection = _this$state5.verticalScrollDirection,
615
- scrollTop = _this$state5.scrollTop;
616
- var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
617
-
618
- if (columnCount === 0 || rowCount === 0) {
619
- return [0, 0, 0, 0];
620
- }
621
-
622
- var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
623
- var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
624
- // If there isn't at least one extra item, tab loops back around.
625
-
626
- var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
627
- var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
628
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
629
- };
630
-
631
- return Grid;
632
- }(react.PureComponent), _class.defaultProps = {
633
- direction: 'ltr',
634
- itemData: undefined,
635
- useIsScrolling: false
636
- }, _temp;
637
-}
638
-
639
-var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
640
- var children = _ref5.children,
641
- direction = _ref5.direction,
642
- height = _ref5.height,
643
- innerTagName = _ref5.innerTagName,
644
- outerTagName = _ref5.outerTagName,
645
- overscanColumnsCount = _ref5.overscanColumnsCount,
646
- overscanCount = _ref5.overscanCount,
647
- overscanRowsCount = _ref5.overscanRowsCount,
648
- width = _ref5.width;
649
- var instance = _ref6.instance;
650
-
651
- if (process.env.NODE_ENV !== 'production') {
652
- if (typeof overscanCount === 'number') {
653
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
654
- devWarningsOverscanCount.add(instance);
655
- console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
656
- }
657
- }
658
-
659
- if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
660
- if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
661
- devWarningsOverscanRowsColumnsCount.add(instance);
662
- console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
663
- }
664
- }
665
-
666
- if (innerTagName != null || outerTagName != null) {
667
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
668
- devWarningsTagName.add(instance);
669
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
670
- }
671
- }
672
-
673
- if (children == null) {
674
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
675
- }
676
-
677
- switch (direction) {
678
- case 'ltr':
679
- case 'rtl':
680
- // Valid values
681
- break;
682
-
683
- default:
684
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
685
- }
686
-
687
- if (typeof width !== 'number') {
688
- throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
689
- }
690
-
691
- if (typeof height !== 'number') {
692
- throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
693
- }
694
- }
695
-};
696
-
697
-var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
698
-
699
-var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
700
- var rowCount = _ref.rowCount;
701
- var rowMetadataMap = _ref2.rowMetadataMap,
702
- estimatedRowHeight = _ref2.estimatedRowHeight,
703
- lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
704
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
705
- // https://github.com/bvaughn/react-window/pull/138
706
-
707
- if (lastMeasuredRowIndex >= rowCount) {
708
- lastMeasuredRowIndex = rowCount - 1;
709
- }
710
-
711
- if (lastMeasuredRowIndex >= 0) {
712
- var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
713
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
714
- }
715
-
716
- var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
717
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
718
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
719
-};
720
-
721
-var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
722
- var columnCount = _ref3.columnCount;
723
- var columnMetadataMap = _ref4.columnMetadataMap,
724
- estimatedColumnWidth = _ref4.estimatedColumnWidth,
725
- lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
726
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
727
- // https://github.com/bvaughn/react-window/pull/138
728
-
729
- if (lastMeasuredColumnIndex >= columnCount) {
730
- lastMeasuredColumnIndex = columnCount - 1;
731
- }
732
-
733
- if (lastMeasuredColumnIndex >= 0) {
734
- var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
735
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
736
- }
737
-
738
- var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
739
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
740
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
741
-};
742
-
743
-var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
744
- var itemMetadataMap, itemSize, lastMeasuredIndex;
745
-
746
- if (itemType === 'column') {
747
- itemMetadataMap = instanceProps.columnMetadataMap;
748
- itemSize = props.columnWidth;
749
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
750
- } else {
751
- itemMetadataMap = instanceProps.rowMetadataMap;
752
- itemSize = props.rowHeight;
753
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
754
- }
755
-
756
- if (index > lastMeasuredIndex) {
757
- var offset = 0;
758
-
759
- if (lastMeasuredIndex >= 0) {
760
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
761
- offset = itemMetadata.offset + itemMetadata.size;
762
- }
763
-
764
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
765
- var size = itemSize(i);
766
- itemMetadataMap[i] = {
767
- offset: offset,
768
- size: size
769
- };
770
- offset += size;
771
- }
772
-
773
- if (itemType === 'column') {
774
- instanceProps.lastMeasuredColumnIndex = index;
775
- } else {
776
- instanceProps.lastMeasuredRowIndex = index;
777
- }
778
- }
779
-
780
- return itemMetadataMap[index];
781
-};
782
-
783
-var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
784
- var itemMetadataMap, lastMeasuredIndex;
785
-
786
- if (itemType === 'column') {
787
- itemMetadataMap = instanceProps.columnMetadataMap;
788
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
789
- } else {
790
- itemMetadataMap = instanceProps.rowMetadataMap;
791
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
792
- }
793
-
794
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
795
-
796
- if (lastMeasuredItemOffset >= offset) {
797
- // If we've already measured items within this range just use a binary search as it's faster.
798
- return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
799
- } else {
800
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
801
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
802
- // The overall complexity for this approach is O(log n).
803
- return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
804
- }
805
-};
806
-
807
-var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
808
- while (low <= high) {
809
- var middle = low + Math.floor((high - low) / 2);
810
- var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
811
-
812
- if (currentOffset === offset) {
813
- return middle;
814
- } else if (currentOffset < offset) {
815
- low = middle + 1;
816
- } else if (currentOffset > offset) {
817
- high = middle - 1;
818
- }
819
- }
820
-
821
- if (low > 0) {
822
- return low - 1;
823
- } else {
824
- return 0;
825
- }
826
-};
827
-
828
-var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
829
- var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
830
- var interval = 1;
831
-
832
- while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
833
- index += interval;
834
- interval *= 2;
835
- }
836
-
837
- return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
838
-};
839
-
840
-var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
841
- var size = itemType === 'column' ? props.width : props.height;
842
- var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
843
- // To ensure it reflects actual measurements instead of just estimates.
844
-
845
- var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
846
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
847
- var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
848
-
849
- if (align === 'smart') {
850
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
851
- align = 'auto';
852
- } else {
853
- align = 'center';
854
- }
855
- }
856
-
857
- switch (align) {
858
- case 'start':
859
- return maxOffset;
860
-
861
- case 'end':
862
- return minOffset;
863
-
864
- case 'center':
865
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
866
-
867
- case 'auto':
868
- default:
869
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
870
- return scrollOffset;
871
- } else if (minOffset > maxOffset) {
872
- // Because we only take into account the scrollbar size when calculating minOffset
873
- // this value can be larger than maxOffset when at the end of the list
874
- return minOffset;
875
- } else if (scrollOffset < minOffset) {
876
- return minOffset;
877
- } else {
878
- return maxOffset;
879
- }
880
-
881
- }
882
-};
883
-
884
-var VariableSizeGrid =
885
-/*#__PURE__*/
886
-createGridComponent({
887
- getColumnOffset: function getColumnOffset(props, index, instanceProps) {
888
- return getItemMetadata('column', props, index, instanceProps).offset;
889
- },
890
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
891
- return findNearestItem('column', props, instanceProps, scrollLeft);
892
- },
893
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
894
- var columnCount = props.columnCount,
895
- width = props.width;
896
- var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
897
- var maxOffset = scrollLeft + width;
898
- var offset = itemMetadata.offset + itemMetadata.size;
899
- var stopIndex = startIndex;
900
-
901
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
902
- stopIndex++;
903
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
904
- }
905
-
906
- return stopIndex;
907
- },
908
- getColumnWidth: function getColumnWidth(props, index, instanceProps) {
909
- return instanceProps.columnMetadataMap[index].size;
910
- },
911
- getEstimatedTotalHeight: getEstimatedTotalHeight,
912
- getEstimatedTotalWidth: getEstimatedTotalWidth,
913
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
914
- return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
915
- },
916
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
917
- return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
918
- },
919
- getRowOffset: function getRowOffset(props, index, instanceProps) {
920
- return getItemMetadata('row', props, index, instanceProps).offset;
921
- },
922
- getRowHeight: function getRowHeight(props, index, instanceProps) {
923
- return instanceProps.rowMetadataMap[index].size;
924
- },
925
- getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
926
- return findNearestItem('row', props, instanceProps, scrollTop);
927
- },
928
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
929
- var rowCount = props.rowCount,
930
- height = props.height;
931
- var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
932
- var maxOffset = scrollTop + height;
933
- var offset = itemMetadata.offset + itemMetadata.size;
934
- var stopIndex = startIndex;
935
-
936
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
937
- stopIndex++;
938
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
939
- }
940
-
941
- return stopIndex;
942
- },
943
- initInstanceProps: function initInstanceProps(props, instance) {
944
- var _ref5 = props,
945
- estimatedColumnWidth = _ref5.estimatedColumnWidth,
946
- estimatedRowHeight = _ref5.estimatedRowHeight;
947
- var instanceProps = {
948
- columnMetadataMap: {},
949
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
950
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
951
- lastMeasuredColumnIndex: -1,
952
- lastMeasuredRowIndex: -1,
953
- rowMetadataMap: {}
954
- };
955
-
956
- instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
957
- if (shouldForceUpdate === void 0) {
958
- shouldForceUpdate = true;
959
- }
960
-
961
- instance.resetAfterIndices({
962
- columnIndex: columnIndex,
963
- shouldForceUpdate: shouldForceUpdate
964
- });
965
- };
966
-
967
- instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
968
- if (shouldForceUpdate === void 0) {
969
- shouldForceUpdate = true;
970
- }
971
-
972
- instance.resetAfterIndices({
973
- rowIndex: rowIndex,
974
- shouldForceUpdate: shouldForceUpdate
975
- });
976
- };
977
-
978
- instance.resetAfterIndices = function (_ref6) {
979
- var columnIndex = _ref6.columnIndex,
980
- rowIndex = _ref6.rowIndex,
981
- _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
982
- shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
983
-
984
- if (typeof columnIndex === 'number') {
985
- instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
986
- }
987
-
988
- if (typeof rowIndex === 'number') {
989
- instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
990
- } // We could potentially optimize further by only evicting styles after this index,
991
- // But since styles are only cached while scrolling is in progress-
992
- // It seems an unnecessary optimization.
993
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
994
-
995
-
996
- instance._getItemStyleCache(-1);
997
-
998
- if (shouldForceUpdate) {
999
- instance.forceUpdate();
1000
- }
1001
- };
1002
-
1003
- return instanceProps;
1004
- },
1005
- shouldResetStyleCacheOnItemSizeChange: false,
1006
- validateProps: function validateProps(_ref7) {
1007
- var columnWidth = _ref7.columnWidth,
1008
- rowHeight = _ref7.rowHeight;
1009
-
1010
- if (process.env.NODE_ENV !== 'production') {
1011
- if (typeof columnWidth !== 'function') {
1012
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
1013
- } else if (typeof rowHeight !== 'function') {
1014
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
1015
- }
1016
- }
1017
- }
1018
-});
1019
-
1020
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
1021
-
1022
-var defaultItemKey$1 = function defaultItemKey(index, data) {
1023
- return index;
1024
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
1025
-// This avoids spamming the console every time a render happens.
1026
-
1027
-
1028
-var devWarningsDirection = null;
1029
-var devWarningsTagName$1 = null;
1030
-
1031
-if (process.env.NODE_ENV !== 'production') {
1032
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
1033
- devWarningsDirection =
1034
- /*#__PURE__*/
1035
- new WeakSet();
1036
- devWarningsTagName$1 =
1037
- /*#__PURE__*/
1038
- new WeakSet();
1039
- }
1040
-}
1041
-
1042
-function createListComponent(_ref) {
1043
- var _class, _temp;
1044
-
1045
- var getItemOffset = _ref.getItemOffset,
1046
- getEstimatedTotalSize = _ref.getEstimatedTotalSize,
1047
- getItemSize = _ref.getItemSize,
1048
- getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
1049
- getStartIndexForOffset = _ref.getStartIndexForOffset,
1050
- getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
1051
- initInstanceProps = _ref.initInstanceProps,
1052
- shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
1053
- validateProps = _ref.validateProps;
1054
- return _temp = _class =
1055
- /*#__PURE__*/
1056
- function (_PureComponent) {
1057
- _inheritsLoose(List, _PureComponent);
1058
-
1059
- // Always use explicit constructor for React components.
1060
- // It produces less code after transpilation. (#26)
1061
- // eslint-disable-next-line no-useless-constructor
1062
- function List(props) {
1063
- var _this;
1064
-
1065
- _this = _PureComponent.call(this, props) || this;
1066
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
1067
- _this._outerRef = void 0;
1068
- _this._resetIsScrollingTimeoutId = null;
1069
- _this.state = {
1070
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
1071
- isScrolling: false,
1072
- scrollDirection: 'forward',
1073
- scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
1074
- scrollUpdateWasRequested: false
1075
- };
1076
- _this._callOnItemsRendered = void 0;
1077
- _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
1078
- return _this.props.onItemsRendered({
1079
- overscanStartIndex: overscanStartIndex,
1080
- overscanStopIndex: overscanStopIndex,
1081
- visibleStartIndex: visibleStartIndex,
1082
- visibleStopIndex: visibleStopIndex
1083
- });
1084
- });
1085
- _this._callOnScroll = void 0;
1086
- _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
1087
- return _this.props.onScroll({
1088
- scrollDirection: scrollDirection,
1089
- scrollOffset: scrollOffset,
1090
- scrollUpdateWasRequested: scrollUpdateWasRequested
1091
- });
1092
- });
1093
- _this._getItemStyle = void 0;
1094
-
1095
- _this._getItemStyle = function (index) {
1096
- var _this$props = _this.props,
1097
- direction = _this$props.direction,
1098
- itemSize = _this$props.itemSize,
1099
- layout = _this$props.layout;
1100
-
1101
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
1102
-
1103
- var style;
1104
-
1105
- if (itemStyleCache.hasOwnProperty(index)) {
1106
- style = itemStyleCache[index];
1107
- } else {
1108
- var _style;
1109
-
1110
- var _offset = getItemOffset(_this.props, index, _this._instanceProps);
1111
-
1112
- var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
1113
-
1114
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1115
- itemStyleCache[index] = style = (_style = {
1116
- position: 'absolute'
1117
- }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
1118
- }
1119
-
1120
- return style;
1121
- };
1122
-
1123
- _this._getItemStyleCache = void 0;
1124
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
1125
- return {};
1126
- });
1127
-
1128
- _this._onScrollHorizontal = function (event) {
1129
- var _event$currentTarget = event.currentTarget,
1130
- clientWidth = _event$currentTarget.clientWidth,
1131
- scrollLeft = _event$currentTarget.scrollLeft,
1132
- scrollWidth = _event$currentTarget.scrollWidth;
1133
-
1134
- _this.setState(function (prevState) {
1135
- if (prevState.scrollOffset === scrollLeft) {
1136
- // Scroll position may have been updated by cDM/cDU,
1137
- // In which case we don't need to trigger another render,
1138
- // And we don't want to update state.isScrolling.
1139
- return null;
1140
- }
1141
-
1142
- var direction = _this.props.direction;
1143
- var scrollOffset = scrollLeft;
1144
-
1145
- if (direction === 'rtl') {
1146
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
1147
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
1148
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
1149
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
1150
- switch (getRTLOffsetType()) {
1151
- case 'negative':
1152
- scrollOffset = -scrollLeft;
1153
- break;
1154
-
1155
- case 'positive-descending':
1156
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
1157
- break;
1158
- }
1159
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
1160
-
1161
-
1162
- scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
1163
- return {
1164
- isScrolling: true,
1165
- scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
1166
- scrollOffset: scrollOffset,
1167
- scrollUpdateWasRequested: false
1168
- };
1169
- }, _this._resetIsScrollingDebounced);
1170
- };
1171
-
1172
- _this._onScrollVertical = function (event) {
1173
- var _event$currentTarget2 = event.currentTarget,
1174
- clientHeight = _event$currentTarget2.clientHeight,
1175
- scrollHeight = _event$currentTarget2.scrollHeight,
1176
- scrollTop = _event$currentTarget2.scrollTop;
1177
-
1178
- _this.setState(function (prevState) {
1179
- if (prevState.scrollOffset === scrollTop) {
1180
- // Scroll position may have been updated by cDM/cDU,
1181
- // In which case we don't need to trigger another render,
1182
- // And we don't want to update state.isScrolling.
1183
- return null;
1184
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
1185
-
1186
-
1187
- var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
1188
- return {
1189
- isScrolling: true,
1190
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
1191
- scrollOffset: scrollOffset,
1192
- scrollUpdateWasRequested: false
1193
- };
1194
- }, _this._resetIsScrollingDebounced);
1195
- };
1196
-
1197
- _this._outerRefSetter = function (ref) {
1198
- var outerRef = _this.props.outerRef;
1199
- _this._outerRef = ref;
1200
-
1201
- if (typeof outerRef === 'function') {
1202
- outerRef(ref);
1203
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
1204
- outerRef.current = ref;
1205
- }
1206
- };
1207
-
1208
- _this._resetIsScrollingDebounced = function () {
1209
- if (_this._resetIsScrollingTimeoutId !== null) {
1210
- cancelTimeout(_this._resetIsScrollingTimeoutId);
1211
- }
1212
-
1213
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
1214
- };
1215
-
1216
- _this._resetIsScrolling = function () {
1217
- _this._resetIsScrollingTimeoutId = null;
1218
-
1219
- _this.setState({
1220
- isScrolling: false
1221
- }, function () {
1222
- // Clear style cache after state update has been committed.
1223
- // This way we don't break pure sCU for items that don't use isScrolling param.
1224
- _this._getItemStyleCache(-1, null);
1225
- });
1226
- };
1227
-
1228
- return _this;
1229
- }
1230
-
1231
- List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
1232
- validateSharedProps$1(nextProps, prevState);
1233
- validateProps(nextProps);
1234
- return null;
1235
- };
1236
-
1237
- var _proto = List.prototype;
1238
-
1239
- _proto.scrollTo = function scrollTo(scrollOffset) {
1240
- scrollOffset = Math.max(0, scrollOffset);
1241
- this.setState(function (prevState) {
1242
- if (prevState.scrollOffset === scrollOffset) {
1243
- return null;
1244
- }
1245
-
1246
- return {
1247
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
1248
- scrollOffset: scrollOffset,
1249
- scrollUpdateWasRequested: true
1250
- };
1251
- }, this._resetIsScrollingDebounced);
1252
- };
1253
-
1254
- _proto.scrollToItem = function scrollToItem(index, align) {
1255
- if (align === void 0) {
1256
- align = 'auto';
1257
- }
1258
-
1259
- var itemCount = this.props.itemCount;
1260
- var scrollOffset = this.state.scrollOffset;
1261
- index = Math.max(0, Math.min(index, itemCount - 1));
1262
- this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
1263
- };
1264
-
1265
- _proto.componentDidMount = function componentDidMount() {
1266
- var _this$props2 = this.props,
1267
- direction = _this$props2.direction,
1268
- initialScrollOffset = _this$props2.initialScrollOffset,
1269
- layout = _this$props2.layout;
1270
-
1271
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
1272
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
1273
-
1274
- if (direction === 'horizontal' || layout === 'horizontal') {
1275
- outerRef.scrollLeft = initialScrollOffset;
1276
- } else {
1277
- outerRef.scrollTop = initialScrollOffset;
1278
- }
1279
- }
1280
-
1281
- this._callPropsCallbacks();
1282
- };
1283
-
1284
- _proto.componentDidUpdate = function componentDidUpdate() {
1285
- var _this$props3 = this.props,
1286
- direction = _this$props3.direction,
1287
- layout = _this$props3.layout;
1288
- var _this$state = this.state,
1289
- scrollOffset = _this$state.scrollOffset,
1290
- scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
1291
-
1292
- if (scrollUpdateWasRequested && this._outerRef != null) {
1293
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
1294
-
1295
- if (direction === 'horizontal' || layout === 'horizontal') {
1296
- if (direction === 'rtl') {
1297
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
1298
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
1299
- // So we need to determine which browser behavior we're dealing with, and mimic it.
1300
- switch (getRTLOffsetType()) {
1301
- case 'negative':
1302
- outerRef.scrollLeft = -scrollOffset;
1303
- break;
1304
-
1305
- case 'positive-ascending':
1306
- outerRef.scrollLeft = scrollOffset;
1307
- break;
1308
-
1309
- default:
1310
- var clientWidth = outerRef.clientWidth,
1311
- scrollWidth = outerRef.scrollWidth;
1312
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
1313
- break;
1314
- }
1315
- } else {
1316
- outerRef.scrollLeft = scrollOffset;
1317
- }
1318
- } else {
1319
- outerRef.scrollTop = scrollOffset;
1320
- }
1321
- }
1322
-
1323
- this._callPropsCallbacks();
1324
- };
1325
-
1326
- _proto.componentWillUnmount = function componentWillUnmount() {
1327
- if (this._resetIsScrollingTimeoutId !== null) {
1328
- cancelTimeout(this._resetIsScrollingTimeoutId);
1329
- }
1330
- };
1331
-
1332
- _proto.render = function render() {
1333
- var _this$props4 = this.props,
1334
- children = _this$props4.children,
1335
- className = _this$props4.className,
1336
- direction = _this$props4.direction,
1337
- height = _this$props4.height,
1338
- innerRef = _this$props4.innerRef,
1339
- innerElementType = _this$props4.innerElementType,
1340
- innerTagName = _this$props4.innerTagName,
1341
- itemCount = _this$props4.itemCount,
1342
- itemData = _this$props4.itemData,
1343
- _this$props4$itemKey = _this$props4.itemKey,
1344
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
1345
- layout = _this$props4.layout,
1346
- outerElementType = _this$props4.outerElementType,
1347
- outerTagName = _this$props4.outerTagName,
1348
- style = _this$props4.style,
1349
- useIsScrolling = _this$props4.useIsScrolling,
1350
- width = _this$props4.width;
1351
- var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
1352
-
1353
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1354
- var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
1355
-
1356
- var _this$_getRangeToRend = this._getRangeToRender(),
1357
- startIndex = _this$_getRangeToRend[0],
1358
- stopIndex = _this$_getRangeToRend[1];
1359
-
1360
- var items = [];
1361
-
1362
- if (itemCount > 0) {
1363
- for (var _index = startIndex; _index <= stopIndex; _index++) {
1364
- items.push(react.createElement(children, {
1365
- data: itemData,
1366
- key: itemKey(_index, itemData),
1367
- index: _index,
1368
- isScrolling: useIsScrolling ? isScrolling : undefined,
1369
- style: this._getItemStyle(_index)
1370
- }));
1371
- }
1372
- } // Read this value AFTER items have been created,
1373
- // So their actual sizes (if variable) are taken into consideration.
1374
-
1375
-
1376
- var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
1377
- return react.createElement(outerElementType || outerTagName || 'div', {
1378
- className: className,
1379
- onScroll: onScroll,
1380
- ref: this._outerRefSetter,
1381
- style: _extends({
1382
- position: 'relative',
1383
- height: height,
1384
- width: width,
1385
- overflow: 'auto',
1386
- WebkitOverflowScrolling: 'touch',
1387
- willChange: 'transform',
1388
- direction: direction
1389
- }, style)
1390
- }, react.createElement(innerElementType || innerTagName || 'div', {
1391
- children: items,
1392
- ref: innerRef,
1393
- style: {
1394
- height: isHorizontal ? '100%' : estimatedTotalSize,
1395
- pointerEvents: isScrolling ? 'none' : undefined,
1396
- width: isHorizontal ? estimatedTotalSize : '100%'
1397
- }
1398
- }));
1399
- };
1400
-
1401
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
1402
- if (typeof this.props.onItemsRendered === 'function') {
1403
- var itemCount = this.props.itemCount;
1404
-
1405
- if (itemCount > 0) {
1406
- var _this$_getRangeToRend2 = this._getRangeToRender(),
1407
- _overscanStartIndex = _this$_getRangeToRend2[0],
1408
- _overscanStopIndex = _this$_getRangeToRend2[1],
1409
- _visibleStartIndex = _this$_getRangeToRend2[2],
1410
- _visibleStopIndex = _this$_getRangeToRend2[3];
1411
-
1412
- this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
1413
- }
1414
- }
1415
-
1416
- if (typeof this.props.onScroll === 'function') {
1417
- var _this$state2 = this.state,
1418
- _scrollDirection = _this$state2.scrollDirection,
1419
- _scrollOffset = _this$state2.scrollOffset,
1420
- _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
1421
-
1422
- this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
1423
- }
1424
- }; // Lazily create and cache item styles while scrolling,
1425
- // So that pure component sCU will prevent re-renders.
1426
- // We maintain this cache, and pass a style prop rather than index,
1427
- // So that List can clear cached styles and force item re-render if necessary.
1428
-
1429
-
1430
- _proto._getRangeToRender = function _getRangeToRender() {
1431
- var _this$props5 = this.props,
1432
- itemCount = _this$props5.itemCount,
1433
- overscanCount = _this$props5.overscanCount;
1434
- var _this$state3 = this.state,
1435
- isScrolling = _this$state3.isScrolling,
1436
- scrollDirection = _this$state3.scrollDirection,
1437
- scrollOffset = _this$state3.scrollOffset;
1438
-
1439
- if (itemCount === 0) {
1440
- return [0, 0, 0, 0];
1441
- }
1442
-
1443
- var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
1444
- var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
1445
- // If there isn't at least one extra item, tab loops back around.
1446
-
1447
- var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
1448
- var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
1449
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
1450
- };
1451
-
1452
- return List;
1453
- }(react.PureComponent), _class.defaultProps = {
1454
- direction: 'ltr',
1455
- itemData: undefined,
1456
- layout: 'vertical',
1457
- overscanCount: 2,
1458
- useIsScrolling: false
1459
- }, _temp;
1460
-} // NOTE: I considered further wrapping individual items with a pure ListItem component.
1461
-// This would avoid ever calling the render function for the same index more than once,
1462
-// But it would also add the overhead of a lot of components/fibers.
1463
-// I assume people already do this (render function returning a class component),
1464
-// So my doing it would just unnecessarily double the wrappers.
1465
-
1466
-var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
1467
- var children = _ref2.children,
1468
- direction = _ref2.direction,
1469
- height = _ref2.height,
1470
- layout = _ref2.layout,
1471
- innerTagName = _ref2.innerTagName,
1472
- outerTagName = _ref2.outerTagName,
1473
- width = _ref2.width;
1474
- var instance = _ref3.instance;
1475
-
1476
- if (process.env.NODE_ENV !== 'production') {
1477
- if (innerTagName != null || outerTagName != null) {
1478
- if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
1479
- devWarningsTagName$1.add(instance);
1480
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
1481
- }
1482
- } // TODO Deprecate direction "horizontal"
1483
-
1484
-
1485
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1486
-
1487
- switch (direction) {
1488
- case 'horizontal':
1489
- case 'vertical':
1490
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
1491
- devWarningsDirection.add(instance);
1492
- console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
1493
- }
1494
-
1495
- break;
1496
-
1497
- case 'ltr':
1498
- case 'rtl':
1499
- // Valid values
1500
- break;
1501
-
1502
- default:
1503
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
1504
- }
1505
-
1506
- switch (layout) {
1507
- case 'horizontal':
1508
- case 'vertical':
1509
- // Valid values
1510
- break;
1511
-
1512
- default:
1513
- throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
1514
- }
1515
-
1516
- if (children == null) {
1517
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
1518
- }
1519
-
1520
- if (isHorizontal && typeof width !== 'number') {
1521
- throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
1522
- } else if (!isHorizontal && typeof height !== 'number') {
1523
- throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
1524
- }
1525
- }
1526
-};
1527
-
1528
-var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
1529
-
1530
-var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
1531
- var _ref = props,
1532
- itemSize = _ref.itemSize;
1533
- var itemMetadataMap = instanceProps.itemMetadataMap,
1534
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
1535
-
1536
- if (index > lastMeasuredIndex) {
1537
- var offset = 0;
1538
-
1539
- if (lastMeasuredIndex >= 0) {
1540
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
1541
- offset = itemMetadata.offset + itemMetadata.size;
1542
- }
1543
-
1544
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
1545
- var size = itemSize(i);
1546
- itemMetadataMap[i] = {
1547
- offset: offset,
1548
- size: size
1549
- };
1550
- offset += size;
1551
- }
1552
-
1553
- instanceProps.lastMeasuredIndex = index;
1554
- }
1555
-
1556
- return itemMetadataMap[index];
1557
-};
1558
-
1559
-var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
1560
- var itemMetadataMap = instanceProps.itemMetadataMap,
1561
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
1562
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
1563
-
1564
- if (lastMeasuredItemOffset >= offset) {
1565
- // If we've already measured items within this range just use a binary search as it's faster.
1566
- return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
1567
- } else {
1568
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
1569
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
1570
- // The overall complexity for this approach is O(log n).
1571
- return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
1572
- }
1573
-};
1574
-
1575
-var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
1576
- while (low <= high) {
1577
- var middle = low + Math.floor((high - low) / 2);
1578
- var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
1579
-
1580
- if (currentOffset === offset) {
1581
- return middle;
1582
- } else if (currentOffset < offset) {
1583
- low = middle + 1;
1584
- } else if (currentOffset > offset) {
1585
- high = middle - 1;
1586
- }
1587
- }
1588
-
1589
- if (low > 0) {
1590
- return low - 1;
1591
- } else {
1592
- return 0;
1593
- }
1594
-};
1595
-
1596
-var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
1597
- var itemCount = props.itemCount;
1598
- var interval = 1;
1599
-
1600
- while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
1601
- index += interval;
1602
- interval *= 2;
1603
- }
1604
-
1605
- return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
1606
-};
1607
-
1608
-var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
1609
- var itemCount = _ref2.itemCount;
1610
- var itemMetadataMap = _ref3.itemMetadataMap,
1611
- estimatedItemSize = _ref3.estimatedItemSize,
1612
- lastMeasuredIndex = _ref3.lastMeasuredIndex;
1613
- var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
1614
- // https://github.com/bvaughn/react-window/pull/138
1615
-
1616
- if (lastMeasuredIndex >= itemCount) {
1617
- lastMeasuredIndex = itemCount - 1;
1618
- }
1619
-
1620
- if (lastMeasuredIndex >= 0) {
1621
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
1622
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
1623
- }
1624
-
1625
- var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
1626
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
1627
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
1628
-};
1629
-
1630
-var VariableSizeList =
1631
-/*#__PURE__*/
1632
-createListComponent({
1633
- getItemOffset: function getItemOffset(props, index, instanceProps) {
1634
- return getItemMetadata$1(props, index, instanceProps).offset;
1635
- },
1636
- getItemSize: function getItemSize(props, index, instanceProps) {
1637
- return instanceProps.itemMetadataMap[index].size;
1638
- },
1639
- getEstimatedTotalSize: getEstimatedTotalSize,
1640
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
1641
- var direction = props.direction,
1642
- height = props.height,
1643
- layout = props.layout,
1644
- width = props.width; // TODO Deprecate direction "horizontal"
1645
-
1646
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1647
- var size = isHorizontal ? width : height;
1648
- var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
1649
- // To ensure it reflects actual measurements instead of just estimates.
1650
-
1651
- var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
1652
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
1653
- var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
1654
-
1655
- if (align === 'smart') {
1656
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
1657
- align = 'auto';
1658
- } else {
1659
- align = 'center';
1660
- }
1661
- }
1662
-
1663
- switch (align) {
1664
- case 'start':
1665
- return maxOffset;
1666
-
1667
- case 'end':
1668
- return minOffset;
1669
-
1670
- case 'center':
1671
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
1672
-
1673
- case 'auto':
1674
- default:
1675
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
1676
- return scrollOffset;
1677
- } else if (scrollOffset < minOffset) {
1678
- return minOffset;
1679
- } else {
1680
- return maxOffset;
1681
- }
1682
-
1683
- }
1684
- },
1685
- getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
1686
- return findNearestItem$1(props, instanceProps, offset);
1687
- },
1688
- getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
1689
- var direction = props.direction,
1690
- height = props.height,
1691
- itemCount = props.itemCount,
1692
- layout = props.layout,
1693
- width = props.width; // TODO Deprecate direction "horizontal"
1694
-
1695
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1696
- var size = isHorizontal ? width : height;
1697
- var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
1698
- var maxOffset = scrollOffset + size;
1699
- var offset = itemMetadata.offset + itemMetadata.size;
1700
- var stopIndex = startIndex;
1701
-
1702
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
1703
- stopIndex++;
1704
- offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
1705
- }
1706
-
1707
- return stopIndex;
1708
- },
1709
- initInstanceProps: function initInstanceProps(props, instance) {
1710
- var _ref4 = props,
1711
- estimatedItemSize = _ref4.estimatedItemSize;
1712
- var instanceProps = {
1713
- itemMetadataMap: {},
1714
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
1715
- lastMeasuredIndex: -1
1716
- };
1717
-
1718
- instance.resetAfterIndex = function (index, shouldForceUpdate) {
1719
- if (shouldForceUpdate === void 0) {
1720
- shouldForceUpdate = true;
1721
- }
1722
-
1723
- instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
1724
- // But since styles are only cached while scrolling is in progress-
1725
- // It seems an unnecessary optimization.
1726
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
1727
-
1728
- instance._getItemStyleCache(-1);
1729
-
1730
- if (shouldForceUpdate) {
1731
- instance.forceUpdate();
1732
- }
1733
- };
1734
-
1735
- return instanceProps;
1736
- },
1737
- shouldResetStyleCacheOnItemSizeChange: false,
1738
- validateProps: function validateProps(_ref5) {
1739
- var itemSize = _ref5.itemSize;
1740
-
1741
- if (process.env.NODE_ENV !== 'production') {
1742
- if (typeof itemSize !== 'function') {
1743
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
1744
- }
1745
- }
1746
- }
1747
-});
1748
-
1749
-var FixedSizeGrid =
1750
-/*#__PURE__*/
1751
-createGridComponent({
1752
- getColumnOffset: function getColumnOffset(_ref, index) {
1753
- var columnWidth = _ref.columnWidth;
1754
- return index * columnWidth;
1755
- },
1756
- getColumnWidth: function getColumnWidth(_ref2, index) {
1757
- var columnWidth = _ref2.columnWidth;
1758
- return columnWidth;
1759
- },
1760
- getRowOffset: function getRowOffset(_ref3, index) {
1761
- var rowHeight = _ref3.rowHeight;
1762
- return index * rowHeight;
1763
- },
1764
- getRowHeight: function getRowHeight(_ref4, index) {
1765
- var rowHeight = _ref4.rowHeight;
1766
- return rowHeight;
1767
- },
1768
- getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
1769
- var rowCount = _ref5.rowCount,
1770
- rowHeight = _ref5.rowHeight;
1771
- return rowHeight * rowCount;
1772
- },
1773
- getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
1774
- var columnCount = _ref6.columnCount,
1775
- columnWidth = _ref6.columnWidth;
1776
- return columnWidth * columnCount;
1777
- },
1778
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
1779
- var columnCount = _ref7.columnCount,
1780
- columnWidth = _ref7.columnWidth,
1781
- width = _ref7.width;
1782
- var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
1783
- var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
1784
- var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
1785
-
1786
- if (align === 'smart') {
1787
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
1788
- align = 'auto';
1789
- } else {
1790
- align = 'center';
1791
- }
1792
- }
1793
-
1794
- switch (align) {
1795
- case 'start':
1796
- return maxOffset;
1797
-
1798
- case 'end':
1799
- return minOffset;
1800
-
1801
- case 'center':
1802
- // "Centered" offset is usually the average of the min and max.
1803
- // But near the edges of the list, this doesn't hold true.
1804
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1805
-
1806
- if (middleOffset < Math.ceil(width / 2)) {
1807
- return 0; // near the beginning
1808
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
1809
- return lastColumnOffset; // near the end
1810
- } else {
1811
- return middleOffset;
1812
- }
1813
-
1814
- case 'auto':
1815
- default:
1816
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
1817
- return scrollLeft;
1818
- } else if (minOffset > maxOffset) {
1819
- // Because we only take into account the scrollbar size when calculating minOffset
1820
- // this value can be larger than maxOffset when at the end of the list
1821
- return minOffset;
1822
- } else if (scrollLeft < minOffset) {
1823
- return minOffset;
1824
- } else {
1825
- return maxOffset;
1826
- }
1827
-
1828
- }
1829
- },
1830
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
1831
- var rowHeight = _ref8.rowHeight,
1832
- height = _ref8.height,
1833
- rowCount = _ref8.rowCount;
1834
- var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
1835
- var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
1836
- var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
1837
-
1838
- if (align === 'smart') {
1839
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
1840
- align = 'auto';
1841
- } else {
1842
- align = 'center';
1843
- }
1844
- }
1845
-
1846
- switch (align) {
1847
- case 'start':
1848
- return maxOffset;
1849
-
1850
- case 'end':
1851
- return minOffset;
1852
-
1853
- case 'center':
1854
- // "Centered" offset is usually the average of the min and max.
1855
- // But near the edges of the list, this doesn't hold true.
1856
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1857
-
1858
- if (middleOffset < Math.ceil(height / 2)) {
1859
- return 0; // near the beginning
1860
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
1861
- return lastRowOffset; // near the end
1862
- } else {
1863
- return middleOffset;
1864
- }
1865
-
1866
- case 'auto':
1867
- default:
1868
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
1869
- return scrollTop;
1870
- } else if (minOffset > maxOffset) {
1871
- // Because we only take into account the scrollbar size when calculating minOffset
1872
- // this value can be larger than maxOffset when at the end of the list
1873
- return minOffset;
1874
- } else if (scrollTop < minOffset) {
1875
- return minOffset;
1876
- } else {
1877
- return maxOffset;
1878
- }
1879
-
1880
- }
1881
- },
1882
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
1883
- var columnWidth = _ref9.columnWidth,
1884
- columnCount = _ref9.columnCount;
1885
- return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
1886
- },
1887
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
1888
- var columnWidth = _ref10.columnWidth,
1889
- columnCount = _ref10.columnCount,
1890
- width = _ref10.width;
1891
- var left = startIndex * columnWidth;
1892
- var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
1893
- return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
1894
- ));
1895
- },
1896
- getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
1897
- var rowHeight = _ref11.rowHeight,
1898
- rowCount = _ref11.rowCount;
1899
- return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
1900
- },
1901
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
1902
- var rowHeight = _ref12.rowHeight,
1903
- rowCount = _ref12.rowCount,
1904
- height = _ref12.height;
1905
- var top = startIndex * rowHeight;
1906
- var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
1907
- return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
1908
- ));
1909
- },
1910
- initInstanceProps: function initInstanceProps(props) {// Noop
1911
- },
1912
- shouldResetStyleCacheOnItemSizeChange: true,
1913
- validateProps: function validateProps(_ref13) {
1914
- var columnWidth = _ref13.columnWidth,
1915
- rowHeight = _ref13.rowHeight;
1916
-
1917
- if (process.env.NODE_ENV !== 'production') {
1918
- if (typeof columnWidth !== 'number') {
1919
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
1920
- }
1921
-
1922
- if (typeof rowHeight !== 'number') {
1923
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
1924
- }
1925
- }
1926
- }
1927
-});
1928
-
1929
-var FixedSizeList =
1930
-/*#__PURE__*/
1931
-createListComponent({
1932
- getItemOffset: function getItemOffset(_ref, index) {
1933
- var itemSize = _ref.itemSize;
1934
- return index * itemSize;
1935
- },
1936
- getItemSize: function getItemSize(_ref2, index) {
1937
- var itemSize = _ref2.itemSize;
1938
- return itemSize;
1939
- },
1940
- getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
1941
- var itemCount = _ref3.itemCount,
1942
- itemSize = _ref3.itemSize;
1943
- return itemSize * itemCount;
1944
- },
1945
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
1946
- var direction = _ref4.direction,
1947
- height = _ref4.height,
1948
- itemCount = _ref4.itemCount,
1949
- itemSize = _ref4.itemSize,
1950
- layout = _ref4.layout,
1951
- width = _ref4.width;
1952
- // TODO Deprecate direction "horizontal"
1953
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1954
- var size = isHorizontal ? width : height;
1955
- var lastItemOffset = Math.max(0, itemCount * itemSize - size);
1956
- var maxOffset = Math.min(lastItemOffset, index * itemSize);
1957
- var minOffset = Math.max(0, index * itemSize - size + itemSize);
1958
-
1959
- if (align === 'smart') {
1960
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
1961
- align = 'auto';
1962
- } else {
1963
- align = 'center';
1964
- }
1965
- }
1966
-
1967
- switch (align) {
1968
- case 'start':
1969
- return maxOffset;
1970
-
1971
- case 'end':
1972
- return minOffset;
1973
-
1974
- case 'center':
1975
- {
1976
- // "Centered" offset is usually the average of the min and max.
1977
- // But near the edges of the list, this doesn't hold true.
1978
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1979
-
1980
- if (middleOffset < Math.ceil(size / 2)) {
1981
- return 0; // near the beginning
1982
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
1983
- return lastItemOffset; // near the end
1984
- } else {
1985
- return middleOffset;
1986
- }
1987
- }
1988
-
1989
- case 'auto':
1990
- default:
1991
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
1992
- return scrollOffset;
1993
- } else if (scrollOffset < minOffset) {
1994
- return minOffset;
1995
- } else {
1996
- return maxOffset;
1997
- }
1998
-
1999
- }
2000
- },
2001
- getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
2002
- var itemCount = _ref5.itemCount,
2003
- itemSize = _ref5.itemSize;
2004
- return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
2005
- },
2006
- getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
2007
- var direction = _ref6.direction,
2008
- height = _ref6.height,
2009
- itemCount = _ref6.itemCount,
2010
- itemSize = _ref6.itemSize,
2011
- layout = _ref6.layout,
2012
- width = _ref6.width;
2013
- // TODO Deprecate direction "horizontal"
2014
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
2015
- var offset = startIndex * itemSize;
2016
- var size = isHorizontal ? width : height;
2017
- var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
2018
- return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
2019
- ));
2020
- },
2021
- initInstanceProps: function initInstanceProps(props) {// Noop
2022
- },
2023
- shouldResetStyleCacheOnItemSizeChange: true,
2024
- validateProps: function validateProps(_ref7) {
2025
- var itemSize = _ref7.itemSize;
2026
-
2027
- if (process.env.NODE_ENV !== 'production') {
2028
- if (typeof itemSize !== 'number') {
2029
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
2030
- }
2031
- }
2032
- }
2033
-});
2034
-
2035
-// Pulled from react-compat
2036
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
2037
-function shallowDiffers(prev, next) {
2038
- for (var attribute in prev) {
2039
- if (!(attribute in next)) {
2040
- return true;
2041
- }
2042
- }
2043
-
2044
- for (var _attribute in next) {
2045
- if (prev[_attribute] !== next[_attribute]) {
2046
- return true;
2047
- }
2048
- }
2049
-
2050
- return false;
2051
-}
2052
-
2053
-// It knows to compare individual style props and ignore the wrapper object.
2054
-// See https://reactjs.org/docs/react-api.html#reactmemo
2055
-
2056
-function areEqual(prevProps, nextProps) {
2057
- var prevStyle = prevProps.style,
2058
- prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
2059
-
2060
- var nextStyle = nextProps.style,
2061
- nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
2062
-
2063
- return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
2064
-}
2065
-
2066
-// It knows to compare individual style props and ignore the wrapper object.
2067
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
2068
-
2069
-function shouldComponentUpdate(nextProps, nextState) {
2070
- return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
2071
-}
2072
-
2073
-exports.VariableSizeGrid = VariableSizeGrid;
2074
-exports.VariableSizeList = VariableSizeList;
2075
-exports.FixedSizeGrid = FixedSizeGrid;
2076
-exports.FixedSizeList = FixedSizeList;
2077
-exports.areEqual = areEqual;
2078
-exports.shouldComponentUpdate = shouldComponentUpdate;
2079
-//# sourceMappingURL=index.cjs.js.map
packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow
deleted
-3
@@ -1,3 +0,0 @@
1
-// @flow
2
-
3
-export * from '../src';
packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js
deleted
-2078
@@ -1,2078 +0,0 @@
1
-import _extends from '@babel/runtime/helpers/esm/extends';
2
-import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
3
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
4
-import memoizeOne from 'memoize-one';
5
-import { createElement, PureComponent } from 'react';
6
-import { flushSync } from 'react-dom';
7
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
8
-
9
-// Animation frame based implementation of setTimeout.
10
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
11
-var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
12
-var now = hasNativePerformanceNow ? function () {
13
- return performance.now();
14
-} : function () {
15
- return Date.now();
16
-};
17
-function cancelTimeout(timeoutID) {
18
- cancelAnimationFrame(timeoutID.id);
19
-}
20
-function requestTimeout(callback, delay) {
21
- var start = now();
22
-
23
- function tick() {
24
- if (now() - start >= delay) {
25
- callback.call(null);
26
- } else {
27
- timeoutID.id = requestAnimationFrame(tick);
28
- }
29
- }
30
-
31
- var timeoutID = {
32
- id: requestAnimationFrame(tick)
33
- };
34
- return timeoutID;
35
-}
36
-
37
-var size = -1; // This utility copied from "dom-helpers" package.
38
-
39
-function getScrollbarSize(recalculate) {
40
- if (recalculate === void 0) {
41
- recalculate = false;
42
- }
43
-
44
- if (size === -1 || recalculate) {
45
- var div = document.createElement('div');
46
- var style = div.style;
47
- style.width = '50px';
48
- style.height = '50px';
49
- style.overflow = 'scroll';
50
- document.body.appendChild(div);
51
- size = div.offsetWidth - div.clientWidth;
52
- document.body.removeChild(div);
53
- }
54
-
55
- return size;
56
-}
57
-var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
58
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
59
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
60
-// The safest way to check this is to intentionally set a negative offset,
61
-// and then verify that the subsequent "scroll" event matches the negative offset.
62
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
63
-
64
-function getRTLOffsetType(recalculate) {
65
- if (recalculate === void 0) {
66
- recalculate = false;
67
- }
68
-
69
- if (cachedRTLResult === null || recalculate) {
70
- var outerDiv = document.createElement('div');
71
- var outerStyle = outerDiv.style;
72
- outerStyle.width = '50px';
73
- outerStyle.height = '50px';
74
- outerStyle.overflow = 'scroll';
75
- outerStyle.direction = 'rtl';
76
- var innerDiv = document.createElement('div');
77
- var innerStyle = innerDiv.style;
78
- innerStyle.width = '100px';
79
- innerStyle.height = '100px';
80
- outerDiv.appendChild(innerDiv);
81
- document.body.appendChild(outerDiv);
82
-
83
- if (outerDiv.scrollLeft > 0) {
84
- cachedRTLResult = 'positive-descending';
85
- } else {
86
- outerDiv.scrollLeft = 1;
87
-
88
- if (outerDiv.scrollLeft === 0) {
89
- cachedRTLResult = 'negative';
90
- } else {
91
- cachedRTLResult = 'positive-ascending';
92
- }
93
- }
94
-
95
- document.body.removeChild(outerDiv);
96
- return cachedRTLResult;
97
- }
98
-
99
- return cachedRTLResult;
100
-}
101
-
102
-var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
103
-
104
-var defaultItemKey = function defaultItemKey(_ref) {
105
- var columnIndex = _ref.columnIndex,
106
- data = _ref.data,
107
- rowIndex = _ref.rowIndex;
108
- return rowIndex + ":" + columnIndex;
109
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
110
-// This avoids spamming the console every time a render happens.
111
-
112
-
113
-var devWarningsOverscanCount = null;
114
-var devWarningsOverscanRowsColumnsCount = null;
115
-var devWarningsTagName = null;
116
-
117
-if (process.env.NODE_ENV !== 'production') {
118
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
119
- devWarningsOverscanCount =
120
- /*#__PURE__*/
121
- new WeakSet();
122
- devWarningsOverscanRowsColumnsCount =
123
- /*#__PURE__*/
124
- new WeakSet();
125
- devWarningsTagName =
126
- /*#__PURE__*/
127
- new WeakSet();
128
- }
129
-}
130
-
131
-function createGridComponent(_ref2) {
132
- var _class, _temp;
133
-
134
- var getColumnOffset = _ref2.getColumnOffset,
135
- getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
136
- getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
137
- getColumnWidth = _ref2.getColumnWidth,
138
- getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
139
- getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
140
- getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
141
- getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
142
- getRowHeight = _ref2.getRowHeight,
143
- getRowOffset = _ref2.getRowOffset,
144
- getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
145
- getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
146
- initInstanceProps = _ref2.initInstanceProps,
147
- shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
148
- validateProps = _ref2.validateProps;
149
- return _temp = _class =
150
- /*#__PURE__*/
151
- function (_PureComponent) {
152
- _inheritsLoose(Grid, _PureComponent);
153
-
154
- // Always use explicit constructor for React components.
155
- // It produces less code after transpilation. (#26)
156
- // eslint-disable-next-line no-useless-constructor
157
- function Grid(props) {
158
- var _this;
159
-
160
- _this = _PureComponent.call(this, props) || this;
161
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
162
- _this._resetIsScrollingTimeoutId = null;
163
- _this._outerRef = void 0;
164
- _this.state = {
165
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
166
- isScrolling: false,
167
- horizontalScrollDirection: 'forward',
168
- scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
169
- scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
170
- scrollUpdateWasRequested: false,
171
- verticalScrollDirection: 'forward'
172
- };
173
- _this._callOnItemsRendered = void 0;
174
- _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
175
- return _this.props.onItemsRendered({
176
- overscanColumnStartIndex: overscanColumnStartIndex,
177
- overscanColumnStopIndex: overscanColumnStopIndex,
178
- overscanRowStartIndex: overscanRowStartIndex,
179
- overscanRowStopIndex: overscanRowStopIndex,
180
- visibleColumnStartIndex: visibleColumnStartIndex,
181
- visibleColumnStopIndex: visibleColumnStopIndex,
182
- visibleRowStartIndex: visibleRowStartIndex,
183
- visibleRowStopIndex: visibleRowStopIndex
184
- });
185
- });
186
- _this._callOnScroll = void 0;
187
- _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
188
- return _this.props.onScroll({
189
- horizontalScrollDirection: horizontalScrollDirection,
190
- scrollLeft: scrollLeft,
191
- scrollTop: scrollTop,
192
- verticalScrollDirection: verticalScrollDirection,
193
- scrollUpdateWasRequested: scrollUpdateWasRequested
194
- });
195
- });
196
- _this._getItemStyle = void 0;
197
-
198
- _this._getItemStyle = function (rowIndex, columnIndex) {
199
- var _this$props = _this.props,
200
- columnWidth = _this$props.columnWidth,
201
- direction = _this$props.direction,
202
- rowHeight = _this$props.rowHeight;
203
-
204
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
205
-
206
- var key = rowIndex + ":" + columnIndex;
207
- var style;
208
-
209
- if (itemStyleCache.hasOwnProperty(key)) {
210
- style = itemStyleCache[key];
211
- } else {
212
- var _style;
213
-
214
- itemStyleCache[key] = style = (_style = {
215
- position: 'absolute'
216
- }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
217
- }
218
-
219
- return style;
220
- };
221
-
222
- _this._getItemStyleCache = void 0;
223
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
224
- return {};
225
- });
226
-
227
- _this._onScroll = function (event) {
228
- var _event$currentTarget = event.currentTarget,
229
- clientHeight = _event$currentTarget.clientHeight,
230
- clientWidth = _event$currentTarget.clientWidth,
231
- scrollLeft = _event$currentTarget.scrollLeft,
232
- scrollTop = _event$currentTarget.scrollTop,
233
- scrollHeight = _event$currentTarget.scrollHeight,
234
- scrollWidth = _event$currentTarget.scrollWidth;
235
-
236
- // Force flush sync for scroll updates to reduce visual checkerboarding.
237
- flushSync(() => {
238
- _this.setState(function (prevState) {
239
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
240
- // Scroll position may have been updated by cDM/cDU,
241
- // In which case we don't need to trigger another render,
242
- // And we don't want to update state.isScrolling.
243
- return null;
244
- }
245
-
246
- var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
247
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
248
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
249
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
250
-
251
- var calculatedScrollLeft = scrollLeft;
252
-
253
- if (direction === 'rtl') {
254
- switch (getRTLOffsetType()) {
255
- case 'negative':
256
- calculatedScrollLeft = -scrollLeft;
257
- break;
258
-
259
- case 'positive-descending':
260
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
261
- break;
262
- }
263
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
264
-
265
-
266
- calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
267
- var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
268
- return {
269
- isScrolling: true,
270
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
271
- scrollLeft: calculatedScrollLeft,
272
- scrollTop: calculatedScrollTop,
273
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
274
- scrollUpdateWasRequested: false
275
- };
276
- }, _this._resetIsScrollingDebounced);
277
- });
278
- };
279
-
280
- _this._outerRefSetter = function (ref) {
281
- var outerRef = _this.props.outerRef;
282
- _this._outerRef = ref;
283
-
284
- if (typeof outerRef === 'function') {
285
- outerRef(ref);
286
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
287
- outerRef.current = ref;
288
- }
289
- };
290
-
291
- _this._resetIsScrollingDebounced = function () {
292
- if (_this._resetIsScrollingTimeoutId !== null) {
293
- cancelTimeout(_this._resetIsScrollingTimeoutId);
294
- }
295
-
296
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
297
- };
298
-
299
- _this._resetIsScrolling = function () {
300
- _this._resetIsScrollingTimeoutId = null;
301
-
302
- _this.setState({
303
- isScrolling: false
304
- }, function () {
305
- // Clear style cache after state update has been committed.
306
- // This way we don't break pure sCU for items that don't use isScrolling param.
307
- _this._getItemStyleCache(-1);
308
- });
309
- };
310
-
311
- return _this;
312
- }
313
-
314
- Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
315
- validateSharedProps(nextProps, prevState);
316
- validateProps(nextProps);
317
- return null;
318
- };
319
-
320
- var _proto = Grid.prototype;
321
-
322
- _proto.scrollTo = function scrollTo(_ref3) {
323
- var scrollLeft = _ref3.scrollLeft,
324
- scrollTop = _ref3.scrollTop;
325
-
326
- if (scrollLeft !== undefined) {
327
- scrollLeft = Math.max(0, scrollLeft);
328
- }
329
-
330
- if (scrollTop !== undefined) {
331
- scrollTop = Math.max(0, scrollTop);
332
- }
333
-
334
- this.setState(function (prevState) {
335
- if (scrollLeft === undefined) {
336
- scrollLeft = prevState.scrollLeft;
337
- }
338
-
339
- if (scrollTop === undefined) {
340
- scrollTop = prevState.scrollTop;
341
- }
342
-
343
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
344
- return null;
345
- }
346
-
347
- return {
348
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
349
- scrollLeft: scrollLeft,
350
- scrollTop: scrollTop,
351
- scrollUpdateWasRequested: true,
352
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
353
- };
354
- }, this._resetIsScrollingDebounced);
355
- };
356
-
357
- _proto.scrollToItem = function scrollToItem(_ref4) {
358
- var _ref4$align = _ref4.align,
359
- align = _ref4$align === void 0 ? 'auto' : _ref4$align,
360
- columnIndex = _ref4.columnIndex,
361
- rowIndex = _ref4.rowIndex;
362
- var _this$props2 = this.props,
363
- columnCount = _this$props2.columnCount,
364
- height = _this$props2.height,
365
- rowCount = _this$props2.rowCount,
366
- width = _this$props2.width;
367
- var _this$state = this.state,
368
- scrollLeft = _this$state.scrollLeft,
369
- scrollTop = _this$state.scrollTop;
370
- var scrollbarSize = getScrollbarSize();
371
-
372
- if (columnIndex !== undefined) {
373
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
374
- }
375
-
376
- if (rowIndex !== undefined) {
377
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
378
- }
379
-
380
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
381
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
382
- // to ensure it's fully visible.
383
- // But we only need to account for its size when it's actually visible.
384
-
385
- var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
386
- var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
387
- this.scrollTo({
388
- scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
389
- scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
390
- });
391
- };
392
-
393
- _proto.componentDidMount = function componentDidMount() {
394
- var _this$props3 = this.props,
395
- initialScrollLeft = _this$props3.initialScrollLeft,
396
- initialScrollTop = _this$props3.initialScrollTop;
397
-
398
- if (this._outerRef != null) {
399
- var outerRef = this._outerRef;
400
-
401
- if (typeof initialScrollLeft === 'number') {
402
- outerRef.scrollLeft = initialScrollLeft;
403
- }
404
-
405
- if (typeof initialScrollTop === 'number') {
406
- outerRef.scrollTop = initialScrollTop;
407
- }
408
- }
409
-
410
- this._callPropsCallbacks();
411
- };
412
-
413
- _proto.componentDidUpdate = function componentDidUpdate() {
414
- var direction = this.props.direction;
415
- var _this$state2 = this.state,
416
- scrollLeft = _this$state2.scrollLeft,
417
- scrollTop = _this$state2.scrollTop,
418
- scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
419
-
420
- if (scrollUpdateWasRequested && this._outerRef != null) {
421
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
422
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
423
- // So we need to determine which browser behavior we're dealing with, and mimic it.
424
- var outerRef = this._outerRef;
425
-
426
- if (direction === 'rtl') {
427
- switch (getRTLOffsetType()) {
428
- case 'negative':
429
- outerRef.scrollLeft = -scrollLeft;
430
- break;
431
-
432
- case 'positive-ascending':
433
- outerRef.scrollLeft = scrollLeft;
434
- break;
435
-
436
- default:
437
- var clientWidth = outerRef.clientWidth,
438
- scrollWidth = outerRef.scrollWidth;
439
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
440
- break;
441
- }
442
- } else {
443
- outerRef.scrollLeft = Math.max(0, scrollLeft);
444
- }
445
-
446
- outerRef.scrollTop = Math.max(0, scrollTop);
447
- }
448
-
449
- this._callPropsCallbacks();
450
- };
451
-
452
- _proto.componentWillUnmount = function componentWillUnmount() {
453
- if (this._resetIsScrollingTimeoutId !== null) {
454
- cancelTimeout(this._resetIsScrollingTimeoutId);
455
- }
456
- };
457
-
458
- _proto.render = function render() {
459
- var _this$props4 = this.props,
460
- children = _this$props4.children,
461
- className = _this$props4.className,
462
- columnCount = _this$props4.columnCount,
463
- direction = _this$props4.direction,
464
- height = _this$props4.height,
465
- innerRef = _this$props4.innerRef,
466
- innerElementType = _this$props4.innerElementType,
467
- innerTagName = _this$props4.innerTagName,
468
- itemData = _this$props4.itemData,
469
- _this$props4$itemKey = _this$props4.itemKey,
470
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
471
- outerElementType = _this$props4.outerElementType,
472
- outerTagName = _this$props4.outerTagName,
473
- rowCount = _this$props4.rowCount,
474
- style = _this$props4.style,
475
- useIsScrolling = _this$props4.useIsScrolling,
476
- width = _this$props4.width;
477
- var isScrolling = this.state.isScrolling;
478
-
479
- var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
480
- columnStartIndex = _this$_getHorizontalR[0],
481
- columnStopIndex = _this$_getHorizontalR[1];
482
-
483
- var _this$_getVerticalRan = this._getVerticalRangeToRender(),
484
- rowStartIndex = _this$_getVerticalRan[0],
485
- rowStopIndex = _this$_getVerticalRan[1];
486
-
487
- var items = [];
488
-
489
- if (columnCount > 0 && rowCount) {
490
- for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
491
- for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
492
- items.push(createElement(children, {
493
- columnIndex: _columnIndex,
494
- data: itemData,
495
- isScrolling: useIsScrolling ? isScrolling : undefined,
496
- key: itemKey({
497
- columnIndex: _columnIndex,
498
- data: itemData,
499
- rowIndex: _rowIndex
500
- }),
501
- rowIndex: _rowIndex,
502
- style: this._getItemStyle(_rowIndex, _columnIndex)
503
- }));
504
- }
505
- }
506
- } // Read this value AFTER items have been created,
507
- // So their actual sizes (if variable) are taken into consideration.
508
-
509
-
510
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
511
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
512
- return createElement(outerElementType || outerTagName || 'div', {
513
- className: className,
514
- onScroll: this._onScroll,
515
- ref: this._outerRefSetter,
516
- style: _extends({
517
- position: 'relative',
518
- height: height,
519
- width: width,
520
- overflow: 'auto',
521
- WebkitOverflowScrolling: 'touch',
522
- willChange: 'transform',
523
- direction: direction
524
- }, style)
525
- }, createElement(innerElementType || innerTagName || 'div', {
526
- children: items,
527
- ref: innerRef,
528
- style: {
529
- height: estimatedTotalHeight,
530
- pointerEvents: isScrolling ? 'none' : undefined,
531
- width: estimatedTotalWidth
532
- }
533
- }));
534
- };
535
-
536
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
537
- var _this$props5 = this.props,
538
- columnCount = _this$props5.columnCount,
539
- onItemsRendered = _this$props5.onItemsRendered,
540
- onScroll = _this$props5.onScroll,
541
- rowCount = _this$props5.rowCount;
542
-
543
- if (typeof onItemsRendered === 'function') {
544
- if (columnCount > 0 && rowCount > 0) {
545
- var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
546
- _overscanColumnStartIndex = _this$_getHorizontalR2[0],
547
- _overscanColumnStopIndex = _this$_getHorizontalR2[1],
548
- _visibleColumnStartIndex = _this$_getHorizontalR2[2],
549
- _visibleColumnStopIndex = _this$_getHorizontalR2[3];
550
-
551
- var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
552
- _overscanRowStartIndex = _this$_getVerticalRan2[0],
553
- _overscanRowStopIndex = _this$_getVerticalRan2[1],
554
- _visibleRowStartIndex = _this$_getVerticalRan2[2],
555
- _visibleRowStopIndex = _this$_getVerticalRan2[3];
556
-
557
- this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
558
- }
559
- }
560
-
561
- if (typeof onScroll === 'function') {
562
- var _this$state3 = this.state,
563
- _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
564
- _scrollLeft = _this$state3.scrollLeft,
565
- _scrollTop = _this$state3.scrollTop,
566
- _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
567
- _verticalScrollDirection = _this$state3.verticalScrollDirection;
568
-
569
- this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
570
- }
571
- }; // Lazily create and cache item styles while scrolling,
572
- // So that pure component sCU will prevent re-renders.
573
- // We maintain this cache, and pass a style prop rather than index,
574
- // So that List can clear cached styles and force item re-render if necessary.
575
-
576
-
577
- _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
578
- var _this$props6 = this.props,
579
- columnCount = _this$props6.columnCount,
580
- overscanColumnCount = _this$props6.overscanColumnCount,
581
- overscanColumnsCount = _this$props6.overscanColumnsCount,
582
- overscanCount = _this$props6.overscanCount,
583
- rowCount = _this$props6.rowCount;
584
- var _this$state4 = this.state,
585
- horizontalScrollDirection = _this$state4.horizontalScrollDirection,
586
- isScrolling = _this$state4.isScrolling,
587
- scrollLeft = _this$state4.scrollLeft;
588
- var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
589
-
590
- if (columnCount === 0 || rowCount === 0) {
591
- return [0, 0, 0, 0];
592
- }
593
-
594
- var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
595
- var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
596
- // If there isn't at least one extra item, tab loops back around.
597
-
598
- var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
599
- var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
600
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
601
- };
602
-
603
- _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
604
- var _this$props7 = this.props,
605
- columnCount = _this$props7.columnCount,
606
- overscanCount = _this$props7.overscanCount,
607
- overscanRowCount = _this$props7.overscanRowCount,
608
- overscanRowsCount = _this$props7.overscanRowsCount,
609
- rowCount = _this$props7.rowCount;
610
- var _this$state5 = this.state,
611
- isScrolling = _this$state5.isScrolling,
612
- verticalScrollDirection = _this$state5.verticalScrollDirection,
613
- scrollTop = _this$state5.scrollTop;
614
- var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
615
-
616
- if (columnCount === 0 || rowCount === 0) {
617
- return [0, 0, 0, 0];
618
- }
619
-
620
- var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
621
- var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
622
- // If there isn't at least one extra item, tab loops back around.
623
-
624
- var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
625
- var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
626
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
627
- };
628
-
629
- return Grid;
630
- }(PureComponent), _class.defaultProps = {
631
- direction: 'ltr',
632
- itemData: undefined,
633
- useIsScrolling: false
634
- }, _temp;
635
-}
636
-
637
-var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
638
- var children = _ref5.children,
639
- direction = _ref5.direction,
640
- height = _ref5.height,
641
- innerTagName = _ref5.innerTagName,
642
- outerTagName = _ref5.outerTagName,
643
- overscanColumnsCount = _ref5.overscanColumnsCount,
644
- overscanCount = _ref5.overscanCount,
645
- overscanRowsCount = _ref5.overscanRowsCount,
646
- width = _ref5.width;
647
- var instance = _ref6.instance;
648
-
649
- if (process.env.NODE_ENV !== 'production') {
650
- if (typeof overscanCount === 'number') {
651
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
652
- devWarningsOverscanCount.add(instance);
653
- console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
654
- }
655
- }
656
-
657
- if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
658
- if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
659
- devWarningsOverscanRowsColumnsCount.add(instance);
660
- console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
661
- }
662
- }
663
-
664
- if (innerTagName != null || outerTagName != null) {
665
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
666
- devWarningsTagName.add(instance);
667
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
668
- }
669
- }
670
-
671
- if (children == null) {
672
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
673
- }
674
-
675
- switch (direction) {
676
- case 'ltr':
677
- case 'rtl':
678
- // Valid values
679
- break;
680
-
681
- default:
682
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
683
- }
684
-
685
- if (typeof width !== 'number') {
686
- throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
687
- }
688
-
689
- if (typeof height !== 'number') {
690
- throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
691
- }
692
- }
693
-};
694
-
695
-var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
696
-
697
-var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
698
- var rowCount = _ref.rowCount;
699
- var rowMetadataMap = _ref2.rowMetadataMap,
700
- estimatedRowHeight = _ref2.estimatedRowHeight,
701
- lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
702
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
703
- // https://github.com/bvaughn/react-window/pull/138
704
-
705
- if (lastMeasuredRowIndex >= rowCount) {
706
- lastMeasuredRowIndex = rowCount - 1;
707
- }
708
-
709
- if (lastMeasuredRowIndex >= 0) {
710
- var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
711
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
712
- }
713
-
714
- var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
715
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
716
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
717
-};
718
-
719
-var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
720
- var columnCount = _ref3.columnCount;
721
- var columnMetadataMap = _ref4.columnMetadataMap,
722
- estimatedColumnWidth = _ref4.estimatedColumnWidth,
723
- lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
724
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
725
- // https://github.com/bvaughn/react-window/pull/138
726
-
727
- if (lastMeasuredColumnIndex >= columnCount) {
728
- lastMeasuredColumnIndex = columnCount - 1;
729
- }
730
-
731
- if (lastMeasuredColumnIndex >= 0) {
732
- var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
733
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
734
- }
735
-
736
- var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
737
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
738
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
739
-};
740
-
741
-var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
742
- var itemMetadataMap, itemSize, lastMeasuredIndex;
743
-
744
- if (itemType === 'column') {
745
- itemMetadataMap = instanceProps.columnMetadataMap;
746
- itemSize = props.columnWidth;
747
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
748
- } else {
749
- itemMetadataMap = instanceProps.rowMetadataMap;
750
- itemSize = props.rowHeight;
751
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
752
- }
753
-
754
- if (index > lastMeasuredIndex) {
755
- var offset = 0;
756
-
757
- if (lastMeasuredIndex >= 0) {
758
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
759
- offset = itemMetadata.offset + itemMetadata.size;
760
- }
761
-
762
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
763
- var size = itemSize(i);
764
- itemMetadataMap[i] = {
765
- offset: offset,
766
- size: size
767
- };
768
- offset += size;
769
- }
770
-
771
- if (itemType === 'column') {
772
- instanceProps.lastMeasuredColumnIndex = index;
773
- } else {
774
- instanceProps.lastMeasuredRowIndex = index;
775
- }
776
- }
777
-
778
- return itemMetadataMap[index];
779
-};
780
-
781
-var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
782
- var itemMetadataMap, lastMeasuredIndex;
783
-
784
- if (itemType === 'column') {
785
- itemMetadataMap = instanceProps.columnMetadataMap;
786
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
787
- } else {
788
- itemMetadataMap = instanceProps.rowMetadataMap;
789
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
790
- }
791
-
792
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
793
-
794
- if (lastMeasuredItemOffset >= offset) {
795
- // If we've already measured items within this range just use a binary search as it's faster.
796
- return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
797
- } else {
798
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
799
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
800
- // The overall complexity for this approach is O(log n).
801
- return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
802
- }
803
-};
804
-
805
-var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
806
- while (low <= high) {
807
- var middle = low + Math.floor((high - low) / 2);
808
- var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
809
-
810
- if (currentOffset === offset) {
811
- return middle;
812
- } else if (currentOffset < offset) {
813
- low = middle + 1;
814
- } else if (currentOffset > offset) {
815
- high = middle - 1;
816
- }
817
- }
818
-
819
- if (low > 0) {
820
- return low - 1;
821
- } else {
822
- return 0;
823
- }
824
-};
825
-
826
-var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
827
- var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
828
- var interval = 1;
829
-
830
- while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
831
- index += interval;
832
- interval *= 2;
833
- }
834
-
835
- return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
836
-};
837
-
838
-var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
839
- var size = itemType === 'column' ? props.width : props.height;
840
- var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
841
- // To ensure it reflects actual measurements instead of just estimates.
842
-
843
- var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
844
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
845
- var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
846
-
847
- if (align === 'smart') {
848
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
849
- align = 'auto';
850
- } else {
851
- align = 'center';
852
- }
853
- }
854
-
855
- switch (align) {
856
- case 'start':
857
- return maxOffset;
858
-
859
- case 'end':
860
- return minOffset;
861
-
862
- case 'center':
863
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
864
-
865
- case 'auto':
866
- default:
867
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
868
- return scrollOffset;
869
- } else if (minOffset > maxOffset) {
870
- // Because we only take into account the scrollbar size when calculating minOffset
871
- // this value can be larger than maxOffset when at the end of the list
872
- return minOffset;
873
- } else if (scrollOffset < minOffset) {
874
- return minOffset;
875
- } else {
876
- return maxOffset;
877
- }
878
-
879
- }
880
-};
881
-
882
-var VariableSizeGrid =
883
-/*#__PURE__*/
884
-createGridComponent({
885
- getColumnOffset: function getColumnOffset(props, index, instanceProps) {
886
- return getItemMetadata('column', props, index, instanceProps).offset;
887
- },
888
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
889
- return findNearestItem('column', props, instanceProps, scrollLeft);
890
- },
891
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
892
- var columnCount = props.columnCount,
893
- width = props.width;
894
- var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
895
- var maxOffset = scrollLeft + width;
896
- var offset = itemMetadata.offset + itemMetadata.size;
897
- var stopIndex = startIndex;
898
-
899
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
900
- stopIndex++;
901
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
902
- }
903
-
904
- return stopIndex;
905
- },
906
- getColumnWidth: function getColumnWidth(props, index, instanceProps) {
907
- return instanceProps.columnMetadataMap[index].size;
908
- },
909
- getEstimatedTotalHeight: getEstimatedTotalHeight,
910
- getEstimatedTotalWidth: getEstimatedTotalWidth,
911
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
912
- return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
913
- },
914
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
915
- return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
916
- },
917
- getRowOffset: function getRowOffset(props, index, instanceProps) {
918
- return getItemMetadata('row', props, index, instanceProps).offset;
919
- },
920
- getRowHeight: function getRowHeight(props, index, instanceProps) {
921
- return instanceProps.rowMetadataMap[index].size;
922
- },
923
- getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
924
- return findNearestItem('row', props, instanceProps, scrollTop);
925
- },
926
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
927
- var rowCount = props.rowCount,
928
- height = props.height;
929
- var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
930
- var maxOffset = scrollTop + height;
931
- var offset = itemMetadata.offset + itemMetadata.size;
932
- var stopIndex = startIndex;
933
-
934
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
935
- stopIndex++;
936
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
937
- }
938
-
939
- return stopIndex;
940
- },
941
- initInstanceProps: function initInstanceProps(props, instance) {
942
- var _ref5 = props,
943
- estimatedColumnWidth = _ref5.estimatedColumnWidth,
944
- estimatedRowHeight = _ref5.estimatedRowHeight;
945
- var instanceProps = {
946
- columnMetadataMap: {},
947
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
948
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
949
- lastMeasuredColumnIndex: -1,
950
- lastMeasuredRowIndex: -1,
951
- rowMetadataMap: {}
952
- };
953
-
954
- instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
955
- if (shouldForceUpdate === void 0) {
956
- shouldForceUpdate = true;
957
- }
958
-
959
- instance.resetAfterIndices({
960
- columnIndex: columnIndex,
961
- shouldForceUpdate: shouldForceUpdate
962
- });
963
- };
964
-
965
- instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
966
- if (shouldForceUpdate === void 0) {
967
- shouldForceUpdate = true;
968
- }
969
-
970
- instance.resetAfterIndices({
971
- rowIndex: rowIndex,
972
- shouldForceUpdate: shouldForceUpdate
973
- });
974
- };
975
-
976
- instance.resetAfterIndices = function (_ref6) {
977
- var columnIndex = _ref6.columnIndex,
978
- rowIndex = _ref6.rowIndex,
979
- _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
980
- shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
981
-
982
- if (typeof columnIndex === 'number') {
983
- instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
984
- }
985
-
986
- if (typeof rowIndex === 'number') {
987
- instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
988
- } // We could potentially optimize further by only evicting styles after this index,
989
- // But since styles are only cached while scrolling is in progress-
990
- // It seems an unnecessary optimization.
991
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
992
-
993
-
994
- instance._getItemStyleCache(-1);
995
-
996
- if (shouldForceUpdate) {
997
- instance.forceUpdate();
998
- }
999
- };
1000
-
1001
- return instanceProps;
1002
- },
1003
- shouldResetStyleCacheOnItemSizeChange: false,
1004
- validateProps: function validateProps(_ref7) {
1005
- var columnWidth = _ref7.columnWidth,
1006
- rowHeight = _ref7.rowHeight;
1007
-
1008
- if (process.env.NODE_ENV !== 'production') {
1009
- if (typeof columnWidth !== 'function') {
1010
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
1011
- } else if (typeof rowHeight !== 'function') {
1012
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
1013
- }
1014
- }
1015
- }
1016
-});
1017
-
1018
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
1019
-
1020
-var defaultItemKey$1 = function defaultItemKey(index, data) {
1021
- return index;
1022
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
1023
-// This avoids spamming the console every time a render happens.
1024
-
1025
-
1026
-var devWarningsDirection = null;
1027
-var devWarningsTagName$1 = null;
1028
-
1029
-if (process.env.NODE_ENV !== 'production') {
1030
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
1031
- devWarningsDirection =
1032
- /*#__PURE__*/
1033
- new WeakSet();
1034
- devWarningsTagName$1 =
1035
- /*#__PURE__*/
1036
- new WeakSet();
1037
- }
1038
-}
1039
-
1040
-function createListComponent(_ref) {
1041
- var _class, _temp;
1042
-
1043
- var getItemOffset = _ref.getItemOffset,
1044
- getEstimatedTotalSize = _ref.getEstimatedTotalSize,
1045
- getItemSize = _ref.getItemSize,
1046
- getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
1047
- getStartIndexForOffset = _ref.getStartIndexForOffset,
1048
- getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
1049
- initInstanceProps = _ref.initInstanceProps,
1050
- shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
1051
- validateProps = _ref.validateProps;
1052
- return _temp = _class =
1053
- /*#__PURE__*/
1054
- function (_PureComponent) {
1055
- _inheritsLoose(List, _PureComponent);
1056
-
1057
- // Always use explicit constructor for React components.
1058
- // It produces less code after transpilation. (#26)
1059
- // eslint-disable-next-line no-useless-constructor
1060
- function List(props) {
1061
- var _this;
1062
-
1063
- _this = _PureComponent.call(this, props) || this;
1064
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
1065
- _this._outerRef = void 0;
1066
- _this._resetIsScrollingTimeoutId = null;
1067
- _this.state = {
1068
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
1069
- isScrolling: false,
1070
- scrollDirection: 'forward',
1071
- scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
1072
- scrollUpdateWasRequested: false
1073
- };
1074
- _this._callOnItemsRendered = void 0;
1075
- _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
1076
- return _this.props.onItemsRendered({
1077
- overscanStartIndex: overscanStartIndex,
1078
- overscanStopIndex: overscanStopIndex,
1079
- visibleStartIndex: visibleStartIndex,
1080
- visibleStopIndex: visibleStopIndex
1081
- });
1082
- });
1083
- _this._callOnScroll = void 0;
1084
- _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
1085
- return _this.props.onScroll({
1086
- scrollDirection: scrollDirection,
1087
- scrollOffset: scrollOffset,
1088
- scrollUpdateWasRequested: scrollUpdateWasRequested
1089
- });
1090
- });
1091
- _this._getItemStyle = void 0;
1092
-
1093
- _this._getItemStyle = function (index) {
1094
- var _this$props = _this.props,
1095
- direction = _this$props.direction,
1096
- itemSize = _this$props.itemSize,
1097
- layout = _this$props.layout;
1098
-
1099
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
1100
-
1101
- var style;
1102
-
1103
- if (itemStyleCache.hasOwnProperty(index)) {
1104
- style = itemStyleCache[index];
1105
- } else {
1106
- var _style;
1107
-
1108
- var _offset = getItemOffset(_this.props, index, _this._instanceProps);
1109
-
1110
- var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
1111
-
1112
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1113
- itemStyleCache[index] = style = (_style = {
1114
- position: 'absolute'
1115
- }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
1116
- }
1117
-
1118
- return style;
1119
- };
1120
-
1121
- _this._getItemStyleCache = void 0;
1122
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
1123
- return {};
1124
- });
1125
-
1126
- _this._onScrollHorizontal = function (event) {
1127
- var _event$currentTarget = event.currentTarget,
1128
- clientWidth = _event$currentTarget.clientWidth,
1129
- scrollLeft = _event$currentTarget.scrollLeft,
1130
- scrollWidth = _event$currentTarget.scrollWidth;
1131
-
1132
- // Force flush sync for scroll updates to reduce visual checkerboarding.
1133
- flushSync(() => {
1134
- _this.setState(function (prevState) {
1135
- if (prevState.scrollOffset === scrollLeft) {
1136
- // Scroll position may have been updated by cDM/cDU,
1137
- // In which case we don't need to trigger another render,
1138
- // And we don't want to update state.isScrolling.
1139
- return null;
1140
- }
1141
-
1142
- var direction = _this.props.direction;
1143
- var scrollOffset = scrollLeft;
1144
-
1145
- if (direction === 'rtl') {
1146
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
1147
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
1148
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
1149
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
1150
- switch (getRTLOffsetType()) {
1151
- case 'negative':
1152
- scrollOffset = -scrollLeft;
1153
- break;
1154
-
1155
- case 'positive-descending':
1156
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
1157
- break;
1158
- }
1159
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
1160
-
1161
-
1162
- scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
1163
- return {
1164
- isScrolling: true,
1165
- scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
1166
- scrollOffset: scrollOffset,
1167
- scrollUpdateWasRequested: false
1168
- };
1169
- }, _this._resetIsScrollingDebounced);
1170
- });
1171
- };
1172
-
1173
- _this._onScrollVertical = function (event) {
1174
- var _event$currentTarget2 = event.currentTarget,
1175
- clientHeight = _event$currentTarget2.clientHeight,
1176
- scrollHeight = _event$currentTarget2.scrollHeight,
1177
- scrollTop = _event$currentTarget2.scrollTop;
1178
-
1179
- // Force flush sync for scroll updates to reduce visual checkerboarding.
1180
- flushSync(() => {
1181
- _this.setState(function (prevState) {
1182
- if (prevState.scrollOffset === scrollTop) {
1183
- // Scroll position may have been updated by cDM/cDU,
1184
- // In which case we don't need to trigger another render,
1185
- // And we don't want to update state.isScrolling.
1186
- return null;
1187
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
1188
-
1189
-
1190
- var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
1191
- return {
1192
- isScrolling: true,
1193
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
1194
- scrollOffset: scrollOffset,
1195
- scrollUpdateWasRequested: false
1196
- };
1197
- }, _this._resetIsScrollingDebounced);
1198
- });
1199
- };
1200
-
1201
- _this._outerRefSetter = function (ref) {
1202
- var outerRef = _this.props.outerRef;
1203
- _this._outerRef = ref;
1204
-
1205
- if (typeof outerRef === 'function') {
1206
- outerRef(ref);
1207
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
1208
- outerRef.current = ref;
1209
- }
1210
- };
1211
-
1212
- _this._resetIsScrollingDebounced = function () {
1213
- if (_this._resetIsScrollingTimeoutId !== null) {
1214
- cancelTimeout(_this._resetIsScrollingTimeoutId);
1215
- }
1216
-
1217
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
1218
- };
1219
-
1220
- _this._resetIsScrolling = function () {
1221
- _this._resetIsScrollingTimeoutId = null;
1222
-
1223
- _this.setState({
1224
- isScrolling: false
1225
- }, function () {
1226
- // Clear style cache after state update has been committed.
1227
- // This way we don't break pure sCU for items that don't use isScrolling param.
1228
- _this._getItemStyleCache(-1, null);
1229
- });
1230
- };
1231
-
1232
- return _this;
1233
- }
1234
-
1235
- List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
1236
- validateSharedProps$1(nextProps, prevState);
1237
- validateProps(nextProps);
1238
- return null;
1239
- };
1240
-
1241
- var _proto = List.prototype;
1242
-
1243
- _proto.scrollTo = function scrollTo(scrollOffset) {
1244
- scrollOffset = Math.max(0, scrollOffset);
1245
- this.setState(function (prevState) {
1246
- if (prevState.scrollOffset === scrollOffset) {
1247
- return null;
1248
- }
1249
-
1250
- return {
1251
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
1252
- scrollOffset: scrollOffset,
1253
- scrollUpdateWasRequested: true
1254
- };
1255
- }, this._resetIsScrollingDebounced);
1256
- };
1257
-
1258
- _proto.scrollToItem = function scrollToItem(index, align) {
1259
- if (align === void 0) {
1260
- align = 'auto';
1261
- }
1262
-
1263
- var itemCount = this.props.itemCount;
1264
- var scrollOffset = this.state.scrollOffset;
1265
- index = Math.max(0, Math.min(index, itemCount - 1));
1266
- this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
1267
- };
1268
-
1269
- _proto.componentDidMount = function componentDidMount() {
1270
- var _this$props2 = this.props,
1271
- direction = _this$props2.direction,
1272
- initialScrollOffset = _this$props2.initialScrollOffset,
1273
- layout = _this$props2.layout;
1274
-
1275
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
1276
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
1277
-
1278
- if (direction === 'horizontal' || layout === 'horizontal') {
1279
- outerRef.scrollLeft = initialScrollOffset;
1280
- } else {
1281
- outerRef.scrollTop = initialScrollOffset;
1282
- }
1283
- }
1284
-
1285
- this._callPropsCallbacks();
1286
- };
1287
-
1288
- _proto.componentDidUpdate = function componentDidUpdate() {
1289
- var _this$props3 = this.props,
1290
- direction = _this$props3.direction,
1291
- layout = _this$props3.layout;
1292
- var _this$state = this.state,
1293
- scrollOffset = _this$state.scrollOffset,
1294
- scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
1295
-
1296
- if (scrollUpdateWasRequested && this._outerRef != null) {
1297
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
1298
-
1299
- if (direction === 'horizontal' || layout === 'horizontal') {
1300
- if (direction === 'rtl') {
1301
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
1302
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
1303
- // So we need to determine which browser behavior we're dealing with, and mimic it.
1304
- switch (getRTLOffsetType()) {
1305
- case 'negative':
1306
- outerRef.scrollLeft = -scrollOffset;
1307
- break;
1308
-
1309
- case 'positive-ascending':
1310
- outerRef.scrollLeft = scrollOffset;
1311
- break;
1312
-
1313
- default:
1314
- var clientWidth = outerRef.clientWidth,
1315
- scrollWidth = outerRef.scrollWidth;
1316
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
1317
- break;
1318
- }
1319
- } else {
1320
- outerRef.scrollLeft = scrollOffset;
1321
- }
1322
- } else {
1323
- outerRef.scrollTop = scrollOffset;
1324
- }
1325
- }
1326
-
1327
- this._callPropsCallbacks();
1328
- };
1329
-
1330
- _proto.componentWillUnmount = function componentWillUnmount() {
1331
- if (this._resetIsScrollingTimeoutId !== null) {
1332
- cancelTimeout(this._resetIsScrollingTimeoutId);
1333
- }
1334
- };
1335
-
1336
- _proto.render = function render() {
1337
- var _this$props4 = this.props,
1338
- children = _this$props4.children,
1339
- className = _this$props4.className,
1340
- direction = _this$props4.direction,
1341
- height = _this$props4.height,
1342
- innerRef = _this$props4.innerRef,
1343
- innerElementType = _this$props4.innerElementType,
1344
- innerTagName = _this$props4.innerTagName,
1345
- itemCount = _this$props4.itemCount,
1346
- itemData = _this$props4.itemData,
1347
- _this$props4$itemKey = _this$props4.itemKey,
1348
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
1349
- layout = _this$props4.layout,
1350
- outerElementType = _this$props4.outerElementType,
1351
- outerTagName = _this$props4.outerTagName,
1352
- style = _this$props4.style,
1353
- useIsScrolling = _this$props4.useIsScrolling,
1354
- width = _this$props4.width;
1355
- var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
1356
-
1357
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1358
- var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
1359
-
1360
- var _this$_getRangeToRend = this._getRangeToRender(),
1361
- startIndex = _this$_getRangeToRend[0],
1362
- stopIndex = _this$_getRangeToRend[1];
1363
-
1364
- var items = [];
1365
-
1366
- if (itemCount > 0) {
1367
- for (var _index = startIndex; _index <= stopIndex; _index++) {
1368
- items.push(createElement(children, {
1369
- data: itemData,
1370
- key: itemKey(_index, itemData),
1371
- index: _index,
1372
- isScrolling: useIsScrolling ? isScrolling : undefined,
1373
- style: this._getItemStyle(_index)
1374
- }));
1375
- }
1376
- } // Read this value AFTER items have been created,
1377
- // So their actual sizes (if variable) are taken into consideration.
1378
-
1379
-
1380
- var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
1381
- return createElement(outerElementType || outerTagName || 'div', {
1382
- className: className,
1383
- onScroll: onScroll,
1384
- ref: this._outerRefSetter,
1385
- style: _extends({
1386
- position: 'relative',
1387
- height: height,
1388
- width: width,
1389
- overflow: 'auto',
1390
- WebkitOverflowScrolling: 'touch',
1391
- willChange: 'transform',
1392
- direction: direction
1393
- }, style)
1394
- }, createElement(innerElementType || innerTagName || 'div', {
1395
- children: items,
1396
- ref: innerRef,
1397
- style: {
1398
- height: isHorizontal ? '100%' : estimatedTotalSize,
1399
- pointerEvents: isScrolling ? 'none' : undefined,
1400
- width: isHorizontal ? estimatedTotalSize : '100%'
1401
- }
1402
- }));
1403
- };
1404
-
1405
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
1406
- if (typeof this.props.onItemsRendered === 'function') {
1407
- var itemCount = this.props.itemCount;
1408
-
1409
- if (itemCount > 0) {
1410
- var _this$_getRangeToRend2 = this._getRangeToRender(),
1411
- _overscanStartIndex = _this$_getRangeToRend2[0],
1412
- _overscanStopIndex = _this$_getRangeToRend2[1],
1413
- _visibleStartIndex = _this$_getRangeToRend2[2],
1414
- _visibleStopIndex = _this$_getRangeToRend2[3];
1415
-
1416
- this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
1417
- }
1418
- }
1419
-
1420
- if (typeof this.props.onScroll === 'function') {
1421
- var _this$state2 = this.state,
1422
- _scrollDirection = _this$state2.scrollDirection,
1423
- _scrollOffset = _this$state2.scrollOffset,
1424
- _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
1425
-
1426
- this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
1427
- }
1428
- }; // Lazily create and cache item styles while scrolling,
1429
- // So that pure component sCU will prevent re-renders.
1430
- // We maintain this cache, and pass a style prop rather than index,
1431
- // So that List can clear cached styles and force item re-render if necessary.
1432
-
1433
-
1434
- _proto._getRangeToRender = function _getRangeToRender() {
1435
- var _this$props5 = this.props,
1436
- itemCount = _this$props5.itemCount,
1437
- overscanCount = _this$props5.overscanCount;
1438
- var _this$state3 = this.state,
1439
- isScrolling = _this$state3.isScrolling,
1440
- scrollDirection = _this$state3.scrollDirection,
1441
- scrollOffset = _this$state3.scrollOffset;
1442
-
1443
- if (itemCount === 0) {
1444
- return [0, 0, 0, 0];
1445
- }
1446
-
1447
- var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
1448
- var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
1449
- // If there isn't at least one extra item, tab loops back around.
1450
-
1451
- var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
1452
- var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
1453
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
1454
- };
1455
-
1456
- return List;
1457
- }(PureComponent), _class.defaultProps = {
1458
- direction: 'ltr',
1459
- itemData: undefined,
1460
- layout: 'vertical',
1461
- overscanCount: 2,
1462
- useIsScrolling: false
1463
- }, _temp;
1464
-} // NOTE: I considered further wrapping individual items with a pure ListItem component.
1465
-// This would avoid ever calling the render function for the same index more than once,
1466
-// But it would also add the overhead of a lot of components/fibers.
1467
-// I assume people already do this (render function returning a class component),
1468
-// So my doing it would just unnecessarily double the wrappers.
1469
-
1470
-var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
1471
- var children = _ref2.children,
1472
- direction = _ref2.direction,
1473
- height = _ref2.height,
1474
- layout = _ref2.layout,
1475
- innerTagName = _ref2.innerTagName,
1476
- outerTagName = _ref2.outerTagName,
1477
- width = _ref2.width;
1478
- var instance = _ref3.instance;
1479
-
1480
- if (process.env.NODE_ENV !== 'production') {
1481
- if (innerTagName != null || outerTagName != null) {
1482
- if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
1483
- devWarningsTagName$1.add(instance);
1484
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
1485
- }
1486
- } // TODO Deprecate direction "horizontal"
1487
-
1488
-
1489
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1490
-
1491
- switch (direction) {
1492
- case 'horizontal':
1493
- case 'vertical':
1494
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
1495
- devWarningsDirection.add(instance);
1496
- console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
1497
- }
1498
-
1499
- break;
1500
-
1501
- case 'ltr':
1502
- case 'rtl':
1503
- // Valid values
1504
- break;
1505
-
1506
- default:
1507
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
1508
- }
1509
-
1510
- switch (layout) {
1511
- case 'horizontal':
1512
- case 'vertical':
1513
- // Valid values
1514
- break;
1515
-
1516
- default:
1517
- throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
1518
- }
1519
-
1520
- if (children == null) {
1521
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
1522
- }
1523
-
1524
- if (isHorizontal && typeof width !== 'number') {
1525
- throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
1526
- } else if (!isHorizontal && typeof height !== 'number') {
1527
- throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
1528
- }
1529
- }
1530
-};
1531
-
1532
-var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
1533
-
1534
-var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
1535
- var _ref = props,
1536
- itemSize = _ref.itemSize;
1537
- var itemMetadataMap = instanceProps.itemMetadataMap,
1538
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
1539
-
1540
- if (index > lastMeasuredIndex) {
1541
- var offset = 0;
1542
-
1543
- if (lastMeasuredIndex >= 0) {
1544
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
1545
- offset = itemMetadata.offset + itemMetadata.size;
1546
- }
1547
-
1548
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
1549
- var size = itemSize(i);
1550
- itemMetadataMap[i] = {
1551
- offset: offset,
1552
- size: size
1553
- };
1554
- offset += size;
1555
- }
1556
-
1557
- instanceProps.lastMeasuredIndex = index;
1558
- }
1559
-
1560
- return itemMetadataMap[index];
1561
-};
1562
-
1563
-var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
1564
- var itemMetadataMap = instanceProps.itemMetadataMap,
1565
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
1566
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
1567
-
1568
- if (lastMeasuredItemOffset >= offset) {
1569
- // If we've already measured items within this range just use a binary search as it's faster.
1570
- return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
1571
- } else {
1572
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
1573
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
1574
- // The overall complexity for this approach is O(log n).
1575
- return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
1576
- }
1577
-};
1578
-
1579
-var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
1580
- while (low <= high) {
1581
- var middle = low + Math.floor((high - low) / 2);
1582
- var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
1583
-
1584
- if (currentOffset === offset) {
1585
- return middle;
1586
- } else if (currentOffset < offset) {
1587
- low = middle + 1;
1588
- } else if (currentOffset > offset) {
1589
- high = middle - 1;
1590
- }
1591
- }
1592
-
1593
- if (low > 0) {
1594
- return low - 1;
1595
- } else {
1596
- return 0;
1597
- }
1598
-};
1599
-
1600
-var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
1601
- var itemCount = props.itemCount;
1602
- var interval = 1;
1603
-
1604
- while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
1605
- index += interval;
1606
- interval *= 2;
1607
- }
1608
-
1609
- return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
1610
-};
1611
-
1612
-var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
1613
- var itemCount = _ref2.itemCount;
1614
- var itemMetadataMap = _ref3.itemMetadataMap,
1615
- estimatedItemSize = _ref3.estimatedItemSize,
1616
- lastMeasuredIndex = _ref3.lastMeasuredIndex;
1617
- var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
1618
- // https://github.com/bvaughn/react-window/pull/138
1619
-
1620
- if (lastMeasuredIndex >= itemCount) {
1621
- lastMeasuredIndex = itemCount - 1;
1622
- }
1623
-
1624
- if (lastMeasuredIndex >= 0) {
1625
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
1626
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
1627
- }
1628
-
1629
- var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
1630
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
1631
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
1632
-};
1633
-
1634
-var VariableSizeList =
1635
-/*#__PURE__*/
1636
-createListComponent({
1637
- getItemOffset: function getItemOffset(props, index, instanceProps) {
1638
- return getItemMetadata$1(props, index, instanceProps).offset;
1639
- },
1640
- getItemSize: function getItemSize(props, index, instanceProps) {
1641
- return instanceProps.itemMetadataMap[index].size;
1642
- },
1643
- getEstimatedTotalSize: getEstimatedTotalSize,
1644
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
1645
- var direction = props.direction,
1646
- height = props.height,
1647
- layout = props.layout,
1648
- width = props.width; // TODO Deprecate direction "horizontal"
1649
-
1650
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1651
- var size = isHorizontal ? width : height;
1652
- var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
1653
- // To ensure it reflects actual measurements instead of just estimates.
1654
-
1655
- var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
1656
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
1657
- var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
1658
-
1659
- if (align === 'smart') {
1660
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
1661
- align = 'auto';
1662
- } else {
1663
- align = 'center';
1664
- }
1665
- }
1666
-
1667
- switch (align) {
1668
- case 'start':
1669
- return maxOffset;
1670
-
1671
- case 'end':
1672
- return minOffset;
1673
-
1674
- case 'center':
1675
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
1676
-
1677
- case 'auto':
1678
- default:
1679
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
1680
- return scrollOffset;
1681
- } else if (scrollOffset < minOffset) {
1682
- return minOffset;
1683
- } else {
1684
- return maxOffset;
1685
- }
1686
-
1687
- }
1688
- },
1689
- getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
1690
- return findNearestItem$1(props, instanceProps, offset);
1691
- },
1692
- getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
1693
- var direction = props.direction,
1694
- height = props.height,
1695
- itemCount = props.itemCount,
1696
- layout = props.layout,
1697
- width = props.width; // TODO Deprecate direction "horizontal"
1698
-
1699
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1700
- var size = isHorizontal ? width : height;
1701
- var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
1702
- var maxOffset = scrollOffset + size;
1703
- var offset = itemMetadata.offset + itemMetadata.size;
1704
- var stopIndex = startIndex;
1705
-
1706
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
1707
- stopIndex++;
1708
- offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
1709
- }
1710
-
1711
- return stopIndex;
1712
- },
1713
- initInstanceProps: function initInstanceProps(props, instance) {
1714
- var _ref4 = props,
1715
- estimatedItemSize = _ref4.estimatedItemSize;
1716
- var instanceProps = {
1717
- itemMetadataMap: {},
1718
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
1719
- lastMeasuredIndex: -1
1720
- };
1721
-
1722
- instance.resetAfterIndex = function (index, shouldForceUpdate) {
1723
- if (shouldForceUpdate === void 0) {
1724
- shouldForceUpdate = true;
1725
- }
1726
-
1727
- instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
1728
- // But since styles are only cached while scrolling is in progress-
1729
- // It seems an unnecessary optimization.
1730
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
1731
-
1732
- instance._getItemStyleCache(-1);
1733
-
1734
- if (shouldForceUpdate) {
1735
- instance.forceUpdate();
1736
- }
1737
- };
1738
-
1739
- return instanceProps;
1740
- },
1741
- shouldResetStyleCacheOnItemSizeChange: false,
1742
- validateProps: function validateProps(_ref5) {
1743
- var itemSize = _ref5.itemSize;
1744
-
1745
- if (process.env.NODE_ENV !== 'production') {
1746
- if (typeof itemSize !== 'function') {
1747
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
1748
- }
1749
- }
1750
- }
1751
-});
1752
-
1753
-var FixedSizeGrid =
1754
-/*#__PURE__*/
1755
-createGridComponent({
1756
- getColumnOffset: function getColumnOffset(_ref, index) {
1757
- var columnWidth = _ref.columnWidth;
1758
- return index * columnWidth;
1759
- },
1760
- getColumnWidth: function getColumnWidth(_ref2, index) {
1761
- var columnWidth = _ref2.columnWidth;
1762
- return columnWidth;
1763
- },
1764
- getRowOffset: function getRowOffset(_ref3, index) {
1765
- var rowHeight = _ref3.rowHeight;
1766
- return index * rowHeight;
1767
- },
1768
- getRowHeight: function getRowHeight(_ref4, index) {
1769
- var rowHeight = _ref4.rowHeight;
1770
- return rowHeight;
1771
- },
1772
- getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
1773
- var rowCount = _ref5.rowCount,
1774
- rowHeight = _ref5.rowHeight;
1775
- return rowHeight * rowCount;
1776
- },
1777
- getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
1778
- var columnCount = _ref6.columnCount,
1779
- columnWidth = _ref6.columnWidth;
1780
- return columnWidth * columnCount;
1781
- },
1782
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
1783
- var columnCount = _ref7.columnCount,
1784
- columnWidth = _ref7.columnWidth,
1785
- width = _ref7.width;
1786
- var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
1787
- var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
1788
- var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
1789
-
1790
- if (align === 'smart') {
1791
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
1792
- align = 'auto';
1793
- } else {
1794
- align = 'center';
1795
- }
1796
- }
1797
-
1798
- switch (align) {
1799
- case 'start':
1800
- return maxOffset;
1801
-
1802
- case 'end':
1803
- return minOffset;
1804
-
1805
- case 'center':
1806
- // "Centered" offset is usually the average of the min and max.
1807
- // But near the edges of the list, this doesn't hold true.
1808
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1809
-
1810
- if (middleOffset < Math.ceil(width / 2)) {
1811
- return 0; // near the beginning
1812
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
1813
- return lastColumnOffset; // near the end
1814
- } else {
1815
- return middleOffset;
1816
- }
1817
-
1818
- case 'auto':
1819
- default:
1820
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
1821
- return scrollLeft;
1822
- } else if (minOffset > maxOffset) {
1823
- // Because we only take into account the scrollbar size when calculating minOffset
1824
- // this value can be larger than maxOffset when at the end of the list
1825
- return minOffset;
1826
- } else if (scrollLeft < minOffset) {
1827
- return minOffset;
1828
- } else {
1829
- return maxOffset;
1830
- }
1831
-
1832
- }
1833
- },
1834
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
1835
- var rowHeight = _ref8.rowHeight,
1836
- height = _ref8.height,
1837
- rowCount = _ref8.rowCount;
1838
- var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
1839
- var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
1840
- var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
1841
-
1842
- if (align === 'smart') {
1843
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
1844
- align = 'auto';
1845
- } else {
1846
- align = 'center';
1847
- }
1848
- }
1849
-
1850
- switch (align) {
1851
- case 'start':
1852
- return maxOffset;
1853
-
1854
- case 'end':
1855
- return minOffset;
1856
-
1857
- case 'center':
1858
- // "Centered" offset is usually the average of the min and max.
1859
- // But near the edges of the list, this doesn't hold true.
1860
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1861
-
1862
- if (middleOffset < Math.ceil(height / 2)) {
1863
- return 0; // near the beginning
1864
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
1865
- return lastRowOffset; // near the end
1866
- } else {
1867
- return middleOffset;
1868
- }
1869
-
1870
- case 'auto':
1871
- default:
1872
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
1873
- return scrollTop;
1874
- } else if (minOffset > maxOffset) {
1875
- // Because we only take into account the scrollbar size when calculating minOffset
1876
- // this value can be larger than maxOffset when at the end of the list
1877
- return minOffset;
1878
- } else if (scrollTop < minOffset) {
1879
- return minOffset;
1880
- } else {
1881
- return maxOffset;
1882
- }
1883
-
1884
- }
1885
- },
1886
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
1887
- var columnWidth = _ref9.columnWidth,
1888
- columnCount = _ref9.columnCount;
1889
- return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
1890
- },
1891
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
1892
- var columnWidth = _ref10.columnWidth,
1893
- columnCount = _ref10.columnCount,
1894
- width = _ref10.width;
1895
- var left = startIndex * columnWidth;
1896
- var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
1897
- return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
1898
- ));
1899
- },
1900
- getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
1901
- var rowHeight = _ref11.rowHeight,
1902
- rowCount = _ref11.rowCount;
1903
- return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
1904
- },
1905
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
1906
- var rowHeight = _ref12.rowHeight,
1907
- rowCount = _ref12.rowCount,
1908
- height = _ref12.height;
1909
- var top = startIndex * rowHeight;
1910
- var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
1911
- return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
1912
- ));
1913
- },
1914
- initInstanceProps: function initInstanceProps(props) {// Noop
1915
- },
1916
- shouldResetStyleCacheOnItemSizeChange: true,
1917
- validateProps: function validateProps(_ref13) {
1918
- var columnWidth = _ref13.columnWidth,
1919
- rowHeight = _ref13.rowHeight;
1920
-
1921
- if (process.env.NODE_ENV !== 'production') {
1922
- if (typeof columnWidth !== 'number') {
1923
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
1924
- }
1925
-
1926
- if (typeof rowHeight !== 'number') {
1927
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
1928
- }
1929
- }
1930
- }
1931
-});
1932
-
1933
-var FixedSizeList =
1934
-/*#__PURE__*/
1935
-createListComponent({
1936
- getItemOffset: function getItemOffset(_ref, index) {
1937
- var itemSize = _ref.itemSize;
1938
- return index * itemSize;
1939
- },
1940
- getItemSize: function getItemSize(_ref2, index) {
1941
- var itemSize = _ref2.itemSize;
1942
- return itemSize;
1943
- },
1944
- getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
1945
- var itemCount = _ref3.itemCount,
1946
- itemSize = _ref3.itemSize;
1947
- return itemSize * itemCount;
1948
- },
1949
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
1950
- var direction = _ref4.direction,
1951
- height = _ref4.height,
1952
- itemCount = _ref4.itemCount,
1953
- itemSize = _ref4.itemSize,
1954
- layout = _ref4.layout,
1955
- width = _ref4.width;
1956
- // TODO Deprecate direction "horizontal"
1957
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
1958
- var size = isHorizontal ? width : height;
1959
- var lastItemOffset = Math.max(0, itemCount * itemSize - size);
1960
- var maxOffset = Math.min(lastItemOffset, index * itemSize);
1961
- var minOffset = Math.max(0, index * itemSize - size + itemSize);
1962
-
1963
- if (align === 'smart') {
1964
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
1965
- align = 'auto';
1966
- } else {
1967
- align = 'center';
1968
- }
1969
- }
1970
-
1971
- switch (align) {
1972
- case 'start':
1973
- return maxOffset;
1974
-
1975
- case 'end':
1976
- return minOffset;
1977
-
1978
- case 'center':
1979
- {
1980
- // "Centered" offset is usually the average of the min and max.
1981
- // But near the edges of the list, this doesn't hold true.
1982
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
1983
-
1984
- if (middleOffset < Math.ceil(size / 2)) {
1985
- return 0; // near the beginning
1986
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
1987
- return lastItemOffset; // near the end
1988
- } else {
1989
- return middleOffset;
1990
- }
1991
- }
1992
-
1993
- case 'auto':
1994
- default:
1995
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
1996
- return scrollOffset;
1997
- } else if (scrollOffset < minOffset) {
1998
- return minOffset;
1999
- } else {
2000
- return maxOffset;
2001
- }
2002
-
2003
- }
2004
- },
2005
- getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
2006
- var itemCount = _ref5.itemCount,
2007
- itemSize = _ref5.itemSize;
2008
- return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
2009
- },
2010
- getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
2011
- var direction = _ref6.direction,
2012
- height = _ref6.height,
2013
- itemCount = _ref6.itemCount,
2014
- itemSize = _ref6.itemSize,
2015
- layout = _ref6.layout,
2016
- width = _ref6.width;
2017
- // TODO Deprecate direction "horizontal"
2018
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
2019
- var offset = startIndex * itemSize;
2020
- var size = isHorizontal ? width : height;
2021
- var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
2022
- return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
2023
- ));
2024
- },
2025
- initInstanceProps: function initInstanceProps(props) {// Noop
2026
- },
2027
- shouldResetStyleCacheOnItemSizeChange: true,
2028
- validateProps: function validateProps(_ref7) {
2029
- var itemSize = _ref7.itemSize;
2030
-
2031
- if (process.env.NODE_ENV !== 'production') {
2032
- if (typeof itemSize !== 'number') {
2033
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
2034
- }
2035
- }
2036
- }
2037
-});
2038
-
2039
-// Pulled from react-compat
2040
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
2041
-function shallowDiffers(prev, next) {
2042
- for (var attribute in prev) {
2043
- if (!(attribute in next)) {
2044
- return true;
2045
- }
2046
- }
2047
-
2048
- for (var _attribute in next) {
2049
- if (prev[_attribute] !== next[_attribute]) {
2050
- return true;
2051
- }
2052
- }
2053
-
2054
- return false;
2055
-}
2056
-
2057
-// It knows to compare individual style props and ignore the wrapper object.
2058
-// See https://reactjs.org/docs/react-api.html#reactmemo
2059
-
2060
-function areEqual(prevProps, nextProps) {
2061
- var prevStyle = prevProps.style,
2062
- prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
2063
-
2064
- var nextStyle = nextProps.style,
2065
- nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
2066
-
2067
- return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
2068
-}
2069
-
2070
-// It knows to compare individual style props and ignore the wrapper object.
2071
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
2072
-
2073
-function shouldComponentUpdate(nextProps, nextState) {
2074
- return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
2075
-}
2076
-
2077
-export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
2078
-//# sourceMappingURL=index.esm.js.map
packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow
deleted
-3
@@ -1,3 +0,0 @@
1
-// @flow
2
-
3
-export * from '../src';
packages/react-devtools-shared/src/node_modules/react-window/package.json
deleted
-110
@@ -1,110 +0,0 @@
1
-{
2
- "name": "react-window",
3
- "version": "1.8.5",
4
- "description":
5
- "React components for efficiently rendering large, scrollable lists and tabular data",
6
- "author":
7
- "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
8
- "contributors": [
9
- "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)"
10
- ],
11
- "license": "MIT",
12
- "homepage": "http://react-window.now.sh/",
13
- "repository": {
14
- "type": "git",
15
- "url": "https://github.com/bvaughn/react-window.git"
16
- },
17
- "bugs": {
18
- "url": "https://github.com/bvaughn/react-window/issues"
19
- },
20
- "engines": {
21
- "node": ">8.0.0"
22
- },
23
- "keywords": [
24
- "react",
25
- "reactjs",
26
- "virtual",
27
- "window",
28
- "windowed",
29
- "list",
30
- "scrolling",
31
- "infinite",
32
- "virtualized",
33
- "table",
34
- "grid",
35
- "spreadsheet"
36
- ],
37
- "main": "dist/index.cjs.js",
38
- "module": "dist/index.esm.js",
39
- "files": ["dist", "src/*.js"],
40
- "scripts": {
41
- "flow": "flow check --max-warnings=0 src && flow check website",
42
- "precommit": "lint-staged",
43
- "prettier": "prettier --write '**/*.{js,json,css}'",
44
- "linc": "lint-staged",
45
- "lint": "eslint '**/*.js'",
46
- "test": "cross-env CI=1 react-scripts test --env=jsdom",
47
- "test:watch": "react-scripts test --env=jsdom",
48
- "build:flow":
49
- "cp flow-template dist/index.cjs.js.flow && cp flow-template dist/index.esm.js.flow",
50
- "build:source": "rollup -c",
51
- "build": "del dist && mkdir dist && yarn build:flow && yarn build:source",
52
- "start": "rollup -c -w",
53
- "prepare": "yarn run build",
54
- "website:build": "cd website && yarn build",
55
- "website:deploy": "cd website && yarn deploy",
56
- "website:run": "cd website && yarn start"
57
- },
58
- "lint-staged": {
59
- "{website,src}/**/*.{js,json,css}": ["prettier --write", "git add"],
60
- "**/*.js": "eslint --max-warnings 0"
61
- },
62
- "dependencies": {
63
- "@babel/runtime": "^7.0.0",
64
- "memoize-one": ">=3.1.1 <6"
65
- },
66
- "peerDependencies": {
67
- "react": "^15.0.0 || ^16.0.0",
68
- "react-dom": "^15.0.0 || ^16.0.0"
69
- },
70
- "devDependencies": {
71
- "@babel/core": "^7.0.0",
72
- "@babel/plugin-proposal-class-properties": "^7.0.0",
73
- "@babel/plugin-transform-runtime": "^7.0.0",
74
- "@babel/preset-env": "^7.0.0",
75
- "@babel/preset-flow": "^7.0.0",
76
- "babel-core": "^7.0.0-bridge.0",
77
- "babel-eslint": "^9.0.0",
78
- "babel-plugin-annotate-pure-calls": "^0.3.0",
79
- "cross-env": "^5.1.4",
80
- "del-cli": "^1.1.0",
81
- "eslint": "^4.19.1",
82
- "eslint-config-prettier": "^2.9.0",
83
- "eslint-config-react-app": "^2.1.0",
84
- "eslint-config-standard": "^11.0.0",
85
- "eslint-config-standard-react": "^6.0.0",
86
- "eslint-plugin-flowtype": "^2.47.1",
87
- "eslint-plugin-import": "^2.11.0",
88
- "eslint-plugin-jsx-a11y": "^5",
89
- "eslint-plugin-node": "^6.0.1",
90
- "eslint-plugin-prettier": "^2.6.0",
91
- "eslint-plugin-promise": "^3.7.0",
92
- "eslint-plugin-react": "^7.7.0",
93
- "eslint-plugin-standard": "^3.0.1",
94
- "flow-bin": "^0.103.0",
95
- "gh-pages": "^1.1.0",
96
- "lint-staged": "^7.0.5",
97
- "prettier": "^1.12.1",
98
- "react": "^16.8.4",
99
- "react-dom": "^16.8.4",
100
- "react-is": "^16.8.4",
101
- "react-scripts": "^1.1.1",
102
- "react-test-renderer": "^16.7.0",
103
- "rollup": "^1.4.1",
104
- "rollup-plugin-babel": "^4.3.2",
105
- "rollup-plugin-commonjs": "^9.2.1",
106
- "rollup-plugin-node-resolve": "^4.0.1",
107
- "rollup-plugin-replace": "^2.2.0",
108
- "rollup-plugin-terser": "^5.1.0"
109
- }
110
-}
packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js
deleted
-246
@@ -1,246 +0,0 @@
1
-// @flow
2
-
3
-import type {ComponentType} from "react";
4
-
5
-import createGridComponent from './createGridComponent';
6
-
7
-import type { Props, ScrollToAlign } from './createGridComponent';
8
-
9
-const FixedSizeGrid: ComponentType<Props<$FlowFixMe>> = createGridComponent({
10
- getColumnOffset: ({ columnWidth }: Props<any>, index: number): number =>
11
- index * ((columnWidth: any): number),
12
-
13
- getColumnWidth: ({ columnWidth }: Props<any>, index: number): number =>
14
- ((columnWidth: any): number),
15
-
16
- getRowOffset: ({ rowHeight }: Props<any>, index: number): number =>
17
- index * ((rowHeight: any): number),
18
-
19
- getRowHeight: ({ rowHeight }: Props<any>, index: number): number =>
20
- ((rowHeight: any): number),
21
-
22
- getEstimatedTotalHeight: ({ rowCount, rowHeight }: Props<any>) =>
23
- ((rowHeight: any): number) * rowCount,
24
-
25
- getEstimatedTotalWidth: ({ columnCount, columnWidth }: Props<any>) =>
26
- ((columnWidth: any): number) * columnCount,
27
-
28
- getOffsetForColumnAndAlignment: (
29
- { columnCount, columnWidth, width }: Props<any>,
30
- columnIndex: number,
31
- align: ScrollToAlign,
32
- scrollLeft: number,
33
- instanceProps: typeof undefined,
34
- scrollbarSize: number
35
- ): number => {
36
- const lastColumnOffset = Math.max(
37
- 0,
38
- columnCount * ((columnWidth: any): number) - width
39
- );
40
- const maxOffset = Math.min(
41
- lastColumnOffset,
42
- columnIndex * ((columnWidth: any): number)
43
- );
44
- const minOffset = Math.max(
45
- 0,
46
- columnIndex * ((columnWidth: any): number) -
47
- width +
48
- scrollbarSize +
49
- ((columnWidth: any): number)
50
- );
51
-
52
- if (align === 'smart') {
53
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
54
- align = 'auto';
55
- } else {
56
- align = 'center';
57
- }
58
- }
59
-
60
- switch (align) {
61
- case 'start':
62
- return maxOffset;
63
- case 'end':
64
- return minOffset;
65
- case 'center':
66
- // "Centered" offset is usually the average of the min and max.
67
- // But near the edges of the list, this doesn't hold true.
68
- const middleOffset = Math.round(
69
- minOffset + (maxOffset - minOffset) / 2
70
- );
71
- if (middleOffset < Math.ceil(width / 2)) {
72
- return 0; // near the beginning
73
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
74
- return lastColumnOffset; // near the end
75
- } else {
76
- return middleOffset;
77
- }
78
- case 'auto':
79
- default:
80
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
81
- return scrollLeft;
82
- } else if (minOffset > maxOffset) {
83
- // Because we only take into account the scrollbar size when calculating minOffset
84
- // this value can be larger than maxOffset when at the end of the list
85
- return minOffset;
86
- } else if (scrollLeft < minOffset) {
87
- return minOffset;
88
- } else {
89
- return maxOffset;
90
- }
91
- }
92
- },
93
-
94
- getOffsetForRowAndAlignment: (
95
- { rowHeight, height, rowCount }: Props<any>,
96
- rowIndex: number,
97
- align: ScrollToAlign,
98
- scrollTop: number,
99
- instanceProps: typeof undefined,
100
- scrollbarSize: number
101
- ): number => {
102
- const lastRowOffset = Math.max(
103
- 0,
104
- rowCount * ((rowHeight: any): number) - height
105
- );
106
- const maxOffset = Math.min(
107
- lastRowOffset,
108
- rowIndex * ((rowHeight: any): number)
109
- );
110
- const minOffset = Math.max(
111
- 0,
112
- rowIndex * ((rowHeight: any): number) -
113
- height +
114
- scrollbarSize +
115
- ((rowHeight: any): number)
116
- );
117
-
118
- if (align === 'smart') {
119
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
120
- align = 'auto';
121
- } else {
122
- align = 'center';
123
- }
124
- }
125
-
126
- switch (align) {
127
- case 'start':
128
- return maxOffset;
129
- case 'end':
130
- return minOffset;
131
- case 'center':
132
- // "Centered" offset is usually the average of the min and max.
133
- // But near the edges of the list, this doesn't hold true.
134
- const middleOffset = Math.round(
135
- minOffset + (maxOffset - minOffset) / 2
136
- );
137
- if (middleOffset < Math.ceil(height / 2)) {
138
- return 0; // near the beginning
139
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
140
- return lastRowOffset; // near the end
141
- } else {
142
- return middleOffset;
143
- }
144
- case 'auto':
145
- default:
146
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
147
- return scrollTop;
148
- } else if (minOffset > maxOffset) {
149
- // Because we only take into account the scrollbar size when calculating minOffset
150
- // this value can be larger than maxOffset when at the end of the list
151
- return minOffset;
152
- } else if (scrollTop < minOffset) {
153
- return minOffset;
154
- } else {
155
- return maxOffset;
156
- }
157
- }
158
- },
159
-
160
- getColumnStartIndexForOffset: (
161
- { columnWidth, columnCount }: Props<any>,
162
- scrollLeft: number
163
- ): number =>
164
- Math.max(
165
- 0,
166
- Math.min(
167
- columnCount - 1,
168
- Math.floor(scrollLeft / ((columnWidth: any): number))
169
- )
170
- ),
171
-
172
- getColumnStopIndexForStartIndex: (
173
- { columnWidth, columnCount, width }: Props<any>,
174
- startIndex: number,
175
- scrollLeft: number
176
- ): number => {
177
- const left = startIndex * ((columnWidth: any): number);
178
- const numVisibleColumns = Math.ceil(
179
- (width + scrollLeft - left) / ((columnWidth: any): number)
180
- );
181
- return Math.max(
182
- 0,
183
- Math.min(
184
- columnCount - 1,
185
- startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
186
- )
187
- );
188
- },
189
-
190
- getRowStartIndexForOffset: (
191
- { rowHeight, rowCount }: Props<any>,
192
- scrollTop: number
193
- ): number =>
194
- Math.max(
195
- 0,
196
- Math.min(rowCount - 1, Math.floor(scrollTop / ((rowHeight: any): number)))
197
- ),
198
-
199
- getRowStopIndexForStartIndex: (
200
- { rowHeight, rowCount, height }: Props<any>,
201
- startIndex: number,
202
- scrollTop: number
203
- ): number => {
204
- const top = startIndex * ((rowHeight: any): number);
205
- const numVisibleRows = Math.ceil(
206
- (height + scrollTop - top) / ((rowHeight: any): number)
207
- );
208
- return Math.max(
209
- 0,
210
- Math.min(
211
- rowCount - 1,
212
- startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
213
- )
214
- );
215
- },
216
-
217
- initInstanceProps(props: Props<any>): any {
218
- // Noop
219
- },
220
-
221
- shouldResetStyleCacheOnItemSizeChange: true,
222
-
223
- validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
224
- if (process.env.NODE_ENV !== 'production') {
225
- if (typeof columnWidth !== 'number') {
226
- throw Error(
227
- 'An invalid "columnWidth" prop has been specified. ' +
228
- 'Value should be a number. ' +
229
- `"${
230
- columnWidth === null ? 'null' : typeof columnWidth
231
- }" was specified.`
232
- );
233
- }
234
-
235
- if (typeof rowHeight !== 'number') {
236
- throw Error(
237
- 'An invalid "rowHeight" prop has been specified. ' +
238
- 'Value should be a number. ' +
239
- `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
240
- );
241
- }
242
- }
243
- },
244
-});
245
-
246
-export default FixedSizeGrid;
packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js
deleted
-132
@@ -1,132 +0,0 @@
1
-// @flow
2
-
3
-import type {ComponentType} from "react";
4
-
5
-import createListComponent from './createListComponent';
6
-
7
-import type { Props, ScrollToAlign } from './createListComponent';
8
-
9
-const FixedSizeList: ComponentType<Props<$FlowFixMe>> = createListComponent({
10
- getItemOffset: ({ itemSize }: Props<any>, index: number): number =>
11
- index * ((itemSize: any): number),
12
-
13
- getItemSize: ({ itemSize }: Props<any>, index: number): number =>
14
- ((itemSize: any): number),
15
-
16
- getEstimatedTotalSize: ({ itemCount, itemSize }: Props<any>) =>
17
- ((itemSize: any): number) * itemCount,
18
-
19
- getOffsetForIndexAndAlignment: (
20
- { direction, height, itemCount, itemSize, layout, width }: Props<any>,
21
- index: number,
22
- align: ScrollToAlign,
23
- scrollOffset: number
24
- ): number => {
25
- // TODO Deprecate direction "horizontal"
26
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
27
- const size = (((isHorizontal ? width : height): any): number);
28
- const lastItemOffset = Math.max(
29
- 0,
30
- itemCount * ((itemSize: any): number) - size
31
- );
32
- const maxOffset = Math.min(
33
- lastItemOffset,
34
- index * ((itemSize: any): number)
35
- );
36
- const minOffset = Math.max(
37
- 0,
38
- index * ((itemSize: any): number) - size + ((itemSize: any): number)
39
- );
40
-
41
- if (align === 'smart') {
42
- if (
43
- scrollOffset >= minOffset - size &&
44
- scrollOffset <= maxOffset + size
45
- ) {
46
- align = 'auto';
47
- } else {
48
- align = 'center';
49
- }
50
- }
51
-
52
- switch (align) {
53
- case 'start':
54
- return maxOffset;
55
- case 'end':
56
- return minOffset;
57
- case 'center': {
58
- // "Centered" offset is usually the average of the min and max.
59
- // But near the edges of the list, this doesn't hold true.
60
- const middleOffset = Math.round(
61
- minOffset + (maxOffset - minOffset) / 2
62
- );
63
- if (middleOffset < Math.ceil(size / 2)) {
64
- return 0; // near the beginning
65
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
66
- return lastItemOffset; // near the end
67
- } else {
68
- return middleOffset;
69
- }
70
- }
71
- case 'auto':
72
- default:
73
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
74
- return scrollOffset;
75
- } else if (scrollOffset < minOffset) {
76
- return minOffset;
77
- } else {
78
- return maxOffset;
79
- }
80
- }
81
- },
82
-
83
- getStartIndexForOffset: (
84
- { itemCount, itemSize }: Props<any>,
85
- offset: number
86
- ): number =>
87
- Math.max(
88
- 0,
89
- Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
90
- ),
91
-
92
- getStopIndexForStartIndex: (
93
- { direction, height, itemCount, itemSize, layout, width }: Props<any>,
94
- startIndex: number,
95
- scrollOffset: number
96
- ): number => {
97
- // TODO Deprecate direction "horizontal"
98
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
99
- const offset = startIndex * ((itemSize: any): number);
100
- const size = (((isHorizontal ? width : height): any): number);
101
- const numVisibleItems = Math.ceil(
102
- (size + scrollOffset - offset) / ((itemSize: any): number)
103
- );
104
- return Math.max(
105
- 0,
106
- Math.min(
107
- itemCount - 1,
108
- startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
109
- )
110
- );
111
- },
112
-
113
- initInstanceProps(props: Props<any>): any {
114
- // Noop
115
- },
116
-
117
- shouldResetStyleCacheOnItemSizeChange: true,
118
-
119
- validateProps: ({ itemSize }: Props<any>): void => {
120
- if (process.env.NODE_ENV !== 'production') {
121
- if (typeof itemSize !== 'number') {
122
- throw Error(
123
- 'An invalid "itemSize" prop has been specified. ' +
124
- 'Value should be a number. ' +
125
- `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
126
- );
127
- }
128
- }
129
- },
130
-});
131
-
132
-export default FixedSizeList;
packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
deleted
-509
@@ -1,509 +0,0 @@
1
-// @flow
2
-
3
-import type {ComponentType} from "react";
4
-
5
-import createGridComponent from './createGridComponent';
6
-
7
-import type { Props, ScrollToAlign } from './createGridComponent';
8
-
9
-const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
10
-
11
-type VariableSizeProps = {|
12
- estimatedColumnWidth: number,
13
- estimatedRowHeight: number,
14
- ...Props<any>,
15
-|};
16
-
17
-type itemSizeGetter = (index: number) => number;
18
-type ItemType = 'column' | 'row';
19
-
20
-type ItemMetadata = {|
21
- offset: number,
22
- size: number,
23
-|};
24
-type ItemMetadataMap = { [index: number]: ItemMetadata, ... };
25
-type InstanceProps = {|
26
- columnMetadataMap: ItemMetadataMap,
27
- estimatedColumnWidth: number,
28
- estimatedRowHeight: number,
29
- lastMeasuredColumnIndex: number,
30
- lastMeasuredRowIndex: number,
31
- rowMetadataMap: ItemMetadataMap,
32
-|};
33
-
34
-const getEstimatedTotalHeight = (
35
- { rowCount }: Props<any>,
36
- { rowMetadataMap, estimatedRowHeight, lastMeasuredRowIndex }: InstanceProps
37
-) => {
38
- let totalSizeOfMeasuredRows = 0;
39
-
40
- // Edge case check for when the number of items decreases while a scroll is in progress.
41
- // https://github.com/bvaughn/react-window/pull/138
42
- if (lastMeasuredRowIndex >= rowCount) {
43
- lastMeasuredRowIndex = rowCount - 1;
44
- }
45
-
46
- if (lastMeasuredRowIndex >= 0) {
47
- const itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
48
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
49
- }
50
-
51
- const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
52
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
53
-
54
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
55
-};
56
-
57
-const getEstimatedTotalWidth = (
58
- { columnCount }: Props<any>,
59
- {
60
- columnMetadataMap,
61
- estimatedColumnWidth,
62
- lastMeasuredColumnIndex,
63
- }: InstanceProps
64
-) => {
65
- let totalSizeOfMeasuredRows = 0;
66
-
67
- // Edge case check for when the number of items decreases while a scroll is in progress.
68
- // https://github.com/bvaughn/react-window/pull/138
69
- if (lastMeasuredColumnIndex >= columnCount) {
70
- lastMeasuredColumnIndex = columnCount - 1;
71
- }
72
-
73
- if (lastMeasuredColumnIndex >= 0) {
74
- const itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
75
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
76
- }
77
-
78
- const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
79
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
80
-
81
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
82
-};
83
-
84
-const getItemMetadata = (
85
- itemType: ItemType,
86
- props: Props<any>,
87
- index: number,
88
- instanceProps: InstanceProps
89
-): ItemMetadata => {
90
- let itemMetadataMap, itemSize, lastMeasuredIndex;
91
- if (itemType === 'column') {
92
- itemMetadataMap = instanceProps.columnMetadataMap;
93
- itemSize = ((props.columnWidth: any): itemSizeGetter);
94
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
95
- } else {
96
- itemMetadataMap = instanceProps.rowMetadataMap;
97
- itemSize = ((props.rowHeight: any): itemSizeGetter);
98
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
99
- }
100
-
101
- if (index > lastMeasuredIndex) {
102
- let offset = 0;
103
- if (lastMeasuredIndex >= 0) {
104
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
105
- offset = itemMetadata.offset + itemMetadata.size;
106
- }
107
-
108
- for (let i = lastMeasuredIndex + 1; i <= index; i++) {
109
- let size = itemSize(i);
110
-
111
- itemMetadataMap[i] = {
112
- offset,
113
- size,
114
- };
115
-
116
- offset += size;
117
- }
118
-
119
- if (itemType === 'column') {
120
- instanceProps.lastMeasuredColumnIndex = index;
121
- } else {
122
- instanceProps.lastMeasuredRowIndex = index;
123
- }
124
- }
125
-
126
- return itemMetadataMap[index];
127
-};
128
-
129
-const findNearestItem = (
130
- itemType: ItemType,
131
- props: Props<any>,
132
- instanceProps: InstanceProps,
133
- offset: number
134
-) => {
135
- let itemMetadataMap, lastMeasuredIndex;
136
- if (itemType === 'column') {
137
- itemMetadataMap = instanceProps.columnMetadataMap;
138
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
139
- } else {
140
- itemMetadataMap = instanceProps.rowMetadataMap;
141
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
142
- }
143
-
144
- const lastMeasuredItemOffset =
145
- lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
146
-
147
- if (lastMeasuredItemOffset >= offset) {
148
- // If we've already measured items within this range just use a binary search as it's faster.
149
- return findNearestItemBinarySearch(
150
- itemType,
151
- props,
152
- instanceProps,
153
- lastMeasuredIndex,
154
- 0,
155
- offset
156
- );
157
- } else {
158
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
159
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
160
- // The overall complexity for this approach is O(log n).
161
- return findNearestItemExponentialSearch(
162
- itemType,
163
- props,
164
- instanceProps,
165
- Math.max(0, lastMeasuredIndex),
166
- offset
167
- );
168
- }
169
-};
170
-
171
-const findNearestItemBinarySearch = (
172
- itemType: ItemType,
173
- props: Props<any>,
174
- instanceProps: InstanceProps,
175
- high: number,
176
- low: number,
177
- offset: number
178
-): number => {
179
- while (low <= high) {
180
- const middle = low + Math.floor((high - low) / 2);
181
- const currentOffset = getItemMetadata(
182
- itemType,
183
- props,
184
- middle,
185
- instanceProps
186
- ).offset;
187
-
188
- if (currentOffset === offset) {
189
- return middle;
190
- } else if (currentOffset < offset) {
191
- low = middle + 1;
192
- } else if (currentOffset > offset) {
193
- high = middle - 1;
194
- }
195
- }
196
-
197
- if (low > 0) {
198
- return low - 1;
199
- } else {
200
- return 0;
201
- }
202
-};
203
-
204
-const findNearestItemExponentialSearch = (
205
- itemType: ItemType,
206
- props: Props<any>,
207
- instanceProps: InstanceProps,
208
- index: number,
209
- offset: number
210
-): number => {
211
- const itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
212
- let interval = 1;
213
-
214
- while (
215
- index < itemCount &&
216
- getItemMetadata(itemType, props, index, instanceProps).offset < offset
217
- ) {
218
- index += interval;
219
- interval *= 2;
220
- }
221
-
222
- return findNearestItemBinarySearch(
223
- itemType,
224
- props,
225
- instanceProps,
226
- Math.min(index, itemCount - 1),
227
- Math.floor(index / 2),
228
- offset
229
- );
230
-};
231
-
232
-const getOffsetForIndexAndAlignment = (
233
- itemType: ItemType,
234
- props: Props<any>,
235
- index: number,
236
- align: ScrollToAlign,
237
- scrollOffset: number,
238
- instanceProps: InstanceProps,
239
- scrollbarSize: number
240
-): number => {
241
- const size = itemType === 'column' ? props.width : props.height;
242
- const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
243
-
244
- // Get estimated total size after ItemMetadata is computed,
245
- // To ensure it reflects actual measurements instead of just estimates.
246
- const estimatedTotalSize =
247
- itemType === 'column'
248
- ? getEstimatedTotalWidth(props, instanceProps)
249
- : getEstimatedTotalHeight(props, instanceProps);
250
-
251
- const maxOffset = Math.max(
252
- 0,
253
- Math.min(estimatedTotalSize - size, itemMetadata.offset)
254
- );
255
- const minOffset = Math.max(
256
- 0,
257
- itemMetadata.offset - size + scrollbarSize + itemMetadata.size
258
- );
259
-
260
- if (align === 'smart') {
261
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
262
- align = 'auto';
263
- } else {
264
- align = 'center';
265
- }
266
- }
267
-
268
- switch (align) {
269
- case 'start':
270
- return maxOffset;
271
- case 'end':
272
- return minOffset;
273
- case 'center':
274
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
275
- case 'auto':
276
- default:
277
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
278
- return scrollOffset;
279
- } else if (minOffset > maxOffset) {
280
- // Because we only take into account the scrollbar size when calculating minOffset
281
- // this value can be larger than maxOffset when at the end of the list
282
- return minOffset;
283
- } else if (scrollOffset < minOffset) {
284
- return minOffset;
285
- } else {
286
- return maxOffset;
287
- }
288
- }
289
-};
290
-
291
-const VariableSizeGrid: ComponentType<Props<$FlowFixMe>> = createGridComponent({
292
- getColumnOffset: (
293
- props: Props<any>,
294
- index: number,
295
- instanceProps: InstanceProps
296
- ): number => getItemMetadata('column', props, index, instanceProps).offset,
297
-
298
- getColumnStartIndexForOffset: (
299
- props: Props<any>,
300
- scrollLeft: number,
301
- instanceProps: InstanceProps
302
- ): number => findNearestItem('column', props, instanceProps, scrollLeft),
303
-
304
- getColumnStopIndexForStartIndex: (
305
- props: Props<any>,
306
- startIndex: number,
307
- scrollLeft: number,
308
- instanceProps: InstanceProps
309
- ): number => {
310
- const { columnCount, width } = props;
311
-
312
- const itemMetadata = getItemMetadata(
313
- 'column',
314
- props,
315
- startIndex,
316
- instanceProps
317
- );
318
- const maxOffset = scrollLeft + width;
319
-
320
- let offset = itemMetadata.offset + itemMetadata.size;
321
- let stopIndex = startIndex;
322
-
323
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
324
- stopIndex++;
325
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
326
- }
327
-
328
- return stopIndex;
329
- },
330
-
331
- getColumnWidth: (
332
- props: Props<any>,
333
- index: number,
334
- instanceProps: InstanceProps
335
- ): number => instanceProps.columnMetadataMap[index].size,
336
-
337
- getEstimatedTotalHeight,
338
- getEstimatedTotalWidth,
339
-
340
- getOffsetForColumnAndAlignment: (
341
- props: Props<any>,
342
- index: number,
343
- align: ScrollToAlign,
344
- scrollOffset: number,
345
- instanceProps: InstanceProps,
346
- scrollbarSize: number
347
- ): number =>
348
- getOffsetForIndexAndAlignment(
349
- 'column',
350
- props,
351
- index,
352
- align,
353
- scrollOffset,
354
- instanceProps,
355
- scrollbarSize
356
- ),
357
-
358
- getOffsetForRowAndAlignment: (
359
- props: Props<any>,
360
- index: number,
361
- align: ScrollToAlign,
362
- scrollOffset: number,
363
- instanceProps: InstanceProps,
364
- scrollbarSize: number
365
- ): number =>
366
- getOffsetForIndexAndAlignment(
367
- 'row',
368
- props,
369
- index,
370
- align,
371
- scrollOffset,
372
- instanceProps,
373
- scrollbarSize
374
- ),
375
-
376
- getRowOffset: (
377
- props: Props<any>,
378
- index: number,
379
- instanceProps: InstanceProps
380
- ): number => getItemMetadata('row', props, index, instanceProps).offset,
381
-
382
- getRowHeight: (
383
- props: Props<any>,
384
- index: number,
385
- instanceProps: InstanceProps
386
- ): number => instanceProps.rowMetadataMap[index].size,
387
-
388
- getRowStartIndexForOffset: (
389
- props: Props<any>,
390
- scrollTop: number,
391
- instanceProps: InstanceProps
392
- ): number => findNearestItem('row', props, instanceProps, scrollTop),
393
-
394
- getRowStopIndexForStartIndex: (
395
- props: Props<any>,
396
- startIndex: number,
397
- scrollTop: number,
398
- instanceProps: InstanceProps
399
- ): number => {
400
- const { rowCount, height } = props;
401
-
402
- const itemMetadata = getItemMetadata(
403
- 'row',
404
- props,
405
- startIndex,
406
- instanceProps
407
- );
408
- const maxOffset = scrollTop + height;
409
-
410
- let offset = itemMetadata.offset + itemMetadata.size;
411
- let stopIndex = startIndex;
412
-
413
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
414
- stopIndex++;
415
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
416
- }
417
-
418
- return stopIndex;
419
- },
420
-
421
- initInstanceProps(props: Props<any>, instance: any): InstanceProps {
422
- const {
423
- estimatedColumnWidth,
424
- estimatedRowHeight,
425
- } = ((props: any): VariableSizeProps);
426
-
427
- const instanceProps = {
428
- columnMetadataMap: {},
429
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
430
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
431
- lastMeasuredColumnIndex: -1,
432
- lastMeasuredRowIndex: -1,
433
- rowMetadataMap: {},
434
- };
435
-
436
- instance.resetAfterColumnIndex = (
437
- columnIndex: number,
438
- shouldForceUpdate?: boolean = true
439
- ) => {
440
- instance.resetAfterIndices({ columnIndex, shouldForceUpdate });
441
- };
442
-
443
- instance.resetAfterRowIndex = (
444
- rowIndex: number,
445
- shouldForceUpdate?: boolean = true
446
- ) => {
447
- instance.resetAfterIndices({ rowIndex, shouldForceUpdate });
448
- };
449
-
450
- instance.resetAfterIndices = ({
451
- columnIndex,
452
- rowIndex,
453
- shouldForceUpdate = true,
454
- }: {
455
- columnIndex?: number,
456
- rowIndex?: number,
457
- shouldForceUpdate: boolean,
458
- }) => {
459
- if (typeof columnIndex === 'number') {
460
- instanceProps.lastMeasuredColumnIndex = Math.min(
461
- instanceProps.lastMeasuredColumnIndex,
462
- columnIndex - 1
463
- );
464
- }
465
- if (typeof rowIndex === 'number') {
466
- instanceProps.lastMeasuredRowIndex = Math.min(
467
- instanceProps.lastMeasuredRowIndex,
468
- rowIndex - 1
469
- );
470
- }
471
-
472
- // We could potentially optimize further by only evicting styles after this index,
473
- // But since styles are only cached while scrolling is in progress-
474
- // It seems an unnecessary optimization.
475
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
476
- instance._getItemStyleCache(-1);
477
-
478
- if (shouldForceUpdate) {
479
- instance.forceUpdate();
480
- }
481
- };
482
-
483
- return instanceProps;
484
- },
485
-
486
- shouldResetStyleCacheOnItemSizeChange: false,
487
-
488
- validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
489
- if (process.env.NODE_ENV !== 'production') {
490
- if (typeof columnWidth !== 'function') {
491
- throw Error(
492
- 'An invalid "columnWidth" prop has been specified. ' +
493
- 'Value should be a function. ' +
494
- `"${
495
- columnWidth === null ? 'null' : typeof columnWidth
496
- }" was specified.`
497
- );
498
- } else if (typeof rowHeight !== 'function') {
499
- throw Error(
500
- 'An invalid "rowHeight" prop has been specified. ' +
501
- 'Value should be a function. ' +
502
- `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
503
- );
504
- }
505
- }
506
- },
507
-});
508
-
509
-export default VariableSizeGrid;
packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
deleted
-318
@@ -1,318 +0,0 @@
1
-// @flow
2
-
3
-import type {ComponentType} from "react";
4
-
5
-import createListComponent from './createListComponent';
6
-
7
-import type { Props, ScrollToAlign } from './createListComponent';
8
-
9
-const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
10
-
11
-type VariableSizeProps = {|
12
- estimatedItemSize: number,
13
- ...Props<any>,
14
-|};
15
-
16
-type itemSizeGetter = (index: number) => number;
17
-
18
-type ItemMetadata = {|
19
- offset: number,
20
- size: number,
21
-|};
22
-type InstanceProps = {|
23
- itemMetadataMap: { [index: number]: ItemMetadata, ... },
24
- estimatedItemSize: number,
25
- lastMeasuredIndex: number,
26
-|};
27
-
28
-const getItemMetadata = (
29
- props: Props<any>,
30
- index: number,
31
- instanceProps: InstanceProps
32
-): ItemMetadata => {
33
- const { itemSize } = ((props: any): VariableSizeProps);
34
- const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
35
-
36
- if (index > lastMeasuredIndex) {
37
- let offset = 0;
38
- if (lastMeasuredIndex >= 0) {
39
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
40
- offset = itemMetadata.offset + itemMetadata.size;
41
- }
42
-
43
- for (let i = lastMeasuredIndex + 1; i <= index; i++) {
44
- let size = ((itemSize: any): itemSizeGetter)(i);
45
-
46
- itemMetadataMap[i] = {
47
- offset,
48
- size,
49
- };
50
-
51
- offset += size;
52
- }
53
-
54
- instanceProps.lastMeasuredIndex = index;
55
- }
56
-
57
- return itemMetadataMap[index];
58
-};
59
-
60
-const findNearestItem = (
61
- props: Props<any>,
62
- instanceProps: InstanceProps,
63
- offset: number
64
-) => {
65
- const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
66
-
67
- const lastMeasuredItemOffset =
68
- lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
69
-
70
- if (lastMeasuredItemOffset >= offset) {
71
- // If we've already measured items within this range just use a binary search as it's faster.
72
- return findNearestItemBinarySearch(
73
- props,
74
- instanceProps,
75
- lastMeasuredIndex,
76
- 0,
77
- offset
78
- );
79
- } else {
80
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
81
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
82
- // The overall complexity for this approach is O(log n).
83
- return findNearestItemExponentialSearch(
84
- props,
85
- instanceProps,
86
- Math.max(0, lastMeasuredIndex),
87
- offset
88
- );
89
- }
90
-};
91
-
92
-const findNearestItemBinarySearch = (
93
- props: Props<any>,
94
- instanceProps: InstanceProps,
95
- high: number,
96
- low: number,
97
- offset: number
98
-): number => {
99
- while (low <= high) {
100
- const middle = low + Math.floor((high - low) / 2);
101
- const currentOffset = getItemMetadata(props, middle, instanceProps).offset;
102
-
103
- if (currentOffset === offset) {
104
- return middle;
105
- } else if (currentOffset < offset) {
106
- low = middle + 1;
107
- } else if (currentOffset > offset) {
108
- high = middle - 1;
109
- }
110
- }
111
-
112
- if (low > 0) {
113
- return low - 1;
114
- } else {
115
- return 0;
116
- }
117
-};
118
-
119
-const findNearestItemExponentialSearch = (
120
- props: Props<any>,
121
- instanceProps: InstanceProps,
122
- index: number,
123
- offset: number
124
-): number => {
125
- const { itemCount } = props;
126
- let interval = 1;
127
-
128
- while (
129
- index < itemCount &&
130
- getItemMetadata(props, index, instanceProps).offset < offset
131
- ) {
132
- index += interval;
133
- interval *= 2;
134
- }
135
-
136
- return findNearestItemBinarySearch(
137
- props,
138
- instanceProps,
139
- Math.min(index, itemCount - 1),
140
- Math.floor(index / 2),
141
- offset
142
- );
143
-};
144
-
145
-const getEstimatedTotalSize = (
146
- { itemCount }: Props<any>,
147
- { itemMetadataMap, estimatedItemSize, lastMeasuredIndex }: InstanceProps
148
-) => {
149
- let totalSizeOfMeasuredItems = 0;
150
-
151
- // Edge case check for when the number of items decreases while a scroll is in progress.
152
- // https://github.com/bvaughn/react-window/pull/138
153
- if (lastMeasuredIndex >= itemCount) {
154
- lastMeasuredIndex = itemCount - 1;
155
- }
156
-
157
- if (lastMeasuredIndex >= 0) {
158
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
159
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
160
- }
161
-
162
- const numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
163
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
164
-
165
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
166
-};
167
-
168
-const VariableSizeList: ComponentType<Props<any>> = createListComponent({
169
- getItemOffset: (
170
- props: Props<any>,
171
- index: number,
172
- instanceProps: InstanceProps
173
- ): number => getItemMetadata(props, index, instanceProps).offset,
174
-
175
- getItemSize: (
176
- props: Props<any>,
177
- index: number,
178
- instanceProps: InstanceProps
179
- ): number => instanceProps.itemMetadataMap[index].size,
180
-
181
- getEstimatedTotalSize,
182
-
183
- getOffsetForIndexAndAlignment: (
184
- props: Props<any>,
185
- index: number,
186
- align: ScrollToAlign,
187
- scrollOffset: number,
188
- instanceProps: InstanceProps
189
- ): number => {
190
- const { direction, height, layout, width } = props;
191
-
192
- // TODO Deprecate direction "horizontal"
193
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
194
- const size = (((isHorizontal ? width : height): any): number);
195
- const itemMetadata = getItemMetadata(props, index, instanceProps);
196
-
197
- // Get estimated total size after ItemMetadata is computed,
198
- // To ensure it reflects actual measurements instead of just estimates.
199
- const estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
200
-
201
- const maxOffset = Math.max(
202
- 0,
203
- Math.min(estimatedTotalSize - size, itemMetadata.offset)
204
- );
205
- const minOffset = Math.max(
206
- 0,
207
- itemMetadata.offset - size + itemMetadata.size
208
- );
209
-
210
- if (align === 'smart') {
211
- if (
212
- scrollOffset >= minOffset - size &&
213
- scrollOffset <= maxOffset + size
214
- ) {
215
- align = 'auto';
216
- } else {
217
- align = 'center';
218
- }
219
- }
220
-
221
- switch (align) {
222
- case 'start':
223
- return maxOffset;
224
- case 'end':
225
- return minOffset;
226
- case 'center':
227
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
228
- case 'auto':
229
- default:
230
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
231
- return scrollOffset;
232
- } else if (scrollOffset < minOffset) {
233
- return minOffset;
234
- } else {
235
- return maxOffset;
236
- }
237
- }
238
- },
239
-
240
- getStartIndexForOffset: (
241
- props: Props<any>,
242
- offset: number,
243
- instanceProps: InstanceProps
244
- ): number => findNearestItem(props, instanceProps, offset),
245
-
246
- getStopIndexForStartIndex: (
247
- props: Props<any>,
248
- startIndex: number,
249
- scrollOffset: number,
250
- instanceProps: InstanceProps
251
- ): number => {
252
- const { direction, height, itemCount, layout, width } = props;
253
-
254
- // TODO Deprecate direction "horizontal"
255
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
256
- const size = (((isHorizontal ? width : height): any): number);
257
- const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
258
- const maxOffset = scrollOffset + size;
259
-
260
- let offset = itemMetadata.offset + itemMetadata.size;
261
- let stopIndex = startIndex;
262
-
263
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
264
- stopIndex++;
265
- offset += getItemMetadata(props, stopIndex, instanceProps).size;
266
- }
267
-
268
- return stopIndex;
269
- },
270
-
271
- initInstanceProps(props: Props<any>, instance: any): InstanceProps {
272
- const { estimatedItemSize } = ((props: any): VariableSizeProps);
273
-
274
- const instanceProps = {
275
- itemMetadataMap: {},
276
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE,
277
- lastMeasuredIndex: -1,
278
- };
279
-
280
- instance.resetAfterIndex = (
281
- index: number,
282
- shouldForceUpdate?: boolean = true
283
- ) => {
284
- instanceProps.lastMeasuredIndex = Math.min(
285
- instanceProps.lastMeasuredIndex,
286
- index - 1
287
- );
288
-
289
- // We could potentially optimize further by only evicting styles after this index,
290
- // But since styles are only cached while scrolling is in progress-
291
- // It seems an unnecessary optimization.
292
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
293
- instance._getItemStyleCache(-1);
294
-
295
- if (shouldForceUpdate) {
296
- instance.forceUpdate();
297
- }
298
- };
299
-
300
- return instanceProps;
301
- },
302
-
303
- shouldResetStyleCacheOnItemSizeChange: false,
304
-
305
- validateProps: ({ itemSize }: Props<any>): void => {
306
- if (process.env.NODE_ENV !== 'production') {
307
- if (typeof itemSize !== 'function') {
308
- throw Error(
309
- 'An invalid "itemSize" prop has been specified. ' +
310
- 'Value should be a function. ' +
311
- `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
312
- );
313
- }
314
- }
315
- },
316
-});
317
-
318
-export default VariableSizeList;
packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js
deleted
-18
@@ -1,18 +0,0 @@
1
-// @flow
2
-
3
-import shallowDiffers from './shallowDiffers';
4
-
5
-// Custom comparison function for React.memo().
6
-// It knows to compare individual style props and ignore the wrapper object.
7
-// See https://reactjs.org/docs/react-api.html#reactmemo
8
-export default function areEqual(
9
- prevProps: Object,
10
- nextProps: Object
11
-): boolean {
12
- const { style: prevStyle, ...prevRest } = prevProps;
13
- const { style: nextStyle, ...nextRest } = nextProps;
14
-
15
- return (
16
- !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest)
17
- );
18
-}
packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
deleted
-921
@@ -1,921 +0,0 @@
1
-// @flow
2
-
3
-import memoizeOne from 'memoize-one';
4
-import * as React from 'react';
5
-import { createElement, PureComponent } from 'react';
6
-import { cancelTimeout, requestTimeout } from './timer';
7
-import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
8
-
9
-import type { TimeoutID } from './timer';
10
-
11
-type Direction = 'ltr' | 'rtl';
12
-export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
13
-
14
-type itemSize = number | ((index: number) => number);
15
-
16
-type RenderComponentProps<T> = {|
17
- columnIndex: number,
18
- data: T,
19
- isScrolling?: boolean,
20
- rowIndex: number,
21
- style: Object,
22
-|};
23
-export type RenderComponent<T> = React$ComponentType<
24
- $Shape<RenderComponentProps<T>>
25
->;
26
-
27
-type ScrollDirection = 'forward' | 'backward';
28
-
29
-type OnItemsRenderedCallback = ({
30
- overscanColumnStartIndex: number,
31
- overscanColumnStopIndex: number,
32
- overscanRowStartIndex: number,
33
- overscanRowStopIndex: number,
34
- visibleColumnStartIndex: number,
35
- visibleColumnStopIndex: number,
36
- visibleRowStartIndex: number,
37
- visibleRowStopIndex: number,
38
-}) => void;
39
-type OnScrollCallback = ({
40
- horizontalScrollDirection: ScrollDirection,
41
- scrollLeft: number,
42
- scrollTop: number,
43
- scrollUpdateWasRequested: boolean,
44
- verticalScrollDirection: ScrollDirection,
45
-}) => void;
46
-
47
-type ScrollEvent = SyntheticEvent<HTMLDivElement>;
48
-type ItemStyleCache = { [key: string]: Object };
49
-
50
-type OuterProps = {|
51
- children: React$Node,
52
- className: string | void,
53
- onScroll: ScrollEvent => void,
54
- style: {
55
- [string]: mixed,
56
- },
57
-|};
58
-
59
-type InnerProps = {|
60
- children: React$Node,
61
- style: {
62
- [string]: mixed,
63
- },
64
-|};
65
-
66
-export type Props<T> = {|
67
- children: RenderComponent<T>,
68
- className?: string,
69
- columnCount: number,
70
- columnWidth: itemSize,
71
- direction: Direction,
72
- height: number,
73
- initialScrollLeft?: number,
74
- initialScrollTop?: number,
75
- innerRef?: any,
76
- innerElementType?: string | React.AbstractComponent<InnerProps, any>,
77
- innerTagName?: string, // deprecated
78
- itemData: T,
79
- itemKey?: (params: {|
80
- columnIndex: number,
81
- data: T,
82
- rowIndex: number,
83
- |}) => any,
84
- onItemsRendered?: OnItemsRenderedCallback,
85
- onScroll?: OnScrollCallback,
86
- outerRef?: any,
87
- outerElementType?: string | React.AbstractComponent<OuterProps, any>,
88
- outerTagName?: string, // deprecated
89
- overscanColumnCount?: number,
90
- overscanColumnsCount?: number, // deprecated
91
- overscanCount?: number, // deprecated
92
- overscanRowCount?: number,
93
- overscanRowsCount?: number, // deprecated
94
- rowCount: number,
95
- rowHeight: itemSize,
96
- style?: Object,
97
- useIsScrolling: boolean,
98
- width: number,
99
-|};
100
-
101
-type State = {|
102
- instance: any,
103
- isScrolling: boolean,
104
- horizontalScrollDirection: ScrollDirection,
105
- scrollLeft: number,
106
- scrollTop: number,
107
- scrollUpdateWasRequested: boolean,
108
- verticalScrollDirection: ScrollDirection,
109
-|};
110
-
111
-type getItemOffset = (
112
- props: Props<any>,
113
- index: number,
114
- instanceProps: any
115
-) => number;
116
-type getItemSize = (
117
- props: Props<any>,
118
- index: number,
119
- instanceProps: any
120
-) => number;
121
-type getEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
122
-type GetOffsetForItemAndAlignment = (
123
- props: Props<any>,
124
- index: number,
125
- align: ScrollToAlign,
126
- scrollOffset: number,
127
- instanceProps: any,
128
- scrollbarSize: number
129
-) => number;
130
-type GetStartIndexForOffset = (
131
- props: Props<any>,
132
- offset: number,
133
- instanceProps: any
134
-) => number;
135
-type GetStopIndexForStartIndex = (
136
- props: Props<any>,
137
- startIndex: number,
138
- scrollOffset: number,
139
- instanceProps: any
140
-) => number;
141
-type InitInstanceProps = (props: Props<any>, instance: any) => any;
142
-type ValidateProps = (props: Props<any>) => void;
143
-
144
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
145
-
146
-const defaultItemKey = (
147
- {
148
- columnIndex,
149
- data,
150
- rowIndex
151
- }: { columnIndex: number, data: any, rowIndex: number },
152
-) =>
153
- `${rowIndex}:${columnIndex}`;
154
-
155
-// In DEV mode, this Set helps us only log a warning once per component instance.
156
-// This avoids spamming the console every time a render happens.
157
-let devWarningsOverscanCount = null;
158
-let devWarningsOverscanRowsColumnsCount = null;
159
-let devWarningsTagName = null;
160
-if (process.env.NODE_ENV !== 'production') {
161
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
162
- devWarningsOverscanCount = new WeakSet();
163
- devWarningsOverscanRowsColumnsCount = new WeakSet();
164
- devWarningsTagName = new WeakSet();
165
- }
166
-}
167
-
168
-export default function createGridComponent({
169
- getColumnOffset,
170
- getColumnStartIndexForOffset,
171
- getColumnStopIndexForStartIndex,
172
- getColumnWidth,
173
- getEstimatedTotalHeight,
174
- getEstimatedTotalWidth,
175
- getOffsetForColumnAndAlignment,
176
- getOffsetForRowAndAlignment,
177
- getRowHeight,
178
- getRowOffset,
179
- getRowStartIndexForOffset,
180
- getRowStopIndexForStartIndex,
181
- initInstanceProps,
182
- shouldResetStyleCacheOnItemSizeChange,
183
- validateProps,
184
-}: {|
185
- getColumnOffset: getItemOffset,
186
- getColumnStartIndexForOffset: GetStartIndexForOffset,
187
- getColumnStopIndexForStartIndex: GetStopIndexForStartIndex,
188
- getColumnWidth: getItemSize,
189
- getEstimatedTotalHeight: getEstimatedTotalSize,
190
- getEstimatedTotalWidth: getEstimatedTotalSize,
191
- getOffsetForColumnAndAlignment: GetOffsetForItemAndAlignment,
192
- getOffsetForRowAndAlignment: GetOffsetForItemAndAlignment,
193
- getRowOffset: getItemOffset,
194
- getRowHeight: getItemSize,
195
- getRowStartIndexForOffset: GetStartIndexForOffset,
196
- getRowStopIndexForStartIndex: GetStopIndexForStartIndex,
197
- initInstanceProps: InitInstanceProps,
198
- shouldResetStyleCacheOnItemSizeChange: boolean,
199
- validateProps: ValidateProps,
200
-|}): React.ComponentType<Props<mixed>> {
201
- return class Grid<T> extends PureComponent<Props<T>, State> {
202
- _instanceProps: any = initInstanceProps(this.props, this);
203
- _resetIsScrollingTimeoutId: TimeoutID | null = null;
204
- _outerRef: ?HTMLDivElement;
205
-
206
- static defaultProps: { direction: string, itemData: void, useIsScrolling: boolean } = {
207
- direction: 'ltr',
208
- itemData: undefined,
209
- useIsScrolling: false,
210
- };
211
-
212
- state: State = {
213
- instance: this,
214
- isScrolling: false,
215
- horizontalScrollDirection: 'forward',
216
- scrollLeft:
217
- typeof this.props.initialScrollLeft === 'number'
218
- ? this.props.initialScrollLeft
219
- : 0,
220
- scrollTop:
221
- typeof this.props.initialScrollTop === 'number'
222
- ? this.props.initialScrollTop
223
- : 0,
224
- scrollUpdateWasRequested: false,
225
- verticalScrollDirection: 'forward',
226
- };
227
-
228
- // Always use explicit constructor for React components.
229
- // It produces less code after transpilation. (#26)
230
- // eslint-disable-next-line no-useless-constructor
231
- constructor(props: Props<T>) {
232
- super(props);
233
- }
234
-
235
- static getDerivedStateFromProps(
236
- nextProps: Props<T>,
237
- prevState: State
238
- ): $Shape<State> | null {
239
- validateSharedProps(nextProps, prevState);
240
- validateProps(nextProps);
241
- return null;
242
- }
243
-
244
- scrollTo({
245
- scrollLeft,
246
- scrollTop,
247
- }: {
248
- scrollLeft: number,
249
- scrollTop: number,
250
- }): void {
251
- if (scrollLeft !== undefined) {
252
- scrollLeft = Math.max(0, scrollLeft);
253
- }
254
- if (scrollTop !== undefined) {
255
- scrollTop = Math.max(0, scrollTop);
256
- }
257
-
258
- this.setState(prevState => {
259
- if (scrollLeft === undefined) {
260
- scrollLeft = prevState.scrollLeft;
261
- }
262
- if (scrollTop === undefined) {
263
- scrollTop = prevState.scrollTop;
264
- }
265
-
266
- if (
267
- prevState.scrollLeft === scrollLeft &&
268
- prevState.scrollTop === scrollTop
269
- ) {
270
- return null;
271
- }
272
-
273
- return {
274
- horizontalScrollDirection:
275
- prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
276
- scrollLeft: scrollLeft,
277
- scrollTop: scrollTop,
278
- scrollUpdateWasRequested: true,
279
- verticalScrollDirection:
280
- prevState.scrollTop < scrollTop ? 'forward' : 'backward',
281
- };
282
- }, this._resetIsScrollingDebounced);
283
- }
284
-
285
- scrollToItem({
286
- align = 'auto',
287
- columnIndex,
288
- rowIndex,
289
- }: {
290
- align: ScrollToAlign,
291
- columnIndex?: number,
292
- rowIndex?: number,
293
- }): void {
294
- const { columnCount, height, rowCount, width } = this.props;
295
- const { scrollLeft, scrollTop } = this.state;
296
- const scrollbarSize = getScrollbarSize();
297
-
298
- if (columnIndex !== undefined) {
299
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
300
- }
301
- if (rowIndex !== undefined) {
302
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
303
- }
304
-
305
- const estimatedTotalHeight = getEstimatedTotalHeight(
306
- this.props,
307
- this._instanceProps
308
- );
309
- const estimatedTotalWidth = getEstimatedTotalWidth(
310
- this.props,
311
- this._instanceProps
312
- );
313
-
314
- // The scrollbar size should be considered when scrolling an item into view,
315
- // to ensure it's fully visible.
316
- // But we only need to account for its size when it's actually visible.
317
- const horizontalScrollbarSize =
318
- estimatedTotalWidth > width ? scrollbarSize : 0;
319
- const verticalScrollbarSize =
320
- estimatedTotalHeight > height ? scrollbarSize : 0;
321
-
322
- this.scrollTo({
323
- scrollLeft:
324
- columnIndex !== undefined
325
- ? getOffsetForColumnAndAlignment(
326
- this.props,
327
- columnIndex,
328
- align,
329
- scrollLeft,
330
- this._instanceProps,
331
- verticalScrollbarSize
332
- )
333
- : scrollLeft,
334
- scrollTop:
335
- rowIndex !== undefined
336
- ? getOffsetForRowAndAlignment(
337
- this.props,
338
- rowIndex,
339
- align,
340
- scrollTop,
341
- this._instanceProps,
342
- horizontalScrollbarSize
343
- )
344
- : scrollTop,
345
- });
346
- }
347
-
348
- componentDidMount() {
349
- const { initialScrollLeft, initialScrollTop } = this.props;
350
-
351
- if (this._outerRef != null) {
352
- const outerRef = ((this._outerRef: any): HTMLElement);
353
- if (typeof initialScrollLeft === 'number') {
354
- outerRef.scrollLeft = initialScrollLeft;
355
- }
356
- if (typeof initialScrollTop === 'number') {
357
- outerRef.scrollTop = initialScrollTop;
358
- }
359
- }
360
-
361
- this._callPropsCallbacks();
362
- }
363
-
364
- componentDidUpdate() {
365
- const { direction } = this.props;
366
- const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
367
-
368
- if (scrollUpdateWasRequested && this._outerRef != null) {
369
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
370
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
371
- // So we need to determine which browser behavior we're dealing with, and mimic it.
372
- const outerRef = ((this._outerRef: any): HTMLElement);
373
- if (direction === 'rtl') {
374
- switch (getRTLOffsetType()) {
375
- case 'negative':
376
- outerRef.scrollLeft = -scrollLeft;
377
- break;
378
- case 'positive-ascending':
379
- outerRef.scrollLeft = scrollLeft;
380
- break;
381
- default:
382
- const { clientWidth, scrollWidth } = outerRef;
383
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
384
- break;
385
- }
386
- } else {
387
- outerRef.scrollLeft = Math.max(0, scrollLeft);
388
- }
389
-
390
- outerRef.scrollTop = Math.max(0, scrollTop);
391
- }
392
-
393
- this._callPropsCallbacks();
394
- }
395
-
396
- componentWillUnmount() {
397
- if (this._resetIsScrollingTimeoutId !== null) {
398
- cancelTimeout(this._resetIsScrollingTimeoutId);
399
- }
400
- }
401
-
402
- render(): any {
403
- const {
404
- children,
405
- className,
406
- columnCount,
407
- direction,
408
- height,
409
- innerRef,
410
- innerElementType,
411
- innerTagName,
412
- itemData,
413
- itemKey = defaultItemKey,
414
- outerElementType,
415
- outerTagName,
416
- rowCount,
417
- style,
418
- useIsScrolling,
419
- width,
420
- } = this.props;
421
- const { isScrolling } = this.state;
422
-
423
- const [
424
- columnStartIndex,
425
- columnStopIndex,
426
- ] = this._getHorizontalRangeToRender();
427
- const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
428
-
429
- const items = [];
430
- if (columnCount > 0 && rowCount) {
431
- for (
432
- let rowIndex = rowStartIndex;
433
- rowIndex <= rowStopIndex;
434
- rowIndex++
435
- ) {
436
- for (
437
- let columnIndex = columnStartIndex;
438
- columnIndex <= columnStopIndex;
439
- columnIndex++
440
- ) {
441
- items.push(
442
- createElement(children, {
443
- columnIndex,
444
- data: itemData,
445
- isScrolling: useIsScrolling ? isScrolling : undefined,
446
- key: itemKey({ columnIndex, data: itemData, rowIndex }),
447
- rowIndex,
448
- style: this._getItemStyle(rowIndex, columnIndex),
449
- })
450
- );
451
- }
452
- }
453
- }
454
-
455
- // Read this value AFTER items have been created,
456
- // So their actual sizes (if variable) are taken into consideration.
457
- const estimatedTotalHeight = getEstimatedTotalHeight(
458
- this.props,
459
- this._instanceProps
460
- );
461
- const estimatedTotalWidth = getEstimatedTotalWidth(
462
- this.props,
463
- this._instanceProps
464
- );
465
-
466
- return createElement(
467
- outerElementType || outerTagName || 'div',
468
- {
469
- className,
470
- onScroll: this._onScroll,
471
- ref: this._outerRefSetter,
472
- style: {
473
- position: 'relative',
474
- height,
475
- width,
476
- overflow: 'auto',
477
- WebkitOverflowScrolling: 'touch',
478
- willChange: 'transform',
479
- direction,
480
- ...style,
481
- },
482
- },
483
- createElement(innerElementType || innerTagName || 'div', {
484
- children: items,
485
- ref: innerRef,
486
- style: {
487
- height: estimatedTotalHeight,
488
- pointerEvents: isScrolling ? 'none' : undefined,
489
- width: estimatedTotalWidth,
490
- },
491
- })
492
- );
493
- }
494
-
495
- _callOnItemsRendered: ((
496
- overscanColumnStartIndex: number,
497
- overscanColumnStopIndex: number,
498
- overscanRowStartIndex: number,
499
- overscanRowStopIndex: number,
500
- visibleColumnStartIndex: number,
501
- visibleColumnStopIndex: number,
502
- visibleRowStartIndex: number,
503
- visibleRowStopIndex: number
504
- ) => void) = memoizeOne(
505
- (
506
- overscanColumnStartIndex: number,
507
- overscanColumnStopIndex: number,
508
- overscanRowStartIndex: number,
509
- overscanRowStopIndex: number,
510
- visibleColumnStartIndex: number,
511
- visibleColumnStopIndex: number,
512
- visibleRowStartIndex: number,
513
- visibleRowStopIndex: number
514
- ) =>
515
- ((this.props.onItemsRendered: any): OnItemsRenderedCallback)({
516
- overscanColumnStartIndex,
517
- overscanColumnStopIndex,
518
- overscanRowStartIndex,
519
- overscanRowStopIndex,
520
- visibleColumnStartIndex,
521
- visibleColumnStopIndex,
522
- visibleRowStartIndex,
523
- visibleRowStopIndex,
524
- })
525
- );
526
-
527
- _callOnScroll: ((
528
- scrollLeft: number,
529
- scrollTop: number,
530
- horizontalScrollDirection: ScrollDirection,
531
- verticalScrollDirection: ScrollDirection,
532
- scrollUpdateWasRequested: boolean
533
- ) => void) = memoizeOne(
534
- (
535
- scrollLeft: number,
536
- scrollTop: number,
537
- horizontalScrollDirection: ScrollDirection,
538
- verticalScrollDirection: ScrollDirection,
539
- scrollUpdateWasRequested: boolean
540
- ) =>
541
- ((this.props.onScroll: any): OnScrollCallback)({
542
- horizontalScrollDirection,
543
- scrollLeft,
544
- scrollTop,
545
- verticalScrollDirection,
546
- scrollUpdateWasRequested,
547
- })
548
- );
549
-
550
- _callPropsCallbacks() {
551
- const { columnCount, onItemsRendered, onScroll, rowCount } = this.props;
552
-
553
- if (typeof onItemsRendered === 'function') {
554
- if (columnCount > 0 && rowCount > 0) {
555
- const [
556
- overscanColumnStartIndex,
557
- overscanColumnStopIndex,
558
- visibleColumnStartIndex,
559
- visibleColumnStopIndex,
560
- ] = this._getHorizontalRangeToRender();
561
- const [
562
- overscanRowStartIndex,
563
- overscanRowStopIndex,
564
- visibleRowStartIndex,
565
- visibleRowStopIndex,
566
- ] = this._getVerticalRangeToRender();
567
- this._callOnItemsRendered(
568
- overscanColumnStartIndex,
569
- overscanColumnStopIndex,
570
- overscanRowStartIndex,
571
- overscanRowStopIndex,
572
- visibleColumnStartIndex,
573
- visibleColumnStopIndex,
574
- visibleRowStartIndex,
575
- visibleRowStopIndex
576
- );
577
- }
578
- }
579
-
580
- if (typeof onScroll === 'function') {
581
- const {
582
- horizontalScrollDirection,
583
- scrollLeft,
584
- scrollTop,
585
- scrollUpdateWasRequested,
586
- verticalScrollDirection,
587
- } = this.state;
588
- this._callOnScroll(
589
- scrollLeft,
590
- scrollTop,
591
- horizontalScrollDirection,
592
- verticalScrollDirection,
593
- scrollUpdateWasRequested
594
- );
595
- }
596
- }
597
-
598
- // Lazily create and cache item styles while scrolling,
599
- // So that pure component sCU will prevent re-renders.
600
- // We maintain this cache, and pass a style prop rather than index,
601
- // So that List can clear cached styles and force item re-render if necessary.
602
- _getItemStyle = (rowIndex: number, columnIndex: number): Object => {
603
- const { columnWidth, direction, rowHeight } = this.props;
604
-
605
- const itemStyleCache = this._getItemStyleCache(
606
- shouldResetStyleCacheOnItemSizeChange && columnWidth,
607
- shouldResetStyleCacheOnItemSizeChange && direction,
608
- shouldResetStyleCacheOnItemSizeChange && rowHeight
609
- );
610
-
611
- const key = `${rowIndex}:${columnIndex}`;
612
-
613
- let style;
614
- if (itemStyleCache.hasOwnProperty(key)) {
615
- style = itemStyleCache[key];
616
- } else {
617
- itemStyleCache[key] = style = {
618
- position: 'absolute',
619
- // $FlowFixMe computed properties are unsupported
620
- [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
621
- this.props,
622
- columnIndex,
623
- this._instanceProps
624
- ),
625
- top: getRowOffset(this.props, rowIndex, this._instanceProps),
626
- height: getRowHeight(this.props, rowIndex, this._instanceProps),
627
- width: getColumnWidth(this.props, columnIndex, this._instanceProps),
628
- };
629
- }
630
-
631
- return style;
632
- };
633
-
634
- _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) =
635
- memoizeOne((_: any, __: any, ___: any) => ({}));
636
-
637
- _getHorizontalRangeToRender(): [number, number, number, number] {
638
- const {
639
- columnCount,
640
- overscanColumnCount,
641
- overscanColumnsCount,
642
- overscanCount,
643
- rowCount,
644
- } = this.props;
645
- const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
646
-
647
- const overscanCountResolved: number =
648
- overscanColumnCount || overscanColumnsCount || overscanCount || 1;
649
-
650
- if (columnCount === 0 || rowCount === 0) {
651
- return [0, 0, 0, 0];
652
- }
653
-
654
- const startIndex = getColumnStartIndexForOffset(
655
- this.props,
656
- scrollLeft,
657
- this._instanceProps
658
- );
659
- const stopIndex = getColumnStopIndexForStartIndex(
660
- this.props,
661
- startIndex,
662
- scrollLeft,
663
- this._instanceProps
664
- );
665
-
666
- // Overscan by one item in each direction so that tab/focus works.
667
- // If there isn't at least one extra item, tab loops back around.
668
- const overscanBackward =
669
- !isScrolling || horizontalScrollDirection === 'backward'
670
- ? Math.max(1, overscanCountResolved)
671
- : 1;
672
- const overscanForward =
673
- !isScrolling || horizontalScrollDirection === 'forward'
674
- ? Math.max(1, overscanCountResolved)
675
- : 1;
676
-
677
- return [
678
- Math.max(0, startIndex - overscanBackward),
679
- Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)),
680
- startIndex,
681
- stopIndex,
682
- ];
683
- }
684
-
685
- _getVerticalRangeToRender(): [number, number, number, number] {
686
- const {
687
- columnCount,
688
- overscanCount,
689
- overscanRowCount,
690
- overscanRowsCount,
691
- rowCount,
692
- } = this.props;
693
- const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
694
-
695
- const overscanCountResolved: number =
696
- overscanRowCount || overscanRowsCount || overscanCount || 1;
697
-
698
- if (columnCount === 0 || rowCount === 0) {
699
- return [0, 0, 0, 0];
700
- }
701
-
702
- const startIndex = getRowStartIndexForOffset(
703
- this.props,
704
- scrollTop,
705
- this._instanceProps
706
- );
707
- const stopIndex = getRowStopIndexForStartIndex(
708
- this.props,
709
- startIndex,
710
- scrollTop,
711
- this._instanceProps
712
- );
713
-
714
- // Overscan by one item in each direction so that tab/focus works.
715
- // If there isn't at least one extra item, tab loops back around.
716
- const overscanBackward =
717
- !isScrolling || verticalScrollDirection === 'backward'
718
- ? Math.max(1, overscanCountResolved)
719
- : 1;
720
- const overscanForward =
721
- !isScrolling || verticalScrollDirection === 'forward'
722
- ? Math.max(1, overscanCountResolved)
723
- : 1;
724
-
725
- return [
726
- Math.max(0, startIndex - overscanBackward),
727
- Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)),
728
- startIndex,
729
- stopIndex,
730
- ];
731
- }
732
-
733
- _onScroll = (event: ScrollEvent): void => {
734
- const {
735
- clientHeight,
736
- clientWidth,
737
- scrollLeft,
738
- scrollTop,
739
- scrollHeight,
740
- scrollWidth,
741
- } = event.currentTarget;
742
- this.setState(prevState => {
743
- if (
744
- prevState.scrollLeft === scrollLeft &&
745
- prevState.scrollTop === scrollTop
746
- ) {
747
- // Scroll position may have been updated by cDM/cDU,
748
- // In which case we don't need to trigger another render,
749
- // And we don't want to update state.isScrolling.
750
- return null;
751
- }
752
-
753
- const { direction } = this.props;
754
-
755
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
756
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
757
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
758
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
759
- let calculatedScrollLeft = scrollLeft;
760
- if (direction === 'rtl') {
761
- switch (getRTLOffsetType()) {
762
- case 'negative':
763
- calculatedScrollLeft = -scrollLeft;
764
- break;
765
- case 'positive-descending':
766
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
767
- break;
768
- }
769
- }
770
-
771
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
772
- calculatedScrollLeft = Math.max(
773
- 0,
774
- Math.min(calculatedScrollLeft, scrollWidth - clientWidth)
775
- );
776
- const calculatedScrollTop = Math.max(
777
- 0,
778
- Math.min(scrollTop, scrollHeight - clientHeight)
779
- );
780
-
781
- return {
782
- isScrolling: true,
783
- horizontalScrollDirection:
784
- prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
785
- scrollLeft: calculatedScrollLeft,
786
- scrollTop: calculatedScrollTop,
787
- verticalScrollDirection:
788
- prevState.scrollTop < scrollTop ? 'forward' : 'backward',
789
- scrollUpdateWasRequested: false,
790
- };
791
- }, this._resetIsScrollingDebounced);
792
- };
793
-
794
- _outerRefSetter = (ref: any): void => {
795
- const { outerRef } = this.props;
796
-
797
- this._outerRef = ((ref: any): HTMLDivElement);
798
-
799
- if (typeof outerRef === 'function') {
800
- outerRef(ref);
801
- } else if (
802
- outerRef != null &&
803
- typeof outerRef === 'object' &&
804
- outerRef.hasOwnProperty('current')
805
- ) {
806
- outerRef.current = ref;
807
- }
808
- };
809
-
810
- _resetIsScrollingDebounced = () => {
811
- if (this._resetIsScrollingTimeoutId !== null) {
812
- cancelTimeout(this._resetIsScrollingTimeoutId);
813
- }
814
-
815
- this._resetIsScrollingTimeoutId = requestTimeout(
816
- this._resetIsScrolling,
817
- IS_SCROLLING_DEBOUNCE_INTERVAL
818
- );
819
- };
820
-
821
- _resetIsScrolling = () => {
822
- this._resetIsScrollingTimeoutId = null;
823
-
824
- this.setState({ isScrolling: false }, () => {
825
- // Clear style cache after state update has been committed.
826
- // This way we don't break pure sCU for items that don't use isScrolling param.
827
- this._getItemStyleCache(-1);
828
- });
829
- };
830
- };
831
-}
832
-
833
-const validateSharedProps = (
834
- {
835
- children,
836
- direction,
837
- height,
838
- innerTagName,
839
- outerTagName,
840
- overscanColumnsCount,
841
- overscanCount,
842
- overscanRowsCount,
843
- width,
844
- }: Props<any>,
845
- { instance }: State
846
-): void => {
847
- if (process.env.NODE_ENV !== 'production') {
848
- if (typeof overscanCount === 'number') {
849
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
850
- devWarningsOverscanCount.add(instance);
851
- console.warn(
852
- 'The overscanCount prop has been deprecated. ' +
853
- 'Please use the overscanColumnCount and overscanRowCount props instead.'
854
- );
855
- }
856
- }
857
-
858
- if (
859
- typeof overscanColumnsCount === 'number' ||
860
- typeof overscanRowsCount === 'number'
861
- ) {
862
- if (
863
- devWarningsOverscanRowsColumnsCount &&
864
- !devWarningsOverscanRowsColumnsCount.has(instance)
865
- ) {
866
- devWarningsOverscanRowsColumnsCount.add(instance);
867
- console.warn(
868
- 'The overscanColumnsCount and overscanRowsCount props have been deprecated. ' +
869
- 'Please use the overscanColumnCount and overscanRowCount props instead.'
870
- );
871
- }
872
- }
873
-
874
- if (innerTagName != null || outerTagName != null) {
875
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
876
- devWarningsTagName.add(instance);
877
- console.warn(
878
- 'The innerTagName and outerTagName props have been deprecated. ' +
879
- 'Please use the innerElementType and outerElementType props instead.'
880
- );
881
- }
882
- }
883
-
884
- if (children == null) {
885
- throw Error(
886
- 'An invalid "children" prop has been specified. ' +
887
- 'Value should be a React component. ' +
888
- `"${children === null ? 'null' : typeof children}" was specified.`
889
- );
890
- }
891
-
892
- switch (direction) {
893
- case 'ltr':
894
- case 'rtl':
895
- // Valid values
896
- break;
897
- default:
898
- throw Error(
899
- 'An invalid "direction" prop has been specified. ' +
900
- 'Value should be either "ltr" or "rtl". ' +
901
- `"${direction}" was specified.`
902
- );
903
- }
904
-
905
- if (typeof width !== 'number') {
906
- throw Error(
907
- 'An invalid "width" prop has been specified. ' +
908
- 'Grids must specify a number for width. ' +
909
- `"${width === null ? 'null' : typeof width}" was specified.`
910
- );
911
- }
912
-
913
- if (typeof height !== 'number') {
914
- throw Error(
915
- 'An invalid "height" prop has been specified. ' +
916
- 'Grids must specify a number for height. ' +
917
- `"${height === null ? 'null' : typeof height}" was specified.`
918
- );
919
- }
920
- }
921
-};
packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
deleted
-727
@@ -1,727 +0,0 @@
1
-// @flow
2
-
3
-import memoizeOne from 'memoize-one';
4
-import * as React from 'react';
5
-import { createElement, PureComponent } from 'react';
6
-import { cancelTimeout, requestTimeout } from './timer';
7
-import { getRTLOffsetType } from './domHelpers';
8
-
9
-import type { TimeoutID } from './timer';
10
-
11
-export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
12
-
13
-type itemSize = number | ((index: number) => number);
14
-// TODO Deprecate directions "horizontal" and "vertical"
15
-type Direction = 'ltr' | 'rtl' | 'horizontal' | 'vertical';
16
-type Layout = 'horizontal' | 'vertical';
17
-
18
-type RenderComponentProps<T> = {|
19
- data: T,
20
- index: number,
21
- isScrolling?: boolean,
22
- style: Object,
23
-|};
24
-type RenderComponent<T> = React$ComponentType<$Shape<RenderComponentProps<T>>>;
25
-
26
-type ScrollDirection = 'forward' | 'backward';
27
-
28
-type onItemsRenderedCallback = ({
29
- overscanStartIndex: number,
30
- overscanStopIndex: number,
31
- visibleStartIndex: number,
32
- visibleStopIndex: number,
33
-}) => void;
34
-type onScrollCallback = ({
35
- scrollDirection: ScrollDirection,
36
- scrollOffset: number,
37
- scrollUpdateWasRequested: boolean,
38
-}) => void;
39
-
40
-type ScrollEvent = SyntheticEvent<HTMLDivElement>;
41
-type ItemStyleCache = { [index: number]: Object };
42
-
43
-type OuterProps = {|
44
- children: React$Node,
45
- className: string | void,
46
- onScroll: ScrollEvent => void,
47
- style: {
48
- [string]: mixed,
49
- },
50
-|};
51
-
52
-type InnerProps = {|
53
- children: React$Node,
54
- style: {
55
- [string]: mixed,
56
- },
57
-|};
58
-
59
-export type Props<T> = {|
60
- children: RenderComponent<T>,
61
- className?: string,
62
- direction: Direction,
63
- height: number | string,
64
- initialScrollOffset?: number,
65
- innerRef?: any,
66
- innerElementType?: string | React.AbstractComponent<InnerProps, any>,
67
- innerTagName?: string, // deprecated
68
- itemCount: number,
69
- itemData: T,
70
- itemKey?: (index: number, data: T) => any,
71
- itemSize: itemSize,
72
- layout: Layout,
73
- onItemsRendered?: onItemsRenderedCallback,
74
- onScroll?: onScrollCallback,
75
- outerRef?: any,
76
- outerElementType?: string | React.AbstractComponent<OuterProps, any>,
77
- outerTagName?: string, // deprecated
78
- overscanCount: number,
79
- style?: Object,
80
- useIsScrolling: boolean,
81
- width: number | string,
82
-|};
83
-
84
-type State = {|
85
- instance: any,
86
- isScrolling: boolean,
87
- scrollDirection: ScrollDirection,
88
- scrollOffset: number,
89
- scrollUpdateWasRequested: boolean,
90
-|};
91
-
92
-type GetItemOffset = (
93
- props: Props<any>,
94
- index: number,
95
- instanceProps: any
96
-) => number;
97
-type GetItemSize = (
98
- props: Props<any>,
99
- index: number,
100
- instanceProps: any
101
-) => number;
102
-type GetEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
103
-type GetOffsetForIndexAndAlignment = (
104
- props: Props<any>,
105
- index: number,
106
- align: ScrollToAlign,
107
- scrollOffset: number,
108
- instanceProps: any
109
-) => number;
110
-type GetStartIndexForOffset = (
111
- props: Props<any>,
112
- offset: number,
113
- instanceProps: any
114
-) => number;
115
-type GetStopIndexForStartIndex = (
116
- props: Props<any>,
117
- startIndex: number,
118
- scrollOffset: number,
119
- instanceProps: any
120
-) => number;
121
-type InitInstanceProps = (props: Props<any>, instance: any) => any;
122
-type ValidateProps = (props: Props<any>) => void;
123
-
124
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
125
-
126
-const defaultItemKey = (index: number, data: any) => index;
127
-
128
-// In DEV mode, this Set helps us only log a warning once per component instance.
129
-// This avoids spamming the console every time a render happens.
130
-let devWarningsDirection = null;
131
-let devWarningsTagName = null;
132
-if (process.env.NODE_ENV !== 'production') {
133
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
134
- devWarningsDirection = new WeakSet();
135
- devWarningsTagName = new WeakSet();
136
- }
137
-}
138
-
139
-export default function createListComponent({
140
- getItemOffset,
141
- getEstimatedTotalSize,
142
- getItemSize,
143
- getOffsetForIndexAndAlignment,
144
- getStartIndexForOffset,
145
- getStopIndexForStartIndex,
146
- initInstanceProps,
147
- shouldResetStyleCacheOnItemSizeChange,
148
- validateProps,
149
-}: {|
150
- getItemOffset: GetItemOffset,
151
- getEstimatedTotalSize: GetEstimatedTotalSize,
152
- getItemSize: GetItemSize,
153
- getOffsetForIndexAndAlignment: GetOffsetForIndexAndAlignment,
154
- getStartIndexForOffset: GetStartIndexForOffset,
155
- getStopIndexForStartIndex: GetStopIndexForStartIndex,
156
- initInstanceProps: InitInstanceProps,
157
- shouldResetStyleCacheOnItemSizeChange: boolean,
158
- validateProps: ValidateProps,
159
-|}): React.ComponentType<Props<$FlowFixMe>> {
160
- return class List<T> extends PureComponent<Props<T>, State> {
161
- _instanceProps: any = initInstanceProps(this.props, this);
162
- _outerRef: ?HTMLDivElement;
163
- _resetIsScrollingTimeoutId: TimeoutID | null = null;
164
-
165
- static defaultProps: {
166
- direction: string,
167
- itemData: void,
168
- layout: string,
169
- overscanCount: number,
170
- useIsScrolling: boolean,
171
- } = {
172
- direction: 'ltr',
173
- itemData: undefined,
174
- layout: 'vertical',
175
- overscanCount: 2,
176
- useIsScrolling: false,
177
- };
178
-
179
- state: State = {
180
- instance: this,
181
- isScrolling: false,
182
- scrollDirection: 'forward',
183
- scrollOffset:
184
- typeof this.props.initialScrollOffset === 'number'
185
- ? this.props.initialScrollOffset
186
- : 0,
187
- scrollUpdateWasRequested: false,
188
- };
189
-
190
- // Always use explicit constructor for React components.
191
- // It produces less code after transpilation. (#26)
192
- // eslint-disable-next-line no-useless-constructor
193
- constructor(props: Props<T>) {
194
- super(props);
195
- }
196
-
197
- static getDerivedStateFromProps(
198
- nextProps: Props<T>,
199
- prevState: State
200
- ): $Shape<State> | null {
201
- validateSharedProps(nextProps, prevState);
202
- validateProps(nextProps);
203
- return null;
204
- }
205
-
206
- scrollTo(scrollOffset: number): void {
207
- scrollOffset = Math.max(0, scrollOffset);
208
-
209
- this.setState(prevState => {
210
- if (prevState.scrollOffset === scrollOffset) {
211
- return null;
212
- }
213
- return {
214
- scrollDirection:
215
- prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
216
- scrollOffset: scrollOffset,
217
- scrollUpdateWasRequested: true,
218
- };
219
- }, this._resetIsScrollingDebounced);
220
- }
221
-
222
- scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
223
- const { itemCount } = this.props;
224
- const { scrollOffset } = this.state;
225
-
226
- index = Math.max(0, Math.min(index, itemCount - 1));
227
-
228
- this.scrollTo(
229
- getOffsetForIndexAndAlignment(
230
- this.props,
231
- index,
232
- align,
233
- scrollOffset,
234
- this._instanceProps
235
- )
236
- );
237
- }
238
-
239
- componentDidMount() {
240
- const { direction, initialScrollOffset, layout } = this.props;
241
-
242
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
243
- const outerRef = ((this._outerRef: any): HTMLElement);
244
- // TODO Deprecate direction "horizontal"
245
- if (direction === 'horizontal' || layout === 'horizontal') {
246
- outerRef.scrollLeft = initialScrollOffset;
247
- } else {
248
- outerRef.scrollTop = initialScrollOffset;
249
- }
250
- }
251
-
252
- this._callPropsCallbacks();
253
- }
254
-
255
- componentDidUpdate() {
256
- const { direction, layout } = this.props;
257
- const { scrollOffset, scrollUpdateWasRequested } = this.state;
258
-
259
- if (scrollUpdateWasRequested && this._outerRef != null) {
260
- const outerRef = ((this._outerRef: any): HTMLElement);
261
-
262
- // TODO Deprecate direction "horizontal"
263
- if (direction === 'horizontal' || layout === 'horizontal') {
264
- if (direction === 'rtl') {
265
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
266
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
267
- // So we need to determine which browser behavior we're dealing with, and mimic it.
268
- switch (getRTLOffsetType()) {
269
- case 'negative':
270
- outerRef.scrollLeft = -scrollOffset;
271
- break;
272
- case 'positive-ascending':
273
- outerRef.scrollLeft = scrollOffset;
274
- break;
275
- default:
276
- const { clientWidth, scrollWidth } = outerRef;
277
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
278
- break;
279
- }
280
- } else {
281
- outerRef.scrollLeft = scrollOffset;
282
- }
283
- } else {
284
- outerRef.scrollTop = scrollOffset;
285
- }
286
- }
287
-
288
- this._callPropsCallbacks();
289
- }
290
-
291
- componentWillUnmount() {
292
- if (this._resetIsScrollingTimeoutId !== null) {
293
- cancelTimeout(this._resetIsScrollingTimeoutId);
294
- }
295
- }
296
-
297
- render(): any {
298
- const {
299
- children,
300
- className,
301
- direction,
302
- height,
303
- innerRef,
304
- innerElementType,
305
- innerTagName,
306
- itemCount,
307
- itemData,
308
- itemKey = defaultItemKey,
309
- layout,
310
- outerElementType,
311
- outerTagName,
312
- style,
313
- useIsScrolling,
314
- width,
315
- } = this.props;
316
- const { isScrolling } = this.state;
317
-
318
- // TODO Deprecate direction "horizontal"
319
- const isHorizontal =
320
- direction === 'horizontal' || layout === 'horizontal';
321
-
322
- const onScroll = isHorizontal
323
- ? this._onScrollHorizontal
324
- : this._onScrollVertical;
325
-
326
- const [startIndex, stopIndex] = this._getRangeToRender();
327
-
328
- const items = [];
329
- if (itemCount > 0) {
330
- for (let index = startIndex; index <= stopIndex; index++) {
331
- items.push(
332
- createElement(children, {
333
- data: itemData,
334
- key: itemKey(index, itemData),
335
- index,
336
- isScrolling: useIsScrolling ? isScrolling : undefined,
337
- style: this._getItemStyle(index),
338
- })
339
- );
340
- }
341
- }
342
-
343
- // Read this value AFTER items have been created,
344
- // So their actual sizes (if variable) are taken into consideration.
345
- const estimatedTotalSize = getEstimatedTotalSize(
346
- this.props,
347
- this._instanceProps
348
- );
349
-
350
- return createElement(
351
- outerElementType || outerTagName || 'div',
352
- {
353
- className,
354
- onScroll,
355
- ref: this._outerRefSetter,
356
- style: {
357
- position: 'relative',
358
- height,
359
- width,
360
- overflow: 'auto',
361
- WebkitOverflowScrolling: 'touch',
362
- willChange: 'transform',
363
- direction,
364
- ...style,
365
- },
366
- },
367
- createElement(innerElementType || innerTagName || 'div', {
368
- children: items,
369
- ref: innerRef,
370
- style: {
371
- height: isHorizontal ? '100%' : estimatedTotalSize,
372
- pointerEvents: isScrolling ? 'none' : undefined,
373
- width: isHorizontal ? estimatedTotalSize : '100%',
374
- },
375
- })
376
- );
377
- }
378
-
379
- _callOnItemsRendered: ((
380
- overscanStartIndex: number,
381
- overscanStopIndex: number,
382
- visibleStartIndex: number,
383
- visibleStopIndex: number
384
- ) => void) = memoizeOne(
385
- (
386
- overscanStartIndex: number,
387
- overscanStopIndex: number,
388
- visibleStartIndex: number,
389
- visibleStopIndex: number
390
- ) =>
391
- ((this.props.onItemsRendered: any): onItemsRenderedCallback)({
392
- overscanStartIndex,
393
- overscanStopIndex,
394
- visibleStartIndex,
395
- visibleStopIndex,
396
- })
397
- );
398
-
399
- _callOnScroll: ((
400
- scrollDirection: ScrollDirection,
401
- scrollOffset: number,
402
- scrollUpdateWasRequested: boolean
403
- ) => void) = memoizeOne(
404
- (
405
- scrollDirection: ScrollDirection,
406
- scrollOffset: number,
407
- scrollUpdateWasRequested: boolean
408
- ) =>
409
- ((this.props.onScroll: any): onScrollCallback)({
410
- scrollDirection,
411
- scrollOffset,
412
- scrollUpdateWasRequested,
413
- })
414
- );
415
-
416
- _callPropsCallbacks() {
417
- if (typeof this.props.onItemsRendered === 'function') {
418
- const { itemCount } = this.props;
419
- if (itemCount > 0) {
420
- const [
421
- overscanStartIndex,
422
- overscanStopIndex,
423
- visibleStartIndex,
424
- visibleStopIndex,
425
- ] = this._getRangeToRender();
426
- this._callOnItemsRendered(
427
- overscanStartIndex,
428
- overscanStopIndex,
429
- visibleStartIndex,
430
- visibleStopIndex
431
- );
432
- }
433
- }
434
-
435
- if (typeof this.props.onScroll === 'function') {
436
- const {
437
- scrollDirection,
438
- scrollOffset,
439
- scrollUpdateWasRequested,
440
- } = this.state;
441
- this._callOnScroll(
442
- scrollDirection,
443
- scrollOffset,
444
- scrollUpdateWasRequested
445
- );
446
- }
447
- }
448
-
449
- // Lazily create and cache item styles while scrolling,
450
- // So that pure component sCU will prevent re-renders.
451
- // We maintain this cache, and pass a style prop rather than index,
452
- // So that List can clear cached styles and force item re-render if necessary.
453
- _getItemStyle = (index: number): Object => {
454
- const { direction, itemSize, layout } = this.props;
455
-
456
- const itemStyleCache = this._getItemStyleCache(
457
- shouldResetStyleCacheOnItemSizeChange && itemSize,
458
- shouldResetStyleCacheOnItemSizeChange && layout,
459
- shouldResetStyleCacheOnItemSizeChange && direction
460
- );
461
-
462
- let style;
463
- if (itemStyleCache.hasOwnProperty(index)) {
464
- style = itemStyleCache[index];
465
- } else {
466
- const offset = getItemOffset(this.props, index, this._instanceProps);
467
- const size = getItemSize(this.props, index, this._instanceProps);
468
-
469
- // TODO Deprecate direction "horizontal"
470
- const isHorizontal =
471
- direction === 'horizontal' || layout === 'horizontal';
472
-
473
- itemStyleCache[index] = style = {
474
- position: 'absolute',
475
- // $FlowFixMe computed properties are unsupported
476
- [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
477
- top: !isHorizontal ? offset : 0,
478
- height: !isHorizontal ? size : '100%',
479
- width: isHorizontal ? size : '100%',
480
- };
481
- }
482
-
483
- return style;
484
- };
485
-
486
- _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) =
487
- memoizeOne((_: any, __: any, ___: any) => ({}));
488
-
489
- _getRangeToRender(): [number, number, number, number] {
490
- const { itemCount, overscanCount } = this.props;
491
- const { isScrolling, scrollDirection, scrollOffset } = this.state;
492
-
493
- if (itemCount === 0) {
494
- return [0, 0, 0, 0];
495
- }
496
-
497
- const startIndex = getStartIndexForOffset(
498
- this.props,
499
- scrollOffset,
500
- this._instanceProps
501
- );
502
- const stopIndex = getStopIndexForStartIndex(
503
- this.props,
504
- startIndex,
505
- scrollOffset,
506
- this._instanceProps
507
- );
508
-
509
- // Overscan by one item in each direction so that tab/focus works.
510
- // If there isn't at least one extra item, tab loops back around.
511
- const overscanBackward =
512
- !isScrolling || scrollDirection === 'backward'
513
- ? Math.max(1, overscanCount)
514
- : 1;
515
- const overscanForward =
516
- !isScrolling || scrollDirection === 'forward'
517
- ? Math.max(1, overscanCount)
518
- : 1;
519
-
520
- return [
521
- Math.max(0, startIndex - overscanBackward),
522
- Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)),
523
- startIndex,
524
- stopIndex,
525
- ];
526
- }
527
-
528
- _onScrollHorizontal = (event: ScrollEvent): void => {
529
- const { clientWidth, scrollLeft, scrollWidth } = event.currentTarget;
530
- this.setState(prevState => {
531
- if (prevState.scrollOffset === scrollLeft) {
532
- // Scroll position may have been updated by cDM/cDU,
533
- // In which case we don't need to trigger another render,
534
- // And we don't want to update state.isScrolling.
535
- return null;
536
- }
537
-
538
- const { direction } = this.props;
539
-
540
- let scrollOffset = scrollLeft;
541
- if (direction === 'rtl') {
542
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
543
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
544
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
545
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
546
- switch (getRTLOffsetType()) {
547
- case 'negative':
548
- scrollOffset = -scrollLeft;
549
- break;
550
- case 'positive-descending':
551
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
552
- break;
553
- }
554
- }
555
-
556
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
557
- scrollOffset = Math.max(
558
- 0,
559
- Math.min(scrollOffset, scrollWidth - clientWidth)
560
- );
561
-
562
- return {
563
- isScrolling: true,
564
- scrollDirection:
565
- prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
566
- scrollOffset,
567
- scrollUpdateWasRequested: false,
568
- };
569
- }, this._resetIsScrollingDebounced);
570
- };
571
-
572
- _onScrollVertical = (event: ScrollEvent): void => {
573
- const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
574
- this.setState(prevState => {
575
- if (prevState.scrollOffset === scrollTop) {
576
- // Scroll position may have been updated by cDM/cDU,
577
- // In which case we don't need to trigger another render,
578
- // And we don't want to update state.isScrolling.
579
- return null;
580
- }
581
-
582
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
583
- const scrollOffset = Math.max(
584
- 0,
585
- Math.min(scrollTop, scrollHeight - clientHeight)
586
- );
587
-
588
- return {
589
- isScrolling: true,
590
- scrollDirection:
591
- prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
592
- scrollOffset,
593
- scrollUpdateWasRequested: false,
594
- };
595
- }, this._resetIsScrollingDebounced);
596
- };
597
-
598
- _outerRefSetter = (ref: any): void => {
599
- const { outerRef } = this.props;
600
-
601
- this._outerRef = ((ref: any): HTMLDivElement);
602
-
603
- if (typeof outerRef === 'function') {
604
- outerRef(ref);
605
- } else if (
606
- outerRef != null &&
607
- typeof outerRef === 'object' &&
608
- outerRef.hasOwnProperty('current')
609
- ) {
610
- outerRef.current = ref;
611
- }
612
- };
613
-
614
- _resetIsScrollingDebounced = () => {
615
- if (this._resetIsScrollingTimeoutId !== null) {
616
- cancelTimeout(this._resetIsScrollingTimeoutId);
617
- }
618
-
619
- this._resetIsScrollingTimeoutId = requestTimeout(
620
- this._resetIsScrolling,
621
- IS_SCROLLING_DEBOUNCE_INTERVAL
622
- );
623
- };
624
-
625
- _resetIsScrolling = () => {
626
- this._resetIsScrollingTimeoutId = null;
627
-
628
- this.setState({ isScrolling: false }, () => {
629
- // Clear style cache after state update has been committed.
630
- // This way we don't break pure sCU for items that don't use isScrolling param.
631
- this._getItemStyleCache(-1, null);
632
- });
633
- };
634
- };
635
-}
636
-
637
-// NOTE: I considered further wrapping individual items with a pure ListItem component.
638
-// This would avoid ever calling the render function for the same index more than once,
639
-// But it would also add the overhead of a lot of components/fibers.
640
-// I assume people already do this (render function returning a class component),
641
-// So my doing it would just unnecessarily double the wrappers.
642
-
643
-const validateSharedProps = (
644
- {
645
- children,
646
- direction,
647
- height,
648
- layout,
649
- innerTagName,
650
- outerTagName,
651
- width,
652
- }: Props<any>,
653
- { instance }: State
654
-): void => {
655
- if (process.env.NODE_ENV !== 'production') {
656
- if (innerTagName != null || outerTagName != null) {
657
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
658
- devWarningsTagName.add(instance);
659
- console.warn(
660
- 'The innerTagName and outerTagName props have been deprecated. ' +
661
- 'Please use the innerElementType and outerElementType props instead.'
662
- );
663
- }
664
- }
665
-
666
- // TODO Deprecate direction "horizontal"
667
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
668
-
669
- switch (direction) {
670
- case 'horizontal':
671
- case 'vertical':
672
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
673
- devWarningsDirection.add(instance);
674
- console.warn(
675
- 'The direction prop should be either "ltr" (default) or "rtl". ' +
676
- 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'
677
- );
678
- }
679
- break;
680
- case 'ltr':
681
- case 'rtl':
682
- // Valid values
683
- break;
684
- default:
685
- throw Error(
686
- 'An invalid "direction" prop has been specified. ' +
687
- 'Value should be either "ltr" or "rtl". ' +
688
- `"${direction}" was specified.`
689
- );
690
- }
691
-
692
- switch (layout) {
693
- case 'horizontal':
694
- case 'vertical':
695
- // Valid values
696
- break;
697
- default:
698
- throw Error(
699
- 'An invalid "layout" prop has been specified. ' +
700
- 'Value should be either "horizontal" or "vertical". ' +
701
- `"${layout}" was specified.`
702
- );
703
- }
704
-
705
- if (children == null) {
706
- throw Error(
707
- 'An invalid "children" prop has been specified. ' +
708
- 'Value should be a React component. ' +
709
- `"${children === null ? 'null' : typeof children}" was specified.`
710
- );
711
- }
712
-
713
- if (isHorizontal && typeof width !== 'number') {
714
- throw Error(
715
- 'An invalid "width" prop has been specified. ' +
716
- 'Horizontal lists must specify a number for width. ' +
717
- `"${width === null ? 'null' : typeof width}" was specified.`
718
- );
719
- } else if (!isHorizontal && typeof height !== 'number') {
720
- throw Error(
721
- 'An invalid "height" prop has been specified. ' +
722
- 'Vertical lists must specify a number for height. ' +
723
- `"${height === null ? 'null' : typeof height}" was specified.`
724
- );
725
- }
726
- }
727
-};
packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js
deleted
-72
@@ -1,72 +0,0 @@
1
-// @flow
2
-
3
-let size: number = -1;
4
-
5
-// This utility copied from "dom-helpers" package.
6
-export function getScrollbarSize(recalculate?: boolean = false): number {
7
- if (size === -1 || recalculate) {
8
- const div = document.createElement('div');
9
- const style = div.style;
10
- style.width = '50px';
11
- style.height = '50px';
12
- style.overflow = 'scroll';
13
-
14
- ((document.body: any): HTMLBodyElement).appendChild(div);
15
-
16
- size = div.offsetWidth - div.clientWidth;
17
-
18
- ((document.body: any): HTMLBodyElement).removeChild(div);
19
- }
20
-
21
- return size;
22
-}
23
-
24
-export type RTLOffsetType =
25
- | 'negative'
26
- | 'positive-descending'
27
- | 'positive-ascending';
28
-
29
-let cachedRTLResult: RTLOffsetType | null = null;
30
-
31
-// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
32
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
33
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
34
-// The safest way to check this is to intentionally set a negative offset,
35
-// and then verify that the subsequent "scroll" event matches the negative offset.
36
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
37
-export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
38
- if (cachedRTLResult === null || recalculate) {
39
- const outerDiv = document.createElement('div');
40
- const outerStyle = outerDiv.style;
41
- outerStyle.width = '50px';
42
- outerStyle.height = '50px';
43
- outerStyle.overflow = 'scroll';
44
- outerStyle.direction = 'rtl';
45
-
46
- const innerDiv = document.createElement('div');
47
- const innerStyle = innerDiv.style;
48
- innerStyle.width = '100px';
49
- innerStyle.height = '100px';
50
-
51
- outerDiv.appendChild(innerDiv);
52
-
53
- ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
54
-
55
- if (outerDiv.scrollLeft > 0) {
56
- cachedRTLResult = 'positive-descending';
57
- } else {
58
- outerDiv.scrollLeft = 1;
59
- if (outerDiv.scrollLeft === 0) {
60
- cachedRTLResult = 'negative';
61
- } else {
62
- cachedRTLResult = 'positive-ascending';
63
- }
64
- }
65
-
66
- ((document.body: any): HTMLBodyElement).removeChild(outerDiv);
67
-
68
- return cachedRTLResult;
69
- }
70
-
71
- return cachedRTLResult;
72
-}
packages/react-devtools-shared/src/node_modules/react-window/src/index.js
deleted
-9
@@ -1,9 +0,0 @@
1
-// @flow
2
-
3
-export { default as VariableSizeGrid } from './VariableSizeGrid';
4
-export { default as VariableSizeList } from './VariableSizeList';
5
-export { default as FixedSizeGrid } from './FixedSizeGrid';
6
-export { default as FixedSizeList } from './FixedSizeList';
7
-
8
-export { default as areEqual } from './areEqual';
9
-export { default as shouldComponentUpdate } from './shouldComponentUpdate';
packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js
deleted
-17
@@ -1,17 +0,0 @@
1
-// @flow
2
-
3
-// Pulled from react-compat
4
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
5
-export default function shallowDiffers(prev: Object, next: Object): boolean {
6
- for (let attribute in prev) {
7
- if (!(attribute in next)) {
8
- return true;
9
- }
10
- }
11
- for (let attribute in next) {
12
- if (prev[attribute] !== next[attribute]) {
13
- return true;
14
- }
15
- }
16
- return false;
17
-}
packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js
deleted
-17
@@ -1,17 +0,0 @@
1
-// @flow
2
-
3
-import areEqual from './areEqual';
4
-import shallowDiffers from './shallowDiffers';
5
-
6
-// Custom shouldComponentUpdate for class components.
7
-// It knows to compare individual style props and ignore the wrapper object.
8
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
9
-export default function shouldComponentUpdate(
10
- this: interface { props: any, state: any },
11
- nextProps: Object,
12
- nextState: Object,
13
-): boolean {
14
- return (
15
- !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)
16
- );
17
-}
packages/react-devtools-shared/src/node_modules/react-window/src/timer.js
deleted
-37
@@ -1,37 +0,0 @@
1
-// @flow
2
-
3
-// Animation frame based implementation of setTimeout.
4
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
5
-
6
-const hasNativePerformanceNow =
7
- typeof performance === 'object' && typeof performance.now === 'function';
8
-
9
-const now = hasNativePerformanceNow
10
- ? () => performance.now()
11
- : () => Date.now();
12
-
13
-export type TimeoutID = {|
14
- id: AnimationFrameID,
15
-|};
16
-
17
-export function cancelTimeout(timeoutID: TimeoutID) {
18
- cancelAnimationFrame(timeoutID.id);
19
-}
20
-
21
-export function requestTimeout(callback: Function, delay: number): TimeoutID {
22
- const start = now();
23
-
24
- function tick() {
25
- if (now() - start >= delay) {
26
- callback.call(null);
27
- } else {
28
- timeoutID.id = requestAnimationFrame(tick);
29
- }
30
- }
31
-
32
- const timeoutID: TimeoutID = {
33
- id: requestAnimationFrame(tick),
34
- };
35
-
36
- return timeoutID;
37
-}
packages/react-devtools-timeline/package.json
+1
-1
@@ -9,7 +9,7 @@
9
"memoize-one": "^5.1.1",
10
"nullthrows": "^1.1.1",
11
"pretty-ms": "^7.0.0",
12
- "react-virtualized-auto-sizer": "^1.0.6",
12
+ "react-virtualized-auto-sizer": "^1.0.23",
13
"regenerator-runtime": "^0.13.7"
14
},
15
"devDependencies": {
yarn.lock
+29
-4
@@ -1903,6 +1903,13 @@
1903
dependencies:
1904
regenerator-runtime "^0.13.2"
1905
1906
+"@babel/runtime@^7.0.0":
1907
+ version "7.23.9"
1908
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
1909
+ integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
1910
+ dependencies:
1911
+ regenerator-runtime "^0.14.0"
1912
+
1913
"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
1914
version "7.11.2"
1915
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
@@ -11071,6 +11078,11 @@ memfs@^3.4.3:
11078
dependencies:
11079
fs-monkey "^1.0.3"
11080
11081
+"memoize-one@>=3.1.1 <6":
11082
+ version "5.2.1"
11083
+ resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
11084
+ integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
11085
+
11086
memoize-one@^3.1.1:
11087
version "3.1.1"
11088
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -13019,10 +13031,18 @@ react-timer-mixin@^0.13.4:
13031
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
13032
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
13033
13022
-react-virtualized-auto-sizer@^1.0.6:
13023
- version "1.0.6"
13024
- resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
13025
- integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
13034
+react-virtualized-auto-sizer@^1.0.23:
13035
+ version "1.0.23"
13036
+ resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.23.tgz#ddb18f775a00f672577f1ec01306a94ca26161b8"
13037
+ integrity sha512-5id3UTx+fG7b7SIOKL9/7aR1vP8+MtIT84cJCf09F6pYalB/nvHlx5EQvsSk27SwHUKjgPamG/nS8ynI0uSfKA==
13038
+
13039
+react-window@^1.8.10:
13040
+ version "1.8.10"
13041
+ resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
13042
+ integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
13043
+ dependencies:
13044
+ "@babel/runtime" "^7.0.0"
13045
+ memoize-one ">=3.1.1 <6"
13046
13047
react@^16.13.1:
13048
version "16.13.1"
@@ -13184,6 +13204,11 @@ regenerator-runtime@^0.13.9:
13204
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
13205
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
13206
13207
+regenerator-runtime@^0.14.0:
13208
+ version "0.14.1"
13209
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
13210
+ integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
13211
+
13212
regenerator-transform@^0.14.2:
13213
version "0.14.5"
13214
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"