Add global pending example

4Catalyzer · Nov 1, 2016 · 6cd38c1 · 6cd38c1
1 parent aed08a9
commit 6cd38c1
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 0 deletions.
diff --git a/examples/global-pending/README.md b/examples/global-pending/README.md
@@ -0,0 +1 @@
+# Found Global Pending Example
diff --git a/examples/global-pending/package.json b/examples/global-pending/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "global-pending",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.7.0"
+  },
+  "dependencies": {
+    "found": "../..",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-static-container": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  }
+}
diff --git a/examples/global-pending/public/index.html b/examples/global-pending/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Found Global Pending Example</title>
+</head>
+
+<body>
+<div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/global-pending/src/index.js b/examples/global-pending/src/index.js
@@ -0,0 +1,105 @@
+import createBrowserRouter from 'found/lib/createBrowserRouter';
+import ElementsRenderer from 'found/lib/ElementsRenderer';
+import Link from 'found/lib/Link';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import StaticContainer from 'react-static-container';
+
+function LinkItem(props) {
+  // TODO: Remove the pragma once evcohen/eslint-plugin-jsx-a11y#81 ships.
+  return (
+    <li>
+      <Link // eslint-disable-line jsx-a11y/anchor-has-content
+        {...props}
+        activeStyle={{ fontWeight: 'bold' }}
+      />
+    </li>
+  );
+}
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+function App({ children }) {
+  return (
+    <div>
+      <ul>
+        <LinkItem to="/">
+          Main
+        </LinkItem>
+        <ul>
+          <LinkItem to="/foo">
+            Foo
+          </LinkItem>
+          <LinkItem to="/bar">
+            Bar
+          </LinkItem>
+        </ul>
+      </ul>
+
+      {children}
+    </div>
+  );
+}
+
+App.propTypes = propTypes;
+
+const BrowserRouter = createBrowserRouter({
+  routeConfig: [
+    {
+      path: '/',
+      Component: App,
+      children: [
+        {
+          Component: () => <div>Main</div>,
+        },
+        {
+          path: 'foo',
+          getComponent: () => new Promise((resolve) => {
+            setTimeout(resolve, 1000, () => <div>Foo</div>);
+          }),
+        },
+        {
+          path: 'bar',
+          getComponent: () => new Promise((resolve) => {
+            setTimeout(resolve, 1000, () => <div>Bar</div>);
+          }),
+        },
+      ],
+    },
+  ],
+
+  renderPending: () => (
+    <div>
+      <StaticContainer>
+        {null}
+      </StaticContainer>
+
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          background: 'white',
+          opacity: 0.5,
+        }}
+      />
+    </div>
+  ),
+
+  renderReady: ({ elements }) => ( // eslint-disable-line react/prop-types
+    <div>
+      <StaticContainer shouldUpdate>
+        <ElementsRenderer elements={elements} />
+      </StaticContainer>
+    </div>
+  ),
+});
+
+ReactDOM.render(
+  <BrowserRouter />,
+  document.getElementById('root'),
+);