@khanacademy/math-input 0.7.2 → 1.0.1

package/src/store/layout-reducer.ts

@@ -0,0 +1,134 @@
+import {tabletCutoffPx} from "../components/common-style";
+import {computeLayoutParameters} from "../components/compute-layout-parameters";
+import {DeviceOrientations, DeviceTypes, LayoutModes} from "../consts";
+
+import {defaultKeypadType, keypadForType} from "./shared";
+
+import type {Action} from "./actions";
+import type {LayoutState} from "./types";
+
+const initialLayoutState = {
+    gridDimensions: {
+        numRows: keypadForType[defaultKeypadType].rows,
+        numColumns: keypadForType[defaultKeypadType].columns,
+        numMaxVisibleRows: keypadForType[defaultKeypadType].maxVisibleRows,
+        numPages: keypadForType[defaultKeypadType].numPages,
+    },
+    buttonDimensions: {
+        widthPx: 48,
+        heightPx: 48,
+    },
+    pageDimensions: {
+        pageWidthPx: 0,
+        pageHeightPx: 0,
+    },
+    layoutMode: LayoutModes.FULLSCREEN,
+    paginationEnabled: false,
+    navigationPadEnabled: false,
+} as const;
+
+/**
+ * Compute the additional layout state based on the provided page and grid
+ * dimensions.
+ */
+const layoutParametersForDimensions = (
+    pageDimensions:
+        | {
+              pageHeightPx: never;
+              pageWidthPx: never;
+          }
+        | {
+              pageHeightPx: number;
+              pageWidthPx: number;
+          },
+    gridDimensions,
+) => {
+    const {pageWidthPx, pageHeightPx} = pageDimensions;
+
+    // Determine the device type and orientation.
+    const deviceOrientation =
+        pageWidthPx > pageHeightPx
+            ? DeviceOrientations.LANDSCAPE
+            : DeviceOrientations.PORTRAIT;
+    const deviceType =
+        Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx
+            ? DeviceTypes.TABLET
+            : DeviceTypes.PHONE;
+
+    // Using that information, make some decisions (or assumptions)
+    // about the resulting layout.
+    const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
+    const paginationEnabled =
+        deviceType === DeviceTypes.PHONE &&
+        deviceOrientation === DeviceOrientations.PORTRAIT;
+
+    const deviceInfo = {deviceOrientation, deviceType} as const;
+    const layoutOptions = {
+        navigationPadEnabled,
+        paginationEnabled,
+        // HACK(charlie): It's not great that we're making assumptions about
+        // the toolbar (which is rendered by webapp, and should always be
+        // visible and anchored to the bottom of the page for phone and
+        // tablet exercises). But this is primarily a heuristic (the goal is
+        // to preserve a 'good' amount of space between the top of the
+        // keypad and the top of the page) so we afford to have some margin
+        // of error.
+        toolbarEnabled: true,
+    } as const;
+
+    return {
+        ...computeLayoutParameters(
+            gridDimensions,
+            pageDimensions,
+            deviceInfo,
+            layoutOptions,
+        ),
+        // Pass along some of the layout information, so that other
+        // components in the heirarchy can adapt appropriately.
+        navigationPadEnabled,
+        paginationEnabled,
+    };
+};
+
+const layoutReducer = function (
+    state: LayoutState = initialLayoutState,
+    action: Action,
+): LayoutState {
+    switch (action.type) {
+        case "ConfigureKeypad":
+            const {keypadType} = action.configuration;
+            const gridDimensions = {
+                numRows: keypadForType[keypadType].rows,
+                numColumns: keypadForType[keypadType].columns,
+                numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
+                numPages: keypadForType[keypadType].numPages,
+            } as const;
+
+            return {
+                ...state,
+                ...layoutParametersForDimensions(
+                    state.pageDimensions,
+                    gridDimensions,
+                ),
+                gridDimensions,
+            };
+
+        case "SetPageSize":
+            const {pageWidthPx, pageHeightPx} = action;
+            const pageDimensions = {pageWidthPx, pageHeightPx} as const;
+
+            return {
+                ...state,
+                ...layoutParametersForDimensions(
+                    pageDimensions,
+                    state.gridDimensions,
+                ),
+                pageDimensions,
+            };
+
+        default:
+            return state;
+    }
+};
+
+export default layoutReducer;

