@khanacademy/math-input 2.0.0 → 4.0.0

package/src/components/keypad/{pre-algebra-page.tsx → operators-page/index.tsx}

@@ -1,39 +1,31 @@
 import * as React from "react";
 
-import Keys from "../../data/key-configs";
-
+import Keys from "../../../data/key-configs";
 import {
     KeypadPageContainer,
     SecondaryKeypadButton,
     KeypadActionButton,
-    PlaceHolderButton,
-} from "./keypad-page-items";
+} from "../keypad-page-items";
+
+import {AdvancedRelations} from "./advanced-relations-buttons";
+import {BasicRelations} from "./basic-relations-buttons";
+import {Logarithms} from "./logarithms-buttons";
+import {PreAlgebra} from "./pre-algebra-buttons";
+import {OperatorsButtonSets} from "./types";
 
 type Props = {
     onClickKey: (keyConfig: string) => void;
-};
+} & OperatorsButtonSets;
 
-export default class PreAlgebraPage extends React.Component<Props> {
+export default class OperatorsPage extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
             <KeypadPageContainer>
                 {/* Row 1 */}
-                <SecondaryKeypadButton
-                    keyConfig={Keys.EXP_2}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.EXP}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.SQRT}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.RADICAL}
+                <PreAlgebra
                     onClickKey={onClickKey}
+                    placeholder={!this.props.preAlgebra}
                 />
 
                 <SecondaryKeypadButton
@@ -45,11 +37,12 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     onClickKey={onClickKey}
                 />
                 {/* Row 2 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                <Logarithms
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.logarithms}
+                />
                 <SecondaryKeypadButton
-                    keyConfig={Keys.X}
+                    keyConfig={Keys.x}
                     onClickKey={onClickKey}
                     style={{
                         gridColumn: 5,
@@ -63,9 +56,11 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     }}
                 />
                 {/* Row 3 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                {/* TODO: implement relatons buttons */}
+                <BasicRelations
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.basicRelations}
+                />
                 <SecondaryKeypadButton
                     keyConfig={Keys.PI}
                     onClickKey={onClickKey}
@@ -81,9 +76,10 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     onClickKey={onClickKey}
                 />
                 {/* Row 4 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                <AdvancedRelations
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.advancedRelations}
+                />
                 <KeypadActionButton
                     keyConfig={Keys.DISMISS}
                     style={{

package/src/components/keypad/operators-page/logarithms-buttons.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Keys from "../../../data/key-configs";
+import {PlaceHolderButtons, SecondaryKeypadButton} from "../keypad-page-items";
+
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+
+export const Logarithms = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={3} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.LOG}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LOG_N}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LN}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );

package/src/components/keypad/operators-page/pre-algebra-buttons.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import Keys from "../../../data/key-configs";
+import {PlaceHolderButtons, SecondaryKeypadButton} from "../keypad-page-items";
+
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+
+export const PreAlgebra = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={4} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.EXP_2}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.EXP}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.SQRT}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.RADICAL}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );

package/src/components/keypad/operators-page/types.ts

@@ -0,0 +1,6 @@
+export type OperatorsButtonSets = {
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+};

package/src/components/{__tests__ → keypad-legacy/__tests__}/two-page-keypad.test.tsx

@@ -8,7 +8,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                currentPage={1}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
             />,
@@ -23,7 +22,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                currentPage={0}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
             />,

package/src/components/{compute-layout-parameters.ts → keypad-legacy/compute-layout-parameters.ts}

@@ -19,14 +19,13 @@
  * might need to be.
  */
 
-import {DeviceType, DeviceOrientation, LayoutMode} from "../enums";
-
+import {DeviceType, DeviceOrientation, LayoutMode} from "../../enums";
 import {
     pageIndicatorHeightPx,
     toolbarHeightPx,
     navigationPadWidthPx,
     innerBorderWidthPx,
-} from "./common-style";
+} from "../common-style";
 
 const minButtonHeight = 48;
 const maxButtonSize = 64;

package/src/components/{corner-decal.tsx → keypad-legacy/corner-decal.tsx}

@@ -5,9 +5,8 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {View} from "../fake-react-native-web/index";
-
-import {offBlack} from "./common-style";
+import {View} from "../../fake-react-native-web/index";
+import {offBlack} from "../common-style";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 

