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

Comparing version 2.0.1 to 2.0.2

components/__tests__/clickable-behavior.test.js

 /* eslint-disable max-lines */
 // @flow
-import React from "react";
+import * as React from "react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
@@ -5,0 +5,0 @@ import {shallow} from "enzyme";

components/clickable-behavior.js

@@ -189,2 +189,6 @@ // @flow
 
+type DefaultProps = {|
+    disabled: $PropertyType<Props, "disabled">,
+|};
+
 export type ChildrenProps = {|
@@ -230,3 +234,3 @@ onClick: (e: SyntheticMouseEvent<>) => mixed,
 
-const startState = {
+const startState: ClickableState = {
     hovered: false,
@@ -281,3 +285,3 @@ focused: false,
  * class MyClickableComponent extends React.Component<Props> {
- *     render() {
+ *     render(): React.Node {
  *         const ClickableBehavior = getClickableBehavior();
@@ -325,7 +329,10 @@ *         return <ClickableBehavior
 
-    static defaultProps = {
+    static defaultProps: DefaultProps = {
         disabled: false,
     };
 
-    static getDerivedStateFromProps(props: Props, state: ClickableState) {
+    static getDerivedStateFromProps(
+        props: Props,
+        state: ClickableState,
+    ): ?Partial<ClickableState> {
         // If new props are disabled, reset the hovered/focused/pressed states
@@ -378,3 +385,3 @@ if (props.disabled) {
         shouldNavigate: boolean,
-    ) {
+    ): Promise<void> {
         const {skipClientNav, history} = this.props;
@@ -418,3 +425,3 @@
 
-    runCallbackAndMaybeNavigate(e: SyntheticEvent<>) {
+    runCallbackAndMaybeNavigate(e: SyntheticEvent<>): ?Promise<void> {
         const {
@@ -479,3 +486,3 @@ onClick = undefined,
 
-    handleClick = (e: SyntheticMouseEvent<>) => {
+    handleClick: (e: SyntheticMouseEvent<>) => void = (e) => {
         const {
@@ -498,3 +505,3 @@ onClick = undefined,
 
-    handleMouseEnter = (e: SyntheticMouseEvent<>) => {
+    handleMouseEnter: (e: SyntheticMouseEvent<>) => void = (e) => {
         // When the left button is pressed already, we want it to be pressed
@@ -509,3 +516,3 @@ if (e.buttons === 1) {
 
-    handleMouseLeave = () => {
+    handleMouseLeave: () => void = () => {
         if (!this.waitingForClick) {
@@ -517,7 +524,7 @@ this.dragging = false;
 
-    handleMouseDown = () => {
+    handleMouseDown: () => void = () => {
         this.setState({pressed: true});
     };
 
-    handleMouseUp = (e: SyntheticMouseEvent<>) => {
+    handleMouseUp: (e: SyntheticMouseEvent<>) => void = (e) => {
         if (this.dragging) {
@@ -530,3 +537,3 @@ this.dragging = false;
 
-    handleDragStart = (e: SyntheticMouseEvent<>) => {
+    handleDragStart: (e: SyntheticMouseEvent<>) => void = (e) => {
         this.dragging = true;
@@ -536,7 +543,7 @@ e.preventDefault();
 
-    handleTouchStart = () => {
+    handleTouchStart: () => void = () => {
         this.setState({pressed: true});
     };
 
-    handleTouchEnd = () => {
+    handleTouchEnd: () => void = () => {
         this.setState({pressed: false});
@@ -546,3 +553,3 @@ this.waitingForClick = true;
 
-    handleTouchCancel = () => {
+    handleTouchCancel: () => void = () => {
         this.setState({pressed: false});
@@ -552,3 +559,3 @@ this.waitingForClick = true;
 
-    handleKeyDown = (e: SyntheticKeyboardEvent<>) => {
+    handleKeyDown: (e: SyntheticKeyboardEvent<>) => void = (e) => {
         const {onKeyDown, role} = this.props;
@@ -580,3 +587,3 @@ if (onKeyDown) {
 
-    handleKeyUp = (e: SyntheticKeyboardEvent<>) => {
+    handleKeyUp: (e: SyntheticKeyboardEvent<>) => void = (e) => {
         const {onKeyUp, role} = this.props;
@@ -603,11 +610,11 @@ if (onKeyUp) {
 
-    handleFocus = (e: SyntheticFocusEvent<>) => {
+    handleFocus: (e: SyntheticFocusEvent<>) => void = (e) => {
         this.setState({focused: true});
     };
 
-    handleBlur = (e: SyntheticFocusEvent<>) => {
+    handleBlur: (e: SyntheticFocusEvent<>) => void = (e) => {
         this.setState({focused: false, pressed: false});
     };
 
-    render() {
+    render(): React.Node {
         const childrenProps: ChildrenProps = this.props.disabled
@@ -614,0 +621,0 @@ ? disabledHandlers

components/clickable.js

@@ -164,2 +164,11 @@ // @flow
 
+type ContextTypes = {|
+    router: PropTypes.Requireable<any>,
+|};
+
+type DefaultProps = {|
+    disabled: $PropertyType<Props, "disabled">,
+    "aria-label": $PropertyType<Props, "aria-label">,
+|};
+
 const StyledAnchor = addStyle<"a">("a");
@@ -194,5 +203,5 @@ const StyledButton = addStyle<"button">("button");
 export default class Clickable extends React.Component<Props> {
-    static contextTypes = {router: PropTypes.any};
+    static contextTypes: ContextTypes = {router: PropTypes.any};
 
-    static defaultProps = {
+    static defaultProps: DefaultProps = {
         disabled: false,
@@ -202,6 +211,6 @@ "aria-label": "",
 
-    getCorrectTag = (
+    getCorrectTag: (
         clickableState: ClickableState,
         commonProps: {[string]: any, ...},
-    ) => {
+    ) => React.Node = (clickableState, commonProps) => {
         const activeHref = this.props.href && !this.props.disabled;
@@ -249,3 +258,3 @@ const useClient = this.context.router && !this.props.skipClientNav;
 
-    render() {
+    render(): React.Node {
         const {
@@ -252,0 +261,0 @@ href,

components/clickable.stories.js

 // @flow
-import React from "react";
+import * as React from "react";
 
@@ -14,3 +14,3 @@ import {StyleSheet} from "aphrodite";
 
-export const keyboardNavigation = () => (
+export const keyboardNavigation: React.ComponentType<Empty> = () => (
     <View>
@@ -17,0 +17,0 @@ <Clickable

dist/es/index.js

@@ -338,3 +338,3 @@ import { Component, createElement } from 'react';
  * class MyClickableComponent extends React.Component<Props> {
- *     render() {
+ *     render(): React.Node {
  *         const ClickableBehavior = getClickableBehavior();
@@ -341,0 +341,0 @@ *         return <ClickableBehavior

dist/index.js

@@ -476,3 +476,3 @@ module.exports =
  * class MyClickableComponent extends React.Component<Props> {
- *     render() {
+ *     render(): React.Node {
  *         const ClickableBehavior = getClickableBehavior();
@@ -918,2 +918,3 @@ *         return <ClickableBehavior
 
+
 var ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(clickable_behavior_ClickableBehavior);
@@ -920,0 +921,0 @@ function getClickableBehavior(

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "design": "v1",
@@ -18,3 +18,3 @@ "description": "Clickable component for Wonder-Blocks.",
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "^3.0.2"
+    "@khanacademy/wonder-blocks-core": "^3.1.0"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "4258b926780fd497bd70b0386704d7ac9c9e96bc"
+  "gitHead": "644907d5558f4ab46a8ecb3c7e22be8bd3a9920e"
 }

util/get-clickable-behavior.js

@@ -12,2 +12,3 @@ // @flow
  */
+import * as React from "react";
 import {withRouter} from "react-router-dom";
@@ -33,3 +34,3 @@
     router?: any,
-) {
+): React.ComponentType<> {
     if (router && skipClientNav !== true && href && !isExternalUrl(href)) {
@@ -36,0 +37,0 @@ return ClickableBehaviorWithRouter;

util/is-external-url.js

@@ -6,4 +6,4 @@ // @flow
  */
-export default function isExternalUrl(url: string) {
+export default function isExternalUrl(url: string): boolean {
     return /^(https?:)?\/\//i.test(url);
 }

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

200473

increased by0.39%

Lines of code

4749

increased by0.3%

Dependency changes

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