package/src/store/pager-reducer.ts

@@ -0,0 +1,125 @@
+import VelocityTracker from "../components/velocity-tracker";
+import {KeyTypes} from "../consts";
+import KeyConfigs from "../data/key-configs";
+
+import {defaultKeypadType, keypadForType} from "./shared";
+
+import type {Action} from "./actions";
+import type {PagerState} from "./types";
+
+// We default to the right-most page. This is done so-as to enforce a
+// consistent orientation between the view pager layout and the flattened
+// layout, where our default page appears on the far right.
+const getDefaultPage = (numPages) => numPages - 1;
+
+const initialPagerState = {
+    animateToPosition: false,
+    currentPage: getDefaultPage(keypadForType[defaultKeypadType].numPages),
+    // The cumulative differential in the horizontal direction for the
+    // current swipe.
+    dx: 0,
+    numPages: keypadForType[defaultKeypadType].numPages,
+    pageWidthPx: 0,
+    velocityTracker: new VelocityTracker(),
+} as const;
+
+const pagerReducer = function (
+    state: PagerState = initialPagerState,
+    action: Action,
+): PagerState {
+    switch (action.type) {
+        case "ConfigureKeypad":
+            const {keypadType} = action.configuration;
+            const {numPages} = keypadForType[keypadType];
+            return {
+                ...state,
+                numPages,
+                animateToPosition: false,
+                currentPage: getDefaultPage(numPages),
+                dx: 0,
+            };
+
+        case "SetPageSize":
+            return {
+                ...state,
+                pageWidthPx: action.pageWidthPx,
+            };
+
+        case "PressKey":
+            const keyConfig = KeyConfigs[action.key];
+
+            // Reset the keypad page if the user performs a math operation.
+            if (
+                keyConfig.type === KeyTypes.VALUE ||
+                keyConfig.type === KeyTypes.OPERATOR
+            ) {
+                return {
+                    ...state,
+                    animateToPosition: true,
+                    // We start at the right-most page.
+                    currentPage: getDefaultPage(state.numPages),
+                    dx: 0,
+                };
+            }
+            return state;
+
+        case "OnSwipeChange":
+            state.velocityTracker.push(action.dx);
+
+            return {
+                ...state,
+                animateToPosition: false,
+                dx: action.dx,
+            };
+
+        case "OnSwipeEnd":
+            const {pageWidthPx, velocityTracker} = state;
+            const {dx} = action;
+            const velocity = velocityTracker.getVelocity();
+
+            // NOTE(charlie): These will need refinement. The velocity comes
+            // from Framer.
+            const minFlingVelocity = 0.1;
+            const minFlingDistance = 10;
+
+            const shouldPageRight =
+                dx < -pageWidthPx / 2 ||
+                (velocity < -minFlingVelocity && dx < -minFlingDistance);
+
+            const shouldPageLeft =
+                dx > pageWidthPx / 2 ||
+                (velocity > minFlingVelocity && dx > minFlingDistance);
+
+            if (shouldPageRight) {
+                const nextPage = Math.min(
+                    state.currentPage + 1,
+                    state.numPages - 1,
+                );
+                return {
+                    ...state,
+                    animateToPosition: true,
+                    currentPage: nextPage,
+                    dx: 0,
+                };
+            } else if (shouldPageLeft) {
+                const prevPage = Math.max(state.currentPage - 1, 0);
+                return {
+                    ...state,
+                    animateToPosition: true,
+                    currentPage: prevPage,
+                    dx: 0,
+                };
+            }
+
+            return {
+                ...state,
+                animateToPosition: true,
+                dx: 0,
+            };
+
+        default:
+            return state;
+    }
+};
+
+export default pagerReducer;

package/src/store/shared.ts

