From 70edaf242f78aae2eef4ffce5f96e3a145b3d277 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 15 Oct 2018 17:56:37 +0800
Subject: [PATCH] Added DynamicSizeList API page

---
 website/src/App.js                            |  6 ++
 website/src/components/ComponentApi.js        | 10 +++
 .../src/components/ComponentApi.module.css    |  9 +++
 website/src/routes/api/DynamicSizeList.js     | 66 +++++++++++++++++++
 website/src/routes/examples/shared.module.css |  1 -
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 website/src/routes/api/DynamicSizeList.js

diff --git a/website/src/App.js b/website/src/App.js
index 237f652..550eede 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -5,6 +5,7 @@ import { SubMenu } from './components/SubMenu';
 
 // Routes
 import DynamicSizeListExample from './routes/examples/DynamicSizeList';
+import DynamicSizeListApi from './routes/api/DynamicSizeList';
 import FixedSizeGridApi from './routes/api/FixedSizeGrid';
 import FixedSizeGridExample from './routes/examples/FixedSizeGrid';
 import FixedSizeListApi from './routes/api/FixedSizeList';
@@ -105,6 +106,11 @@ const API_ROUTES = [
     title: 'VariableSizeList',
     component: VariableSizeListApi,
   },
+  {
+    path: '/api/DynamicSizeList',
+    title: 'DynamicSizeList',
+    component: DynamicSizeListApi,
+  },
   {
     path: '/api/FixedSizeGrid',
     title: 'FixedSizeGrid',
diff --git a/website/src/components/ComponentApi.js b/website/src/components/ComponentApi.js
index f1f6bb7..8168a78 100644
--- a/website/src/components/ComponentApi.js
+++ b/website/src/components/ComponentApi.js
@@ -71,6 +71,11 @@ export default class ComponentApi extends Component<Props, State> {
             {props.filter(prop => showAll || prop.isRequired).map(prop => (
               <Fragment key={prop.name}>
                 <dt className={styles.ComponentApiPropType}>
+                  {prop.showWarning ? (
+                    <svg className={styles.WarningIcon} viewBox="0 0 24 24">
+                      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                  ) : null}
                   {prop.name}: {prop.type}{' '}
                   {prop.defaultValue !== undefined
                     ? ` = ${prop.defaultValue}`
@@ -90,6 +95,11 @@ export default class ComponentApi extends Component<Props, State> {
             {methods.map(method => (
               <Fragment key={method.signature}>
                 <dt className={styles.ComponentApiPropType}>
+                  {method.showWarning ? (
+                    <svg className={styles.WarningIcon} viewBox="0 0 24 24">
+                      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                  ) : null}
                   {method.signature}
                 </dt>
                 <dd className={styles.ComponentApiPropDefinition}>
diff --git a/website/src/components/ComponentApi.module.css b/website/src/components/ComponentApi.module.css
index 42c3811..0f8cb8a 100644
--- a/website/src/components/ComponentApi.module.css
+++ b/website/src/components/ComponentApi.module.css
@@ -37,6 +37,8 @@
 }
 
 .ComponentApiPropType {
+  display: flex;
+  align-items: center;
   line-height: 2rem;
 }
 
@@ -49,3 +51,10 @@
   margin-left: 1rem;
   margin-bottom: 1.5rem;
 }
+
+.WarningIcon {
+  width: 2rem;
+  height: 2rem;
+  margin-right: 0.5rem;
+  fill: #ff5370;
+}
diff --git a/website/src/routes/api/DynamicSizeList.js b/website/src/routes/api/DynamicSizeList.js
new file mode 100644
index 0000000..22e50d3
--- /dev/null
+++ b/website/src/routes/api/DynamicSizeList.js
@@ -0,0 +1,66 @@
+import React, { Fragment } from 'react';
+import { NavHashLink as Link } from 'react-router-hash-link';
+import ComponentApi from '../../components/ComponentApi';
+
+export default () => (
+  <ComponentApi
+    methods={METHODS}
+    methodsIntro={
+      <p>
+        This component has the same methods as{' '}
+        <Link to="/api/FixedSizeList#methods">
+          <code>FixedSizeList</code>
+        </Link>, but with the following exceptions:
+      </p>
+    }
+    name="DynamicSizeList"
+    props={PROPS}
+    propsIntro={
+      <p>
+        This component has the same props as{' '}
+        <Link to="/api/FixedSizeList#props">
+          <code>FixedSizeList</code>
+        </Link>, but with the following exceptions:
+      </p>
+    }
+  />
+);
+
+const PROPS = [
+  {
+    description: (
+      <Fragment>
+        <p>
+          Items within a dynamic list are automatically measured after
+          rendering. This means that no <code>itemSize</code> prop is required.
+        </p>
+        <p>
+          <strong>The list will error if you accidentally supply one.</strong>
+        </p>
+      </Fragment>
+    ),
+    name: 'itemSize',
+    showWarning: true,
+    type: 'number',
+  },
+];
+
+const METHODS = [
+  {
+    description: (
+      <Fragment>
+        <p>
+          Dynamic lists do not support scrolling to items that have not yet been
+          rendered.
+        </p>
+        <p>
+          <strong>
+            Attempting to scroll to such an item will log a console warning.
+          </strong>
+        </p>
+      </Fragment>
+    ),
+    signature: 'scrollToItem(index: number, align: string = "auto"): void',
+    showWarning: true,
+  },
+];
diff --git a/website/src/routes/examples/shared.module.css b/website/src/routes/examples/shared.module.css
index c6d964b..f49fde2 100644
--- a/website/src/routes/examples/shared.module.css
+++ b/website/src/routes/examples/shared.module.css
@@ -48,7 +48,6 @@
   font-size: 1.15rem;
   margin: 0 2rem 2rem 0;
   border-radius: 0.25rem;
-  background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.5) 0px 0.5rem 1.5rem;
   color: #fff;
   background-color: #ff5370;