@khanacademy/math-input 15.0.1 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/components/aphrodite-css-transition-group/transition-child.d.ts +11 -8
- package/dist/components/keypad/index.d.ts +1 -1
- package/dist/components/keypad/mobile-keypad-internals.d.ts +49 -0
- package/dist/components/keypad/mobile-keypad.d.ts +4 -48
- package/dist/es/index.js +168 -4740
- package/dist/es/index.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +166 -4722
- package/dist/index.js.map +1 -1
- package/package.json +10 -9
- package/src/components/__tests__/integration.test.tsx +2 -3
- package/src/components/keypad/__tests__/mobile-keypad.test.tsx +8 -8
- package/src/components/keypad/index.tsx +1 -1
- package/src/components/keypad/mobile-keypad-internals.tsx +240 -0
- package/src/components/keypad/mobile-keypad.tsx +21 -234
- package/src/full-mobile-input.stories.tsx +0 -1
- package/src/index.ts +1 -1
- package/tsconfig-build.tsbuildinfo +1 -1
- package/dist/components/keypad-legacy/compute-layout-parameters.d.ts +0 -28
- package/dist/components/keypad-legacy/corner-decal.d.ts +0 -12
- package/dist/components/keypad-legacy/echo-manager.d.ts +0 -17
- package/dist/components/keypad-legacy/empty-keypad-button.d.ts +0 -13
- package/dist/components/keypad-legacy/expression-keypad.d.ts +0 -21
- package/dist/components/keypad-legacy/fraction-keypad.d.ts +0 -21
- package/dist/components/keypad-legacy/gesture-manager.d.ts +0 -86
- package/dist/components/keypad-legacy/gesture-state-machine.d.ts +0 -105
- package/dist/components/keypad-legacy/icon.d.ts +0 -15
- package/dist/components/keypad-legacy/index.d.ts +0 -1
- package/dist/components/keypad-legacy/keypad-button.d.ts +0 -53
- package/dist/components/keypad-legacy/keypad-container.d.ts +0 -41
- package/dist/components/keypad-legacy/keypad.d.ts +0 -31
- package/dist/components/keypad-legacy/many-keypad-button.d.ts +0 -15
- package/dist/components/keypad-legacy/math-icon.d.ts +0 -16
- package/dist/components/keypad-legacy/multi-symbol-grid.d.ts +0 -14
- package/dist/components/keypad-legacy/multi-symbol-popover.d.ts +0 -12
- package/dist/components/keypad-legacy/navigation-pad.d.ts +0 -14
- package/dist/components/keypad-legacy/node-manager.d.ts +0 -49
- package/dist/components/keypad-legacy/popover-manager.d.ts +0 -13
- package/dist/components/keypad-legacy/popover-state-machine.d.ts +0 -68
- package/dist/components/keypad-legacy/provided-keypad.d.ts +0 -28
- package/dist/components/keypad-legacy/store/actions.d.ts +0 -55
- package/dist/components/keypad-legacy/store/echo-reducer.d.ts +0 -4
- package/dist/components/keypad-legacy/store/index.d.ts +0 -9
- package/dist/components/keypad-legacy/store/input-reducer.d.ts +0 -4
- package/dist/components/keypad-legacy/store/keypad-reducer.d.ts +0 -4
- package/dist/components/keypad-legacy/store/layout-reducer.d.ts +0 -4
- package/dist/components/keypad-legacy/store/shared.d.ts +0 -7
- package/dist/components/keypad-legacy/store/types.d.ts +0 -47
- package/dist/components/keypad-legacy/styles.d.ts +0 -5
- package/dist/components/keypad-legacy/svg-icon.d.ts +0 -12
- package/dist/components/keypad-legacy/text-icon.d.ts +0 -13
- package/dist/components/keypad-legacy/touchable-keypad-button.d.ts +0 -37
- package/dist/components/keypad-legacy/two-page-keypad.d.ts +0 -21
- package/dist/components/keypad-legacy/z-indexes.d.ts +0 -7
- package/dist/components/keypad-switch.d.ts +0 -12
- package/src/components/keypad-legacy/__tests__/gesture-state-machine.test.ts +0 -441
- package/src/components/keypad-legacy/__tests__/node-manager.test.ts +0 -89
- package/src/components/keypad-legacy/__tests__/two-page-keypad.test.tsx +0 -38
- package/src/components/keypad-legacy/compute-layout-parameters.ts +0 -205
- package/src/components/keypad-legacy/corner-decal.tsx +0 -56
- package/src/components/keypad-legacy/echo-manager.tsx +0 -152
- package/src/components/keypad-legacy/empty-keypad-button.tsx +0 -58
- package/src/components/keypad-legacy/expression-keypad.tsx +0 -315
- package/src/components/keypad-legacy/fraction-keypad.tsx +0 -180
- package/src/components/keypad-legacy/gesture-manager.ts +0 -255
- package/src/components/keypad-legacy/gesture-state-machine.ts +0 -329
- package/src/components/keypad-legacy/icon.tsx +0 -72
- package/src/components/keypad-legacy/iconography/arrow.js +0 -22
- package/src/components/keypad-legacy/iconography/backspace.js +0 -29
- package/src/components/keypad-legacy/iconography/cdot.js +0 -29
- package/src/components/keypad-legacy/iconography/cos.js +0 -30
- package/src/components/keypad-legacy/iconography/cube-root.js +0 -36
- package/src/components/keypad-legacy/iconography/dismiss.js +0 -25
- package/src/components/keypad-legacy/iconography/divide.js +0 -34
- package/src/components/keypad-legacy/iconography/down.js +0 -16
- package/src/components/keypad-legacy/iconography/equal.js +0 -33
- package/src/components/keypad-legacy/iconography/exp-2.js +0 -29
- package/src/components/keypad-legacy/iconography/exp-3.js +0 -29
- package/src/components/keypad-legacy/iconography/exp.js +0 -29
- package/src/components/keypad-legacy/iconography/frac.js +0 -44
- package/src/components/keypad-legacy/iconography/geq.js +0 -33
- package/src/components/keypad-legacy/iconography/gt.js +0 -33
- package/src/components/keypad-legacy/iconography/index.js +0 -45
- package/src/components/keypad-legacy/iconography/jump-into-numerator.js +0 -41
- package/src/components/keypad-legacy/iconography/jump-out-base.js +0 -30
- package/src/components/keypad-legacy/iconography/jump-out-denominator.js +0 -41
- package/src/components/keypad-legacy/iconography/jump-out-exponent.js +0 -30
- package/src/components/keypad-legacy/iconography/jump-out-numerator.js +0 -41
- package/src/components/keypad-legacy/iconography/jump-out-parentheses.js +0 -33
- package/src/components/keypad-legacy/iconography/left-paren.js +0 -33
- package/src/components/keypad-legacy/iconography/left.js +0 -16
- package/src/components/keypad-legacy/iconography/leq.js +0 -33
- package/src/components/keypad-legacy/iconography/ln.js +0 -29
- package/src/components/keypad-legacy/iconography/log-n.js +0 -29
- package/src/components/keypad-legacy/iconography/log.js +0 -29
- package/src/components/keypad-legacy/iconography/lt.js +0 -33
- package/src/components/keypad-legacy/iconography/minus.js +0 -32
- package/src/components/keypad-legacy/iconography/neq.js +0 -33
- package/src/components/keypad-legacy/iconography/parens.js +0 -33
- package/src/components/keypad-legacy/iconography/percent.js +0 -49
- package/src/components/keypad-legacy/iconography/period.js +0 -26
- package/src/components/keypad-legacy/iconography/plus.js +0 -32
- package/src/components/keypad-legacy/iconography/radical.js +0 -36
- package/src/components/keypad-legacy/iconography/right-paren.js +0 -33
- package/src/components/keypad-legacy/iconography/right.js +0 -16
- package/src/components/keypad-legacy/iconography/sin.js +0 -30
- package/src/components/keypad-legacy/iconography/sqrt.js +0 -32
- package/src/components/keypad-legacy/iconography/tan.js +0 -30
- package/src/components/keypad-legacy/iconography/times.js +0 -33
- package/src/components/keypad-legacy/iconography/up.js +0 -16
- package/src/components/keypad-legacy/index.ts +0 -1
- package/src/components/keypad-legacy/keypad-button.tsx +0 -368
- package/src/components/keypad-legacy/keypad-container.tsx +0 -358
- package/src/components/keypad-legacy/keypad.tsx +0 -162
- package/src/components/keypad-legacy/many-keypad-button.tsx +0 -54
- package/src/components/keypad-legacy/math-icon.tsx +0 -66
- package/src/components/keypad-legacy/multi-symbol-grid.tsx +0 -182
- package/src/components/keypad-legacy/multi-symbol-popover.tsx +0 -58
- package/src/components/keypad-legacy/navigation-pad.tsx +0 -140
- package/src/components/keypad-legacy/node-manager.ts +0 -133
- package/src/components/keypad-legacy/popover-manager.tsx +0 -73
- package/src/components/keypad-legacy/popover-state-machine.ts +0 -184
- package/src/components/keypad-legacy/provided-keypad.tsx +0 -136
- package/src/components/keypad-legacy/store/actions.ts +0 -155
- package/src/components/keypad-legacy/store/echo-reducer.ts +0 -57
- package/src/components/keypad-legacy/store/index.ts +0 -110
- package/src/components/keypad-legacy/store/input-reducer.ts +0 -55
- package/src/components/keypad-legacy/store/keypad-reducer.ts +0 -58
- package/src/components/keypad-legacy/store/layout-reducer.test.ts +0 -171
- package/src/components/keypad-legacy/store/layout-reducer.ts +0 -129
- package/src/components/keypad-legacy/store/shared.ts +0 -12
- package/src/components/keypad-legacy/store/types.ts +0 -78
- package/src/components/keypad-legacy/styles.ts +0 -38
- package/src/components/keypad-legacy/svg-icon.tsx +0 -24
- package/src/components/keypad-legacy/text-icon.tsx +0 -53
- package/src/components/keypad-legacy/touchable-keypad-button.tsx +0 -163
- package/src/components/keypad-legacy/two-page-keypad.tsx +0 -115
- package/src/components/keypad-legacy/z-indexes.ts +0 -8
- package/src/components/keypad-switch.tsx +0 -42
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A high-level manager for our gesture system. In particular, this class
|
|
3
|
-
* connects our various bits of logic for managing gestures and interactions,
|
|
4
|
-
* and links them together.
|
|
5
|
-
*/
|
|
6
|
-
import GestureStateMachine from "./gesture-state-machine";
|
|
7
|
-
import NodeManager from "./node-manager";
|
|
8
|
-
import PopoverStateMachine from "./popover-state-machine";
|
|
9
|
-
import type Key from "../../data/keys";
|
|
10
|
-
import type { ActiveNodesObj, LayoutProps } from "../../types";
|
|
11
|
-
import type * as React from "react";
|
|
12
|
-
type Options = {
|
|
13
|
-
swipeEnabled: boolean;
|
|
14
|
-
};
|
|
15
|
-
type Handlers = {
|
|
16
|
-
onSwipeChange?: (dx: number) => void;
|
|
17
|
-
onSwipeEnd?: (dx: number) => void;
|
|
18
|
-
onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
|
|
19
|
-
onClick: (key: Key, layoutProps: LayoutProps, inPopover: boolean) => void;
|
|
20
|
-
};
|
|
21
|
-
declare class GestureManager {
|
|
22
|
-
swipeEnabled: boolean;
|
|
23
|
-
trackEvents: boolean;
|
|
24
|
-
nodeManager: NodeManager;
|
|
25
|
-
popoverStateMachine: PopoverStateMachine;
|
|
26
|
-
gestureStateMachine: GestureStateMachine;
|
|
27
|
-
constructor(options: Options, handlers: Handlers, disabledSwipeKeys: ReadonlyArray<Key>, multiPressableKeys: ReadonlyArray<Key>);
|
|
28
|
-
/**
|
|
29
|
-
* Handle a touch-start event that originated in a node registered with the
|
|
30
|
-
* gesture system.
|
|
31
|
-
*
|
|
32
|
-
* @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
|
|
33
|
-
* @param {string} id - the identifier of the DOM node in which the touch
|
|
34
|
-
* occurred
|
|
35
|
-
*/
|
|
36
|
-
onTouchStart(evt: React.TouchEvent<HTMLDivElement>, id?: string | undefined): void;
|
|
37
|
-
/**
|
|
38
|
-
* Handle a touch-move event that originated in a node registered with the
|
|
39
|
-
* gesture system.
|
|
40
|
-
*
|
|
41
|
-
* @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
|
|
42
|
-
*/
|
|
43
|
-
onTouchMove(evt: React.TouchEvent<HTMLDivElement>): void;
|
|
44
|
-
/**
|
|
45
|
-
* Handle a touch-end event that originated in a node registered with the
|
|
46
|
-
* gesture system.
|
|
47
|
-
*
|
|
48
|
-
* @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
|
|
49
|
-
*/
|
|
50
|
-
onTouchEnd(evt: React.TouchEvent<HTMLDivElement>): void;
|
|
51
|
-
/**
|
|
52
|
-
* Handle a touch-cancel event that originated in a node registered with the
|
|
53
|
-
* gesture system.
|
|
54
|
-
*
|
|
55
|
-
* @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
|
|
56
|
-
*/
|
|
57
|
-
onTouchCancel(evt: React.TouchEvent<HTMLDivElement>): void;
|
|
58
|
-
/**
|
|
59
|
-
* Register a DOM node with a given identifier.
|
|
60
|
-
*
|
|
61
|
-
* @param {string} id - the identifier of the given node
|
|
62
|
-
* @param {node} domNode - the DOM node linked to the identifier
|
|
63
|
-
* @param {string[]} childIds - the identifiers of any DOM nodes that
|
|
64
|
-
* should be considered children of this node,
|
|
65
|
-
* in that they should take priority when
|
|
66
|
-
* intercepting touch events
|
|
67
|
-
* @param {object} borders - an opaque object describing the node's borders
|
|
68
|
-
*/
|
|
69
|
-
registerDOMNode(id: any, domNode: any, childIds: any): void;
|
|
70
|
-
/**
|
|
71
|
-
* Unregister the DOM node with the given identifier.
|
|
72
|
-
*
|
|
73
|
-
* @param {string} id - the identifier of the node to unregister
|
|
74
|
-
*/
|
|
75
|
-
unregisterDOMNode(id: any): void;
|
|
76
|
-
/**
|
|
77
|
-
* Enable event tracking for the gesture manager.
|
|
78
|
-
*/
|
|
79
|
-
enableEventTracking(): void;
|
|
80
|
-
/**
|
|
81
|
-
* Disable event tracking for the gesture manager. When called, the gesture
|
|
82
|
-
* manager will drop any events received by managed nodes.
|
|
83
|
-
*/
|
|
84
|
-
disableEventTracking(): void;
|
|
85
|
-
}
|
|
86
|
-
export default GestureManager;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import type Key from "../../data/keys";
|
|
2
|
-
/**
|
|
3
|
-
* The state machine that backs our gesture system. In particular, this state
|
|
4
|
-
* machine manages the interplay between focuses, touch ups, and swiping.
|
|
5
|
-
* It is entirely ignorant of the existence of popovers and the positions of
|
|
6
|
-
* DOM nodes, operating solely on IDs. The state machine does accommodate for
|
|
7
|
-
* multi-touch interactions, tracking gesture state on a per-touch basis.
|
|
8
|
-
*/
|
|
9
|
-
export type Handlers = {
|
|
10
|
-
onFocus: (id: string) => void;
|
|
11
|
-
onBlur: () => void;
|
|
12
|
-
onTrigger: (id: string) => void;
|
|
13
|
-
onLongPress: (id: string) => void;
|
|
14
|
-
onSwipeChange?: (x: number) => void;
|
|
15
|
-
onSwipeEnd?: (x: number) => void;
|
|
16
|
-
onTouchEnd: (id: string) => void;
|
|
17
|
-
};
|
|
18
|
-
type Options = {
|
|
19
|
-
longPressWaitTimeMs: number;
|
|
20
|
-
swipeThresholdPx: number;
|
|
21
|
-
holdIntervalMs: number;
|
|
22
|
-
};
|
|
23
|
-
type TouchState = {
|
|
24
|
-
activeNodeId: Key;
|
|
25
|
-
pressAndHoldIntervalId: number | null;
|
|
26
|
-
longPressTimeoutId: number | null;
|
|
27
|
-
swipeLocked: boolean;
|
|
28
|
-
startX: number;
|
|
29
|
-
};
|
|
30
|
-
type TouchStateMap = Record<Key, TouchState>;
|
|
31
|
-
type SwipeState = {
|
|
32
|
-
touchId: Key;
|
|
33
|
-
startX: number;
|
|
34
|
-
};
|
|
35
|
-
declare class GestureStateMachine {
|
|
36
|
-
handlers: Handlers;
|
|
37
|
-
options: Options;
|
|
38
|
-
swipeDisabledNodeIds: ReadonlyArray<Key>;
|
|
39
|
-
multiPressableKeys: ReadonlyArray<Key>;
|
|
40
|
-
touchState: Partial<TouchStateMap>;
|
|
41
|
-
swipeState: SwipeState | null;
|
|
42
|
-
constructor(handlers: Handlers, options: Partial<Options>, swipeDisabledNodeIds?: ReadonlyArray<Key>, multiPressableKeys?: ReadonlyArray<Key>);
|
|
43
|
-
_maybeCancelLongPressForTouch(touchId: any): void;
|
|
44
|
-
_maybeCancelPressAndHoldForTouch(touchId: any): void;
|
|
45
|
-
_cleanupTouchEvent(touchId: any): void;
|
|
46
|
-
/**
|
|
47
|
-
* Handle a focus event on the node with the given identifier, which may be
|
|
48
|
-
* `null` to indicate that the user has dragged their finger off of any
|
|
49
|
-
* registered nodes, but is still in the middle of a gesture.
|
|
50
|
-
*
|
|
51
|
-
* @param {string|null} id - the identifier of the newly focused node, or
|
|
52
|
-
* `null` if no node is focused
|
|
53
|
-
* @param {number} touchId - a unique identifier associated with the touch
|
|
54
|
-
*/
|
|
55
|
-
_onFocus(id: any, touchId: any): void;
|
|
56
|
-
/**
|
|
57
|
-
* Clear out all active gesture information.
|
|
58
|
-
*/
|
|
59
|
-
_onSwipeStart(): void;
|
|
60
|
-
/**
|
|
61
|
-
* A function that returns the identifier of the node over which the touch
|
|
62
|
-
* event occurred. This is provided as a piece of lazy computation, as
|
|
63
|
-
* computing the DOM node for a given point is expensive, and the state
|
|
64
|
-
* machine won't always need that information. For example, if the user is
|
|
65
|
-
* swiping, then `onTouchMove` needs to be performant and doesn't care about
|
|
66
|
-
* the node over which the touch occurred.
|
|
67
|
-
*
|
|
68
|
-
* @typedef idComputation
|
|
69
|
-
* @returns {DOMNode} - the identifier of the node over which the touch
|
|
70
|
-
* occurred
|
|
71
|
-
*/
|
|
72
|
-
/**
|
|
73
|
-
* Handle a touch-start event on the node with the given identifer.
|
|
74
|
-
*
|
|
75
|
-
* @param {idComputation} getId - a function that returns identifier of the
|
|
76
|
-
* node over which the start event occurred
|
|
77
|
-
* @param {number} touchId - a unique identifier associated with the touch
|
|
78
|
-
*/
|
|
79
|
-
onTouchStart(getId: any, touchId: any, pageX: any): void;
|
|
80
|
-
/**
|
|
81
|
-
* Handle a touch-move event on the node with the given identifer.
|
|
82
|
-
*
|
|
83
|
-
* @param {idComputation} getId - a function that returns identifier of the
|
|
84
|
-
* node over which the move event occurred
|
|
85
|
-
* @param {number} touchId - a unique identifier associated with the touch
|
|
86
|
-
* @param {number} pageX - the x coordinate of the touch
|
|
87
|
-
* @param {boolean} swipeEnabled - whether the system should allow for
|
|
88
|
-
* transitions into a swiping state
|
|
89
|
-
*/
|
|
90
|
-
onTouchMove(getId: any, touchId: any, pageX: any, swipeEnabled: any): void;
|
|
91
|
-
/**
|
|
92
|
-
* Handle a touch-end event on the node with the given identifer.
|
|
93
|
-
*
|
|
94
|
-
* @param {idComputation} getId - a function that returns identifier of the
|
|
95
|
-
* node over which the end event occurred
|
|
96
|
-
* @param {number} touchId - a unique identifier associated with the touch
|
|
97
|
-
* @param {number} pageX - the x coordinate of the touch
|
|
98
|
-
*/
|
|
99
|
-
onTouchEnd(getId: any, touchId: any, pageX: any): void;
|
|
100
|
-
/**
|
|
101
|
-
* Handle a touch-cancel event.
|
|
102
|
-
*/
|
|
103
|
-
onTouchCancel(touchId: any): void;
|
|
104
|
-
}
|
|
105
|
-
export default GestureStateMachine;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A component that renders an icon for a symbol with the given name.
|
|
3
|
-
*/
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
import type { IconConfig } from "../../types";
|
|
6
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
7
|
-
type Props = {
|
|
8
|
-
focused: boolean;
|
|
9
|
-
icon: IconConfig;
|
|
10
|
-
style?: StyleType;
|
|
11
|
-
};
|
|
12
|
-
declare class Icon extends React.PureComponent<Props> {
|
|
13
|
-
render(): JSX.Element;
|
|
14
|
-
}
|
|
15
|
-
export default Icon;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./provided-keypad";
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A component that renders a keypad button.
|
|
3
|
-
*/
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
import { BorderDirection } from "../../enums";
|
|
6
|
-
import type { KeyType } from "../../enums";
|
|
7
|
-
import type { Border, NonManyKeyConfig, IconConfig } from "../../types";
|
|
8
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
9
|
-
interface ReduxProps {
|
|
10
|
-
heightPx: number;
|
|
11
|
-
widthPx: number;
|
|
12
|
-
}
|
|
13
|
-
interface Props extends ReduxProps {
|
|
14
|
-
ariaLabel?: string;
|
|
15
|
-
borders: Border;
|
|
16
|
-
childKeys: ReadonlyArray<NonManyKeyConfig>;
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
focused: boolean;
|
|
19
|
-
popoverEnabled: boolean;
|
|
20
|
-
type: KeyType;
|
|
21
|
-
icon?: IconConfig;
|
|
22
|
-
style?: StyleType;
|
|
23
|
-
onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
|
|
24
|
-
onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
|
|
25
|
-
onTouchMove?: (evt: React.TouchEvent<HTMLDivElement>) => void;
|
|
26
|
-
onTouchStart?: (evt: React.TouchEvent<HTMLDivElement>) => void;
|
|
27
|
-
ref?: (any: any) => void;
|
|
28
|
-
}
|
|
29
|
-
declare class KeypadButton extends React.PureComponent<Props> {
|
|
30
|
-
buttonSizeStyle: StyleType | undefined;
|
|
31
|
-
static defaultProps: {
|
|
32
|
-
borders: readonly BorderDirection[];
|
|
33
|
-
childKeys: never[];
|
|
34
|
-
disabled: boolean;
|
|
35
|
-
focused: boolean;
|
|
36
|
-
popoverEnabled: boolean;
|
|
37
|
-
};
|
|
38
|
-
UNSAFE_componentWillMount(): void;
|
|
39
|
-
componentDidMount(): void;
|
|
40
|
-
UNSAFE_componentWillUpdate(newProps: any, newState: any): void;
|
|
41
|
-
_preInjectStyles: () => void;
|
|
42
|
-
_getFocusStyle: (type: KeyType) => any[];
|
|
43
|
-
_getButtonStyle: (type: any, borders: any, style?: any) => any[];
|
|
44
|
-
render(): JSX.Element;
|
|
45
|
-
}
|
|
46
|
-
declare const _default: import("react-redux").ConnectedComponent<typeof KeypadButton, import("react-redux").Omit<Pick<React.ClassAttributes<KeypadButton> & Props, "style" | "ref" | "ariaLabel" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "type" | "icon" | "key" | "heightPx" | "widthPx"> & {
|
|
47
|
-
focused?: boolean | undefined;
|
|
48
|
-
disabled?: boolean | undefined;
|
|
49
|
-
borders?: readonly (BorderDirection | undefined)[] | undefined;
|
|
50
|
-
childKeys?: readonly NonManyKeyConfig[] | undefined;
|
|
51
|
-
popoverEnabled?: boolean | undefined;
|
|
52
|
-
} & {}, "heightPx" | "widthPx">>;
|
|
53
|
-
export default _default;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { LayoutMode, KeypadType } from "../../enums";
|
|
3
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
4
|
-
interface ReduxProps {
|
|
5
|
-
active?: boolean;
|
|
6
|
-
extraKeys?: ReadonlyArray<string>;
|
|
7
|
-
keypadType?: KeypadType;
|
|
8
|
-
layoutMode?: LayoutMode;
|
|
9
|
-
navigationPadEnabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
interface Props extends ReduxProps {
|
|
12
|
-
onDismiss?: () => void;
|
|
13
|
-
onElementMounted: (element: any) => void;
|
|
14
|
-
onPageSizeChange?: (pageWidth: number, pageHeight: number, containerWidth: number, containerHeight: number) => void;
|
|
15
|
-
style?: StyleType;
|
|
16
|
-
}
|
|
17
|
-
type State = {
|
|
18
|
-
hasBeenActivated: boolean;
|
|
19
|
-
viewportWidth: string | number;
|
|
20
|
-
};
|
|
21
|
-
declare class KeypadContainer extends React.Component<Props, State> {
|
|
22
|
-
_containerRef: React.RefObject<HTMLDivElement>;
|
|
23
|
-
_containerResizeObserver: ResizeObserver | null;
|
|
24
|
-
_resizeTimeout: number | null | undefined;
|
|
25
|
-
hasMounted: boolean | undefined;
|
|
26
|
-
state: {
|
|
27
|
-
hasBeenActivated: boolean;
|
|
28
|
-
viewportWidth: string;
|
|
29
|
-
};
|
|
30
|
-
UNSAFE_componentWillMount(): void;
|
|
31
|
-
componentDidMount(): void;
|
|
32
|
-
UNSAFE_componentWillReceiveProps(nextProps: any): void;
|
|
33
|
-
componentDidUpdate(prevProps: any): void;
|
|
34
|
-
componentWillUnmount(): void;
|
|
35
|
-
_throttleResizeHandler: () => void;
|
|
36
|
-
_onResize: () => void;
|
|
37
|
-
renderKeypad: () => JSX.Element;
|
|
38
|
-
render(): JSX.Element;
|
|
39
|
-
}
|
|
40
|
-
declare const _default: import("react-redux").ConnectedComponent<typeof KeypadContainer, import("react-redux").Omit<React.ClassAttributes<KeypadContainer> & Props, "active" | "extraKeys" | "keypadType" | "onPageSizeChange" | "layoutMode" | "navigationPadEnabled">>;
|
|
41
|
-
export default _default;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A keypad component that acts as a container for rows or columns of buttons,
|
|
3
|
-
* and manages the rendering of echo animations on top of those buttons.
|
|
4
|
-
*/
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { Bound, Popover, Echo } from "../../types";
|
|
7
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
8
|
-
interface ReduxProps {
|
|
9
|
-
active: boolean;
|
|
10
|
-
echoes: ReadonlyArray<Echo>;
|
|
11
|
-
popover: Popover | null;
|
|
12
|
-
}
|
|
13
|
-
interface Props extends ReduxProps {
|
|
14
|
-
children: React.ReactNode;
|
|
15
|
-
style?: StyleType;
|
|
16
|
-
removeEcho?: (animationId: string) => void;
|
|
17
|
-
}
|
|
18
|
-
declare class Keypad extends React.Component<Props> {
|
|
19
|
-
_isMounted: boolean | undefined;
|
|
20
|
-
_resizeTimeout: number | null | undefined;
|
|
21
|
-
_container: Bound | null | undefined;
|
|
22
|
-
componentDidMount(): void;
|
|
23
|
-
UNSAFE_componentWillReceiveProps(newProps: any): void;
|
|
24
|
-
componentWillUnmount(): void;
|
|
25
|
-
_computeContainer: () => void;
|
|
26
|
-
_updateSizeAndPosition: () => void;
|
|
27
|
-
_onResize: () => void;
|
|
28
|
-
render(): JSX.Element;
|
|
29
|
-
}
|
|
30
|
-
declare const _default: import("react-redux").ConnectedComponent<typeof Keypad, import("react-redux").Omit<React.ClassAttributes<Keypad> & Props, "active" | "popover" | "echoes" | "removeEcho">>;
|
|
31
|
-
export default _default;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A keypad button that displays an arbitrary number of symbols, with no
|
|
3
|
-
* 'default' symbol.
|
|
4
|
-
*/
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
type Props = {
|
|
7
|
-
keys: ReadonlyArray<string>;
|
|
8
|
-
};
|
|
9
|
-
declare class ManyKeypadButton extends React.Component<Props> {
|
|
10
|
-
static defaultProps: {
|
|
11
|
-
keys: never[];
|
|
12
|
-
};
|
|
13
|
-
render(): JSX.Element;
|
|
14
|
-
}
|
|
15
|
-
export default ManyKeypadButton;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A component that renders an icon with math (via KaTeX).
|
|
3
|
-
*/
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
6
|
-
type Props = {
|
|
7
|
-
math: string;
|
|
8
|
-
style: StyleType;
|
|
9
|
-
};
|
|
10
|
-
declare class MathIcon extends React.Component<Props> {
|
|
11
|
-
componentDidMount(): void;
|
|
12
|
-
componentDidUpdate(prevProps: any): void;
|
|
13
|
-
_renderMath: () => void;
|
|
14
|
-
render(): JSX.Element;
|
|
15
|
-
}
|
|
16
|
-
export default MathIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A grid of symbols, rendered as text and positioned based on the number of
|
|
3
|
-
* symbols provided. Up to four symbols will be shown.
|
|
4
|
-
*/
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { IconConfig } from "../../types";
|
|
7
|
-
type Props = {
|
|
8
|
-
focused: boolean;
|
|
9
|
-
icons: ReadonlyArray<IconConfig>;
|
|
10
|
-
};
|
|
11
|
-
declare class MultiSymbolGrid extends React.Component<Props> {
|
|
12
|
-
render(): JSX.Element;
|
|
13
|
-
}
|
|
14
|
-
export default MultiSymbolGrid;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A popover that renders a set of keys floating above the page.
|
|
3
|
-
*/
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
import type { KeyConfig } from "../../types";
|
|
6
|
-
type Prop = {
|
|
7
|
-
keys: ReadonlyArray<KeyConfig>;
|
|
8
|
-
};
|
|
9
|
-
declare class MultiSymbolPopover extends React.Component<Prop> {
|
|
10
|
-
render(): JSX.Element;
|
|
11
|
-
}
|
|
12
|
-
export default MultiSymbolPopover;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A component that renders a navigation pad, which consists of an arrow for
|
|
3
|
-
* each possible direction.
|
|
4
|
-
*/
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
7
|
-
type Props = {
|
|
8
|
-
roundTopLeft: boolean;
|
|
9
|
-
style: StyleType;
|
|
10
|
-
};
|
|
11
|
-
declare class NavigationPad extends React.Component<Props> {
|
|
12
|
-
render(): JSX.Element;
|
|
13
|
-
}
|
|
14
|
-
export default NavigationPad;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import type { LayoutProps, Bound } from "../../types";
|
|
2
|
-
/**
|
|
3
|
-
* A manager for our node-to-ID system. In particular, this class is
|
|
4
|
-
* responsible for maintaing a mapping between DOM nodes and node IDs, and
|
|
5
|
-
* translating touch events from the raw positions at which they occur to the
|
|
6
|
-
* nodes over which they are occurring. This differs from browser behavior, in
|
|
7
|
-
* which touch events are only sent to the node in which a touch started.
|
|
8
|
-
*/
|
|
9
|
-
declare class NodeManager {
|
|
10
|
-
_nodesById: Record<string, HTMLElement>;
|
|
11
|
-
_orderedIds: ReadonlyArray<string>;
|
|
12
|
-
_cachedBoundingBoxesById: Record<string, Bound>;
|
|
13
|
-
constructor();
|
|
14
|
-
/**
|
|
15
|
-
* Register a DOM node with a given identifier.
|
|
16
|
-
*
|
|
17
|
-
* @param {string} id - the identifier of the given node
|
|
18
|
-
* @param {node} domNode - the DOM node linked to the identifier
|
|
19
|
-
* @param {object} borders - an opaque object describing the node's borders
|
|
20
|
-
*/
|
|
21
|
-
registerDOMNode(id: string, domNode: HTMLElement, childIds: ReadonlyArray<string>): void;
|
|
22
|
-
/**
|
|
23
|
-
* Unregister the DOM node with the given identifier.
|
|
24
|
-
*
|
|
25
|
-
* @param {string} id - the identifier of the node to unregister
|
|
26
|
-
*/
|
|
27
|
-
unregisterDOMNode(id: string): void;
|
|
28
|
-
/**
|
|
29
|
-
* Return the identifier of the topmost node located at the given
|
|
30
|
-
* coordinates.
|
|
31
|
-
*
|
|
32
|
-
* @param {number} x - the x coordinate at which to search for a node
|
|
33
|
-
* @param {number} y - the y coordinate at which to search for a node
|
|
34
|
-
* @returns {null|string} - null or the identifier of the topmost node at
|
|
35
|
-
* the given coordinates
|
|
36
|
-
*/
|
|
37
|
-
idForCoords(x: number, y: number): string | void;
|
|
38
|
-
/**
|
|
39
|
-
* Return the necessary layout information, including the bounds and border
|
|
40
|
-
* values, for the node with the given identifier.
|
|
41
|
-
*
|
|
42
|
-
* @param {string} id - the identifier of the node for which to return the
|
|
43
|
-
* layout information
|
|
44
|
-
* @returns {object} - the bounding client rect for the given node, along
|
|
45
|
-
* with its borders
|
|
46
|
-
*/
|
|
47
|
-
layoutPropsForId(id: string): LayoutProps;
|
|
48
|
-
}
|
|
49
|
-
export default NodeManager;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A component that renders and animates the popovers that appear over the
|
|
3
|
-
* multi-functional keys.
|
|
4
|
-
*/
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { Popover } from "../../types";
|
|
7
|
-
type PopoverManagerProps = {
|
|
8
|
-
popover: Popover | null;
|
|
9
|
-
};
|
|
10
|
-
declare class PopoverManager extends React.Component<PopoverManagerProps> {
|
|
11
|
-
render(): JSX.Element | null;
|
|
12
|
-
}
|
|
13
|
-
export default PopoverManager;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import type { ActiveNodesObj } from "../../types";
|
|
2
|
-
/**
|
|
3
|
-
* A state machine for the popover state. In particular, this class manages the
|
|
4
|
-
* mapping of parent nodes to their children, and translates touch events that
|
|
5
|
-
* traverse various nodes to actions that are conditioned on whether a popover
|
|
6
|
-
* is present.
|
|
7
|
-
*/
|
|
8
|
-
type Handlers = {
|
|
9
|
-
onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
|
|
10
|
-
onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;
|
|
11
|
-
};
|
|
12
|
-
declare class PopoverStateMachine {
|
|
13
|
-
handlers: Handlers;
|
|
14
|
-
popovers: Record<string, ReadonlyArray<string>>;
|
|
15
|
-
activePopover: string | null;
|
|
16
|
-
constructor(handlers: any);
|
|
17
|
-
/**
|
|
18
|
-
* Register a popover container as containing a set of children.
|
|
19
|
-
*
|
|
20
|
-
* @param {string} id - the identifier of the popover container
|
|
21
|
-
* @param {string[]} childIds - the identifiers of the nodes contained in
|
|
22
|
-
* the popover container
|
|
23
|
-
*/
|
|
24
|
-
registerPopover(id: any, childIds: any): void;
|
|
25
|
-
/**
|
|
26
|
-
* Unregister a popover container.
|
|
27
|
-
*
|
|
28
|
-
* @param {string} id - the identifier of the popover container to
|
|
29
|
-
* unregister
|
|
30
|
-
*/
|
|
31
|
-
unregisterPopover(id: any): void;
|
|
32
|
-
/**
|
|
33
|
-
* @returns {boolean} - whether a popover is active and visible
|
|
34
|
-
*/
|
|
35
|
-
isPopoverVisible(): boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Blur the active nodes.
|
|
38
|
-
*/
|
|
39
|
-
onBlur(): void;
|
|
40
|
-
/**
|
|
41
|
-
* Handle a focus event on the node with the given identifier.
|
|
42
|
-
*
|
|
43
|
-
* @param {string} id - the identifier of the node that was focused
|
|
44
|
-
*/
|
|
45
|
-
onFocus(id: any): void;
|
|
46
|
-
/**
|
|
47
|
-
* Handle a long press event on the node with the given identifier.
|
|
48
|
-
*
|
|
49
|
-
* @param {string} id - the identifier of the node that was long-pressed
|
|
50
|
-
*/
|
|
51
|
-
onLongPress(id: any): void;
|
|
52
|
-
/**
|
|
53
|
-
* Handle the trigger (click or hold) of the node with the given identifier.
|
|
54
|
-
*
|
|
55
|
-
* @param {string} id - the identifier of the node that was triggered
|
|
56
|
-
*/
|
|
57
|
-
onTrigger(id: any): void;
|
|
58
|
-
/**
|
|
59
|
-
* Handle a touch-end event on the node with the given identifier.
|
|
60
|
-
*
|
|
61
|
-
* @param {string} id - the identifier of the node over which the touch
|
|
62
|
-
* ended
|
|
63
|
-
*/
|
|
64
|
-
onTouchEnd(id: any): void;
|
|
65
|
-
_isNodeInsidePopover(popover: any, id: any): boolean;
|
|
66
|
-
_defaultNodeForPopover(popover: any): string;
|
|
67
|
-
}
|
|
68
|
-
export default PopoverStateMachine;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import ReactDOM from "react-dom";
|
|
3
|
-
import type { Cursor, KeypadConfiguration, KeyHandler, KeypadAPI } from "../../types";
|
|
4
|
-
import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
|
|
5
|
-
import type { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
6
|
-
type Props = {
|
|
7
|
-
setKeypadActive: (keypadActive: boolean) => void;
|
|
8
|
-
keypadActive: boolean;
|
|
9
|
-
onElementMounted?: (arg1: any) => void;
|
|
10
|
-
onDismiss?: () => void;
|
|
11
|
-
style?: StyleType;
|
|
12
|
-
onAnalyticsEvent: AnalyticsEventHandlerFn;
|
|
13
|
-
};
|
|
14
|
-
declare class ProvidedKeypad extends React.Component<Props> implements KeypadAPI {
|
|
15
|
-
store: any;
|
|
16
|
-
constructor(props: any);
|
|
17
|
-
componentDidUpdate(prevProps: any): void;
|
|
18
|
-
activate: () => void;
|
|
19
|
-
dismiss: () => void;
|
|
20
|
-
configure: (configuration: KeypadConfiguration, cb: () => void) => void;
|
|
21
|
-
setCursor: (cursor: Cursor) => void;
|
|
22
|
-
setKeyHandler: (keyHandler: KeyHandler) => void;
|
|
23
|
-
getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
|
|
24
|
-
onElementMounted: (element: any) => void;
|
|
25
|
-
onDismiss: () => void;
|
|
26
|
-
render(): React.ReactNode;
|
|
27
|
-
}
|
|
28
|
-
export default ProvidedKeypad;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import type Key from "../../../data/keys";
|
|
2
|
-
import type { Bound, KeypadConfiguration, KeyHandler, Cursor, ActiveNodesObj } from "../../../types";
|
|
3
|
-
type DismissKeypadAction = {
|
|
4
|
-
type: "DismissKeypad";
|
|
5
|
-
};
|
|
6
|
-
export declare const dismissKeypad: () => DismissKeypadAction;
|
|
7
|
-
type ActivateKeypadAction = {
|
|
8
|
-
type: "ActivateKeypad";
|
|
9
|
-
};
|
|
10
|
-
export declare const activateKeypad: () => ActivateKeypadAction;
|
|
11
|
-
/**
|
|
12
|
-
* Configure the keypad with the provided configuration parameters.
|
|
13
|
-
*/
|
|
14
|
-
type ConfigureKeypadAction = {
|
|
15
|
-
type: "ConfigureKeypad";
|
|
16
|
-
configuration: KeypadConfiguration;
|
|
17
|
-
};
|
|
18
|
-
export declare const configureKeypad: (configuration: KeypadConfiguration) => ConfigureKeypadAction;
|
|
19
|
-
type SetPageSizeAction = {
|
|
20
|
-
type: "SetPageSize";
|
|
21
|
-
pageWidth: number;
|
|
22
|
-
pageHeight: number;
|
|
23
|
-
containerWidth: number;
|
|
24
|
-
containerHeight: number;
|
|
25
|
-
};
|
|
26
|
-
export declare const setPageSize: (pageWidth: number, pageHeight: number, containerWidth: number, containerHeight: number) => SetPageSizeAction;
|
|
27
|
-
type RemoveEchoAction = {
|
|
28
|
-
type: "RemoveEcho";
|
|
29
|
-
animationId: string;
|
|
30
|
-
};
|
|
31
|
-
export declare const removeEcho: (animationId: string) => RemoveEchoAction;
|
|
32
|
-
type SetKeyHandlerAction = {
|
|
33
|
-
type: "SetKeyHandler";
|
|
34
|
-
keyHandler: KeyHandler;
|
|
35
|
-
};
|
|
36
|
-
export declare const setKeyHandler: (keyHandler: KeyHandler) => SetKeyHandlerAction;
|
|
37
|
-
type SetCursorAction = {
|
|
38
|
-
type: "SetCursor";
|
|
39
|
-
cursor: Cursor;
|
|
40
|
-
};
|
|
41
|
-
export declare const setCursor: (cursor: Cursor) => SetCursorAction;
|
|
42
|
-
type SetActiveNodesAction = {
|
|
43
|
-
type: "SetActiveNodes";
|
|
44
|
-
activeNodes: any;
|
|
45
|
-
};
|
|
46
|
-
export declare const setActiveNodes: (activeNodes: ActiveNodesObj) => SetActiveNodesAction;
|
|
47
|
-
type PressKeyAction = {
|
|
48
|
-
type: "PressKey";
|
|
49
|
-
key: Key;
|
|
50
|
-
initialBounds: Bound;
|
|
51
|
-
inPopover: boolean;
|
|
52
|
-
};
|
|
53
|
-
export declare const pressKey: (key: Key, initialBounds: Bound, inPopover: any) => PressKeyAction;
|
|
54
|
-
export type Action = DismissKeypadAction | ActivateKeypadAction | ConfigureKeypadAction | SetPageSizeAction | RemoveEchoAction | SetKeyHandlerAction | SetCursorAction | SetActiveNodesAction | PressKeyAction;
|
|
55
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as Redux from "redux";
|
|
2
|
-
import type { GestureState } from "./types";
|
|
3
|
-
export declare const createStore: () => Redux.Store<Redux.EmptyObject & {
|
|
4
|
-
input: import("./types").InputState;
|
|
5
|
-
keypad: import("./types").KeypadState;
|
|
6
|
-
gestures: GestureState;
|
|
7
|
-
echoes: import("./types").EchoState;
|
|
8
|
-
layout: import("./types").LayoutState;
|
|
9
|
-
}, Redux.AnyAction>;
|