@@ -0,0 +1,12 @@
+import {expressionKeypadLayout} from "../components/expression-keypad";
+import {fractionKeypadLayout} from "../components/fraction-keypad";
+import {KeypadTypes} from "../consts";
+
+const defaultKeypadType = KeypadTypes.EXPRESSION;
+
+const keypadForType = {
+    [KeypadTypes.FRACTION]: fractionKeypadLayout,
+    [KeypadTypes.EXPRESSION]: expressionKeypadLayout,
+} as const;
+
+export {keypadForType, defaultKeypadType};

package/src/store/types.ts

@@ -0,0 +1,82 @@
+import GestureManager from "../components/gesture-manager";
+import VelocityTracker from "../components/velocity-tracker";
+import {LayoutModes} from "../consts";
+
+import type {KeypadType} from "../consts";
+import type {Key} from "../data/keys";
+import type {Cursor, KeyHandler, Popover, Echo} from "../types";
+
+// Interaction between keypad and input
+export interface InputState {
+    // This is the callback to tell the input
+    // that a key was pressed. It returns information
+    // about where the cursor is
+    keyHandler: KeyHandler | null;
+    // Information about where the cursor is, which we use to
+    // conditionally render buttons to help navigate
+    // where the cursor should go next
+    cursor: Cursor | undefined;
+}
+
+// Managing high-level keypad state
+export interface KeypadState {
+    // Additional symbols that get grouped in a
+    // ManyKeypadButton; for variables and
+    // special symbols (pi)
+    extraKeys: ReadonlyArray<string>;
+    // Keypad variations (Fraction vs Expression)
+    keypadType: KeypadType;
+    // Whether or not to show the keypad
+    active: boolean;
+}
+
+// Pagination for keypad types with multiple pages
+export interface PagerState {
+    animateToPosition: boolean;
+    // On keypad types with multiple pages
+    // which page we are on
+    currentPage: number;
+    dx: number;
+    numPages: number;
+    pageWidthPx: number;
+    velocityTracker: VelocityTracker;
+}
+
+export interface GestureState {
+    popover: Popover | null;
+    focus: Key | null;
+    gestureManager: GestureManager;
+}
+
+export interface EchoState {
+    echoes: ReadonlyArray<Echo>;
+}
+
+export interface LayoutState {
+    gridDimensions: {
+        numRows: number;
+        numColumns: number;
+        numMaxVisibleRows: number;
+        numPages: number;
+    };
+    buttonDimensions: {
+        widthPx: number;
+        heightPx: number;
+    };
+    pageDimensions: {
+        pageWidthPx: number;
+        pageHeightPx: number;
+    };
+    layoutMode: keyof typeof LayoutModes;
+    paginationEnabled: boolean;
+    navigationPadEnabled: boolean;
+}
+
+export interface State {
+    input: InputState;
+    keypad: KeypadState;
+    pager: PagerState;
+    gestures: GestureState;
+    echoes: EchoState;
+    layout: LayoutState;
+}

package/src/types.ts

@@ -0,0 +1,81 @@
+import {
+    BorderDirections,
+    EchoAnimationTypes,
+    KeyTypes,
+    IconTypes,
+} from "./consts";
+
+import type {CursorContext} from "./components/input/cursor-contexts";
+import type {KeypadType} from "./consts";
+import type {Key} from "./data/keys";
+
+export type Border = Partial<Array<keyof typeof BorderDirections>>;
+
+export type 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: keyof typeof EchoAnimationTypes;
+    borders: Border;
+    id: Key;
+    initialBounds: DOMRect;
+};
+
+export type Icon = {
+    type: keyof typeof IconTypes;
+    data: string;
+};
+
+export type KeyConfig = {
+    ariaLabel: string;
+    id: Key;
+    type: keyof typeof KeyTypes;
+    childKeyIds: Array<Key>;
+    icon: Icon;
+};
+
+export type KeypadConfiguration = {
+    keypadType: KeypadType;
+    extraKeys?: ReadonlyArray<Key>;
+};
+
+export type KeyHandler = (key: Key) => Cursor;
+
+export type Cursor = {
+    context: 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: DOMRect; borders: Border};