Cover AutoSizer component and its example with types

Author: TrySound

.flowconfig

@@ -1,6 +1,5 @@
 [ignore]
 .*/ArrowKeyStepper/.*
-.*/AutoSizer/.*
 .*/Collection/.*
 .*/ColumnSizer/.*
 .*/InfiniteLoader/.*
@@ -9,7 +8,6 @@
 .*/ScrollSync/.*
 .*/Table/.*
 .*/WindowScroller/.*
-.*/demo/.*
 
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/.*
 

source/AutoSizer/AutoSizer.example.js

@@ -1,5 +1,8 @@
 /** @flow */
-import Immutable from "immutable";
+
+import type { RowRendererParams } from '../types';
+
+import { List as ImmutableList } from "immutable";
 import PropTypes from "prop-types";
 import React, { PureComponent } from "react";
 import {
@@ -13,18 +16,12 @@ import styles from "./AutoSizer.example.css";
 
 export default class AutoSizerExample extends PureComponent {
   static contextTypes = {
-    list: PropTypes.instanceOf(Immutable.List).isRequired
+    list: PropTypes.instanceOf(ImmutableList).isRequired
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hideDescription: false
-    };
-
-    this._rowRenderer = this._rowRenderer.bind(this);
-  }
+  state = {
+    hideDescription: false
+  };
 
   render() {
     const { list } = this.context;
@@ -90,7 +87,7 @@ export default class AutoSizerExample extends PureComponent {
     );
   }
 
-  _rowRenderer({ index, key, style }) {
+  _rowRenderer = ({ index, key, style }: RowRendererParams) => {
     const { list } = this.context;
     const row = list.get(index);
 

source/AutoSizer/AutoSizer.js

@@ -1,72 +1,83 @@
 /** @flow */
-import PropTypes from "prop-types";
-import React, { PureComponent } from "react";
+
+import React from "react";
 import createDetectElementResize from "../vendor/detectElementResize";
 
 /**
  * Decorator component that automatically adjusts the width and height of a single child.
  * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
  * All other properties will be passed through to the child component.
  */
-export default class AutoSizer extends PureComponent {
-  static propTypes = {
-    /**
-    * Function responsible for rendering children.
-    * This function should implement the following signature:
-    * ({ height, width }) => PropTypes.element
-    */
-    children: PropTypes.func.isRequired,
 
-    /** Disable dynamic :height property */
-    disableHeight: PropTypes.bool,
+type Size = {
+  height: number,
+  width: number
+};
 
-    /** Disable dynamic :width property */
-    disableWidth: PropTypes.bool,
+type Props = {
+  /** Function responsible for rendering children.*/
+  children: (warams: Size) => React.Element<*>,
 
-    /** Nonce of the inlined stylesheet for Content Security Policy */
-    nonce: PropTypes.string,
+  /** Disable dynamic :height property */
+  disableHeight: boolean,
 
-    /** Callback to be invoked on-resize: ({ height, width }) */
-    onResize: PropTypes.func.isRequired
-  };
+  /** Disable dynamic :width property */
+  disableWidth: boolean,
+
+  /** Nonce of the inlined stylesheet for Content Security Policy */
+  nonce?: string,
 
+  /** Callback to be invoked on-resize */
+  onResize: (params: Size) => void
+};
+
+type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
+
+type DetectElementResize = {
+  addResizeListener: ResizeHandler,
+  removeResizeListener: ResizeHandler
+}
+
+export default class AutoSizer extends React.PureComponent {
   static defaultProps = {
-    onResize: () => {}
+    onResize: () => {},
+    disableHeight: false,
+    disableWidth: false
   };
 
-  constructor(props) {
-    super(props);
+  props: Props;
 
-    this.state = {
-      height: 0,
-      width: 0
-    };
+  state = {
+    height: 0,
+    width: 0
+  };
 
-    this._onResize = this._onResize.bind(this);
-    this._setRef = this._setRef.bind(this);
-  }
+  _parentNode: ?HTMLElement;
+  _autoSizer: ?HTMLElement;
+  _detectElementResize: DetectElementResize;
 
   componentDidMount() {
     const { nonce } = this.props;
+    if (this._autoSizer && this._autoSizer.parentNode instanceof HTMLElement) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      this._detectElementResize = createDetectElementResize(nonce);
+      this._detectElementResize.addResizeListener(
+        this._parentNode,
+        this._onResize
+      );
 
-    // Delay access of parentNode until mount.
-    // This handles edge-cases where the component has already been unmounted before its ref has been set,
-    // As well as libraries like react-lite which have a slightly different lifecycle.
-    this._parentNode = this._autoSizer.parentNode;
-
-    // Defer requiring resize handler in order to support server-side rendering.
-    // See issue #41
-    this._detectElementResize = createDetectElementResize(nonce);
-    this._detectElementResize.addResizeListener(
-      this._parentNode,
-      this._onResize
-    );
-
-    this._onResize();
+      this._onResize();
+    }
   }
 
   componentWillUnmount() {
-    if (this._detectElementResize) {
+    if (this._detectElementResize && this._parentNode) {
       this._detectElementResize.removeResizeListener(
         this._parentNode,
         this._onResize
@@ -81,7 +92,7 @@ export default class AutoSizer extends PureComponent {
     // Outer div should not force width/height since that may prevent containers from shrinking.
     // Inner component should overflow and use calculated width/height.
     // See issue #68 for more information.
-    const outerStyle = { overflow: "visible" };
+    const outerStyle: Object = { overflow: "visible" };
 
     if (!disableHeight) {
       outerStyle.height = 0;
@@ -110,39 +121,42 @@ export default class AutoSizer extends PureComponent {
     );
   }
 
-  _onResize() {
+  _onResize = () => {
     const { disableHeight, disableWidth, onResize } = this.props;
 
-    // Guard against AutoSizer component being removed from the DOM immediately after being added.
-    // This can result in invalid style values which can result in NaN values if we don't handle them.
-    // See issue #150 for more context.
+    if (this._parentNode) {
 
-    const height = this._parentNode.offsetHeight || 0;
-    const width = this._parentNode.offsetWidth || 0;
+      // Guard against AutoSizer component being removed from the DOM immediately after being added.
+      // This can result in invalid style values which can result in NaN values if we don't handle them.
+      // See issue #150 for more context.
 
-    const style = window.getComputedStyle(this._parentNode) || {};
-    const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
-    const paddingRight = parseInt(style.paddingRight, 10) || 0;
-    const paddingTop = parseInt(style.paddingTop, 10) || 0;
-    const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+      const height = this._parentNode.offsetHeight || 0;
+      const width = this._parentNode.offsetWidth || 0;
 
-    const newHeight = height - paddingTop - paddingBottom;
-    const newWidth = width - paddingLeft - paddingRight;
+      const style = window.getComputedStyle(this._parentNode) || {};
+      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(style.paddingRight, 10) || 0;
+      const paddingTop = parseInt(style.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
 
-    if (
-      (!disableHeight && this.state.height !== newHeight) ||
-      (!disableWidth && this.state.width !== newWidth)
-    ) {
-      this.setState({
-        height: height - paddingTop - paddingBottom,
-        width: width - paddingLeft - paddingRight
-      });
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (
+        !disableHeight && this.state.height !== newHeight ||
+        !disableWidth && this.state.width !== newWidth
+      ) {
+        this.setState({
+          height: height - paddingTop - paddingBottom,
+          width: width - paddingLeft - paddingRight
+        });
 
-      onResize({ height, width });
+        onResize({ height, width });
+      }
     }
   }
 
-  _setRef(autoSizer) {
+  _setRef = (autoSizer: HTMLElement | null) => {
     this._autoSizer = autoSizer;
   }
 }

source/AutoSizer/index.js

@@ -1,2 +1,4 @@
-export default from "./AutoSizer";
-export AutoSizer from "./AutoSizer";
+// @flow
+
+export { default } from "./AutoSizer";
+export { default as AutoSizer } from "./AutoSizer";

source/Grid/accessibilityOverscanIndicesGetter.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type { OverscanIndices } from "../types";
+import type { OverscanIndicesGetterParams, OverscanIndices } from "../types";
 
 export const SCROLL_DIRECTION_BACKWARD = -1;
 export const SCROLL_DIRECTION_FORWARD = 1;
@@ -13,33 +13,13 @@ export const SCROLL_DIRECTION_VERTICAL = "vertical";
  * This function ensures that overscanning doesn't exceed the available cells.
  */
 
-type Params = {
-  // One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL
-  direction: "horizontal" | "vertical",
-
-  // Number of rows or columns in the current axis
-  cellCount: number,
-
-  // One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD
-  scrollDirection: -1 | 1,
-
-  // Maximum number of cells to over-render in either direction
-  overscanCellsCount: number,
-
-  // Begin of range of visible cells
-  startIndex: number,
-
-  // End of range of visible cells
-  stopIndex: number
-};
-
 export default function defaultOverscanIndicesGetter({
   cellCount,
   overscanCellsCount,
   scrollDirection,
   startIndex,
   stopIndex
-}: Params): OverscanIndices {
+}: OverscanIndicesGetterParams): OverscanIndices {
   // Make sure we render at least 1 cell extra before and after (except near boundaries)
   // This is necessary in order to support keyboard navigation (TAB/SHIFT+TAB) in some cases
   // For more info see issues #625

source/demo/Application.js

@@ -1,4 +1,3 @@
-/** @flow */
 import Immutable from "immutable";
 import PropTypes from "prop-types";
 import React, { PureComponent } from "react";

source/demo/ComponentLink.js

@@ -1,4 +1,3 @@
-/** @flow */
 import React from "react";
 import { NavLink } from "react-router-dom";
 import styles from "./ComponentLink.css";

source/demo/NavLink.js

@@ -1,4 +1,3 @@
-/** @flow */
 import React from "react";
 import { NavLink as RRNavLink } from "react-router-dom";
 import Icon from "./Icon";

source/demo/Wizard/Wizard.js

@@ -1,4 +1,3 @@
-/* @flow */
 import cn from "classnames";
 import CodeMirror from "react-codemirror";
 import React, { Component } from "react";

source/demo/Wizard/index.js

@@ -1,2 +1 @@
-/* @flow */
 export default from "./Wizard";