@khanacademy/math-input 2.0.0 → 3.0.0

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

@@ -9,31 +9,46 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
-import {KeyType} from "../enums";
+import KeyConfigs from "../../data/key-configs";
+import Keys from "../../data/keys";
+import {KeyType} from "../../enums";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {Border, IconConfig} from "../types";
+import type {
+    Border,
+    IconConfig,
+    KeyConfig,
+    NonManyKeyConfig,
+} from "../../types";
+import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-type Props = {
-    borders: Border;
-    childKeyIds: ReadonlyArray<Keys>;
-    disabled: boolean;
-    focused: boolean;
+interface SharedProps {
+    borders?: Border;
+    disabled?: boolean;
+    style?: StyleType;
+}
+
+interface OwnProps extends SharedProps {
+    keyConfig: KeyConfig;
+}
+
+interface Props extends SharedProps {
+    childKeyIds?: ReadonlyArray<string>;
     gestureManager: GestureManager;
-    id: Keys;
+    id: Keys | "MANY";
+    focused: boolean;
     popoverEnabled: boolean;
-    style: StyleType;
-    type: KeyType;
+    childKeys?: ReadonlyArray<NonManyKeyConfig>;
+    ariaLabel?: string;
     icon: IconConfig;
-};
+    type: KeyType;
+}
 
 class TouchableKeypadButton extends React.Component<Props> {
-    shouldComponentUpdate(newProps) {
+    shouldComponentUpdate(newProps: Props) {
         // We take advantage of a few different properties of our key
         // configuration system. Namely, we know that the other props flow
         // directly from the ID, and thus don't need to be checked. If a key has
@@ -89,7 +104,6 @@ class TouchableKeypadButton extends React.Component<Props> {
                         id,
                         ReactDOM.findDOMNode(node),
                         childKeyIds,
-                        borders,
                     )
                 }
                 borders={borders}
@@ -102,18 +116,23 @@ class TouchableKeypadButton extends React.Component<Props> {
     }
 }
 
-const extractProps = (keyConfig) => {
+const extractProps = (keyConfig: NonManyKeyConfig) => {
     const {ariaLabel, icon, type} = keyConfig;
     return {ariaLabel, icon, type};
 };
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state: State, ownProps: OwnProps): Props => {
     const {gestures} = state;
 
     const {keyConfig, ...rest} = ownProps;
-    const {id, childKeyIds, type} = keyConfig;
+    const {id, type} = keyConfig;
+
+    const childKeyIds =
+        "childKeyIds" in keyConfig ? keyConfig.childKeyIds : undefined;
 
-    const childKeys = childKeyIds && childKeyIds.map((id) => KeyConfigs[id]);
+    const childKeys = childKeyIds
+        ? childKeyIds.map((id) => KeyConfigs[id])
+        : undefined;
 
     // Override with the default child props, if the key is a multi-symbol key
     // (but not a many-symbol key, which operates under different rules).
@@ -128,7 +147,7 @@ const mapStateToProps = (state, ownProps) => {
 
         // Add in some gesture state.
         focused: gestures.focus === id,
-        popoverEnabled: gestures.popover && gestures.popover.parentId === id,
+        popoverEnabled: gestures.popover?.parentId === id,
 
         // Pass down the child keys and any extracted props.
         childKeys,

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

@@ -6,19 +6,19 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {View} from "../fake-react-native-web/index";
-
+import {View} from "../../fake-react-native-web/index";
 import {
     innerBorderColor,
     innerBorderStyle,
     innerBorderWidthPx,
     offBlack16,
-} from "./common-style";
+} from "../common-style";
+import Tabbar from "../tabbar/tabbar";
+
 import Keypad from "./keypad";
 import Styles from "./styles";
-import Tabbar from "./tabbar/tabbar";
 
-import type {State} from "../store/types";
+import type {State} from "./store/types";
 
 const {column, row, fullWidth} = Styles;
 
@@ -27,7 +27,6 @@ interface ReduxProps {
 }
 
 interface Props extends ReduxProps {
-    currentPage: number;
     leftPage: React.ReactNode;
     rightPage: React.ReactNode;
 }

package/src/data/key-configs.ts

@@ -14,7 +14,10 @@ export type KeyConfig = {
     ariaLabel: string;
 };
 
-const KeyConfigs: any = {
+// I tried to make the below {[key in Keys]: KeyConfig}
+// but we are doing all kinds of sneaky magic that makes it hard to
+// type this safely. Leaving it for now as a generic index signature.
+const KeyConfigs: {[key: string]: any} = {
     // Basic math keys.
     [Keys.PLUS]: {
         type: KeyType.OPERATOR,
@@ -254,22 +257,14 @@ const KeyConfigs: any = {
         // I18N: A label for a button that will dismiss/hide a keypad.
         ariaLabel: i18n._("Dismiss"),
     },
-};
 
-// Add in any multi-function buttons. By default, these keys will mix in any
-// configuration settings from their default child key (i.e., the first key in
-// the `childKeyIds` array).
-// TODO(charlie): Make the multi-function button's long-press interaction
-// accessible.
-// NOTE(kevinb): This is only used in the mobile native app.
-KeyConfigs[Keys.FRAC_MULTI] = {
-    childKeyIds: [Keys.FRAC_INCLUSIVE, Keys.FRAC_EXCLUSIVE],
-};
+    // TODO(charlie): Use the numeral color for the 'Many' key.
+    // MANY: {
+    //     type: KeyType.MANY,
+    //     // childKeyIds will be configured by the client.
+    // },
 
-// TODO(charlie): Use the numeral color for the 'Many' key.
-KeyConfigs[Keys.MANY] = {
-    type: KeyType.MANY,
-    // childKeyIds will be configured by the client.
+    [Keys.PERIOD]: {},
 };
 
 // Add in every numeral.

package/src/data/keys.ts

@@ -59,14 +59,9 @@ enum Keys {
 
     NOOP = "NOOP", // mobile native only
 
-    // Multi-functional keys.
     // A custom key that captures an arbitrary number of symbols but has no
     // 'default' symbol or action.
-    FRAC_MULTI = "FRAC_MULTI", // mobile native only
-
-    // A custom key that captures an arbitrary number of symbols but has no
-    // 'default' symbol or action.
-    MANY = "MANY",
+    // MANY = "MANY",
 }
 
 export default Keys;

package/src/index.ts

@@ -7,7 +7,9 @@ import "../less/main.less";
 export {CursorContext} from "./components/input/cursor-contexts";
 export {default as KeypadInput} from "./components/input/math-input";
 export {keypadElementPropType} from "./components/prop-types";
-export {default as Keypad} from "./components/provided-keypad";
+export {default as LegacyKeypad} from "./components/keypad-legacy/provided-keypad";
 export {default as KeyConfigs} from "./data/key-configs";
 export {default as Keys} from "./data/keys";
 export {KeyType, KeypadType} from "./enums";
+
+export {default as Keypad} from "./components/keypad/index";

package/src/math-input.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {Keypad, KeypadInput, KeypadType} from "./index";
+import {LegacyKeypad, KeypadInput, KeypadType} from "./index";
 
 export default {
     title: "Full MathInput",
@@ -55,7 +55,7 @@ export const Basic = () => {
                 }}
             />
 
-            <Keypad
+            <LegacyKeypad
                 onElementMounted={(node) => {
                     if (node && !keypadElement) {
                         setKeypadElement(node);

package/src/types.ts

@@ -11,14 +11,14 @@ import type {CursorContext} from "./components/input/cursor-contexts";
 
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
 
-export type Bound = {
+export interface Bound {
     top: number;
     right: number;
     bottom: number;
     left: number;
     height: number;
     width: number;
-};
+}
 
 export type Popover = {
     parentId: Keys;
@@ -29,9 +29,8 @@ export type Popover = {
 export type Echo = {
     animationId: string;
     animationType: EchoAnimationType;
-    borders: Border;
     id: Keys;
-    initialBounds: DOMRect;
+    initialBounds: Bound;
 };
 
 export type IconConfig = {
@@ -39,14 +38,22 @@ export type IconConfig = {
     data: string;
 };
 
-export type KeyConfig = {
-    ariaLabel: string;
+export type NonManyKeyConfig = {
     id: Keys;
     type: KeyType;
-    childKeyIds: Array<Keys>;
     icon: IconConfig;
+    ariaLabel: string;
 };
 
+export type ManyKeyConfig = {
+    id: "MANY";
+    type: KeyType.MANY;
+    childKeyIds: ReadonlyArray<string>;
+    ariaLabel?: string;
+};
+
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
+
 export type KeypadConfiguration = {
     keypadType: KeypadType;
     extraKeys?: ReadonlyArray<Keys>;
@@ -78,4 +85,4 @@ export type ActiveNodesObj = {
     focus: string | null;
 };
 
-export type LayoutProps = {initialBounds: DOMRect; borders: Border};
+export type LayoutProps = {initialBounds: Bound};