@khanacademy/wonder-blocks-link 3.7.12 → 3.8.1

package/src/components/link-core.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
@@ -22,17 +22,11 @@ type Props = {|
     href: string,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledAnchor = addStyle<"a">("a");
 const StyledLink = addStyle<typeof Link>(Link);
 
 export default class LinkCore extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
-    render(): React.Node {
+    renderInner(router: any): React.Node {
         const {
             children,
             skipClientNav,
@@ -48,7 +42,6 @@ export default class LinkCore extends React.Component<Props> {
             waiting: _,
             ...restProps
         } = this.props;
-        const {router} = this.context;
 
         const linkStyles = _generateStyles(kind, light, visitable);
 
@@ -76,6 +69,14 @@ export default class LinkCore extends React.Component<Props> {
             </StyledAnchor>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderInner(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const styles = {};

package/src/components/link.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
@@ -156,10 +156,6 @@ export type SharedProps =
           beforeNav?: () => Promise<mixed>,
       |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     kind: $PropertyType<SharedProps, "kind">,
     light: $PropertyType<SharedProps, "light">,
@@ -184,14 +180,13 @@ type DefaultProps = {|
  * ```
  */
 export default class Link extends React.Component<SharedProps> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         kind: "primary",
         light: false,
         visitable: false,
     };
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
             onClick,
             beforeNav = undefined,
@@ -209,7 +204,7 @@ export default class Link extends React.Component<SharedProps> {
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            this.context.router,
+            router,
         );
 
         if (beforeNav) {
@@ -284,4 +279,12 @@ export default class Link extends React.Component<SharedProps> {
             );
         }
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }

package/src/components/link.md

@@ -35,3 +35,9 @@ import Link from "@khanacademy/wonder-blocks-link";
     </Link>
 </View>
 ```
+
+### Running callbacks on navigation
+
+The `onClick`, `beforeNav`, and `safeWithNav` props can be used to run callbacks
+when navigating to the new URL. Which prop to use depends on the use case. See
+the [Button](#section-button) documentation for details.

package/src/__tests__/index.test.js

@@ -1,13 +0,0 @@
-// @flow
-describe("@khanacademy/wonder-blocks-link", () => {
-    test("package exports default", async () => {
-        // Arrange
-        const importedModule = import("../index.js");
-
-        // Act
-        const result = await importedModule;
-
-        // Assert
-        expect(Object.keys(result).sort()).toEqual(["default"].sort());
-    });
-});