From cdf845486946654352fbf058a73de1c9df70a746 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 1 Mar 2019 12:09:59 +0100 Subject: [PATCH 1/2] Add RTL support for List component --- src/createListComponent.js | 7 +- website/src/App.js | 6 ++ .../src/code/FixedSizeListHorizontalRtl.js | 18 +++++ website/src/code/FixedSizeListVerticalRtl.js | 17 +++++ .../src/routes/examples/FixedSizeListRtl.js | 75 +++++++++++++++++++ 5 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 website/src/code/FixedSizeListHorizontalRtl.js create mode 100644 website/src/code/FixedSizeListVerticalRtl.js create mode 100644 website/src/routes/examples/FixedSizeListRtl.js diff --git a/src/createListComponent.js b/src/createListComponent.js index daa34625..7b59c364 100644 --- a/src/createListComponent.js +++ b/src/createListComponent.js @@ -396,6 +396,7 @@ export default function createListComponent({ itemStyleCache[index] = style = { position: 'absolute', left: direction === 'horizontal' ? offset : 0, + right: direction === 'horizontal' ? offset : 0, top: direction === 'vertical' ? offset : 0, height: direction === 'vertical' ? size : '100%', width: direction === 'horizontal' ? size : '100%', @@ -448,7 +449,7 @@ export default function createListComponent({ } _onScrollHorizontal = (event: ScrollEvent): void => { - const { scrollLeft } = event.currentTarget; + const { scrollLeft, scrollWidth, clientWidth } = event.currentTarget; this.setState(prevState => { if (prevState.scrollOffset === scrollLeft) { // Scroll position may have been updated by cDM/cDU, @@ -457,11 +458,13 @@ export default function createListComponent({ return null; } + const isRtl = this.props.style && this.props.style.direction === 'rtl'; + return { isScrolling: true, scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', - scrollOffset: scrollLeft, + scrollOffset: isRtl ? scrollWidth - clientWidth - scrollLeft : scrollLeft, scrollUpdateWasRequested: false, }; }, this._resetIsScrollingDebounced); diff --git a/website/src/App.js b/website/src/App.js index d24571cc..8b91285d 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -14,6 +14,7 @@ import FixedSizeGridApi from './routes/api/FixedSizeGrid'; import FixedSizeListApi from './routes/api/FixedSizeList'; import FixedSizeGridExample from './routes/examples/FixedSizeGrid'; import FixedSizeListExample from './routes/examples/FixedSizeList'; +import FixedSizeListExampleRtl from './routes/examples/FixedSizeListRtl'; import ListWithScrollingIndicatorExample from './routes/examples/ListWithScrollingIndicator'; import ScrollToItemExample from './routes/examples/ScrollToItem'; import MemoizedListItemsExample from './routes/examples/MemoizedListItemsExample'; @@ -95,6 +96,11 @@ const EXAMPLE_ROUTES = [ title: 'Memoized List items', component: MemoizedListItemsExample, }, + { + path: '/examples/list/fixed-size-rtl', + title: 'Fixed Size List RTL', + component: FixedSizeListExampleRtl, + }, ]; const COMPONENTS_ROUTES = [ diff --git a/website/src/code/FixedSizeListHorizontalRtl.js b/website/src/code/FixedSizeListHorizontalRtl.js new file mode 100644 index 00000000..12132df1 --- /dev/null +++ b/website/src/code/FixedSizeListHorizontalRtl.js @@ -0,0 +1,18 @@ +import { FixedSizeList as List } from 'react-window'; + +const Column = ({ index, style }) => ( +
Column {index}
+); + +const Example = () => ( + + {Column} + +); diff --git a/website/src/code/FixedSizeListVerticalRtl.js b/website/src/code/FixedSizeListVerticalRtl.js new file mode 100644 index 00000000..8b83e529 --- /dev/null +++ b/website/src/code/FixedSizeListVerticalRtl.js @@ -0,0 +1,17 @@ +import { FixedSizeList as List } from 'react-window'; + +const Row = ({ index, style }) => ( +
Row {index}
+); + +const Example = () => ( + + {Row} + +); diff --git a/website/src/routes/examples/FixedSizeListRtl.js b/website/src/routes/examples/FixedSizeListRtl.js new file mode 100644 index 00000000..eb79071d --- /dev/null +++ b/website/src/routes/examples/FixedSizeListRtl.js @@ -0,0 +1,75 @@ +import React, { PureComponent } from 'react'; +import { FixedSizeList } from 'react-window'; +import CodeBlock from '../../components/CodeBlock'; +import ProfiledExample from '../../components/ProfiledExample'; + +import CODE_HORIZONTAL from '../../code/FixedSizeListHorizontalRtl.js'; +import CODE_VERTICAL from '../../code/FixedSizeListVerticalRtl.js'; + +import styles from './shared.module.css'; + +class Item extends PureComponent { + render() { + const { data, index, style } = this.props; + + return ( +
+ {data} {index} +
+ ); + } +} + +export default function() { + return ( +
+

Basic List

+
+ + + {Item} + + +
+ +
+
+
+ + + {Item} + + +
+ +
+
+
+ ); +} From ebdb13141b6ae8dfdedced24a36ff65d933b02e9 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 1 Mar 2019 12:58:09 +0100 Subject: [PATCH 2/2] Fix lint error --- src/createListComponent.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/createListComponent.js b/src/createListComponent.js index 7b59c364..8acb6e7a 100644 --- a/src/createListComponent.js +++ b/src/createListComponent.js @@ -464,7 +464,9 @@ export default function createListComponent({ isScrolling: true, scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', - scrollOffset: isRtl ? scrollWidth - clientWidth - scrollLeft : scrollLeft, + scrollOffset: isRtl + ? scrollWidth - clientWidth - scrollLeft + : scrollLeft, scrollUpdateWasRequested: false, }; }, this._resetIsScrollingDebounced);