@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.
Files changed (140) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/components/aphrodite-css-transition-group/transition-child.d.ts +11 -8
  3. package/dist/components/keypad/index.d.ts +1 -1
  4. package/dist/components/keypad/mobile-keypad-internals.d.ts +49 -0
  5. package/dist/components/keypad/mobile-keypad.d.ts +4 -48
  6. package/dist/es/index.js +168 -4740
  7. package/dist/es/index.js.map +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +166 -4722
  10. package/dist/index.js.map +1 -1
  11. package/package.json +10 -9
  12. package/src/components/__tests__/integration.test.tsx +2 -3
  13. package/src/components/keypad/__tests__/mobile-keypad.test.tsx +8 -8
  14. package/src/components/keypad/index.tsx +1 -1
  15. package/src/components/keypad/mobile-keypad-internals.tsx +240 -0
  16. package/src/components/keypad/mobile-keypad.tsx +21 -234
  17. package/src/full-mobile-input.stories.tsx +0 -1
  18. package/src/index.ts +1 -1
  19. package/tsconfig-build.tsbuildinfo +1 -1
  20. package/dist/components/keypad-legacy/compute-layout-parameters.d.ts +0 -28
  21. package/dist/components/keypad-legacy/corner-decal.d.ts +0 -12
  22. package/dist/components/keypad-legacy/echo-manager.d.ts +0 -17
  23. package/dist/components/keypad-legacy/empty-keypad-button.d.ts +0 -13
  24. package/dist/components/keypad-legacy/expression-keypad.d.ts +0 -21
  25. package/dist/components/keypad-legacy/fraction-keypad.d.ts +0 -21
  26. package/dist/components/keypad-legacy/gesture-manager.d.ts +0 -86
  27. package/dist/components/keypad-legacy/gesture-state-machine.d.ts +0 -105
  28. package/dist/components/keypad-legacy/icon.d.ts +0 -15
  29. package/dist/components/keypad-legacy/index.d.ts +0 -1
  30. package/dist/components/keypad-legacy/keypad-button.d.ts +0 -53
  31. package/dist/components/keypad-legacy/keypad-container.d.ts +0 -41
  32. package/dist/components/keypad-legacy/keypad.d.ts +0 -31
  33. package/dist/components/keypad-legacy/many-keypad-button.d.ts +0 -15
  34. package/dist/components/keypad-legacy/math-icon.d.ts +0 -16
  35. package/dist/components/keypad-legacy/multi-symbol-grid.d.ts +0 -14
  36. package/dist/components/keypad-legacy/multi-symbol-popover.d.ts +0 -12
  37. package/dist/components/keypad-legacy/navigation-pad.d.ts +0 -14
  38. package/dist/components/keypad-legacy/node-manager.d.ts +0 -49
  39. package/dist/components/keypad-legacy/popover-manager.d.ts +0 -13
  40. package/dist/components/keypad-legacy/popover-state-machine.d.ts +0 -68
  41. package/dist/components/keypad-legacy/provided-keypad.d.ts +0 -28
  42. package/dist/components/keypad-legacy/store/actions.d.ts +0 -55
  43. package/dist/components/keypad-legacy/store/echo-reducer.d.ts +0 -4
  44. package/dist/components/keypad-legacy/store/index.d.ts +0 -9
  45. package/dist/components/keypad-legacy/store/input-reducer.d.ts +0 -4
  46. package/dist/components/keypad-legacy/store/keypad-reducer.d.ts +0 -4
  47. package/dist/components/keypad-legacy/store/layout-reducer.d.ts +0 -4
  48. package/dist/components/keypad-legacy/store/shared.d.ts +0 -7
  49. package/dist/components/keypad-legacy/store/types.d.ts +0 -47
  50. package/dist/components/keypad-legacy/styles.d.ts +0 -5
  51. package/dist/components/keypad-legacy/svg-icon.d.ts +0 -12
  52. package/dist/components/keypad-legacy/text-icon.d.ts +0 -13
  53. package/dist/components/keypad-legacy/touchable-keypad-button.d.ts +0 -37
  54. package/dist/components/keypad-legacy/two-page-keypad.d.ts +0 -21
  55. package/dist/components/keypad-legacy/z-indexes.d.ts +0 -7
  56. package/dist/components/keypad-switch.d.ts +0 -12
  57. package/src/components/keypad-legacy/__tests__/gesture-state-machine.test.ts +0 -441
  58. package/src/components/keypad-legacy/__tests__/node-manager.test.ts +0 -89
  59. package/src/components/keypad-legacy/__tests__/two-page-keypad.test.tsx +0 -38
  60. package/src/components/keypad-legacy/compute-layout-parameters.ts +0 -205
  61. package/src/components/keypad-legacy/corner-decal.tsx +0 -56
  62. package/src/components/keypad-legacy/echo-manager.tsx +0 -152
  63. package/src/components/keypad-legacy/empty-keypad-button.tsx +0 -58
  64. package/src/components/keypad-legacy/expression-keypad.tsx +0 -315
  65. package/src/components/keypad-legacy/fraction-keypad.tsx +0 -180
  66. package/src/components/keypad-legacy/gesture-manager.ts +0 -255
  67. package/src/components/keypad-legacy/gesture-state-machine.ts +0 -329
  68. package/src/components/keypad-legacy/icon.tsx +0 -72
  69. package/src/components/keypad-legacy/iconography/arrow.js +0 -22
  70. package/src/components/keypad-legacy/iconography/backspace.js +0 -29
  71. package/src/components/keypad-legacy/iconography/cdot.js +0 -29
  72. package/src/components/keypad-legacy/iconography/cos.js +0 -30
  73. package/src/components/keypad-legacy/iconography/cube-root.js +0 -36
  74. package/src/components/keypad-legacy/iconography/dismiss.js +0 -25
  75. package/src/components/keypad-legacy/iconography/divide.js +0 -34
  76. package/src/components/keypad-legacy/iconography/down.js +0 -16
  77. package/src/components/keypad-legacy/iconography/equal.js +0 -33
  78. package/src/components/keypad-legacy/iconography/exp-2.js +0 -29
  79. package/src/components/keypad-legacy/iconography/exp-3.js +0 -29
  80. package/src/components/keypad-legacy/iconography/exp.js +0 -29
  81. package/src/components/keypad-legacy/iconography/frac.js +0 -44
  82. package/src/components/keypad-legacy/iconography/geq.js +0 -33
  83. package/src/components/keypad-legacy/iconography/gt.js +0 -33
  84. package/src/components/keypad-legacy/iconography/index.js +0 -45
  85. package/src/components/keypad-legacy/iconography/jump-into-numerator.js +0 -41
  86. package/src/components/keypad-legacy/iconography/jump-out-base.js +0 -30
  87. package/src/components/keypad-legacy/iconography/jump-out-denominator.js +0 -41
  88. package/src/components/keypad-legacy/iconography/jump-out-exponent.js +0 -30
  89. package/src/components/keypad-legacy/iconography/jump-out-numerator.js +0 -41
  90. package/src/components/keypad-legacy/iconography/jump-out-parentheses.js +0 -33
  91. package/src/components/keypad-legacy/iconography/left-paren.js +0 -33
  92. package/src/components/keypad-legacy/iconography/left.js +0 -16
  93. package/src/components/keypad-legacy/iconography/leq.js +0 -33
  94. package/src/components/keypad-legacy/iconography/ln.js +0 -29
  95. package/src/components/keypad-legacy/iconography/log-n.js +0 -29
  96. package/src/components/keypad-legacy/iconography/log.js +0 -29
  97. package/src/components/keypad-legacy/iconography/lt.js +0 -33
  98. package/src/components/keypad-legacy/iconography/minus.js +0 -32
  99. package/src/components/keypad-legacy/iconography/neq.js +0 -33
  100. package/src/components/keypad-legacy/iconography/parens.js +0 -33
  101. package/src/components/keypad-legacy/iconography/percent.js +0 -49
  102. package/src/components/keypad-legacy/iconography/period.js +0 -26
  103. package/src/components/keypad-legacy/iconography/plus.js +0 -32
  104. package/src/components/keypad-legacy/iconography/radical.js +0 -36
  105. package/src/components/keypad-legacy/iconography/right-paren.js +0 -33
  106. package/src/components/keypad-legacy/iconography/right.js +0 -16
  107. package/src/components/keypad-legacy/iconography/sin.js +0 -30
  108. package/src/components/keypad-legacy/iconography/sqrt.js +0 -32
  109. package/src/components/keypad-legacy/iconography/tan.js +0 -30
  110. package/src/components/keypad-legacy/iconography/times.js +0 -33
  111. package/src/components/keypad-legacy/iconography/up.js +0 -16
  112. package/src/components/keypad-legacy/index.ts +0 -1
  113. package/src/components/keypad-legacy/keypad-button.tsx +0 -368
  114. package/src/components/keypad-legacy/keypad-container.tsx +0 -358
  115. package/src/components/keypad-legacy/keypad.tsx +0 -162
  116. package/src/components/keypad-legacy/many-keypad-button.tsx +0 -54
  117. package/src/components/keypad-legacy/math-icon.tsx +0 -66
  118. package/src/components/keypad-legacy/multi-symbol-grid.tsx +0 -182
  119. package/src/components/keypad-legacy/multi-symbol-popover.tsx +0 -58
  120. package/src/components/keypad-legacy/navigation-pad.tsx +0 -140
  121. package/src/components/keypad-legacy/node-manager.ts +0 -133
  122. package/src/components/keypad-legacy/popover-manager.tsx +0 -73
  123. package/src/components/keypad-legacy/popover-state-machine.ts +0 -184
  124. package/src/components/keypad-legacy/provided-keypad.tsx +0 -136
  125. package/src/components/keypad-legacy/store/actions.ts +0 -155
  126. package/src/components/keypad-legacy/store/echo-reducer.ts +0 -57
  127. package/src/components/keypad-legacy/store/index.ts +0 -110
  128. package/src/components/keypad-legacy/store/input-reducer.ts +0 -55
  129. package/src/components/keypad-legacy/store/keypad-reducer.ts +0 -58
  130. package/src/components/keypad-legacy/store/layout-reducer.test.ts +0 -171
  131. package/src/components/keypad-legacy/store/layout-reducer.ts +0 -129
  132. package/src/components/keypad-legacy/store/shared.ts +0 -12
  133. package/src/components/keypad-legacy/store/types.ts +0 -78
  134. package/src/components/keypad-legacy/styles.ts +0 -38
  135. package/src/components/keypad-legacy/svg-icon.tsx +0 -24
  136. package/src/components/keypad-legacy/text-icon.tsx +0 -53
  137. package/src/components/keypad-legacy/touchable-keypad-button.tsx +0 -163
  138. package/src/components/keypad-legacy/two-page-keypad.tsx +0 -115
  139. package/src/components/keypad-legacy/z-indexes.ts +0 -8
  140. 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,4 +0,0 @@
1
- import type { Action } from "./actions";
2
- import type { EchoState } from "./types";
3
- declare const echoReducer: (state: EchoState | undefined, action: Action) => EchoState;
4
- export default echoReducer;
@@ -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>;
@@ -1,4 +0,0 @@
1
- import type { Action } from "./actions";
2
- import type { InputState } from "./types";
3
- declare const inputReducer: (state: InputState | undefined, action: Action) => InputState;
4
- export default inputReducer;
@@ -1,4 +0,0 @@
1
- import type { Action } from "./actions";
2
- import type { KeypadState } from "./types";
3
- declare const keypadReducer: (state: KeypadState | undefined, action: Action) => KeypadState;
4
- export default keypadReducer;
@@ -1,4 +0,0 @@
1
- import type { Action } from "./actions";
2
- import type { LayoutState } from "./types";
3
- declare const layoutReducer: (state: LayoutState | undefined, action: Action) => LayoutState;
4
- export default layoutReducer;