@khanacademy/math-input 16.1.0 → 16.1.1

package/dist/types.d.ts

@@ -1,31 +1,10 @@
 import type { CursorContext } from "./components/input/cursor-contexts";
 import type Key from "./data/keys";
-import type { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
+import type { KeyType, KeypadType } from "./enums";
 import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type * as React from "react";
 import type ReactDOM from "react-dom";
-export type Border = Partial<ReadonlyArray<BorderDirection>>;
-export interface Bound {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    height: number;
-    width: number;
-}
-export type Popover = {
-    parentId: Key;
-    bounds: Partial<Bound>;
-    childKeyIds: Array<Key>;
-};
-export type Echo = {
-    animationId: string;
-    animationType: EchoAnimationType;
-    id: Key;
-    initialBounds: Bound;
-};
 export type IconConfig = {
-    type: IconType;
     data: string;
 };
 export type NonManyKeyConfig = {
@@ -48,23 +27,6 @@ export type KeyHandler = (key: Key) => Cursor;
 export type Cursor = {
     context: typeof CursorContext[keyof typeof CursorContext];
 };
-export type KeypadLayout = {
-    rows: number;
-    columns: number;
-    numPages: number;
-    maxVisibleRows: number;
-};
-type ActiveNodesObjPopover = {
-    parentId: string;
-    childIds: ReadonlyArray<string>;
-};
-export type ActiveNodesObj = {
-    popover: ActiveNodesObjPopover | null;
-    focus: string | null;
-};
-export type LayoutProps = {
-    initialBounds: Bound;
-};
 export type ClickKeyCallback = (key: Key, event?: React.SyntheticEvent) => void;
 export type KeypadPageType = "Geometry" | "Operators" | "Numbers" | "Fractions" | "Extras" | "Dismiss";
 export interface KeypadAPI {
@@ -85,4 +47,3 @@ export type KeypadContextType = {
     setScrollableElement: (scrollableElement?: HTMLElement | null | undefined) => void;
     scrollableElement: HTMLElement | null | undefined;
 };
-export {};

package/less/main.less

@@ -1,5 +1,2 @@
-@import "./echo.less";
 @import "./overrides.less";
-@import "./popover.less";
 @import (inline) "../../../node_modules/mathquill/build/mathquill.css";
-@import "./tabbar.less";

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.1.0",
+    "version": "16.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -40,11 +40,9 @@
         "prop-types": "15.6.1",
         "react": "^16.8.0",
         "react-dom": "^16.8.0",
-        "react-redux": "^7.2.6",
         "react-router": "^5.2.1",
         "react-router-dom": "^5.3.0",
-        "react-transition-group": "^4.4.1",
-        "redux": "^4.0.0"
+        "react-transition-group": "^4.4.1"
     },
     "peerDependencies": {
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
@@ -61,11 +59,9 @@
         "prop-types": "15.6.1",
         "react": "^16.8.0",
         "react-dom": "^16.8.0",
-        "react-redux": "^7.2.6",
         "react-router": "^5.2.1",
         "react-router-dom": "^5.3.0",
-        "react-transition-group": "^4.4.1",
-        "redux": "^4.0.0"
+        "react-transition-group": "^4.4.1"
     },
     "keywords": []
 }

package/src/components/input/cursor-handle.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 import {
     cursorHandleRadiusPx,
     cursorHandleDistanceMultiplier,
-} from "../common-style";
+} from "./cursor-styles";
 
 const touchTargetRadiusPx = 2 * cursorHandleRadiusPx;
 const touchTargetHeightPx = 2 * touchTargetRadiusPx;

package/src/components/input/cursor-styles.ts

@@ -0,0 +1,10 @@
+/**
+ * Common parameters used to style components.
+ */
+export const cursorHandleRadiusPx = 11;
+
+// The amount to multiply the radius by to get the distance from the
+// center to the tip of the cursor handle.  The cursor is a circle with
+// one quadrant replace with a square.  The hypotenuse of the square is
+// 1.045 times the radius of the circle.
+export const cursorHandleDistanceMultiplier = 1.045;

package/src/components/input/math-input.tsx

@@ -7,14 +7,12 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 
 import {View} from "../../fake-react-native-web/index";
+
+import CursorHandle from "./cursor-handle";
 import {
     cursorHandleRadiusPx,
     cursorHandleDistanceMultiplier,
-    wonderBlocksBlue,
-    offBlack,
-} from "../common-style";
-
-import CursorHandle from "./cursor-handle";
+} from "./cursor-styles";
 import DragListener from "./drag-listener";
 import MathWrapper from "./math-wrapper";
 import {scrollIntoView} from "./scroll-into-view";
@@ -876,7 +874,7 @@ class MathInput extends React.Component<Props, State> {
             borderWidth: this.getBorderWidthPx(),
             ...(focused
                 ? {
-                      borderColor: wonderBlocksBlue,
+                      borderColor: Color.blue,
                   }
                 : {}),
             ...style,
@@ -982,7 +980,7 @@ const inlineStyles = {
         borderStyle: "solid",
         borderColor: Color.offBlack50,
         borderRadius: 4,
-        color: offBlack,
+        color: Color.offBlack,
     },
 } as const;
 

package/src/components/input/scroll-into-view.ts

@@ -9,7 +9,10 @@
  * level in the component tree--perhaps even into webapp, beyond Perseus.
  */
 
