From 3eedc4335887ec6f85ebe725254d807f26c277ae Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 11:21:43 -0600 Subject: [PATCH 01/10] Pass itemData to itemKey --- types/react-window/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 168551cc94..2153838937 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -69,7 +69,7 @@ export interface CommonProps { useIsScrolling?: boolean; } -export type ListItemKeySelector = (index: number) => Key; +export type ListItemKeySelector = (index: number, data: any) => Key; export interface ListOnItemsRenderedProps { overscanStartIndex: number; @@ -146,7 +146,7 @@ export interface ListProps extends CommonProps { } export type GridItemKeySelector = ( - params: { columnIndex: number; rowIndex: number } + params: { columnIndex: number; rowIndex: number; data: any } ) => Key; export interface GridOnItemsRenderedProps { From 702a8bf8fa827e6af5f6b7fa272e6ab9235b3c29 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 12:36:23 -0600 Subject: [PATCH 02/10] Pass data and isScrolling to child component props --- types/react-window/index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 2153838937..46fbce7569 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -13,12 +13,16 @@ export type Align = "auto" | "center" | "end" | "start"; export interface ListChildComponentProps { index: number; style: CSSProperties; + data: any; + isScrolling?: boolean; } export interface GridChildComponentProps { columnIndex: number; rowIndex: number; style: CSSProperties; + data: any; + isScrolling?: boolean; } export interface CommonProps { From 495d2da628078c96d2b8a68b5afcbf717c166ca7 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 11:35:40 -0600 Subject: [PATCH 03/10] Split overscanCount into columns and rows --- types/react-window/index.d.ts | 47 ++++++++++++++++++----- types/react-window/react-window-tests.tsx | 3 +- 2 files changed, 40 insertions(+), 10 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 46fbce7569..cd98a709e1 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -52,15 +52,6 @@ export interface CommonProps { * Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used. */ outerTagName?: string; - /** - * The number of items (rows or columns) to render outside of the visible area. This property can be important for two reasons: - * - * - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. - * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. - * - * Note that overscanning too much can negatively impact performance. By default, List overscans by one item. - */ - overscanCount?: number; /** * Optional inline style to attach to outermost
element. */ @@ -139,6 +130,15 @@ export interface ListProps extends CommonProps { * If your list does not satisfy the above constraints, use the itemKey property to specify your own keys for items */ itemKey?: ListItemKeySelector; + /** + * The number of items (rows or columns) to render outside of the visible area. This property can be important for two reasons: + * + * - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. + * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. + * + * Note that overscanning too much can negatively impact performance. By default, List overscans by one item. + */ + overscanCount?: number; /** * Called when the items rendered by the list change. */ @@ -212,6 +212,35 @@ export interface GridProps extends CommonProps { * Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls. */ onScroll?: (props: GridOnScrollProps) => any; + /** + * The number of columns to render outside of the visible area. This property can be important for two reasons: + * + * - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. + * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. + * + * Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. + */ + overscanColumnsCount?: number; + /** + * The number of rows to render outside of the visible area. This property can be important for two reasons: + * + * - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. + * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. + * + * Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. + */ + overscanRowsCount?: number; + /** + * The number of items (rows or columns) to render outside of the visible area. This property can be important for two reasons: + * + * - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. + * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. + * + * Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. + * + * @deprecated since version 1.4.0 + */ + overscanCount?: number; /** * Number of rows in the grid. Note that only a few rows will be rendered and displayed at a time. */ diff --git a/types/react-window/react-window-tests.tsx b/types/react-window/react-window-tests.tsx index 8af77f05d6..8cad93227f 100644 --- a/types/react-window/react-window-tests.tsx +++ b/types/react-window/react-window-tests.tsx @@ -185,7 +185,8 @@ const VariableSizeGridTestOptionalProps: React.SFC = () => ( }) => undefined} outerRef={anyRef} outerTagName="div" - overscanCount={5} + overscanColumnsCount={5} + overscanRowsCount={5} ref="ref" style={{ color: "red" }} useIsScrolling={true} From 5fdb0ee1564c286aacb5d156def7ea604a63c26f Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 11:55:43 -0600 Subject: [PATCH 04/10] Rename inner/outer TagName to ElementType This commit also widens the type to be closer to what React.createElement accepts, since ultimately these props are passed straight through to it. --- types/react-window/index.d.ts | 26 ++++++++++++++++++++++- types/react-window/react-window-tests.tsx | 12 +++++------ 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index cd98a709e1..c74440f562 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -4,7 +4,15 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 -import { Component, ComponentType, CSSProperties, Ref, Key } from "react"; +import { + Component, + ComponentType, + CSSProperties, + Ref, + Key, + FunctionComponent, + ComponentClass +} from "react"; export type Direction = "vertical" | "horizontal"; export type ScrollDirection = "forward" | "backward"; @@ -25,17 +33,27 @@ export interface GridChildComponentProps { isScrolling?: boolean; } +// This is supposed to represent the type of the first parameter to +// React.createElement. +type ReactElementType = FunctionComponent | ComponentClass | string; + export interface CommonProps { /** * Optional CSS class to attach to outermost
element. */ className?: string; + /** + * Tag name passed to document.createElement to create the inner container element. This is an advanced property; in most cases, the default ("div") should be used. + */ + innerElementType?: ReactElementType; /** * Ref to attach to the inner container element. This is an advanced property. */ innerRef?: Ref; /** * Tag name passed to document.createElement to create the inner container element. This is an advanced property; in most cases, the default ("div") should be used. + * + * @deprecated since 1.4.0 */ innerTagName?: string; /** @@ -44,12 +62,18 @@ export interface CommonProps { * Item data is useful for item renderers that are class components. */ itemData?: any; + /** + * Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used. + */ + outerElementType?: ReactElementType; /** * Ref to attach to the outer container element. This is an advanced property. */ outerRef?: Ref; /** * Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used. + * + * @deprecated since 1.4.0 */ outerTagName?: string; /** diff --git a/types/react-window/react-window-tests.tsx b/types/react-window/react-window-tests.tsx index 8cad93227f..d41b95474d 100644 --- a/types/react-window/react-window-tests.tsx +++ b/types/react-window/react-window-tests.tsx @@ -66,7 +66,7 @@ const FixedSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({ direction={testBool ? "vertical" : "horizontal"} initialScrollOffset={0} innerRef={anyRef} - innerTagName="div" + innerElementType="div" itemData={{ foo: "bar" }} itemKey={index => "foo" + index.toString()} onItemsRendered={({ @@ -81,7 +81,7 @@ const FixedSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({ visibleStopIndex } useIsScrolling={true} - outerTagName="div" + outerElementType="div" style={{ color: "cyan" }} overscanCount={0} outerRef={anyRef} @@ -112,7 +112,7 @@ const VariableSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({ direction={testBool ? "vertical" : "horizontal"} initialScrollOffset={0} innerRef={anyRef} - innerTagName="div" + innerElementType="div" itemData={{ foo: "bar" }} itemKey={index => "foo" + index.toString()} onItemsRendered={({ @@ -127,7 +127,7 @@ const VariableSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({ visibleStopIndex } useIsScrolling={true} - outerTagName="div" + outerElementType="div" style={{ color: "cyan" }} overscanCount={0} outerRef={anyRef} @@ -161,7 +161,7 @@ const VariableSizeGridTestOptionalProps: React.SFC = () => ( initialScrollLeft={0} initialScrollTop={0} innerRef={anyRef} - innerTagName="div" + innerElementType="div" itemData={{ foo: "bar" }} itemKey={({ columnIndex, rowIndex }) => columnIndex.toString() + rowIndex.toString() @@ -184,7 +184,7 @@ const VariableSizeGridTestOptionalProps: React.SFC = () => ( verticalScrollDirection }) => undefined} outerRef={anyRef} - outerTagName="div" + outerElementType="div" overscanColumnsCount={5} overscanRowsCount={5} ref="ref" From 71fa66c5fc312b966aa3451e141527a9af07d80e Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 12:12:27 -0600 Subject: [PATCH 05/10] Add areEqual, custom shouldComponentUpdate --- types/react-window/index.d.ts | 23 +++++++++++++++++++++++ types/react-window/react-window-tests.tsx | 20 +++++++++++++++++++- 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index c74440f562..e801ab02c2 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -459,3 +459,26 @@ export class VariableSizeGrid extends Component { */ resetAfterRowIndex(index: number, shouldForceUpdate?: boolean): void; } + +/** + * Custom comparison function for React.memo(). + * It knows to compare individual style props and ignore the wrapper object. + * + * @see https://reactjs.org/docs/react-api.html#reactmemo + */ +export function areEqual( + prevProps: Readonly, + nextProps: Readonly +): boolean; + +/** + * Custom shouldComponentUpdate for class components. + * It knows to compare individual style props and ignore the wrapper object. + * + * @see https://reactjs.org/docs/react-component.html#shouldcomponentupdate + */ +export function shouldComponentUpdate

( + this: { props: P; state: S }, + nextProps: Readonly

, + nextState: Readonly +): boolean; diff --git a/types/react-window/react-window-tests.tsx b/types/react-window/react-window-tests.tsx index d41b95474d..8f2ca4048b 100644 --- a/types/react-window/react-window-tests.tsx +++ b/types/react-window/react-window-tests.tsx @@ -2,7 +2,10 @@ import { FixedSizeList, VariableSizeList, FixedSizeGrid, - VariableSizeGrid + VariableSizeGrid, + ListChildComponentProps, + areEqual, + shouldComponentUpdate } from "react-window"; import * as React from "react"; @@ -198,3 +201,18 @@ const VariableSizeGridTestOptionalProps: React.SFC = () => ( )} ); + +const RowWithAreEqual = React.memo((props: ListChildComponentProps) => { + const { index, style } = props; + return

Row {index}
; +}, areEqual); + +class RowWithShouldComponentUpdate extends React.Component< + ListChildComponentProps +> { + shouldComponentUpdate = shouldComponentUpdate.bind(this); + render() { + const { index, style } = this.props; + return
Row {index}
; + } +} From 5cdd11ba1c167720ea07d59470505cbd6cc4a255 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 12:44:05 -0600 Subject: [PATCH 06/10] Minor spelling fixes --- types/react-window/index.d.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index e801ab02c2..a7d59c77a9 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -83,7 +83,7 @@ export interface CommonProps { /** * Adds an additional isScrolling parameter to the children render function. This parameter can be used to show a placeholder row or column while the list is being scrolled. * - * Note that using this parameter will result in an additional render call after scrolling has stopped (whenisScrolling changse from true to false). + * Note that using this parameter will result in an additional render call after scrolling has stopped (when isScrolling changes from true to false). */ useIsScrolling?: boolean; } @@ -371,11 +371,11 @@ export class VariableSizeList extends Component { /** * VariableSizeList caches offsets and measurements for each index for performance purposes. * This method clears that cached data for all items after (and including) the specified index. - * It should be called whenever a item's size changes. (Note that this is not a typical occurrance.) + * It should be called whenever a item's size changes. (Note that this is not a typical occurrence.) * * By default the list will automatically re-render after the index is reset. * If you would like to delay this re-render until e.g. a state update has completed in the parent component, - * specify a value offalsefor the second, optional parameter. + * specify a value of false for the second, optional parameter. */ resetAfterIndex(index: number, shouldForceUpdate: boolean): void; } @@ -427,21 +427,21 @@ export class VariableSizeGrid extends Component { /** * VariableSizeGrid caches offsets and measurements for each column index for performance purposes. * This method clears that cached data for all columns after (and including) the specified index. - * It should be called whenever a column's width changes. (Note that this is not a typical occurrance.) + * It should be called whenever a column's width changes. (Note that this is not a typical occurrence.) * * By default the grid will automatically re-render after the index is reset. * If you would like to delay this re-render until e.g. a state update has completed in the parent component, - * specify a value offalse for the second, optional parameter. + * specify a value of false for the second, optional parameter. */ resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean): void; /** * VariableSizeGrid caches offsets and measurements for each item for performance purposes. * This method clears that cached data for all items after (and including) the specified indices. - * It should be called whenever an items size changes. (Note that this is not a typical occurrance.) + * It should be called whenever an items size changes. (Note that this is not a typical occurrence.) * * By default the grid will automatically re-render after the index is reset. * If you would like to delay this re-render until e.g. a state update has completed in the parent component, - * specify a value offalse for the optional shouldForceUpdate parameter. + * specify a value of false for the optional shouldForceUpdate parameter. */ resetAfterIndices(params: { columnIndex: number; @@ -451,11 +451,11 @@ export class VariableSizeGrid extends Component { /** * VariableSizeGrid caches offsets and measurements for each row index for performance purposes. * This method clears that cached data for all rows after (and including) the specified index. - * It should be called whenever a row's height changes. (Note that this is not a typical occurrance.) + * It should be called whenever a row's height changes. (Note that this is not a typical occurrence.) * * By default the grid will automatically re-render after the index is reset. * If you would like to delay this re-render until e.g. a state update has completed in the parent component, - * specify a value offalse for the second, optional parameter. + * specify a value of false for the second, optional parameter. */ resetAfterRowIndex(index: number, shouldForceUpdate?: boolean): void; } From 9327b56a6d5b00cac2ea42d11474d457a8272366 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 12:17:20 -0600 Subject: [PATCH 07/10] Supported version to 1.5, add name to contributors --- types/react-window/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index a7d59c77a9..6362da40d1 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -1,6 +1,7 @@ -// Type definitions for react-window 1.1 +// Type definitions for react-window 1.5 // Project: https://github.com/bvaughn/react-window/ // Definitions by: Martynas Kadiša +// Alex Guerra // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 From 450339361825dd32428ee20d34a44bb1d6c936bb Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Thu, 7 Feb 2019 14:53:27 -0600 Subject: [PATCH 08/10] Fix ci issues --- types/react-window/index.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 6362da40d1..4014988270 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Martynas Kadiša // Alex Guerra // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 +// TypeScript Version: 3.0 import { Component, @@ -36,7 +36,10 @@ export interface GridChildComponentProps { // This is supposed to represent the type of the first parameter to // React.createElement. -type ReactElementType = FunctionComponent | ComponentClass | string; +export type ReactElementType = + | FunctionComponent + | ComponentClass + | string; export interface CommonProps { /** From 31c580500162b74e68cf98bf1fd5c2824f3e3a19 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Tue, 12 Feb 2019 15:02:11 -0600 Subject: [PATCH 09/10] Make tests pass in 2.8 --- types/react-window/index.d.ts | 2 +- types/react-window/react-window-tests.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 4014988270..529274fb27 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Martynas Kadiša // Alex Guerra // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.0 +// TypeScript Version: 2.8 import { Component, diff --git a/types/react-window/react-window-tests.tsx b/types/react-window/react-window-tests.tsx index 8f2ca4048b..febd9ae500 100644 --- a/types/react-window/react-window-tests.tsx +++ b/types/react-window/react-window-tests.tsx @@ -210,7 +210,9 @@ const RowWithAreEqual = React.memo((props: ListChildComponentProps) => { class RowWithShouldComponentUpdate extends React.Component< ListChildComponentProps > { - shouldComponentUpdate = shouldComponentUpdate.bind(this); + shouldComponentUpdate(...args: any[]) { + return shouldComponentUpdate.call(this, ...args); + } render() { const { index, style } = this.props; return
Row {index}
; From 5b070cb0b7d73d997b5ac64f68301329a06037d1 Mon Sep 17 00:00:00 2001 From: Alex Guerra Date: Tue, 12 Feb 2019 15:02:41 -0600 Subject: [PATCH 10/10] Latest prettier --- types/react-window/index.d.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts index 529274fb27..d1b723985f 100644 --- a/types/react-window/index.d.ts +++ b/types/react-window/index.d.ts @@ -177,9 +177,11 @@ export interface ListProps extends CommonProps { onScroll?: (props: ListOnScrollProps) => any; } -export type GridItemKeySelector = ( - params: { columnIndex: number; rowIndex: number; data: any } -) => Key; +export type GridItemKeySelector = (params: { + columnIndex: number; + rowIndex: number; + data: any; +}) => Key; export interface GridOnItemsRenderedProps { overscanColumnStartIndex: number;