@khanacademy/wonder-blocks-clickable 2.4.5 → 2.4.7

package/dist/es/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { withRouter, Link } from 'react-router-dom';
@@ -7,6 +5,48 @@ import { __RouterContext } from 'react-router';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color from '@khanacademy/wonder-blocks-color';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 const getAppropriateTriggersForRole = role => {
   switch (role) {
     case "link":
@@ -14,7 +54,6 @@ const getAppropriateTriggersForRole = role => {
         triggerOnEnter: true,
         triggerOnSpace: false
       };
-
     case "checkbox":
     case "radio":
     case "listbox":
@@ -22,7 +61,6 @@ const getAppropriateTriggersForRole = role => {
         triggerOnEnter: false,
         triggerOnSpace: true
       };
-
     case "button":
     case "menuitem":
     case "menu":
@@ -34,7 +72,6 @@ const getAppropriateTriggersForRole = role => {
       };
   }
 };
-
 const disabledHandlers = {
   onClick: () => void 0,
   onMouseEnter: () => void 0,
@@ -57,8 +94,9 @@ const startState = {
   pressed: false,
   waiting: false
 };
-class ClickableBehavior extends React.Component {
-  static getDerivedStateFromProps(props, state) {
+let ClickableBehavior = function (_React$Component) {
+  _inheritsLoose(ClickableBehavior, _React$Component);
+  ClickableBehavior.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     if (props.disabled) {
       return _extends({}, startState, {
         focused: state.focused
@@ -66,152 +104,133 @@ class ClickableBehavior extends React.Component {
     } else {
       return null;
     }
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = e => {
+  };
+  function ClickableBehavior(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.waitingForClick = void 0;
+    _this.enterClick = void 0;
+    _this.handleClick = e => {
       const {
         onClick = undefined,
         beforeNav = undefined,
         safeWithNav = undefined
-      } = this.props;
-
-      if (this.enterClick) {
+      } = _this.props;
+      if (_this.enterClick) {
         return;
       }
-
       if (onClick || beforeNav || safeWithNav) {
-        this.waitingForClick = false;
+        _this.waitingForClick = false;
       }
-
-      this.runCallbackAndMaybeNavigate(e);
+      _this.runCallbackAndMaybeNavigate(e);
     };
-
-    this.handleMouseEnter = e => {
-      if (!this.waitingForClick) {
-        this.setState({
+    _this.handleMouseEnter = e => {
+      if (!_this.waitingForClick) {
+        _this.setState({
           hovered: true
         });
       }
     };
-
-    this.handleMouseLeave = () => {
-      if (!this.waitingForClick) {
-        this.setState({
+    _this.handleMouseLeave = () => {
+      if (!_this.waitingForClick) {
+        _this.setState({
           hovered: false,
           pressed: false,
           focused: false
         });
       }
     };
-
-    this.handleMouseDown = () => {
-      this.setState({
+    _this.handleMouseDown = () => {
+      _this.setState({
         pressed: true
       });
     };
-
-    this.handleMouseUp = e => {
-      this.setState({
+    _this.handleMouseUp = e => {
+      _this.setState({
         pressed: false,
         focused: false
       });
     };
-
-    this.handleTouchStart = () => {
-      this.setState({
+    _this.handleTouchStart = () => {
+      _this.setState({
         pressed: true
       });
     };
-
-    this.handleTouchEnd = () => {
-      this.setState({
+    _this.handleTouchEnd = () => {
+      _this.setState({
         pressed: false
       });
-      this.waitingForClick = true;
+      _this.waitingForClick = true;
     };
-
-    this.handleTouchCancel = () => {
-      this.setState({
+    _this.handleTouchCancel = () => {
+      _this.setState({
         pressed: false
       });
-      this.waitingForClick = true;
+      _this.waitingForClick = true;
     };
-
-    this.handleKeyDown = e => {
+    _this.handleKeyDown = e => {
       const {
         onKeyDown,
         role
-      } = this.props;
-
+      } = _this.props;
       if (onKeyDown) {
         onKeyDown(e);
       }
-
       const keyCode = e.which || e.keyCode;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
         e.preventDefault();
-        this.setState({
+        _this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        this.enterClick = true;
+        _this.enterClick = true;
       }
     };
-
-    this.handleKeyUp = e => {
+    _this.handleKeyUp = e => {
       const {
         onKeyUp,
         role
-      } = this.props;
-
+      } = _this.props;
       if (onKeyUp) {
         onKeyUp(e);
       }
-
       const keyCode = e.which || e.keyCode;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        this.setState({
+        _this.setState({
           pressed: false,
           focused: true
         });
-        this.runCallbackAndMaybeNavigate(e);
+        _this.runCallbackAndMaybeNavigate(e);
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        this.enterClick = false;
+        _this.enterClick = false;
       }
     };
-
-    this.handleFocus = e => {
-      this.setState({
+    _this.handleFocus = e => {
+      _this.setState({
         focused: true
       });
     };
-
-    this.handleBlur = e => {
-      this.setState({
+    _this.handleBlur = e => {
+      _this.setState({
         focused: false,
         pressed: false
       });
     };
-
-    this.state = startState;
-    this.waitingForClick = false;
-    this.enterClick = false;
+    _this.state = startState;
+    _this.waitingForClick = false;
+    _this.enterClick = false;
+    return _this;
   }
-
-  navigateOrReset(shouldNavigate) {
+  var _proto = ClickableBehavior.prototype;
+  _proto.navigateOrReset = function navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
         history,
@@ -219,7 +238,6 @@ class ClickableBehavior extends React.Component {
         skipClientNav,
         target = undefined
       } = this.props;
-
       if (href) {
         if (target === "_blank") {
           window.open(href, "_blank");
@@ -240,14 +258,12 @@ class ClickableBehavior extends React.Component {
         waiting: false
       });
     }
-  }
-
-  handleSafeWithNav(safeWithNav, shouldNavigate) {
+  };
+  _proto.handleSafeWithNav = function handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
       history
     } = this.props;
-
     if (history && !skipClientNav || this.props.target === "_blank") {
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
@@ -258,22 +274,19 @@ class ClickableBehavior extends React.Component {
           waiting: true
         });
       }
-
       return safeWithNav().then(() => {
         if (!this.state.waiting) {
           this.setState({
             waiting: true
           });
         }
-
         return;
       }).catch(error => {}).finally(() => {
         this.navigateOrReset(shouldNavigate);
       });
     }
-  }
-
-  runCallbackAndMaybeNavigate(e) {
+  };
+  _proto.runCallbackAndMaybeNavigate = function runCallbackAndMaybeNavigate(e) {
     const {
       onClick = undefined,
       beforeNav = undefined,
@@ -283,21 +296,16 @@ class ClickableBehavior extends React.Component {
     } = this.props;
     let shouldNavigate = true;
     let canSubmit = true;
-
     if (onClick) {
       onClick(e);
     }
-
     if (e.defaultPrevented) {
       shouldNavigate = false;
       canSubmit = false;
     }
-
     e.preventDefault();
-
     if (!href && type === "submit" && canSubmit) {
       let target = e.currentTarget;
-
       while (target) {
         if (target instanceof window.HTMLFormElement) {
           const event = new window.Event("submit", {
@@ -306,11 +314,9 @@ class ClickableBehavior extends React.Component {
           target.dispatchEvent(event);
           break;
         }
-
         target = target.parentElement;
       }
     }
-
     if (beforeNav) {
       this.setState({
         waiting: true
@@ -327,9 +333,8 @@ class ClickableBehavior extends React.Component {
     } else {
       this.navigateOrReset(shouldNavigate);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
@@ -354,9 +359,9 @@ class ClickableBehavior extends React.Component {
       children
     } = this.props;
     return children && children(this.state, childrenProps);
-  }
-
-}
+  };
+  return ClickableBehavior;
+}(React.Component);
 ClickableBehavior.defaultProps = {
   disabled: false
 };
@@ -365,7 +370,6 @@ const isClientSideUrl = href => {
   if (typeof href !== "string") {
     return false;
   }
-
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
@@ -374,7 +378,6 @@ function getClickableBehavior(href, skipClientNav, router) {
   if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
     return ClickableBehaviorWithRouter;
   }
-
   return ClickableBehavior;
 }
 
@@ -382,60 +385,58 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class Clickable extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.getCorrectTag = (clickableState, router, commonProps) => {
-      const activeHref = this.props.href && !this.props.disabled;
-      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || "");
-
-      if (activeHref && useClient && this.props.href) {
+let Clickable = function (_React$Component) {
+  _inheritsLoose(Clickable, _React$Component);
+  function Clickable(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getCorrectTag = (clickableState, router, commonProps) => {
+      const activeHref = _this.props.href && !_this.props.disabled;
+      const useClient = router && !_this.props.skipClientNav && isClientSideUrl(_this.props.href || "");
+      if (activeHref && useClient && _this.props.href) {
         return React.createElement(StyledLink, _extends({}, commonProps, {
-          to: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
+          to: _this.props.href,
+          role: _this.props.role,
+          target: _this.props.target || undefined,
+          "aria-disabled": _this.props.disabled ? "true" : undefined
+        }), _this.props.children(clickableState));
       } else if (activeHref && !useClient) {
         return React.createElement(StyledAnchor, _extends({}, commonProps, {
-          href: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
+          href: _this.props.href,
+          role: _this.props.role,
+          target: _this.props.target || undefined,
+          "aria-disabled": _this.props.disabled ? "true" : undefined
+        }), _this.props.children(clickableState));
       } else {
         return React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
-          "aria-disabled": this.props.disabled
-        }), this.props.children(clickableState));
+          "aria-disabled": _this.props.disabled
+        }), _this.props.children(clickableState));
       }
     };
+    return _this;
   }
-
-  renderClickableBehavior(router) {
+  var _proto = Clickable.prototype;
+  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
     const _this$props = this.props,
-          {
-      href,
-      onClick,
-      skipClientNav,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      style,
-      target = undefined,
-      testId,
-      onKeyDown,
-      onKeyUp,
-      hideDefaultFocusRing,
-      light,
-      disabled
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      {
+        href,
+        onClick,
+        skipClientNav,
+        beforeNav = undefined,
+        safeWithNav = undefined,
+        style,
+        target = undefined,
+        testId,
+        onKeyDown,
+        onKeyUp,
+        hideDefaultFocusRing,
+        light,
+        disabled
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
-
     if (beforeNav) {
       return React.createElement(ClickableBehavior, {
         href: href,
@@ -463,13 +464,12 @@ class Clickable extends React.Component {
         style: getStyle(state)
       }, childrenProps)));
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return Clickable;
+}(React.Component);
 Clickable.defaultProps = {
   light: false,
   disabled: false

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import type { ChildrenProps, ClickableState, ClickableRole } from "./components/clickable-behavior";
+import Clickable from "./components/clickable";
+export { default as ClickableBehavior } from "./components/clickable-behavior";
+export { default as getClickableBehavior } from "./util/get-clickable-behavior";
+export { isClientSideUrl } from "./util/is-client-side-url";
+export { Clickable as default };
+export type { ChildrenProps, ClickableState, ClickableRole };