+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
+
+### Why is my list blank when I scroll?
+
+If your list looks something like this...
+
+
+
+...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!
+
+
+
+### Can I lazy load data for my list?
+
+Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
+
+
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
+
+### Can I attach custom properties or event handlers?
+
+Yes, using the `outerElementType` prop.
+
+
+
+Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
+
## License
MIT © [bvaughn](https://github.com/bvaughn)
diff --git a/package.json b/package.json
index f56c709..7906a59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-window",
- "version": "1.6.0-alpha.1",
+ "version": "1.7.0-alpha.1",
"description":
"React components for efficiently rendering large, scrollable lists and tabular data",
"author":
@@ -61,7 +61,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
- "memoize-one": "^3.1.1"
+ "memoize-one": ">=3.1.1 <6"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
@@ -99,9 +99,9 @@
"react-dom": "^16.7.0",
"react-scripts": "^1.1.1",
"react-test-renderer": "^16.7.0",
- "rollup": "^0.65.0",
- "rollup-plugin-babel": "^4.0.2",
- "rollup-plugin-commonjs": "^8.2.1",
- "rollup-plugin-node-resolve": "^3.0.2"
+ "rollup": "^1.4.1",
+ "rollup-plugin-babel": "^4.3.2",
+ "rollup-plugin-commonjs": "^9.2.1",
+ "rollup-plugin-node-resolve": "^4.0.1"
}
}
diff --git a/rollup.config.js b/rollup.config.js
index 5d167d1..c05d722 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,6 +1,7 @@
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
+
import pkg from './package.json';
const input = './src/index.js';
diff --git a/src/DynamicSizeList.js b/src/DynamicSizeList.js
index 6ec34f0..26149e6 100644
--- a/src/DynamicSizeList.js
+++ b/src/DynamicSizeList.js
@@ -152,7 +152,7 @@ const DynamicSizeList = createListComponent({
scrollOffset: number,
instanceProps: InstanceProps
): number => {
- const { direction, height, width } = props;
+ const { direction, layout, height, width } = props;
if (process.env.NODE_ENV !== 'production') {
const { lastMeasuredIndex } = instanceProps;
@@ -164,7 +164,9 @@ const DynamicSizeList = createListComponent({
}
}
- const size = (((direction === 'horizontal' ? width : height): any): number);
+ const size = (((direction === 'horizontal' || layout === 'horizontal'
+ ? width
+ : height): any): number);
const itemMetadata = getItemMetadata(props, index, instanceProps);
// Get estimated total size after ItemMetadata is computed,
@@ -225,9 +227,11 @@ const DynamicSizeList = createListComponent({
scrollOffset: number,
instanceProps: InstanceProps
): number => {
- const { direction, height, itemCount, width } = props;
+ const { direction, layout, height, itemCount, width } = props;
- const size = (((direction === 'horizontal' ? width : height): any): number);
+ const size = (((direction === 'horizontal' || layout === 'horizontal'
+ ? width
+ : height): any): number);
const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
const maxOffset = scrollOffset + size;
@@ -325,7 +329,7 @@ const DynamicSizeList = createListComponent({
instance.forceUpdate();
} else {
const { scrollOffset } = instance.state;
- const { direction } = instance.props;
+ const { direction, layout } = instance.props;
// Adjusting scroll offset directly interrupts smooth scrolling for some browsers (e.g. Firefox).
// The relative scrollBy() method doesn't interrupt (or at least it won't as of Firefox v65).
@@ -335,10 +339,17 @@ const DynamicSizeList = createListComponent({
// $FlowFixMe Property scrollBy is missing in HTMLDivElement
if (typeof element.scrollBy === 'function') {
element.scrollBy(
- direction === 'horizontal' ? sizeDeltaForStateUpdate : 0,
- direction === 'horizontal' ? 0 : sizeDeltaForStateUpdate
+ direction === 'horizontal' || layout === 'horizontal'
+ ? sizeDeltaForStateUpdate
+ : 0,
+ direction === 'horizontal' || layout === 'horizontal'
+ ? 0
+ : sizeDeltaForStateUpdate
);
- } else if (direction === 'horizontal') {
+ } else if (
+ direction === 'horizontal' ||
+ layout === 'horizontal'
+ ) {
element.scrollLeft = scrollOffset;
} else {
element.scrollTop = scrollOffset;
@@ -418,6 +429,7 @@ const DynamicSizeList = createListComponent({
const {
children,
direction,
+ layout,
itemCount,
itemData,
itemKey = defaultItemKey,
@@ -451,6 +463,7 @@ const DynamicSizeList = createListComponent({
items.push(
createElement(ItemMeasurer, {
direction,
+ layout,
handleNewMeasurements,
index,
item,
diff --git a/src/FixedSizeGrid.js b/src/FixedSizeGrid.js
index f446acb..6224f71 100644
--- a/src/FixedSizeGrid.js
+++ b/src/FixedSizeGrid.js
@@ -27,7 +27,9 @@ const FixedSizeGrid = createGridComponent({
{ columnCount, columnWidth, width }: PropsDetermines the direction of text and horizontal scrolling.
+
+ This property also automatically sets the{' '}
+
+ CSS direction style
+ {' '}
+ for the grid component.
+
diff --git a/website/src/routes/api/FixedSizeList.js b/website/src/routes/api/FixedSizeList.js
index dea1aed..70be84c 100644
--- a/website/src/routes/api/FixedSizeList.js
+++ b/website/src/routes/api/FixedSizeList.js
@@ -58,17 +58,24 @@ const PROPS = [
type: 'string',
},
{
- defaultValue: '"vertical"',
+ defaultValue: '"ltr"',
description: (
Primary scroll direction of the list. Acceptable values are: Determines the direction of text and horizontal scrolling.
- Note that lists may scroll in both directions (depending on CSS) but
- content will only be windowed in the primary direction.
+ This property also automatically sets the{' '}
+
+ CSS Layout/orientation of the list. Acceptable values are:
+ Note that lists may scroll in both directions (depending on CSS) but
+ content will only be windowed in the layout direction specified.
+
-
direction style
+ {' '}
+ for the list component.
+
+
RTL List
+ RTL Grid
+