package/src/components/{echo-manager.tsx → keypad-legacy/echo-manager.tsx}

@@ -5,19 +5,18 @@
 import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
-import {KeyType, EchoAnimationType} from "../enums";
+import KeyConfigs from "../../data/key-configs";
+import Key from "../../data/keys";
+import {EchoAnimationType} from "../../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
 
-import type {Border, Bound} from "../types";
+import type {Bound, Echo as EchoType} from "../../types";
 
 type EchoProps = {
     animationDurationMs: number;
-    borders: Border;
-    id: Keys;
+    id: Key;
     initialBounds: Bound;
     onAnimationFinish: () => void;
 };
@@ -34,7 +33,7 @@ class Echo extends React.Component<EchoProps> {
     }
 
     render() {
-        const {borders, id, initialBounds} = this.props;
+        const {id, initialBounds} = this.props;
         const {icon} = KeyConfigs[id];
 
         const containerStyle: any = {
@@ -51,26 +50,14 @@ class Echo extends React.Component<EchoProps> {
         // applied via StyleSheet, will override our inlines.
         return (
             <div style={containerStyle}>
-                <KeypadButton
-                    icon={icon}
-                    type={KeyType.ECHO}
-                    borders={borders}
-                />
+                <KeypadButton icon={icon} type={"ECHO"} />
             </div>
         );
     }
 }
 
-type EchoPropType = {
-    animationId: string;
-    animationType: EchoAnimationType;
-    borders: Border;
-    id: Keys;
-    initialBounds: Bound;
-};
-
 type EchoManagerProps = {
-    echoes: ReadonlyArray<EchoPropType>;
+    echoes: ReadonlyArray<EchoType>;
     onAnimationFinish?: (animationId: string) => void;
 };
 

package/src/components/{empty-keypad-button.tsx → keypad-legacy/empty-keypad-button.tsx}

@@ -5,12 +5,12 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
+import KeyConfigs from "../../data/key-configs";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {State} from "../store/types";
+import type {State} from "./store/types";
 
 interface ReduxProps {
     gestureManager: GestureManager;
@@ -27,14 +27,16 @@ class EmptyKeypadButton extends React.Component<ReduxProps> {
         // to focus them or trigger presses.
         return (
             <KeypadButton
-                onTouchStart={(evt: TouchEvent) =>
+                onTouchStart={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchStart(evt)
                 }
-                onTouchEnd={(evt: TouchEvent) => gestureManager.onTouchEnd(evt)}
-                onTouchMove={(evt: TouchEvent) =>
+                onTouchEnd={(evt: React.TouchEvent<HTMLDivElement>) =>
+                    gestureManager.onTouchEnd(evt)
+                }
+                onTouchMove={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchMove(evt)
                 }
-                onTouchCancel={(evt: TouchEvent) =>
+                onTouchCancel={(evt: React.TouchEvent<HTMLDivElement>) =>
                     gestureManager.onTouchCancel(evt)
                 }
                 {...KeyConfigs.NOOP}

package/src/components/{expression-keypad.tsx → keypad-legacy/expression-keypad.tsx}

@@ -6,25 +6,24 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import {BorderStyles} from "../enums";
-import {View} from "../fake-react-native-web/index";
+import KeyConfigs from "../../data/key-configs";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {valueGrey, controlGrey} from "../common-style";
+import {CursorContext} from "../input/cursor-contexts";
 
-import {valueGrey, controlGrey} from "./common-style";
-import {CursorContext} from "./input/cursor-contexts";
 import ManyKeypadButton from "./many-keypad-button";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 import TwoPageKeypad from "./two-page-keypad";
 
-import type {State} from "../store/types";
-import type {KeypadLayout} from "../types";
+import type {KeypadLayout} from "../../types";
+import type {State} from "./store/types";
 
 const {row, column, oneColumn, fullWidth, roundedTopLeft, roundedTopRight} =
     Styles;
 
 interface ReduxProps {
-    currentPage: number;
     cursorContext?: CursorContext;
     dynamicJumpOut: boolean;
 }
@@ -48,7 +47,6 @@ export const expressionKeypadLayout: KeypadLayout = {
 class ExpressionKeypad extends React.Component<Props> {
     render() {
         const {
-            currentPage,
             cursorContext,
             dynamicJumpOut,
             extraKeys,
@@ -286,13 +284,7 @@ class ExpressionKeypad extends React.Component<Props> {
             </View>
         );
 
-        return (
-            <TwoPageKeypad
-                currentPage={currentPage}
-                rightPage={rightPage}
-                leftPage={leftPage}
-            />
-        );
+        return <TwoPageKeypad rightPage={rightPage} leftPage={leftPage} />;
     }
 }
 
@@ -313,7 +305,6 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: State): ReduxProps => {
     return {
-        currentPage: state.pager.currentPage,
         cursorContext: state.input.cursor?.context,
         dynamicJumpOut: !state.layout.navigationPadEnabled,
     };

package/src/components/{fraction-keypad.tsx → keypad-legacy/fraction-keypad.tsx}

@@ -6,17 +6,17 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import {BorderStyles} from "../enums";
-import {View} from "../fake-react-native-web/index";
+import KeyConfigs from "../../data/key-configs";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {CursorContext} from "../input/cursor-contexts";
 
-import {CursorContext} from "./input/cursor-contexts";
 import Keypad from "./keypad";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
-import type {State} from "../store/types";
-import type {KeypadLayout} from "../types";
+import type {KeypadLayout} from "../../types";
+import type {State} from "./store/types";
 
 const {row, roundedTopLeft, roundedTopRight} = Styles;
 

package/src/components/{gesture-manager.ts → keypad-legacy/gesture-manager.ts}

@@ -3,6 +3,10 @@
  * connects our various bits of logic for managing gestures and interactions,
  * and links them together.
  */
+import * as React from "react";
+
+import Key from "../../data/keys";
+import {ActiveNodesObj, LayoutProps} from "../../types";
 
 import GestureStateMachine from "./gesture-state-machine";
 import NodeManager from "./node-manager";
@@ -12,6 +16,17 @@ const coordsForEvent = (evt) => {
     return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };
 
+type Options = {
+    swipeEnabled: boolean;
+};
+
+type Handlers = {
+    onSwipeChange?: (dx: number) => void;
+    onSwipeEnd?: (dx: number) => void;
+    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
+    onClick: (key: Key, layoutProps: LayoutProps, inPopover: boolean) => void;
+};
+
 class GestureManager {
     swipeEnabled: boolean;
     trackEvents: boolean;
@@ -19,7 +34,12 @@ class GestureManager {
     popoverStateMachine: PopoverStateMachine;
     gestureStateMachine: GestureStateMachine;
 
-    constructor(options, handlers, disabledSwipeKeys, multiPressableKeys) {
+    constructor(
+        options: Options,
+        handlers: Handlers,
+        disabledSwipeKeys: ReadonlyArray<Key>,
+        multiPressableKeys: ReadonlyArray<Key>,
+    ) {
         const {swipeEnabled} = options;
 
         this.swipeEnabled = swipeEnabled;
@@ -96,11 +116,14 @@ class GestureManager {
      * Handle a touch-start event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      * @param {string} id - the identifier of the DOM node in which the touch
      *                      occurred
      */
-    onTouchStart(evt: TouchEvent, id?) {
+    onTouchStart(
+        evt: React.TouchEvent<HTMLDivElement>,
+        id?: string | undefined,
+    ) {
         if (!this.trackEvents) {
             return;
         }
@@ -128,9 +151,9 @@ class GestureManager {
      * Handle a touch-move event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchMove(evt: TouchEvent) {
+    onTouchMove(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }
@@ -152,9 +175,9 @@ class GestureManager {
      * Handle a touch-end event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchEnd(evt: TouchEvent) {
+    onTouchEnd(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }
@@ -173,9 +196,9 @@ class GestureManager {
      * Handle a touch-cancel event that originated in a node registered with the
      * gesture system.
      *
-     * @param {TouchEvent} evt - the raw touch event from the browser
+     * @param {React.TouchEvent<HTMLDivElement>} evt - the raw touch event from the browser
      */
-    onTouchCancel(evt: TouchEvent) {
+    onTouchCancel(evt: React.TouchEvent<HTMLDivElement>) {
         if (!this.trackEvents) {
             return;
         }
@@ -198,8 +221,8 @@ class GestureManager {
      *                              intercepting touch events
      * @param {object} borders - an opaque object describing the node's borders
      */
-    registerDOMNode(id, domNode, childIds, borders) {
-        this.nodeManager.registerDOMNode(id, domNode, childIds, borders);
+    registerDOMNode(id, domNode, childIds) {
+        this.nodeManager.registerDOMNode(id, domNode, childIds);
         this.popoverStateMachine.registerPopover(id, childIds);
     }
 

package/src/components/{gesture-state-machine.ts → keypad-legacy/gesture-state-machine.ts}

@@ -1,4 +1,4 @@
-import Keys from "../data/keys";
+import Key from "../../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state
@@ -14,8 +14,8 @@ export type Handlers = {
     onBlur: () => void;
     onTrigger: (id: string) => void;
     onLongPress: (id: string) => void;
-    onSwipeChange: (x: number) => void;
-    onSwipeEnd: (x: number) => void;
+    onSwipeChange?: (x: number) => void;
+    onSwipeEnd?: (x: number) => void;
     onTouchEnd: (id: string) => void;
 };
 
@@ -26,17 +26,17 @@ type Options = {
 };
 
 type TouchState = {
-    activeNodeId: Keys;
+    activeNodeId: Key;
     pressAndHoldIntervalId: number | null;
     longPressTimeoutId: number | null;
     swipeLocked: boolean;
     startX: number;
 };
 
-type TouchStateMap = Record<Keys, TouchState>;
+type TouchStateMap = Record<Key, TouchState>;
 
 type SwipeState = {
-    touchId: Keys;
+    touchId: Key;
     startX: number;
 };
 
@@ -49,16 +49,16 @@ const defaultOptions: Options = {
 class GestureStateMachine {
     handlers: Handlers;
     options: Options;
-    swipeDisabledNodeIds: Partial<[Keys]>;
-    multiPressableKeys: Partial<[Keys]>;
+    swipeDisabledNodeIds: ReadonlyArray<Key>;
+    multiPressableKeys: ReadonlyArray<Key>;
     touchState: Partial<TouchStateMap>;
     swipeState: SwipeState | null;
 
     constructor(
         handlers: Handlers,
         options: Partial<Options>,
-        swipeDisabledNodeIds?: [Keys],
-        multiPressableKeys?: [Keys],
+        swipeDisabledNodeIds?: ReadonlyArray<Key>,
+        multiPressableKeys?: ReadonlyArray<Key>,
     ) {
         this.handlers = handlers;
         this.options = {
@@ -234,7 +234,7 @@ class GestureStateMachine {
             // Only respect the finger that started a swipe. Any other lingering
             // gestures are ignored.
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+                this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
             }
         } else if (this.touchState[touchId]) {
             // It could be touch events started outside the keypad and
@@ -256,7 +256,7 @@ class GestureStateMachine {
                     touchId,
                     startX,
                 };
-                this.handlers.onSwipeChange(pageX - this.swipeState.startX);
+                this.handlers.onSwipeChange?.(pageX - this.swipeState.startX);
             } else {
                 const id = getId();
                 if (id !== activeNodeId) {
@@ -279,7 +279,7 @@ class GestureStateMachine {
             // Only respect the finger that started a swipe. Any other lingering
             // gestures are ignored.
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeEnd(pageX - this.swipeState.startX);
+                this.handlers.onSwipeEnd?.(pageX - this.swipeState.startX);
                 this.swipeState = null;
             }
         } else if (this.touchState[touchId]) {
@@ -313,7 +313,7 @@ class GestureStateMachine {
         // displacement.
         if (this.swipeState) {
             if (this.swipeState.touchId === touchId) {
-                this.handlers.onSwipeEnd(0);
+                this.handlers.onSwipeEnd?.(0);
                 this.swipeState = null;
             }
         } else if (this.touchState[touchId]) {

package/src/components/{icon.tsx → keypad-legacy/icon.tsx}

@@ -5,14 +5,14 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {IconType} from "../enums";
+import {IconType} from "../../enums";
+import {offBlack} from "../common-style";
 
-import {offBlack} from "./common-style";
 import MathIcon from "./math-icon";
 import SvgIcon from "./svg-icon";
 import TextIcon from "./text-icon";
 
-import type {IconConfig} from "../types";
+import type {IconConfig} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const focusedColor = "#FFF";