-import {toolbarHeightPx} from "../common-style";
+// HACK(charlie): This should be injected by webapp somehow.
+// TODO(charlie): Add a link to the webapp location as soon as the footer
+// has settled down.
+export const toolbarHeightPx = 60;
 
 export const scrollIntoView = (containerNode, keypadNode) => {
     // TODO(charlie): There's no need for us to be reading the keypad bounds

package/src/data/key-configs.ts

@@ -3,8 +3,6 @@
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
-import {IconType} from "../enums";
-
 import type Key from "./keys";
 import type {KeyType} from "../enums";
 import type {KeyConfig} from "../types";
@@ -12,7 +10,6 @@ import type {KeyConfig} from "../types";
 type KeyConfigMapper = (args: {
     key: Key;
     keyType?: KeyType;
-    iconType?: IconType;
     ariaLabel?: string;
     data?: string;
 }) => KeyConfig;
@@ -20,7 +17,6 @@ type KeyConfigMapper = (args: {
 const getDefaultOperatorFields: KeyConfigMapper = ({
     key,
     keyType = "OPERATOR",
-    iconType = IconType.SVG,
     ariaLabel = key,
     data = key,
 }) => ({
@@ -28,7 +24,6 @@ const getDefaultOperatorFields: KeyConfigMapper = ({
     type: keyType,
     ariaLabel,
     icon: {
-        type: iconType,
         data,
     },
 });
@@ -36,7 +31,6 @@ const getDefaultOperatorFields: KeyConfigMapper = ({
 const getDefaultValueFields: KeyConfigMapper = ({
     key,
     keyType = "VALUE",
-    iconType = IconType.MATH,
     ariaLabel = key,
     data = key,
 }) => ({
@@ -44,7 +38,6 @@ const getDefaultValueFields: KeyConfigMapper = ({
     type: keyType,
     ariaLabel,
     icon: {
-        type: iconType,
         data,
     },
 });
@@ -53,14 +46,12 @@ const getDefaultNumberFields: KeyConfigMapper = ({
     key,
     data = key.replace("NUM_", ""),
     keyType = "VALUE",
-    iconType = IconType.TEXT,
     ariaLabel = data,
 }) => ({
     id: key,
     type: keyType,
     ariaLabel,
     icon: {
-        type: iconType,
         data,
     },
 });

package/src/enums.ts

@@ -23,48 +23,5 @@ export const KeyTypes = [
     // For buttons that house multiple buttons and have no action
     // themselves.
     "MANY",
-    // For the echo animation that appears on press.
-    "ECHO",
 ];
 export type KeyType = typeof KeyTypes[number];
-
-export enum DeviceOrientation {
-    LANDSCAPE = "LANDSCAPE",
-    PORTRAIT = "PORTRAIT",
-}
-
-export enum DeviceType {
-    PHONE = "PHONE",
-    TABLET = "TABLET",
-}
-
-export enum LayoutMode {
-    FULLSCREEN = "FULLSCREEN",
-    COMPACT = "COMPACT",
-}
-
-export enum BorderDirection {
-    LEFT = "LEFT",
-    BOTTOM = "BOTTOM",
-}
-
-export const BorderStyles: {
-    [style: string]: ReadonlyArray<BorderDirection>;
-} = {
-    LEFT: [BorderDirection.LEFT],
-    BOTTOM: [BorderDirection.BOTTOM],
-    ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
-    NONE: [],
-};
-
-export enum IconType {
-    MATH = "MATH",
-    SVG = "SVG",
-    TEXT = "TEXT",
-}
-
-export enum EchoAnimationType {
-    SLIDE_AND_FADE = "SLIDE_AND_FADE",
-    FADE_ONLY = "FADE_ONLY",
-    LONG_FADE_ONLY = "LONG_FADE_ONLY",
-}

package/src/types.ts

@@ -1,42 +1,11 @@
 import type {CursorContext} from "./components/input/cursor-contexts";
 import type Key from "./data/keys";
-import type {
-    BorderDirection,
-    EchoAnimationType,
-    IconType,
-    KeyType,
-    KeypadType,
-} from "./enums";
+import type {KeyType, KeypadType} from "./enums";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type * as React from "react";
 import type ReactDOM from "react-dom";
 
-export type Border = Partial<ReadonlyArray<BorderDirection>>;
-
-export interface Bound {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    height: number;
-    width: number;
-}
-
-export type Popover = {
-    parentId: Key;
-    bounds: Partial<Bound>;
-    childKeyIds: Array<Key>;
-};
-
-export type Echo = {
-    animationId: string;
-    animationType: EchoAnimationType;
-    id: Key;
-    initialBounds: Bound;
-};
-
 export type IconConfig = {
-    type: IconType;
     data: string;
 };
 
@@ -66,28 +35,6 @@ export type Cursor = {
     context: typeof CursorContext[keyof typeof CursorContext];
 };
 
-export type KeypadLayout = {
-    rows: number;
-    columns: number;
-    numPages: number;
-    // Since we include a two-key popover in the top-right, when the popover
-    // is visible, the keypad will expand to fill the equivalent of five
-    // rows vertically.
-    maxVisibleRows: number;
-};
-
-type ActiveNodesObjPopover = {
-    parentId: string;
-    childIds: ReadonlyArray<string>;
-};
-
-export type ActiveNodesObj = {
-    popover: ActiveNodesObjPopover | null;
-    focus: string | null;
-};
-
-export type LayoutProps = {initialBounds: Bound};
-
 export type ClickKeyCallback = (key: Key, event?: React.SyntheticEvent) => void;
 
 export type KeypadPageType =