@depup/react-virtualized 9.22.6-depup.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -0
- package/README.md +34 -0
- package/changes.json +22 -0
- package/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.example.js +184 -0
- package/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.jest.js +338 -0
- package/dist/commonjs/ArrowKeyStepper/ArrowKeyStepper.js +204 -0
- package/dist/commonjs/ArrowKeyStepper/index.js +19 -0
- package/dist/commonjs/ArrowKeyStepper/types.js +5 -0
- package/dist/commonjs/AutoSizer/AutoSizer.example.js +104 -0
- package/dist/commonjs/AutoSizer/AutoSizer.jest.js +341 -0
- package/dist/commonjs/AutoSizer/AutoSizer.js +199 -0
- package/dist/commonjs/AutoSizer/AutoSizer.ssr.js +25 -0
- package/dist/commonjs/AutoSizer/index.js +19 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.DynamicHeightGrid.example.js +100 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.DynamicHeightList.example.js +99 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.DynamicHeightTableColumn.example.js +107 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.DynamicWidthGrid.example.js +102 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.DynamicWidthMultiGrid.example.js +107 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.example.js +129 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.jest.js +345 -0
- package/dist/commonjs/CellMeasurer/CellMeasurer.js +195 -0
- package/dist/commonjs/CellMeasurer/CellMeasurerCache.jest.js +298 -0
- package/dist/commonjs/CellMeasurer/CellMeasurerCache.js +202 -0
- package/dist/commonjs/CellMeasurer/index.js +22 -0
- package/dist/commonjs/CellMeasurer/types.js +14 -0
- package/dist/commonjs/Collection/Collection.example.js +231 -0
- package/dist/commonjs/Collection/Collection.jest.js +829 -0
- package/dist/commonjs/Collection/Collection.js +266 -0
- package/dist/commonjs/Collection/CollectionView.js +553 -0
- package/dist/commonjs/Collection/Section.jest.js +63 -0
- package/dist/commonjs/Collection/Section.js +57 -0
- package/dist/commonjs/Collection/SectionManager.jest.js +121 -0
- package/dist/commonjs/Collection/SectionManager.js +134 -0
- package/dist/commonjs/Collection/TestData.js +77 -0
- package/dist/commonjs/Collection/index.js +15 -0
- package/dist/commonjs/Collection/types.js +22 -0
- package/dist/commonjs/Collection/utils/calculateSizeAndPositionData.jest.js +34 -0
- package/dist/commonjs/Collection/utils/calculateSizeAndPositionData.js +38 -0
- package/dist/commonjs/ColumnSizer/ColumnSizer.example.js +159 -0
- package/dist/commonjs/ColumnSizer/ColumnSizer.jest.js +129 -0
- package/dist/commonjs/ColumnSizer/ColumnSizer.js +103 -0
- package/dist/commonjs/ColumnSizer/index.js +15 -0
- package/dist/commonjs/Grid/Grid.example.js +330 -0
- package/dist/commonjs/Grid/Grid.jest.js +2561 -0
- package/dist/commonjs/Grid/Grid.js +1432 -0
- package/dist/commonjs/Grid/Grid.ssr.js +62 -0
- package/dist/commonjs/Grid/accessibilityOverscanIndicesGetter.jest.js +92 -0
- package/dist/commonjs/Grid/accessibilityOverscanIndicesGetter.js +40 -0
- package/dist/commonjs/Grid/defaultCellRangeRenderer.js +139 -0
- package/dist/commonjs/Grid/defaultOverscanIndicesGetter.jest.js +92 -0
- package/dist/commonjs/Grid/defaultOverscanIndicesGetter.js +36 -0
- package/dist/commonjs/Grid/index.js +40 -0
- package/dist/commonjs/Grid/types.js +8 -0
- package/dist/commonjs/Grid/utils/CellSizeAndPositionManager.jest.js +375 -0
- package/dist/commonjs/Grid/utils/CellSizeAndPositionManager.js +296 -0
- package/dist/commonjs/Grid/utils/ScalingCellSizeAndPositionManager.jest.js +201 -0
- package/dist/commonjs/Grid/utils/ScalingCellSizeAndPositionManager.js +204 -0
- package/dist/commonjs/Grid/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.jest.js +84 -0
- package/dist/commonjs/Grid/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js +59 -0
- package/dist/commonjs/Grid/utils/maxElementSize.js +22 -0
- package/dist/commonjs/Grid/utils/updateScrollIndexHelper.jest.js +180 -0
- package/dist/commonjs/Grid/utils/updateScrollIndexHelper.js +85 -0
- package/dist/commonjs/InfiniteLoader/InfiniteLoader.example.js +179 -0
- package/dist/commonjs/InfiniteLoader/InfiniteLoader.jest.js +571 -0
- package/dist/commonjs/InfiniteLoader/InfiniteLoader.js +274 -0
- package/dist/commonjs/InfiniteLoader/index.js +15 -0
- package/dist/commonjs/List/List.example.js +236 -0
- package/dist/commonjs/List/List.jest.js +517 -0
- package/dist/commonjs/List/List.js +318 -0
- package/dist/commonjs/List/index.js +19 -0
- package/dist/commonjs/List/types.js +6 -0
- package/dist/commonjs/Masonry/Masonry.example.js +287 -0
- package/dist/commonjs/Masonry/Masonry.jest.js +450 -0
- package/dist/commonjs/Masonry/Masonry.js +431 -0
- package/dist/commonjs/Masonry/PositionCache.js +88 -0
- package/dist/commonjs/Masonry/createCellPositioner.js +59 -0
- package/dist/commonjs/Masonry/index.js +22 -0
- package/dist/commonjs/MultiGrid/CellMeasurerCacheDecorator.js +106 -0
- package/dist/commonjs/MultiGrid/MultiGrid.example.js +131 -0
- package/dist/commonjs/MultiGrid/MultiGrid.jest.js +584 -0
- package/dist/commonjs/MultiGrid/MultiGrid.js +743 -0
- package/dist/commonjs/MultiGrid/index.js +15 -0
- package/dist/commonjs/ScrollSync/ScrollSync.example.js +257 -0
- package/dist/commonjs/ScrollSync/ScrollSync.jest.js +66 -0
- package/dist/commonjs/ScrollSync/ScrollSync.js +88 -0
- package/dist/commonjs/ScrollSync/index.js +15 -0
- package/dist/commonjs/Table/Column.jest.js +90 -0
- package/dist/commonjs/Table/Column.js +93 -0
- package/dist/commonjs/Table/SortDirection.js +19 -0
- package/dist/commonjs/Table/SortIndicator.js +40 -0
- package/dist/commonjs/Table/Table.example.js +325 -0
- package/dist/commonjs/Table/Table.jest.js +1257 -0
- package/dist/commonjs/Table/Table.js +742 -0
- package/dist/commonjs/Table/createMultiSort.jest.js +165 -0
- package/dist/commonjs/Table/createMultiSort.js +99 -0
- package/dist/commonjs/Table/defaultCellDataGetter.js +21 -0
- package/dist/commonjs/Table/defaultCellRenderer.js +19 -0
- package/dist/commonjs/Table/defaultHeaderRenderer.js +35 -0
- package/dist/commonjs/Table/defaultHeaderRowRenderer.js +21 -0
- package/dist/commonjs/Table/defaultRowRenderer.js +87 -0
- package/dist/commonjs/Table/index.js +78 -0
- package/dist/commonjs/Table/types.js +39 -0
- package/dist/commonjs/WindowScroller/WindowScroller.e2e.js +298 -0
- package/dist/commonjs/WindowScroller/WindowScroller.example.js +167 -0
- package/dist/commonjs/WindowScroller/WindowScroller.header-resize.e2e.js +359 -0
- package/dist/commonjs/WindowScroller/WindowScroller.jest.js +536 -0
- package/dist/commonjs/WindowScroller/WindowScroller.js +268 -0
- package/dist/commonjs/WindowScroller/WindowScroller.ssr.js +25 -0
- package/dist/commonjs/WindowScroller/index.js +23 -0
- package/dist/commonjs/WindowScroller/utils/dimensions.js +89 -0
- package/dist/commonjs/WindowScroller/utils/onScroll.js +70 -0
- package/dist/commonjs/index.js +180 -0
- package/dist/commonjs/jest-setup.js +7 -0
- package/dist/commonjs/utils/TestHelper.js +36 -0
- package/dist/commonjs/utils/animationFrame.js +29 -0
- package/dist/commonjs/utils/createCallbackMemoizer.jest.js +219 -0
- package/dist/commonjs/utils/createCallbackMemoizer.js +31 -0
- package/dist/commonjs/utils/getUpdatedOffsetForIndex.jest.js +68 -0
- package/dist/commonjs/utils/getUpdatedOffsetForIndex.js +38 -0
- package/dist/commonjs/utils/initCellMetadata.js +37 -0
- package/dist/commonjs/utils/requestAnimationTimeout.js +38 -0
- package/dist/commonjs/vendor/binarySearchBounds.js +200 -0
- package/dist/commonjs/vendor/detectElementResize.js +192 -0
- package/dist/commonjs/vendor/intervalTree.js +361 -0
- package/dist/es/ArrowKeyStepper/ArrowKeyStepper.example.js +176 -0
- package/dist/es/ArrowKeyStepper/ArrowKeyStepper.jest.js +332 -0
- package/dist/es/ArrowKeyStepper/ArrowKeyStepper.js +197 -0
- package/dist/es/ArrowKeyStepper/index.js +3 -0
- package/dist/es/ArrowKeyStepper/types.js +4 -0
- package/dist/es/AutoSizer/AutoSizer.example.js +96 -0
- package/dist/es/AutoSizer/AutoSizer.jest.js +335 -0
- package/dist/es/AutoSizer/AutoSizer.js +190 -0
- package/dist/es/AutoSizer/AutoSizer.js.flow +200 -0
- package/dist/es/AutoSizer/AutoSizer.ssr.js +19 -0
- package/dist/es/AutoSizer/index.js +2 -0
- package/dist/es/AutoSizer/index.js.flow +4 -0
- package/dist/es/CellMeasurer/CellMeasurer.DynamicHeightGrid.example.js +91 -0
- package/dist/es/CellMeasurer/CellMeasurer.DynamicHeightList.example.js +90 -0
- package/dist/es/CellMeasurer/CellMeasurer.DynamicHeightTableColumn.example.js +98 -0
- package/dist/es/CellMeasurer/CellMeasurer.DynamicWidthGrid.example.js +93 -0
- package/dist/es/CellMeasurer/CellMeasurer.DynamicWidthMultiGrid.example.js +98 -0
- package/dist/es/CellMeasurer/CellMeasurer.example.js +120 -0
- package/dist/es/CellMeasurer/CellMeasurer.jest.js +340 -0
- package/dist/es/CellMeasurer/CellMeasurer.js +187 -0
- package/dist/es/CellMeasurer/CellMeasurerCache.jest.js +293 -0
- package/dist/es/CellMeasurer/CellMeasurerCache.js +196 -0
- package/dist/es/CellMeasurer/index.js +4 -0
- package/dist/es/CellMeasurer/types.js +13 -0
- package/dist/es/Collection/Collection.example.js +223 -0
- package/dist/es/Collection/Collection.jest.js +824 -0
- package/dist/es/Collection/Collection.js +257 -0
- package/dist/es/Collection/CollectionView.js +544 -0
- package/dist/es/Collection/Section.jest.js +60 -0
- package/dist/es/Collection/Section.js +51 -0
- package/dist/es/Collection/SectionManager.jest.js +118 -0
- package/dist/es/Collection/SectionManager.js +128 -0
- package/dist/es/Collection/TestData.js +71 -0
- package/dist/es/Collection/index.js +3 -0
- package/dist/es/Collection/types.js +21 -0
- package/dist/es/Collection/utils/calculateSizeAndPositionData.jest.js +31 -0
- package/dist/es/Collection/utils/calculateSizeAndPositionData.js +31 -0
- package/dist/es/ColumnSizer/ColumnSizer.example.js +150 -0
- package/dist/es/ColumnSizer/ColumnSizer.jest.js +123 -0
- package/dist/es/ColumnSizer/ColumnSizer.js +95 -0
- package/dist/es/ColumnSizer/index.js +3 -0
- package/dist/es/Grid/Grid.example.js +321 -0
- package/dist/es/Grid/Grid.jest.js +2555 -0
- package/dist/es/Grid/Grid.js +1425 -0
- package/dist/es/Grid/Grid.ssr.js +57 -0
- package/dist/es/Grid/accessibilityOverscanIndicesGetter.jest.js +87 -0
- package/dist/es/Grid/accessibilityOverscanIndicesGetter.js +33 -0
- package/dist/es/Grid/defaultCellRangeRenderer.js +134 -0
- package/dist/es/Grid/defaultOverscanIndicesGetter.jest.js +87 -0
- package/dist/es/Grid/defaultOverscanIndicesGetter.js +29 -0
- package/dist/es/Grid/index.js +15 -0
- package/dist/es/Grid/types.js +96 -0
- package/dist/es/Grid/utils/CellSizeAndPositionManager.jest.js +372 -0
- package/dist/es/Grid/utils/CellSizeAndPositionManager.js +290 -0
- package/dist/es/Grid/utils/ScalingCellSizeAndPositionManager.jest.js +198 -0
- package/dist/es/Grid/utils/ScalingCellSizeAndPositionManager.js +198 -0
- package/dist/es/Grid/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.jest.js +81 -0
- package/dist/es/Grid/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js +53 -0
- package/dist/es/Grid/utils/maxElementSize.js +16 -0
- package/dist/es/Grid/utils/updateScrollIndexHelper.jest.js +174 -0
- package/dist/es/Grid/utils/updateScrollIndexHelper.js +79 -0
- package/dist/es/InfiniteLoader/InfiniteLoader.example.js +170 -0
- package/dist/es/InfiniteLoader/InfiniteLoader.jest.js +565 -0
- package/dist/es/InfiniteLoader/InfiniteLoader.js +263 -0
- package/dist/es/InfiniteLoader/index.js +3 -0
- package/dist/es/List/List.example.js +227 -0
- package/dist/es/List/List.jest.js +511 -0
- package/dist/es/List/List.js +312 -0
- package/dist/es/List/index.js +3 -0
- package/dist/es/List/types.js +21 -0
- package/dist/es/Masonry/Masonry.example.js +278 -0
- package/dist/es/Masonry/Masonry.jest.js +444 -0
- package/dist/es/Masonry/Masonry.js +421 -0
- package/dist/es/Masonry/PositionCache.js +82 -0
- package/dist/es/Masonry/createCellPositioner.js +53 -0
- package/dist/es/Masonry/index.js +4 -0
- package/dist/es/MultiGrid/CellMeasurerCacheDecorator.js +100 -0
- package/dist/es/MultiGrid/MultiGrid.example.js +122 -0
- package/dist/es/MultiGrid/MultiGrid.jest.js +579 -0
- package/dist/es/MultiGrid/MultiGrid.js +733 -0
- package/dist/es/MultiGrid/index.js +3 -0
- package/dist/es/ScrollSync/ScrollSync.example.js +248 -0
- package/dist/es/ScrollSync/ScrollSync.jest.js +60 -0
- package/dist/es/ScrollSync/ScrollSync.js +80 -0
- package/dist/es/ScrollSync/index.js +3 -0
- package/dist/es/Table/Column.jest.js +84 -0
- package/dist/es/Table/Column.js +85 -0
- package/dist/es/Table/SortDirection.js +13 -0
- package/dist/es/Table/SortIndicator.js +31 -0
- package/dist/es/Table/Table.example.js +316 -0
- package/dist/es/Table/Table.jest.js +1251 -0
- package/dist/es/Table/Table.js +735 -0
- package/dist/es/Table/createMultiSort.jest.js +162 -0
- package/dist/es/Table/createMultiSort.js +93 -0
- package/dist/es/Table/defaultCellDataGetter.js +15 -0
- package/dist/es/Table/defaultCellRenderer.js +13 -0
- package/dist/es/Table/defaultHeaderRenderer.js +25 -0
- package/dist/es/Table/defaultHeaderRowRenderer.js +12 -0
- package/dist/es/Table/defaultRowRenderer.js +77 -0
- package/dist/es/Table/index.js +12 -0
- package/dist/es/Table/types.js +38 -0
- package/dist/es/WindowScroller/WindowScroller.e2e.js +295 -0
- package/dist/es/WindowScroller/WindowScroller.example.js +158 -0
- package/dist/es/WindowScroller/WindowScroller.header-resize.e2e.js +356 -0
- package/dist/es/WindowScroller/WindowScroller.jest.js +530 -0
- package/dist/es/WindowScroller/WindowScroller.js +259 -0
- package/dist/es/WindowScroller/WindowScroller.js.flow +277 -0
- package/dist/es/WindowScroller/WindowScroller.ssr.js +19 -0
- package/dist/es/WindowScroller/index.js +3 -0
- package/dist/es/WindowScroller/index.js.flow +6 -0
- package/dist/es/WindowScroller/utils/dimensions.js +81 -0
- package/dist/es/WindowScroller/utils/dimensions.js.flow +91 -0
- package/dist/es/WindowScroller/utils/onScroll.js +64 -0
- package/dist/es/WindowScroller/utils/onScroll.js.flow +94 -0
- package/dist/es/index.js +13 -0
- package/dist/es/jest-setup.js +5 -0
- package/dist/es/utils/TestHelper.js +30 -0
- package/dist/es/utils/animationFrame.js +23 -0
- package/dist/es/utils/createCallbackMemoizer.jest.js +216 -0
- package/dist/es/utils/createCallbackMemoizer.js +25 -0
- package/dist/es/utils/getUpdatedOffsetForIndex.jest.js +65 -0
- package/dist/es/utils/getUpdatedOffsetForIndex.js +32 -0
- package/dist/es/utils/initCellMetadata.js +31 -0
- package/dist/es/utils/requestAnimationTimeout.js +32 -0
- package/dist/es/vendor/binarySearchBounds.js +194 -0
- package/dist/es/vendor/detectElementResize.js +186 -0
- package/dist/es/vendor/intervalTree.js +354 -0
- package/dist/umd/react-virtualized.js +4638 -0
- package/package.json +188 -0
- package/styles.css +80 -0
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
9
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
10
|
+
/*:: import type {
|
|
11
|
+
NoContentRenderer,
|
|
12
|
+
Alignment,
|
|
13
|
+
CellSize,
|
|
14
|
+
CellPosition,
|
|
15
|
+
OverscanIndicesGetter,
|
|
16
|
+
RenderedSection,
|
|
17
|
+
CellRendererParams,
|
|
18
|
+
Scroll as GridScroll,
|
|
19
|
+
} from '../Grid';*/
|
|
20
|
+
/*:: import type {RowRenderer, RenderedRows, Scroll} from './types';*/
|
|
21
|
+
import Grid, { accessibilityOverscanIndicesGetter } from '../Grid';
|
|
22
|
+
import * as React from 'react';
|
|
23
|
+
import clsx from 'clsx';
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* It is inefficient to create and manage a large list of DOM elements within a scrolling container
|
|
27
|
+
* if only a few of those elements are visible. The primary purpose of this component is to improve
|
|
28
|
+
* performance by only rendering the DOM nodes that a user is able to see based on their current
|
|
29
|
+
* scroll position.
|
|
30
|
+
*
|
|
31
|
+
* This component renders a virtualized list of elements with either fixed or dynamic heights.
|
|
32
|
+
*/
|
|
33
|
+
/*:: type Props = {
|
|
34
|
+
'aria-label'?: string,
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Removes fixed height from the scrollingContainer so that the total height
|
|
38
|
+
* of rows can stretch the window. Intended for use with WindowScroller
|
|
39
|
+
*-/
|
|
40
|
+
autoHeight: boolean,
|
|
41
|
+
|
|
42
|
+
/** Optional CSS class name *-/
|
|
43
|
+
className?: string,
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Used to estimate the total height of a List before all of its rows have actually been measured.
|
|
47
|
+
* The estimated total height is adjusted as rows are rendered.
|
|
48
|
+
*-/
|
|
49
|
+
estimatedRowSize: number,
|
|
50
|
+
|
|
51
|
+
/** Height constraint for list (determines how many actual rows are rendered) *-/
|
|
52
|
+
height: number,
|
|
53
|
+
|
|
54
|
+
/** Optional renderer to be used in place of rows when rowCount is 0 *-/
|
|
55
|
+
noRowsRenderer: NoContentRenderer,
|
|
56
|
+
|
|
57
|
+
/** Callback invoked with information about the slice of rows that were just rendered. *-/
|
|
58
|
+
|
|
59
|
+
onRowsRendered: (params: RenderedRows) => void,
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Callback invoked whenever the scroll offset changes within the inner scrollable region.
|
|
63
|
+
* This callback can be used to sync scrolling between lists, tables, or grids.
|
|
64
|
+
*-/
|
|
65
|
+
onScroll: (params: Scroll) => void,
|
|
66
|
+
|
|
67
|
+
/** See Grid#overscanIndicesGetter *-/
|
|
68
|
+
overscanIndicesGetter: OverscanIndicesGetter,
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Number of rows to render above/below the visible bounds of the list.
|
|
72
|
+
* These rows can help for smoother scrolling on touch devices.
|
|
73
|
+
*-/
|
|
74
|
+
overscanRowCount: number,
|
|
75
|
+
|
|
76
|
+
/** Either a fixed row height (number) or a function that returns the height of a row given its index. *-/
|
|
77
|
+
rowHeight: CellSize,
|
|
78
|
+
|
|
79
|
+
/** Responsible for rendering a row given an index; ({ index: number }): node *-/
|
|
80
|
+
rowRenderer: RowRenderer,
|
|
81
|
+
|
|
82
|
+
/** Number of rows in list. *-/
|
|
83
|
+
rowCount: number,
|
|
84
|
+
|
|
85
|
+
/** See Grid#scrollToAlignment *-/
|
|
86
|
+
scrollToAlignment: Alignment,
|
|
87
|
+
|
|
88
|
+
/** Row index to ensure visible (by forcefully scrolling if necessary) *-/
|
|
89
|
+
scrollToIndex: number,
|
|
90
|
+
|
|
91
|
+
/** Vertical offset. *-/
|
|
92
|
+
scrollTop?: number,
|
|
93
|
+
|
|
94
|
+
/** Optional inline style *-/
|
|
95
|
+
style: Object,
|
|
96
|
+
|
|
97
|
+
/** Tab index for focus *-/
|
|
98
|
+
tabIndex?: number,
|
|
99
|
+
|
|
100
|
+
/** Width of list *-/
|
|
101
|
+
width: number,
|
|
102
|
+
};*/
|
|
103
|
+
var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
104
|
+
function List() {
|
|
105
|
+
var _this;
|
|
106
|
+
_classCallCheck(this, List);
|
|
107
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
108
|
+
args[_key] = arguments[_key];
|
|
109
|
+
}
|
|
110
|
+
_this = _callSuper(this, List, [].concat(args));
|
|
111
|
+
_defineProperty(_this, "Grid", void 0);
|
|
112
|
+
_defineProperty(_this, "_cellRenderer", function (_ref /*:: */) {
|
|
113
|
+
var parent = _ref /*:: */.parent,
|
|
114
|
+
rowIndex = _ref /*:: */.rowIndex,
|
|
115
|
+
style = _ref /*:: */.style,
|
|
116
|
+
isScrolling = _ref /*:: */.isScrolling,
|
|
117
|
+
isVisible = _ref /*:: */.isVisible,
|
|
118
|
+
key = _ref /*:: */.key;
|
|
119
|
+
var rowRenderer = _this.props.rowRenderer;
|
|
120
|
+
|
|
121
|
+
// TRICKY The style object is sometimes cached by Grid.
|
|
122
|
+
// This prevents new style objects from bypassing shallowCompare().
|
|
123
|
+
// However as of React 16, style props are auto-frozen (at least in dev mode)
|
|
124
|
+
// Check to make sure we can still modify the style before proceeding.
|
|
125
|
+
// https://github.com/facebook/react/commit/977357765b44af8ff0cfea327866861073095c12#commitcomment-20648713
|
|
126
|
+
var widthDescriptor = Object.getOwnPropertyDescriptor(style, 'width');
|
|
127
|
+
if (widthDescriptor && widthDescriptor.writable) {
|
|
128
|
+
// By default, List cells should be 100% width.
|
|
129
|
+
// This prevents them from flowing under a scrollbar (if present).
|
|
130
|
+
style.width = '100%';
|
|
131
|
+
}
|
|
132
|
+
return rowRenderer({
|
|
133
|
+
index: rowIndex,
|
|
134
|
+
style: style,
|
|
135
|
+
isScrolling: isScrolling,
|
|
136
|
+
isVisible: isVisible,
|
|
137
|
+
key: key,
|
|
138
|
+
parent: parent
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
_defineProperty(_this, "_setRef", function (ref /*: ?React.ElementRef<typeof Grid>*/) {
|
|
142
|
+
_this.Grid = ref;
|
|
143
|
+
});
|
|
144
|
+
_defineProperty(_this, "_onScroll", function (_ref2 /*:: */) {
|
|
145
|
+
var clientHeight = _ref2 /*:: */.clientHeight,
|
|
146
|
+
scrollHeight = _ref2 /*:: */.scrollHeight,
|
|
147
|
+
scrollTop = _ref2 /*:: */.scrollTop;
|
|
148
|
+
var onScroll = _this.props.onScroll;
|
|
149
|
+
onScroll({
|
|
150
|
+
clientHeight: clientHeight,
|
|
151
|
+
scrollHeight: scrollHeight,
|
|
152
|
+
scrollTop: scrollTop
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
_defineProperty(_this, "_onSectionRendered", function (_ref3 /*:: */) {
|
|
156
|
+
var rowOverscanStartIndex = _ref3 /*:: */.rowOverscanStartIndex,
|
|
157
|
+
rowOverscanStopIndex = _ref3 /*:: */.rowOverscanStopIndex,
|
|
158
|
+
rowStartIndex = _ref3 /*:: */.rowStartIndex,
|
|
159
|
+
rowStopIndex = _ref3 /*:: */.rowStopIndex;
|
|
160
|
+
var onRowsRendered = _this.props.onRowsRendered;
|
|
161
|
+
onRowsRendered({
|
|
162
|
+
overscanStartIndex: rowOverscanStartIndex,
|
|
163
|
+
overscanStopIndex: rowOverscanStopIndex,
|
|
164
|
+
startIndex: rowStartIndex,
|
|
165
|
+
stopIndex: rowStopIndex
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
return _this;
|
|
169
|
+
}
|
|
170
|
+
_inherits(List, _React$PureComponent);
|
|
171
|
+
return _createClass(List, [{
|
|
172
|
+
key: "forceUpdateGrid",
|
|
173
|
+
value: function forceUpdateGrid() {
|
|
174
|
+
if (this.Grid) {
|
|
175
|
+
this.Grid.forceUpdate();
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/** See Grid#getOffsetForCell */
|
|
180
|
+
}, {
|
|
181
|
+
key: "getOffsetForRow",
|
|
182
|
+
value: function getOffsetForRow(_ref4 /*:: */) {
|
|
183
|
+
var alignment = _ref4 /*:: */.alignment,
|
|
184
|
+
index = _ref4 /*:: */.index;
|
|
185
|
+
if (this.Grid) {
|
|
186
|
+
var _this$Grid$getOffsetF = this.Grid.getOffsetForCell({
|
|
187
|
+
alignment: alignment,
|
|
188
|
+
rowIndex: index,
|
|
189
|
+
columnIndex: 0
|
|
190
|
+
}),
|
|
191
|
+
scrollTop = _this$Grid$getOffsetF.scrollTop;
|
|
192
|
+
return scrollTop;
|
|
193
|
+
}
|
|
194
|
+
return 0;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/** CellMeasurer compatibility */
|
|
198
|
+
}, {
|
|
199
|
+
key: "invalidateCellSizeAfterRender",
|
|
200
|
+
value: function invalidateCellSizeAfterRender(_ref5 /*:: */) {
|
|
201
|
+
var columnIndex = _ref5 /*:: */.columnIndex,
|
|
202
|
+
rowIndex = _ref5 /*:: */.rowIndex;
|
|
203
|
+
if (this.Grid) {
|
|
204
|
+
this.Grid.invalidateCellSizeAfterRender({
|
|
205
|
+
rowIndex: rowIndex,
|
|
206
|
+
columnIndex: columnIndex
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/** See Grid#measureAllCells */
|
|
212
|
+
}, {
|
|
213
|
+
key: "measureAllRows",
|
|
214
|
+
value: function measureAllRows() {
|
|
215
|
+
if (this.Grid) {
|
|
216
|
+
this.Grid.measureAllCells();
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/** CellMeasurer compatibility */
|
|
221
|
+
}, {
|
|
222
|
+
key: "recomputeGridSize",
|
|
223
|
+
value: function recomputeGridSize() {
|
|
224
|
+
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
225
|
+
_ref6$columnIndex = _ref6.columnIndex,
|
|
226
|
+
columnIndex = _ref6$columnIndex === void 0 ? 0 : _ref6$columnIndex,
|
|
227
|
+
_ref6$rowIndex = _ref6.rowIndex,
|
|
228
|
+
rowIndex = _ref6$rowIndex === void 0 ? 0 : _ref6$rowIndex;
|
|
229
|
+
if (this.Grid) {
|
|
230
|
+
this.Grid.recomputeGridSize({
|
|
231
|
+
rowIndex: rowIndex,
|
|
232
|
+
columnIndex: columnIndex
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/** See Grid#recomputeGridSize */
|
|
238
|
+
}, {
|
|
239
|
+
key: "recomputeRowHeights",
|
|
240
|
+
value: function recomputeRowHeights() {
|
|
241
|
+
var index /*: number*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
242
|
+
if (this.Grid) {
|
|
243
|
+
this.Grid.recomputeGridSize({
|
|
244
|
+
rowIndex: index,
|
|
245
|
+
columnIndex: 0
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/** See Grid#scrollToPosition */
|
|
251
|
+
}, {
|
|
252
|
+
key: "scrollToPosition",
|
|
253
|
+
value: function scrollToPosition() {
|
|
254
|
+
var scrollTop /*: number*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
255
|
+
if (this.Grid) {
|
|
256
|
+
this.Grid.scrollToPosition({
|
|
257
|
+
scrollTop: scrollTop
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/** See Grid#scrollToCell */
|
|
263
|
+
}, {
|
|
264
|
+
key: "scrollToRow",
|
|
265
|
+
value: function scrollToRow() {
|
|
266
|
+
var index /*: number*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
267
|
+
if (this.Grid) {
|
|
268
|
+
this.Grid.scrollToCell({
|
|
269
|
+
columnIndex: 0,
|
|
270
|
+
rowIndex: index
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}, {
|
|
275
|
+
key: "render",
|
|
276
|
+
value: function render() {
|
|
277
|
+
var _this$props = this.props,
|
|
278
|
+
className = _this$props.className,
|
|
279
|
+
noRowsRenderer = _this$props.noRowsRenderer,
|
|
280
|
+
scrollToIndex = _this$props.scrollToIndex,
|
|
281
|
+
width = _this$props.width;
|
|
282
|
+
var classNames = clsx('ReactVirtualized__List', className);
|
|
283
|
+
return /*#__PURE__*/React.createElement(Grid, _extends({}, this.props, {
|
|
284
|
+
autoContainerWidth: true,
|
|
285
|
+
cellRenderer: this._cellRenderer,
|
|
286
|
+
className: classNames,
|
|
287
|
+
columnWidth: width,
|
|
288
|
+
columnCount: 1,
|
|
289
|
+
noContentRenderer: noRowsRenderer,
|
|
290
|
+
onScroll: this._onScroll,
|
|
291
|
+
onSectionRendered: this._onSectionRendered,
|
|
292
|
+
ref: this._setRef,
|
|
293
|
+
scrollToRow: scrollToIndex
|
|
294
|
+
}));
|
|
295
|
+
}
|
|
296
|
+
}]);
|
|
297
|
+
}(React.PureComponent);
|
|
298
|
+
_defineProperty(List, "defaultProps", {
|
|
299
|
+
autoHeight: false,
|
|
300
|
+
estimatedRowSize: 30,
|
|
301
|
+
onScroll: function onScroll() {},
|
|
302
|
+
noRowsRenderer: function noRowsRenderer() {
|
|
303
|
+
return null;
|
|
304
|
+
},
|
|
305
|
+
onRowsRendered: function onRowsRendered() {},
|
|
306
|
+
overscanIndicesGetter: accessibilityOverscanIndicesGetter,
|
|
307
|
+
overscanRowCount: 10,
|
|
308
|
+
scrollToAlignment: 'auto',
|
|
309
|
+
scrollToIndex: -1,
|
|
310
|
+
style: {}
|
|
311
|
+
});
|
|
312
|
+
export { List as default };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/*:: export type RowRendererParams = {
|
|
3
|
+
index: number,
|
|
4
|
+
isScrolling: boolean,
|
|
5
|
+
isVisible: boolean,
|
|
6
|
+
key: string,
|
|
7
|
+
parent: Object,
|
|
8
|
+
style: Object,
|
|
9
|
+
};*/
|
|
10
|
+
/*:: export type RowRenderer = (params: RowRendererParams) => React.Element<*>;*/
|
|
11
|
+
/*:: export type RenderedRows = {
|
|
12
|
+
overscanStartIndex: number,
|
|
13
|
+
overscanStopIndex: number,
|
|
14
|
+
startIndex: number,
|
|
15
|
+
stopIndex: number,
|
|
16
|
+
};*/
|
|
17
|
+
/*:: export type Scroll = {
|
|
18
|
+
clientHeight: number,
|
|
19
|
+
scrollHeight: number,
|
|
20
|
+
scrollTop: number,
|
|
21
|
+
};*/
|
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
4
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
10
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
11
|
+
import Immutable from 'immutable';
|
|
12
|
+
import PropTypes from 'prop-types';
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox';
|
|
15
|
+
import { LabeledInput, InputRow } from '../demo/LabeledInput';
|
|
16
|
+
import { CellMeasurer, CellMeasurerCache } from '../CellMeasurer';
|
|
17
|
+
import AutoSizer from '../AutoSizer';
|
|
18
|
+
import WindowScroller from '../WindowScroller';
|
|
19
|
+
import createCellPositioner from './createCellPositioner';
|
|
20
|
+
import Masonry from './Masonry';
|
|
21
|
+
import styles from './Masonry.example.css';
|
|
22
|
+
var GridExample = /*#__PURE__*/function (_React$PureComponent) {
|
|
23
|
+
function GridExample(props, context) {
|
|
24
|
+
var _this;
|
|
25
|
+
_classCallCheck(this, GridExample);
|
|
26
|
+
_this = _callSuper(this, GridExample, [props, context]);
|
|
27
|
+
// This is a bit of a hack to simulate newly loaded cells
|
|
28
|
+
_defineProperty(_this, "_resetList", function () {
|
|
29
|
+
var ROW_HEIGHTS = [25, 50, 75, 100];
|
|
30
|
+
var list = _this.context.list;
|
|
31
|
+
list.forEach(function (datum) {
|
|
32
|
+
datum.size = ROW_HEIGHTS[Math.floor(Math.random() * ROW_HEIGHTS.length)];
|
|
33
|
+
});
|
|
34
|
+
_this._cache.clearAll();
|
|
35
|
+
_this._resetCellPositioner();
|
|
36
|
+
_this._masonry.clearCellPositions();
|
|
37
|
+
});
|
|
38
|
+
_this._columnCount = 0;
|
|
39
|
+
_this._cache = new CellMeasurerCache({
|
|
40
|
+
defaultHeight: 250,
|
|
41
|
+
defaultWidth: 200,
|
|
42
|
+
fixedWidth: true
|
|
43
|
+
});
|
|
44
|
+
_this.state = {
|
|
45
|
+
columnWidth: 200,
|
|
46
|
+
height: 300,
|
|
47
|
+
gutterSize: 10,
|
|
48
|
+
overscanByPixels: 0,
|
|
49
|
+
windowScrollerEnabled: false
|
|
50
|
+
};
|
|
51
|
+
_this._cellRenderer = _this._cellRenderer.bind(_this);
|
|
52
|
+
_this._onResize = _this._onResize.bind(_this);
|
|
53
|
+
_this._renderAutoSizer = _this._renderAutoSizer.bind(_this);
|
|
54
|
+
_this._renderMasonry = _this._renderMasonry.bind(_this);
|
|
55
|
+
_this._setMasonryRef = _this._setMasonryRef.bind(_this);
|
|
56
|
+
return _this;
|
|
57
|
+
}
|
|
58
|
+
_inherits(GridExample, _React$PureComponent);
|
|
59
|
+
return _createClass(GridExample, [{
|
|
60
|
+
key: "render",
|
|
61
|
+
value: function render() {
|
|
62
|
+
var _this2 = this;
|
|
63
|
+
var _this$state = this.state,
|
|
64
|
+
columnWidth = _this$state.columnWidth,
|
|
65
|
+
height = _this$state.height,
|
|
66
|
+
gutterSize = _this$state.gutterSize,
|
|
67
|
+
overscanByPixels = _this$state.overscanByPixels,
|
|
68
|
+
windowScrollerEnabled = _this$state.windowScrollerEnabled;
|
|
69
|
+
var child;
|
|
70
|
+
if (windowScrollerEnabled) {
|
|
71
|
+
child = /*#__PURE__*/React.createElement(WindowScroller, {
|
|
72
|
+
overscanByPixels: overscanByPixels
|
|
73
|
+
}, this._renderAutoSizer);
|
|
74
|
+
} else {
|
|
75
|
+
child = this._renderAutoSizer({
|
|
76
|
+
height: height
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return /*#__PURE__*/React.createElement(ContentBox, null, /*#__PURE__*/React.createElement(ContentBoxHeader, {
|
|
80
|
+
text: "Masonry",
|
|
81
|
+
sourceLink: "https://github.com/bvaughn/react-virtualized/blob/master/source/Masonry/Masonry.example.js",
|
|
82
|
+
docsLink: "https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md"
|
|
83
|
+
}), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, "Optimized for masonry layouts. Cells are j.i.t. measured and layed out as a user scrolls. Sizes are cached so that resize/reflow is fast and does not require re-measuring."), /*#__PURE__*/React.createElement(ContentBoxParagraph, null, /*#__PURE__*/React.createElement("label", {
|
|
84
|
+
className: styles.checkboxLabel
|
|
85
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
86
|
+
"aria-label": "Use WindowScroller?",
|
|
87
|
+
checked: windowScrollerEnabled,
|
|
88
|
+
className: styles.checkbox,
|
|
89
|
+
type: "checkbox",
|
|
90
|
+
onChange: function onChange(event) {
|
|
91
|
+
// HACK Because this demo switches between using WindowScroller and not,
|
|
92
|
+
// It's easier to clear the cache when toggling modes to avoid a partially stale state.
|
|
93
|
+
_this2._cache.clearAll();
|
|
94
|
+
_this2.setState({
|
|
95
|
+
windowScrollerEnabled: event.target.checked
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
}), "Use ", /*#__PURE__*/React.createElement("code", null, "WindowScroller"), "?"), /*#__PURE__*/React.createElement("label", {
|
|
99
|
+
className: styles.checkboxLabel
|
|
100
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
101
|
+
onClick: this._resetList
|
|
102
|
+
}, "Reset List Data"))), /*#__PURE__*/React.createElement(InputRow, null, /*#__PURE__*/React.createElement(LabeledInput, {
|
|
103
|
+
label: "Height",
|
|
104
|
+
name: "height",
|
|
105
|
+
onChange: function onChange(event) {
|
|
106
|
+
_this2.setState({
|
|
107
|
+
height: parseInt(event.target.value, 10) || 300
|
|
108
|
+
});
|
|
109
|
+
},
|
|
110
|
+
value: height
|
|
111
|
+
}), /*#__PURE__*/React.createElement(LabeledInput, {
|
|
112
|
+
label: "Column Width",
|
|
113
|
+
name: "columnWidth",
|
|
114
|
+
onChange: function onChange(event) {
|
|
115
|
+
_this2._cache.clearAll();
|
|
116
|
+
_this2.setState({
|
|
117
|
+
columnWidth: parseInt(event.target.value, 10) || 200
|
|
118
|
+
}, function () {
|
|
119
|
+
_this2._calculateColumnCount();
|
|
120
|
+
_this2._resetCellPositioner();
|
|
121
|
+
_this2._masonry.clearCellPositions();
|
|
122
|
+
});
|
|
123
|
+
},
|
|
124
|
+
value: columnWidth
|
|
125
|
+
}), /*#__PURE__*/React.createElement(LabeledInput, {
|
|
126
|
+
label: "Gutter Size",
|
|
127
|
+
name: "gutterSize",
|
|
128
|
+
onChange: function onChange(event) {
|
|
129
|
+
_this2.setState({
|
|
130
|
+
gutterSize: parseInt(event.target.value, 10) || 10
|
|
131
|
+
}, function () {
|
|
132
|
+
_this2._calculateColumnCount();
|
|
133
|
+
_this2._resetCellPositioner();
|
|
134
|
+
_this2._masonry.recomputeCellPositions();
|
|
135
|
+
});
|
|
136
|
+
},
|
|
137
|
+
value: gutterSize
|
|
138
|
+
}), /*#__PURE__*/React.createElement(LabeledInput, {
|
|
139
|
+
label: "Overscan (px)",
|
|
140
|
+
name: "overscanByPixels",
|
|
141
|
+
onChange: function onChange(event) {
|
|
142
|
+
_this2.setState({
|
|
143
|
+
overscanByPixels: parseInt(event.target.value, 10) || 0
|
|
144
|
+
});
|
|
145
|
+
},
|
|
146
|
+
value: overscanByPixels
|
|
147
|
+
})), child);
|
|
148
|
+
}
|
|
149
|
+
}, {
|
|
150
|
+
key: "_calculateColumnCount",
|
|
151
|
+
value: function _calculateColumnCount() {
|
|
152
|
+
var _this$state2 = this.state,
|
|
153
|
+
columnWidth = _this$state2.columnWidth,
|
|
154
|
+
gutterSize = _this$state2.gutterSize;
|
|
155
|
+
this._columnCount = Math.floor(this._width / (columnWidth + gutterSize));
|
|
156
|
+
}
|
|
157
|
+
}, {
|
|
158
|
+
key: "_cellRenderer",
|
|
159
|
+
value: function _cellRenderer(_ref) {
|
|
160
|
+
var index = _ref.index,
|
|
161
|
+
key = _ref.key,
|
|
162
|
+
parent = _ref.parent,
|
|
163
|
+
style = _ref.style;
|
|
164
|
+
var list = this.context.list;
|
|
165
|
+
var columnWidth = this.state.columnWidth;
|
|
166
|
+
var datum = list.get(index % list.size);
|
|
167
|
+
return /*#__PURE__*/React.createElement(CellMeasurer, {
|
|
168
|
+
cache: this._cache,
|
|
169
|
+
index: index,
|
|
170
|
+
key: key,
|
|
171
|
+
parent: parent
|
|
172
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
173
|
+
className: styles.Cell,
|
|
174
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
175
|
+
width: columnWidth
|
|
176
|
+
})
|
|
177
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
178
|
+
style: {
|
|
179
|
+
backgroundColor: datum.color,
|
|
180
|
+
borderRadius: '0.5rem',
|
|
181
|
+
height: datum.size * 3,
|
|
182
|
+
marginBottom: '0.5rem',
|
|
183
|
+
width: '100%',
|
|
184
|
+
fontSize: 20,
|
|
185
|
+
color: 'white',
|
|
186
|
+
display: 'flex',
|
|
187
|
+
alignItems: 'center',
|
|
188
|
+
justifyContent: 'center'
|
|
189
|
+
}
|
|
190
|
+
}, index), datum.random));
|
|
191
|
+
}
|
|
192
|
+
}, {
|
|
193
|
+
key: "_initCellPositioner",
|
|
194
|
+
value: function _initCellPositioner() {
|
|
195
|
+
if (typeof this._cellPositioner === 'undefined') {
|
|
196
|
+
var _this$state3 = this.state,
|
|
197
|
+
columnWidth = _this$state3.columnWidth,
|
|
198
|
+
gutterSize = _this$state3.gutterSize;
|
|
199
|
+
this._cellPositioner = createCellPositioner({
|
|
200
|
+
cellMeasurerCache: this._cache,
|
|
201
|
+
columnCount: this._columnCount,
|
|
202
|
+
columnWidth: columnWidth,
|
|
203
|
+
spacer: gutterSize
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}, {
|
|
208
|
+
key: "_onResize",
|
|
209
|
+
value: function _onResize(_ref2) {
|
|
210
|
+
var width = _ref2.width;
|
|
211
|
+
this._width = width;
|
|
212
|
+
this._calculateColumnCount();
|
|
213
|
+
this._resetCellPositioner();
|
|
214
|
+
this._masonry.recomputeCellPositions();
|
|
215
|
+
}
|
|
216
|
+
}, {
|
|
217
|
+
key: "_renderAutoSizer",
|
|
218
|
+
value: function _renderAutoSizer(_ref3) {
|
|
219
|
+
var height = _ref3.height,
|
|
220
|
+
scrollTop = _ref3.scrollTop;
|
|
221
|
+
this._height = height;
|
|
222
|
+
this._scrollTop = scrollTop;
|
|
223
|
+
var overscanByPixels = this.state.overscanByPixels;
|
|
224
|
+
return /*#__PURE__*/React.createElement(AutoSizer, {
|
|
225
|
+
disableHeight: true,
|
|
226
|
+
height: height,
|
|
227
|
+
onResize: this._onResize,
|
|
228
|
+
overscanByPixels: overscanByPixels,
|
|
229
|
+
scrollTop: this._scrollTop
|
|
230
|
+
}, this._renderMasonry);
|
|
231
|
+
}
|
|
232
|
+
}, {
|
|
233
|
+
key: "_renderMasonry",
|
|
234
|
+
value: function _renderMasonry(_ref4) {
|
|
235
|
+
var width = _ref4.width;
|
|
236
|
+
this._width = width;
|
|
237
|
+
this._calculateColumnCount();
|
|
238
|
+
this._initCellPositioner();
|
|
239
|
+
var _this$state4 = this.state,
|
|
240
|
+
height = _this$state4.height,
|
|
241
|
+
overscanByPixels = _this$state4.overscanByPixels,
|
|
242
|
+
windowScrollerEnabled = _this$state4.windowScrollerEnabled;
|
|
243
|
+
return /*#__PURE__*/React.createElement(Masonry, {
|
|
244
|
+
autoHeight: windowScrollerEnabled,
|
|
245
|
+
cellCount: 1000,
|
|
246
|
+
cellMeasurerCache: this._cache,
|
|
247
|
+
cellPositioner: this._cellPositioner,
|
|
248
|
+
cellRenderer: this._cellRenderer,
|
|
249
|
+
height: windowScrollerEnabled ? this._height : height,
|
|
250
|
+
overscanByPixels: overscanByPixels,
|
|
251
|
+
ref: this._setMasonryRef,
|
|
252
|
+
scrollTop: this._scrollTop,
|
|
253
|
+
width: width
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
}, {
|
|
257
|
+
key: "_resetCellPositioner",
|
|
258
|
+
value: function _resetCellPositioner() {
|
|
259
|
+
var _this$state5 = this.state,
|
|
260
|
+
columnWidth = _this$state5.columnWidth,
|
|
261
|
+
gutterSize = _this$state5.gutterSize;
|
|
262
|
+
this._cellPositioner.reset({
|
|
263
|
+
columnCount: this._columnCount,
|
|
264
|
+
columnWidth: columnWidth,
|
|
265
|
+
spacer: gutterSize
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
}, {
|
|
269
|
+
key: "_setMasonryRef",
|
|
270
|
+
value: function _setMasonryRef(ref) {
|
|
271
|
+
this._masonry = ref;
|
|
272
|
+
}
|
|
273
|
+
}]);
|
|
274
|
+
}(React.PureComponent);
|
|
275
|
+
_defineProperty(GridExample, "contextTypes", {
|
|
276
|
+
list: PropTypes.instanceOf(Immutable.List).isRequired
|
|
277
|
+
});
|
|
278
|
+
export { GridExample as default };
|