@khanacademy/wonder-blocks-clickable - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

dist/es/index.js

@@ -5,4 +5,4 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet } from 'aphrodite';
-import { any } from 'prop-types';
 import { withRouter, Link } from 'react-router-dom';
+import { __RouterContext } from 'react-router';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
@@ -142,4 +142,4 @@ import Color from '@khanacademy/wonder-blocks-color';
  *
- * The `router` can be accessed via this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -521,4 +521,4 @@ */
  *
- * The `router` can be accessed via this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -584,5 +584,5 @@ */
 
-    this.getCorrectTag = (clickableState, commonProps) => {
+    this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = this.context.router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
       // needs it to refine this.props.href to a string.
@@ -613,3 +613,3 @@
 
-  render() {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
@@ -633,3 +633,3 @@ {
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
@@ -647,3 +647,3 @@ const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
@@ -661,3 +661,3 @@ style: getStyle(state)
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
@@ -669,7 +669,8 @@ style: getStyle(state)
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 } // Source:  https://gist.github.com/MoOx/9137295
 
-Clickable.contextTypes = {
-  router: any
-};
 Clickable.defaultProps = {
@@ -676,0 +677,0 @@ light: false,

dist/index.js

@@ -255,4 +255,4 @@ module.exports =
  *
- * The `router` can be accessed via this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -632,4 +632,4 @@ */
  *
- * The `router` can be accessed via this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -826,6 +826,6 @@ */
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
@@ -848,3 +848,3 @@ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
 const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("button");
-const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
+const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
 /**
@@ -879,5 +879,5 @@ * A component to turn any custom component into a clickable one.
 
-    this.getCorrectTag = (clickableState, commonProps) => {
+    this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = this.context.router && !this.props.skipClientNav && Object(_util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__[/* isClientSideUrl */ "a"])(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+      const useClient = router && !this.props.skipClientNav && Object(_util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__[/* isClientSideUrl */ "a"])(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
       // needs it to refine this.props.href to a string.
@@ -908,3 +908,3 @@
 
-  render() {
+  renderClickableBehavior(router) {
     const {
@@ -926,3 +926,3 @@ href,
     } = this.props;
-    const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"])(href, skipClientNav, this.context.router);
+    const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"])(href, skipClientNav, router);
 
@@ -940,3 +940,3 @@ const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, { ...restProps,
+      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
         "data-test-id": testId,
@@ -955,3 +955,3 @@ style: getStyle(state),
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, { ...restProps,
+      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
         "data-test-id": testId,
@@ -964,7 +964,8 @@ style: getStyle(state),
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 } // Source:  https://gist.github.com/MoOx/9137295
 
-Clickable.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_2__["any"]
-};
 Clickable.defaultProps = {
@@ -1025,3 +1026,3 @@ light: false,
 
-module.exports = require("prop-types");
+module.exports = require("react-router");
 
@@ -1028,0 +1029,0 @@ /***/ }),

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "design": "v1",
@@ -19,10 +19,10 @@ "description": "Clickable component for Wonder-Blocks.",
     "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-core": "^3.1.5"
+    "@khanacademy/wonder-blocks-core": "^3.2.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
@@ -32,3 +32,3 @@ "devDependencies": {
   },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
 }

src/components/clickable-behavior.js

@@ -315,4 +315,4 @@ // @flow
  *
- * The `router` can be accessed via this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -319,0 +319,0 @@ */

src/components/clickable.js

 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import * as PropTypes from "prop-types";
 import {Link} from "react-router-dom";
+import {__RouterContext} from "react-router";
 
@@ -172,6 +172,2 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
@@ -212,4 +208,2 @@ light: $PropertyType<Props, "light">,
 export default class Clickable extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
     static defaultProps: DefaultProps = {
@@ -223,7 +217,8 @@ light: false,
         clickableState: ClickableState,
+        router: any,
         commonProps: {[string]: any, ...},
-    ) => React.Node = (clickableState, commonProps) => {
+    ) => React.Node = (clickableState, router, commonProps) => {
         const activeHref = this.props.href && !this.props.disabled;
         const useClient =
-            this.context.router &&
+            router &&
             !this.props.skipClientNav &&
@@ -271,3 +266,3 @@ isClientSideUrl(this.props.href || "");
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
@@ -292,3 +287,3 @@ href,
             skipClientNav,
-            this.context.router,
+            router,
         );
@@ -317,3 +312,3 @@
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, {
+                        this.getCorrectTag(state, router, {
                             ...restProps,
@@ -339,3 +334,3 @@ "data-test-id": testId,
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, {
+                        this.getCorrectTag(state, router, {
                             ...restProps,
@@ -351,2 +346,10 @@ "data-test-id": testId,
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
@@ -353,0 +356,0 @@

src/components/clickable.stories.js

@@ -15,3 +15,3 @@ // @flow
 export default {
-    title: "Clickable",
+    title: "Navigation/Clickable",
 };
@@ -81,8 +81,6 @@
 
-keyboardNavigation.story = {
-    parameters: {
-        chromatic: {
-            // we don't need screenshots because this story only tests behavior.
-            disable: true,
-        },
+keyboardNavigation.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only tests behavior.
+        disableSnapshot: true,
     },
@@ -89,0 +87,0 @@ };

src/util/get-clickable-behavior.js

@@ -8,4 +8,4 @@ // @flow
  *
- * The `router` can be accessed via this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
@@ -12,0 +12,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

192414

increased by0.3%

Lines of code

4633

increased by0.04%

Dependency changes

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removedinvariant@2.2.4(transitive)

• - Removedreact-router@4.3.1(transitive)

• - Removedreact-router-dom@4.3.1(transitive)

• - Removedwarning@4.0.3(transitive)

• Updated@khanacademy/wonder-blocks-core@^3.2.0