Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-clickable

Package Overview
Dependencies
Maintainers
1
Versions
247
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.2.1 to 1.3.0

55

components/__tests__/clickable.test.js
// @flow
import React from "react";
import * as React from "react";
import {MemoryRouter, Route, Switch} from "react-router-dom";

@@ -451,2 +451,55 @@

});
describe("raw events", () => {
/**
* Clickable expect a function as children so we create a simple wrapper to
* allow a React.Node to be passed instead.
*/
const ClickableWrapper = ({
children,
...restProps
}: {|
children: React.Node,
onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
|}) => {
return <Clickable {...restProps}>{() => children}</Clickable>;
};
test("onKeyDown", () => {
// Arrange
const keyMock = jest.fn();
const wrapper = mount(
<ClickableWrapper onKeyDown={keyMock}>
Click me!
</ClickableWrapper>,
);
// Act
wrapper.find("Clickable").simulate("keydown", {keyCode: 32});
// Assert
expect(keyMock).toHaveBeenCalledWith(
expect.objectContaining({keyCode: 32}),
);
});
test("onKeyUp", () => {
// Arrange
const keyMock = jest.fn();
const wrapper = mount(
<ClickableWrapper onKeyDown={keyMock}>
Click me!
</ClickableWrapper>,
);
// Act
wrapper.find("Clickable").simulate("keydown", {keyCode: 32});
// Assert
expect(keyMock).toHaveBeenCalledWith(
expect.objectContaining({keyCode: 32}),
);
});
});
});

14

components/clickable.js

@@ -93,2 +93,12 @@ // @flow

testId?: string,
/**
* Respond to raw "keydown" event.
*/
onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
/**
* Respond to raw "keyup" event.
*/
onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
|};

@@ -239,2 +249,4 @@

testId,
onKeyDown,
onKeyUp,
...restProps

@@ -254,2 +266,4 @@ } = this.props;

safeWithNav={safeWithNav}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
>

@@ -256,0 +270,0 @@ {(state, handlers) =>

8

dist/es/index.js

@@ -298,3 +298,5 @@ import { createElement, Component } from 'react';

testId = _this$props.testId,
restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "testId"]);
onKeyDown = _this$props.onKeyDown,
onKeyUp = _this$props.onKeyUp,
restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "testId", "onKeyDown", "onKeyUp"]);

@@ -306,3 +308,5 @@ var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);

beforeNav: beforeNav,
safeWithNav: safeWithNav
safeWithNav: safeWithNav,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp
}, function (state, handlers) {

@@ -309,0 +313,0 @@ return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {

1262

dist/index.js

@@ -92,3 +92,3 @@ module.exports =

module.exports = require("prop-types");
module.exports = require("react");

@@ -99,3 +99,3 @@ /***/ }),

module.exports = require("react");
module.exports = require("@khanacademy/wonder-blocks-core");

@@ -106,56 +106,10 @@ /***/ }),

module.exports = require("@khanacademy/wonder-blocks-core");
module.exports = require("aphrodite");
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
module.exports = require("prop-types");
/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var invariant = function(condition, format, a, b, c, d, e, f) {
if (false) {}
if (!condition) {
var error;
if (format === undefined) {
error = new Error(
'Minified exception occurred; use the non-minified dev environment ' +
'for the full error message and additional helpful warnings.'
);
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(
format.replace(/%s/g, function() { return args[argIndex++]; })
);
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
};
module.exports = invariant;
/***/ }),

@@ -165,3 +119,3 @@ /* 4 */

module.exports = require("aphrodite");
module.exports = require("react-router-dom");

@@ -180,1177 +134,19 @@ /***/ }),

// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(1);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
var external_react_ = __webpack_require__(0);
// EXTERNAL MODULE: external "aphrodite"
var external_aphrodite_ = __webpack_require__(4);
var external_aphrodite_ = __webpack_require__(2);
// EXTERNAL MODULE: external "prop-types"
var external_prop_types_ = __webpack_require__(0);
var external_prop_types_ = __webpack_require__(3);
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
// EXTERNAL MODULE: ./node_modules/invariant/browser.js
var browser = __webpack_require__(3);
var browser_default = /*#__PURE__*/__webpack_require__.n(browser);
// EXTERNAL MODULE: external "react-router-dom"
var external_react_router_dom_ = __webpack_require__(4);
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
function _extends() {
_extends = Object.assign || 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);
}
// CONCATENATED MODULE: ./node_modules/resolve-pathname/index.js
function isAbsolute(pathname) {
return pathname.charAt(0) === '/';
}
// About 1.5x faster than the two-arg version of Array#splice()
function spliceOne(list, index) {
for (var i = index, k = i + 1, n = list.length; k < n; i += 1, k += 1) {
list[i] = list[k];
}
list.pop();
}
// This implementation is based heavily on node's url.parse
function resolvePathname(to) {
var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var toParts = to && to.split('/') || [];
var fromParts = from && from.split('/') || [];
var isToAbs = to && isAbsolute(to);
var isFromAbs = from && isAbsolute(from);
var mustEndAbs = isToAbs || isFromAbs;
if (to && isAbsolute(to)) {
// to is absolute
fromParts = toParts;
} else if (toParts.length) {
// to is relative, drop the filename
fromParts.pop();
fromParts = fromParts.concat(toParts);
}
if (!fromParts.length) return '/';
var hasTrailingSlash = void 0;
if (fromParts.length) {
var last = fromParts[fromParts.length - 1];
hasTrailingSlash = last === '.' || last === '..' || last === '';
} else {
hasTrailingSlash = false;
}
var up = 0;
for (var i = fromParts.length; i >= 0; i--) {
var part = fromParts[i];
if (part === '.') {
spliceOne(fromParts, i);
} else if (part === '..') {
spliceOne(fromParts, i);
up++;
} else if (up) {
spliceOne(fromParts, i);
up--;
}
}
if (!mustEndAbs) for (; up--; up) {
fromParts.unshift('..');
}if (mustEndAbs && fromParts[0] !== '' && (!fromParts[0] || !isAbsolute(fromParts[0]))) fromParts.unshift('');
var result = fromParts.join('/');
if (hasTrailingSlash && result.substr(-1) !== '/') result += '/';
return result;
}
/* harmony default export */ var resolve_pathname = (resolvePathname);
// CONCATENATED MODULE: ./node_modules/value-equal/index.js
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function valueEqual(a, b) {
if (a === b) return true;
if (a == null || b == null) return false;
if (Array.isArray(a)) {
return Array.isArray(b) && a.length === b.length && a.every(function (item, index) {
return valueEqual(item, b[index]);
});
}
var aType = typeof a === 'undefined' ? 'undefined' : _typeof(a);
var bType = typeof b === 'undefined' ? 'undefined' : _typeof(b);
if (aType !== bType) return false;
if (aType === 'object') {
var aValue = a.valueOf();
var bValue = b.valueOf();
if (aValue !== a || bValue !== b) return valueEqual(aValue, bValue);
var aKeys = Object.keys(a);
var bKeys = Object.keys(b);
if (aKeys.length !== bKeys.length) return false;
return aKeys.every(function (key) {
return valueEqual(a[key], b[key]);
});
}
return false;
}
/* harmony default export */ var value_equal = (valueEqual);
// CONCATENATED MODULE: ./node_modules/tiny-invariant/dist/tiny-invariant.esm.js
var isProduction = "production" === 'production';
var prefix = 'Invariant failed';
function invariant(condition, message) {
if (condition) {
return;
}
if (isProduction) {
throw new Error(prefix);
} else {
throw new Error(prefix + ": " + (message || ''));
}
}
/* harmony default export */ var tiny_invariant_esm = (invariant);
// CONCATENATED MODULE: ./node_modules/history/esm/history.js
function addLeadingSlash(path) {
return path.charAt(0) === '/' ? path : '/' + path;
}
function stripLeadingSlash(path) {
return path.charAt(0) === '/' ? path.substr(1) : path;
}
function hasBasename(path, prefix) {
return new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
}
function stripBasename(path, prefix) {
return hasBasename(path, prefix) ? path.substr(prefix.length) : path;
}
function stripTrailingSlash(path) {
return path.charAt(path.length - 1) === '/' ? path.slice(0, -1) : path;
}
function parsePath(path) {
var pathname = path || '/';
var search = '';
var hash = '';
var hashIndex = pathname.indexOf('#');
if (hashIndex !== -1) {
hash = pathname.substr(hashIndex);
pathname = pathname.substr(0, hashIndex);
}
var searchIndex = pathname.indexOf('?');
if (searchIndex !== -1) {
search = pathname.substr(searchIndex);
pathname = pathname.substr(0, searchIndex);
}
return {
pathname: pathname,
search: search === '?' ? '' : search,
hash: hash === '#' ? '' : hash
};
}
function createPath(location) {
var pathname = location.pathname,
search = location.search,
hash = location.hash;
var path = pathname || '/';
if (search && search !== '?') path += search.charAt(0) === '?' ? search : "?" + search;
if (hash && hash !== '#') path += hash.charAt(0) === '#' ? hash : "#" + hash;
return path;
}
function createLocation(path, state, key, currentLocation) {
var location;
if (typeof path === 'string') {
// Two-arg form: push(path, state)
location = parsePath(path);
location.state = state;
} else {
// One-arg form: push(location)
location = _extends({}, path);
if (location.pathname === undefined) location.pathname = '';
if (location.search) {
if (location.search.charAt(0) !== '?') location.search = '?' + location.search;
} else {
location.search = '';
}
if (location.hash) {
if (location.hash.charAt(0) !== '#') location.hash = '#' + location.hash;
} else {
location.hash = '';
}
if (state !== undefined && location.state === undefined) location.state = state;
}
try {
location.pathname = decodeURI(location.pathname);
} catch (e) {
if (e instanceof URIError) {
throw new URIError('Pathname "' + location.pathname + '" could not be decoded. ' + 'This is likely caused by an invalid percent-encoding.');
} else {
throw e;
}
}
if (key) location.key = key;
if (currentLocation) {
// Resolve incomplete/relative pathname relative to current location.
if (!location.pathname) {
location.pathname = currentLocation.pathname;
} else if (location.pathname.charAt(0) !== '/') {
location.pathname = resolve_pathname(location.pathname, currentLocation.pathname);
}
} else {
// When there is no prior location and pathname is empty, set it to /
if (!location.pathname) {
location.pathname = '/';
}
}
return location;
}
function locationsAreEqual(a, b) {
return a.pathname === b.pathname && a.search === b.search && a.hash === b.hash && a.key === b.key && value_equal(a.state, b.state);
}
function createTransitionManager() {
var prompt = null;
function setPrompt(nextPrompt) {
false ? undefined : void 0;
prompt = nextPrompt;
return function () {
if (prompt === nextPrompt) prompt = null;
};
}
function confirmTransitionTo(location, action, getUserConfirmation, callback) {
// TODO: If another transition starts while we're still confirming
// the previous one, we may end up in a weird state. Figure out the
// best way to handle this.
if (prompt != null) {
var result = typeof prompt === 'function' ? prompt(location, action) : prompt;
if (typeof result === 'string') {
if (typeof getUserConfirmation === 'function') {
getUserConfirmation(result, callback);
} else {
false ? undefined : void 0;
callback(true);
}
} else {
// Return false from a transition hook to cancel the transition.
callback(result !== false);
}
} else {
callback(true);
}
}
var listeners = [];
function appendListener(fn) {
var isActive = true;
function listener() {
if (isActive) fn.apply(void 0, arguments);
}
listeners.push(listener);
return function () {
isActive = false;
listeners = listeners.filter(function (item) {
return item !== listener;
});
};
}
function notifyListeners() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
listeners.forEach(function (listener) {
return listener.apply(void 0, args);
});
}
return {
setPrompt: setPrompt,
confirmTransitionTo: confirmTransitionTo,
appendListener: appendListener,
notifyListeners: notifyListeners
};
}
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
function getConfirmation(message, callback) {
callback(window.confirm(message)); // eslint-disable-line no-alert
}
/**
* Returns true if the HTML5 history API is supported. Taken from Modernizr.
*
* https://github.com/Modernizr/Modernizr/blob/master/LICENSE
* https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js
* changed to avoid false negatives for Windows Phones: https://github.com/reactjs/react-router/issues/586
*/
function supportsHistory() {
var ua = window.navigator.userAgent;
if ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && ua.indexOf('Mobile Safari') !== -1 && ua.indexOf('Chrome') === -1 && ua.indexOf('Windows Phone') === -1) return false;
return window.history && 'pushState' in window.history;
}
/**
* Returns true if browser fires popstate on hash change.
* IE10 and IE11 do not.
*/
function supportsPopStateOnHashChange() {
return window.navigator.userAgent.indexOf('Trident') === -1;
}
/**
* Returns false if using go(n) with hash history causes a full page reload.
*/
function supportsGoWithoutReloadUsingHash() {
return window.navigator.userAgent.indexOf('Firefox') === -1;
}
/**
* Returns true if a given popstate event is an extraneous WebKit event.
* Accounts for the fact that Chrome on iOS fires real popstate events
* containing undefined state when pressing the back button.
*/
function isExtraneousPopstateEvent(event) {
event.state === undefined && navigator.userAgent.indexOf('CriOS') === -1;
}
var PopStateEvent = 'popstate';
var HashChangeEvent = 'hashchange';
function getHistoryState() {
try {
return window.history.state || {};
} catch (e) {
// IE 11 sometimes throws when accessing window.history.state
// See https://github.com/ReactTraining/history/pull/289
return {};
}
}
/**
* Creates a history object that uses the HTML5 history API including
* pushState, replaceState, and the popstate event.
*/
function createBrowserHistory(props) {
if (props === void 0) {
props = {};
}
!canUseDOM ? false ? undefined : tiny_invariant_esm(false) : void 0;
var globalHistory = window.history;
var canUseHistory = supportsHistory();
var needsHashChangeListener = !supportsPopStateOnHashChange();
var _props = props,
_props$forceRefresh = _props.forceRefresh,
forceRefresh = _props$forceRefresh === void 0 ? false : _props$forceRefresh,
_props$getUserConfirm = _props.getUserConfirmation,
getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,
_props$keyLength = _props.keyLength,
keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;
var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
function getDOMLocation(historyState) {
var _ref = historyState || {},
key = _ref.key,
state = _ref.state;
var _window$location = window.location,
pathname = _window$location.pathname,
search = _window$location.search,
hash = _window$location.hash;
var path = pathname + search + hash;
false ? undefined : void 0;
if (basename) path = stripBasename(path, basename);
return createLocation(path, state, key);
}
function createKey() {
return Math.random().toString(36).substr(2, keyLength);
}
var transitionManager = createTransitionManager();
function setState(nextState) {
_extends(history, nextState);
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
}
function handlePopState(event) {
// Ignore extraneous popstate events in WebKit.
if (isExtraneousPopstateEvent(event)) return;
handlePop(getDOMLocation(event.state));
}
function handleHashChange() {
handlePop(getDOMLocation(getHistoryState()));
}
var forceNextPop = false;
function handlePop(location) {
if (forceNextPop) {
forceNextPop = false;
setState();
} else {
var action = 'POP';
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (ok) {
setState({
action: action,
location: location
});
} else {
revertPop(location);
}
});
}
}
function revertPop(fromLocation) {
var toLocation = history.location; // TODO: We could probably make this more reliable by
// keeping a list of keys we've seen in sessionStorage.
// Instead, we just default to 0 for keys we don't know.
var toIndex = allKeys.indexOf(toLocation.key);
if (toIndex === -1) toIndex = 0;
var fromIndex = allKeys.indexOf(fromLocation.key);
if (fromIndex === -1) fromIndex = 0;
var delta = toIndex - fromIndex;
if (delta) {
forceNextPop = true;
go(delta);
}
}
var initialLocation = getDOMLocation(getHistoryState());
var allKeys = [initialLocation.key]; // Public interface
function createHref(location) {
return basename + createPath(location);
}
function push(path, state) {
false ? undefined : void 0;
var action = 'PUSH';
var location = createLocation(path, state, createKey(), history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
var href = createHref(location);
var key = location.key,
state = location.state;
if (canUseHistory) {
globalHistory.pushState({
key: key,
state: state
}, null, href);
if (forceRefresh) {
window.location.href = href;
} else {
var prevIndex = allKeys.indexOf(history.location.key);
var nextKeys = allKeys.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
nextKeys.push(location.key);
allKeys = nextKeys;
setState({
action: action,
location: location
});
}
} else {
false ? undefined : void 0;
window.location.href = href;
}
});
}
function replace(path, state) {
false ? undefined : void 0;
var action = 'REPLACE';
var location = createLocation(path, state, createKey(), history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
var href = createHref(location);
var key = location.key,
state = location.state;
if (canUseHistory) {
globalHistory.replaceState({
key: key,
state: state
}, null, href);
if (forceRefresh) {
window.location.replace(href);
} else {
var prevIndex = allKeys.indexOf(history.location.key);
if (prevIndex !== -1) allKeys[prevIndex] = location.key;
setState({
action: action,
location: location
});
}
} else {
false ? undefined : void 0;
window.location.replace(href);
}
});
}
function go(n) {
globalHistory.go(n);
}
function goBack() {
go(-1);
}
function goForward() {
go(1);
}
var listenerCount = 0;
function checkDOMListeners(delta) {
listenerCount += delta;
if (listenerCount === 1 && delta === 1) {
window.addEventListener(PopStateEvent, handlePopState);
if (needsHashChangeListener) window.addEventListener(HashChangeEvent, handleHashChange);
} else if (listenerCount === 0) {
window.removeEventListener(PopStateEvent, handlePopState);
if (needsHashChangeListener) window.removeEventListener(HashChangeEvent, handleHashChange);
}
}
var isBlocked = false;
function block(prompt) {
if (prompt === void 0) {
prompt = false;
}
var unblock = transitionManager.setPrompt(prompt);
if (!isBlocked) {
checkDOMListeners(1);
isBlocked = true;
}
return function () {
if (isBlocked) {
isBlocked = false;
checkDOMListeners(-1);
}
return unblock();
};
}
function listen(listener) {
var unlisten = transitionManager.appendListener(listener);
checkDOMListeners(1);
return function () {
checkDOMListeners(-1);
unlisten();
};
}
var history = {
length: globalHistory.length,
action: 'POP',
location: initialLocation,
createHref: createHref,
push: push,
replace: replace,
go: go,
goBack: goBack,
goForward: goForward,
block: block,
listen: listen
};
return history;
}
var HashChangeEvent$1 = 'hashchange';
var HashPathCoders = {
hashbang: {
encodePath: function encodePath(path) {
return path.charAt(0) === '!' ? path : '!/' + stripLeadingSlash(path);
},
decodePath: function decodePath(path) {
return path.charAt(0) === '!' ? path.substr(1) : path;
}
},
noslash: {
encodePath: stripLeadingSlash,
decodePath: addLeadingSlash
},
slash: {
encodePath: addLeadingSlash,
decodePath: addLeadingSlash
}
};
function getHashPath() {
// We can't use window.location.hash here because it's not
// consistent across browsers - Firefox will pre-decode it!
var href = window.location.href;
var hashIndex = href.indexOf('#');
return hashIndex === -1 ? '' : href.substring(hashIndex + 1);
}
function pushHashPath(path) {
window.location.hash = path;
}
function replaceHashPath(path) {
var hashIndex = window.location.href.indexOf('#');
window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + '#' + path);
}
function createHashHistory(props) {
if (props === void 0) {
props = {};
}
!canUseDOM ? false ? undefined : tiny_invariant_esm(false) : void 0;
var globalHistory = window.history;
var canGoWithoutReload = supportsGoWithoutReloadUsingHash();
var _props = props,
_props$getUserConfirm = _props.getUserConfirmation,
getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,
_props$hashType = _props.hashType,
hashType = _props$hashType === void 0 ? 'slash' : _props$hashType;
var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
var _HashPathCoders$hashT = HashPathCoders[hashType],
encodePath = _HashPathCoders$hashT.encodePath,
decodePath = _HashPathCoders$hashT.decodePath;
function getDOMLocation() {
var path = decodePath(getHashPath());
false ? undefined : void 0;
if (basename) path = stripBasename(path, basename);
return createLocation(path);
}
var transitionManager = createTransitionManager();
function setState(nextState) {
_extends(history, nextState);
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
}
var forceNextPop = false;
var ignorePath = null;
function handleHashChange() {
var path = getHashPath();
var encodedPath = encodePath(path);
if (path !== encodedPath) {
// Ensure we always have a properly-encoded hash.
replaceHashPath(encodedPath);
} else {
var location = getDOMLocation();
var prevLocation = history.location;
if (!forceNextPop && locationsAreEqual(prevLocation, location)) return; // A hashchange doesn't always == location change.
if (ignorePath === createPath(location)) return; // Ignore this change; we already setState in push/replace.
ignorePath = null;
handlePop(location);
}
}
function handlePop(location) {
if (forceNextPop) {
forceNextPop = false;
setState();
} else {
var action = 'POP';
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (ok) {
setState({
action: action,
location: location
});
} else {
revertPop(location);
}
});
}
}
function revertPop(fromLocation) {
var toLocation = history.location; // TODO: We could probably make this more reliable by
// keeping a list of paths we've seen in sessionStorage.
// Instead, we just default to 0 for paths we don't know.
var toIndex = allPaths.lastIndexOf(createPath(toLocation));
if (toIndex === -1) toIndex = 0;
var fromIndex = allPaths.lastIndexOf(createPath(fromLocation));
if (fromIndex === -1) fromIndex = 0;
var delta = toIndex - fromIndex;
if (delta) {
forceNextPop = true;
go(delta);
}
} // Ensure the hash is encoded properly before doing anything else.
var path = getHashPath();
var encodedPath = encodePath(path);
if (path !== encodedPath) replaceHashPath(encodedPath);
var initialLocation = getDOMLocation();
var allPaths = [createPath(initialLocation)]; // Public interface
function createHref(location) {
return '#' + encodePath(basename + createPath(location));
}
function push(path, state) {
false ? undefined : void 0;
var action = 'PUSH';
var location = createLocation(path, undefined, undefined, history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
var path = createPath(location);
var encodedPath = encodePath(basename + path);
var hashChanged = getHashPath() !== encodedPath;
if (hashChanged) {
// We cannot tell if a hashchange was caused by a PUSH, so we'd
// rather setState here and ignore the hashchange. The caveat here
// is that other hash histories in the page will consider it a POP.
ignorePath = path;
pushHashPath(encodedPath);
var prevIndex = allPaths.lastIndexOf(createPath(history.location));
var nextPaths = allPaths.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
nextPaths.push(path);
allPaths = nextPaths;
setState({
action: action,
location: location
});
} else {
false ? undefined : void 0;
setState();
}
});
}
function replace(path, state) {
false ? undefined : void 0;
var action = 'REPLACE';
var location = createLocation(path, undefined, undefined, history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
var path = createPath(location);
var encodedPath = encodePath(basename + path);
var hashChanged = getHashPath() !== encodedPath;
if (hashChanged) {
// We cannot tell if a hashchange was caused by a REPLACE, so we'd
// rather setState here and ignore the hashchange. The caveat here
// is that other hash histories in the page will consider it a POP.
ignorePath = path;
replaceHashPath(encodedPath);
}
var prevIndex = allPaths.indexOf(createPath(history.location));
if (prevIndex !== -1) allPaths[prevIndex] = path;
setState({
action: action,
location: location
});
});
}
function go(n) {
false ? undefined : void 0;
globalHistory.go(n);
}
function goBack() {
go(-1);
}
function goForward() {
go(1);
}
var listenerCount = 0;
function checkDOMListeners(delta) {
listenerCount += delta;
if (listenerCount === 1 && delta === 1) {
window.addEventListener(HashChangeEvent$1, handleHashChange);
} else if (listenerCount === 0) {
window.removeEventListener(HashChangeEvent$1, handleHashChange);
}
}
var isBlocked = false;
function block(prompt) {
if (prompt === void 0) {
prompt = false;
}
var unblock = transitionManager.setPrompt(prompt);
if (!isBlocked) {
checkDOMListeners(1);
isBlocked = true;
}
return function () {
if (isBlocked) {
isBlocked = false;
checkDOMListeners(-1);
}
return unblock();
};
}
function listen(listener) {
var unlisten = transitionManager.appendListener(listener);
checkDOMListeners(1);
return function () {
checkDOMListeners(-1);
unlisten();
};
}
var history = {
length: globalHistory.length,
action: 'POP',
location: initialLocation,
createHref: createHref,
push: push,
replace: replace,
go: go,
goBack: goBack,
goForward: goForward,
block: block,
listen: listen
};
return history;
}
function clamp(n, lowerBound, upperBound) {
return Math.min(Math.max(n, lowerBound), upperBound);
}
/**
* Creates a history object that stores locations in memory.
*/
function createMemoryHistory(props) {
if (props === void 0) {
props = {};
}
var _props = props,
getUserConfirmation = _props.getUserConfirmation,
_props$initialEntries = _props.initialEntries,
initialEntries = _props$initialEntries === void 0 ? ['/'] : _props$initialEntries,
_props$initialIndex = _props.initialIndex,
initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,
_props$keyLength = _props.keyLength,
keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;
var transitionManager = createTransitionManager();
function setState(nextState) {
_extends(history, nextState);
history.length = history.entries.length;
transitionManager.notifyListeners(history.location, history.action);
}
function createKey() {
return Math.random().toString(36).substr(2, keyLength);
}
var index = clamp(initialIndex, 0, initialEntries.length - 1);
var entries = initialEntries.map(function (entry) {
return typeof entry === 'string' ? createLocation(entry, undefined, createKey()) : createLocation(entry, undefined, entry.key || createKey());
}); // Public interface
var createHref = createPath;
function push(path, state) {
false ? undefined : void 0;
var action = 'PUSH';
var location = createLocation(path, state, createKey(), history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
var prevIndex = history.index;
var nextIndex = prevIndex + 1;
var nextEntries = history.entries.slice(0);
if (nextEntries.length > nextIndex) {
nextEntries.splice(nextIndex, nextEntries.length - nextIndex, location);
} else {
nextEntries.push(location);
}
setState({
action: action,
location: location,
index: nextIndex,
entries: nextEntries
});
});
}
function replace(path, state) {
false ? undefined : void 0;
var action = 'REPLACE';
var location = createLocation(path, state, createKey(), history.location);
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (!ok) return;
history.entries[history.index] = location;
setState({
action: action,
location: location
});
});
}
function go(n) {
var nextIndex = clamp(history.index + n, 0, history.entries.length - 1);
var action = 'POP';
var location = history.entries[nextIndex];
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
if (ok) {
setState({
action: action,
location: location,
index: nextIndex
});
} else {
// Mimic the behavior of DOM histories by
// causing a render after a cancelled POP.
setState();
}
});
}
function goBack() {
go(-1);
}
function goForward() {
go(1);
}
function canGo(n) {
var nextIndex = history.index + n;
return nextIndex >= 0 && nextIndex < history.entries.length;
}
function block(prompt) {
if (prompt === void 0) {
prompt = false;
}
return transitionManager.setPrompt(prompt);
}
function listen(listener) {
return transitionManager.appendListener(listener);
}
var history = {
length: entries.length,
action: 'POP',
location: entries[index],
index: index,
entries: entries,
createHref: createHref,
push: push,
replace: replace,
go: go,
goBack: goBack,
goForward: goForward,
canGo: canGo,
block: block,
listen: listen
};
return history;
}
// CONCATENATED MODULE: ./node_modules/react-router-dom/es/Link.js
var Link_extends = Object.assign || 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; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var isModifiedEvent = function isModifiedEvent(event) {
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
};
/**
* The public API for rendering a history-aware <a>.
*/
var Link_Link = function (_React$Component) {
_inherits(Link, _React$Component);
function Link() {
var _temp, _this, _ret;
_classCallCheck(this, Link);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleClick = function (event) {
if (_this.props.onClick) _this.props.onClick(event);
if (!event.defaultPrevented && // onClick prevented default
event.button === 0 && // ignore everything but left clicks
!_this.props.target && // let browser handle "target=_blank" etc.
!isModifiedEvent(event) // ignore clicks with modifier keys
) {
event.preventDefault();
var history = _this.context.router.history;
var _this$props = _this.props,
replace = _this$props.replace,
to = _this$props.to;
if (replace) {
history.replace(to);
} else {
history.push(to);
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
Link.prototype.render = function render() {
var _props = this.props,
replace = _props.replace,
to = _props.to,
innerRef = _props.innerRef,
props = _objectWithoutProperties(_props, ["replace", "to", "innerRef"]); // eslint-disable-line no-unused-vars
browser_default()(this.context.router, "You should not use <Link> outside a <Router>");
browser_default()(to !== undefined, 'You must specify the "to" property');
var history = this.context.router.history;
var location = typeof to === "string" ? createLocation(to, null, null, history.location) : to;
var href = history.createHref(location);
return external_react_default.a.createElement("a", Link_extends({}, props, { onClick: this.handleClick, href: href, ref: innerRef }));
};
return Link;
}(external_react_default.a.Component);
Link_Link.propTypes = {
onClick: external_prop_types_default.a.func,
target: external_prop_types_default.a.string,
replace: external_prop_types_default.a.bool,
to: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.object]).isRequired,
innerRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.func])
};
Link_Link.defaultProps = {
replace: false
};
Link_Link.contextTypes = {
router: external_prop_types_default.a.shape({
history: external_prop_types_default.a.shape({
push: external_prop_types_default.a.func.isRequired,
replace: external_prop_types_default.a.func.isRequired,
createHref: external_prop_types_default.a.func.isRequired
}).isRequired
}).isRequired
};
/* harmony default export */ var es_Link = (Link_Link);
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
var wonder_blocks_core_ = __webpack_require__(2);
var wonder_blocks_core_ = __webpack_require__(1);
// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/components/clickable.js
function clickable_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clickable_typeof = function _typeof(obj) { return typeof obj; }; } else { clickable_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clickable_typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

@@ -1361,9 +157,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function clickable_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
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 clickable_extends() { clickable_extends = Object.assign || 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 clickable_extends.apply(this, arguments); }
function _extends() { _extends = Object.assign || 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 clickable_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -1374,9 +170,9 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function clickable_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return clickable_possibleConstructorReturn(this, result); }; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function clickable_possibleConstructorReturn(self, call) { if (call && (clickable_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

@@ -1398,3 +194,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
var StyledLink = Object(wonder_blocks_core_["addStyle"])(es_Link);
var StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
/**

@@ -1426,3 +222,3 @@ * A component to turn any custom component into a clickable one.

var clickable_Clickable = /*#__PURE__*/function (_React$Component) {
clickable_inherits(Clickable, _React$Component);
_inherits(Clickable, _React$Component);

@@ -1434,3 +230,3 @@ var _super = _createSuper(Clickable);

clickable_classCallCheck(this, Clickable);
_classCallCheck(this, Clickable);

@@ -1449,3 +245,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

if (activeHref && useClient && _this.props.href) {
return /*#__PURE__*/external_react_["createElement"](StyledLink, clickable_extends({}, commonProps, {
return /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, commonProps, {
to: _this.props.href,

@@ -1456,3 +252,3 @@ role: _this.props.role,

} else if (activeHref && !useClient) {
return /*#__PURE__*/external_react_["createElement"](StyledAnchor, clickable_extends({}, commonProps, {
return /*#__PURE__*/external_react_["createElement"](StyledAnchor, _extends({}, commonProps, {
href: _this.props.href,

@@ -1463,3 +259,3 @@ role: _this.props.role,

} else {
return /*#__PURE__*/external_react_["createElement"](StyledButton, clickable_extends({}, commonProps, {
return /*#__PURE__*/external_react_["createElement"](StyledButton, _extends({}, commonProps, {
type: "button",

@@ -1489,3 +285,5 @@ disabled: _this.props.disabled

testId = _this$props.testId,
restProps = clickable_objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "testId"]);
onKeyDown = _this$props.onKeyDown,
onKeyUp = _this$props.onKeyUp,
restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "testId", "onKeyDown", "onKeyUp"]);

@@ -1497,3 +295,5 @@ var ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router);

beforeNav: beforeNav,
safeWithNav: safeWithNav
safeWithNav: safeWithNav,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp
}, function (state, handlers) {

@@ -1500,0 +300,0 @@ return _this2.getCorrectTag(state, _objectSpread(_objectSpread({}, restProps), {}, {

14

package.json
{
"name": "@khanacademy/wonder-blocks-clickable",
"version": "1.2.1",
"version": "1.3.0",
"design": "v1",

@@ -18,17 +18,15 @@ "description": "Clickable component for Wonder-Blocks.",

"dependencies": {
"@khanacademy/wonder-blocks-core": "^2.6.1"
"@khanacademy/wonder-blocks-core": "^2.6.2"
},
"peerDependencies": {
"aphrodite": "^1.2.5",
"popper.js": "^1.14.1",
"prop-types": "^15.6.2",
"react": "^16.4.1"
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"react-dom": "^16.4.1",
"react-popper": "^1.0.0",
"react-router-dom": "^4.2.2",
"wb-dev-build-settings": "^0.0.3"
},
"gitHead": "56683c4c76becee78d40834acd354937e24e8781"
"gitHead": "d54b1f3b101a92dc4a53e0f6aa4621db2e2a5b6e"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc