@khanacademy/math-input 0.7.2 → 1.0.0

package/src/components/input/{scroll-into-view.js → scroll-into-view.ts}

@@ -11,18 +11,6 @@
 
 import {toolbarHeightPx} from "../common-style";
 
-// Taken from https://dev.opera.com/articles/fixing-the-scrolltop-bug/
-function bodyOrHtml() {
-    if ("scrollingElement" in document) {
-        return document.scrollingElement;
-    }
-    // Fallback for legacy browsers
-    if (navigator.userAgent.indexOf("WebKit") !== -1) {
-        return document.body;
-    }
-    return document.documentElement;
-}
-
 export const scrollIntoView = (containerNode, keypadNode) => {
     // TODO(charlie): There's no need for us to be reading the keypad bounds
     // here, since they're pre-determined by logic in the store. We should
@@ -32,7 +20,7 @@ export const scrollIntoView = (containerNode, keypadNode) => {
     const containerTopPx = containerBounds.top;
 
     // Get the element that scrolls the document.
-    const scrollNode = bodyOrHtml();
+    const scrollNode = document.scrollingElement;
 
     const desiredMarginPx = 16;
 
@@ -58,7 +46,9 @@ export const scrollIntoView = (containerNode, keypadNode) => {
                 containerTopPx,
             );
 
-            scrollNode.scrollTop += scrollOffset;
+            if (scrollNode) {
+                scrollNode.scrollTop += scrollOffset;
+            }
             return;
         }
     }
@@ -66,7 +56,7 @@ export const scrollIntoView = (containerNode, keypadNode) => {
     // Alternatively, if the input is out of the viewport or nearly out
     // of the viewport, scroll it into view. We can do this regardless
     // of whether the keypad has been provided.
-    if (containerTopPx < desiredMarginPx) {
+    if (scrollNode && containerTopPx < desiredMarginPx) {
         scrollNode.scrollTop -= containerBounds.height + desiredMarginPx;
     }
 };

package/src/components/keypad/button-assets.tsx

@@ -15,9 +15,9 @@ import * as React from "react";
 // TODO: This should be an enumeration of all of the possible legal values
 type KeyId = string;
 
-const buttonAsset: React.FC<{
-    id: KeyId;
-}> = function ({id}): React.ReactElement {
+type Props = {id: KeyId};
+
+export default function ButtonAsset({id}: Props): React.ReactElement {
     switch (id) {
         case "NUM_0":
             return (
@@ -489,5 +489,4 @@ const buttonAsset: React.FC<{
         default:
             throw new Error(`Invalid asset ${id}`);
     }
-};
-export default buttonAsset;
+}

package/src/components/keypad/button.tsx

@@ -65,8 +65,7 @@ type Props = {
     tintColor?: string;
 };
 
-type State = Record<any, any>;
-export default class Button extends React.Component<Props, State> {
+export default class Button extends React.Component<Props> {
     render(): React.ReactNode {
         const {onPress, children, style, tintColor} = this.props;
         return (

package/src/components/keypad/index.tsx

@@ -18,7 +18,7 @@ type State = {
     selectedPage: TabbarItemType;
 };
 
-const allPages: React.FC<Props> = function (props): React.ReactElement {
+const allPages = function (props: Props): React.ReactElement {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
     if (props.preAlgebra) {

package/src/components/keypad/keypad-page-items.tsx

@@ -7,9 +7,13 @@ import ButtonAsset from "./button-assets";
 import type {KeyConfig} from "../../data/key-configs";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-export const KeypadPageContainer: React.FC<{
+type KeypadPageContainerProps = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => (
+};
+
+export const KeypadPageContainer = ({
+    children,
+}: KeypadPageContainerProps): React.ReactElement => (
     <View
         style={{
             backgroundColor: "#DBDCDD",
@@ -25,12 +29,19 @@ export const KeypadPageContainer: React.FC<{
     </View>
 );
 
-export const KeypadButton: React.FC<{
+type KeypadButtonProps = {
     keyConfig: KeyConfig;
     tintColor?: string;
     style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}> = ({keyConfig, onClickKey, tintColor, style}): React.ReactElement => (
+};
+
+export const KeypadButton = ({
+    keyConfig,
+    onClickKey,
+    tintColor,
+    style,
+}: KeypadButtonProps): React.ReactElement => (
     <Button
         onPress={() => onClickKey(keyConfig.id)}
         tintColor={tintColor}
@@ -40,11 +51,17 @@ export const KeypadButton: React.FC<{
     </Button>
 );
 
-export const SecondaryKeypadButton: React.FC<{
+type SecondaryKeypadButtonProps = {
     keyConfig: KeyConfig;
-    style?: any;
+    style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}> = ({keyConfig, onClickKey, style}): React.ReactElement => (
+};
+
+export const SecondaryKeypadButton = ({
+    keyConfig,
+    onClickKey,
+    style,
+}: SecondaryKeypadButtonProps): React.ReactElement => (
     <KeypadButton
         keyConfig={keyConfig}
         onClickKey={onClickKey}
@@ -53,11 +70,17 @@ export const SecondaryKeypadButton: React.FC<{
     />
 );
 
-export const KeypadActionButton: React.FC<{
+type KeypadActionButtonProps = {
     keyConfig: KeyConfig;
-    style?: any;
+    style?: StyleType;
     onClickKey: (keyConfig: string) => void;
-}> = ({keyConfig, onClickKey, style}): React.ReactElement => (
+};
+
+export const KeypadActionButton = ({
+    keyConfig,
+    onClickKey,
+    style,
+}: KeypadActionButtonProps): React.ReactElement => (
     <KeypadButton
         keyConfig={keyConfig}
         onClickKey={onClickKey}

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

@@ -3,7 +3,6 @@
  */
 
 import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -23,36 +22,39 @@ import {
 import CornerDecal from "./corner-decal";
 import Icon from "./icon";
 import MultiSymbolGrid from "./multi-symbol-grid";
-import {bordersPropType, iconPropType, keyConfigPropType} from "./prop-types";
+
+import type {KeyType} from "../consts";
+import type {State} from "../store/types";
+import type {Border, KeyConfig, Icon as IconType} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+interface ReduxProps {
+    heightPx: number;
+    widthPx: number;
+}
+
+interface Props extends ReduxProps {
+    ariaLabel?: string;
+    borders: Border;
+    childKeys: ReadonlyArray<KeyConfig>;
+    disabled: boolean;
+    focused: boolean;
+    popoverEnabled: boolean;
+    type: KeyType;
+    icon: IconType;
+    style?: StyleType;
+    onTouchCancel?: (evt: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchEnd?: (evt: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchMove?: (evt: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchStart?: (evt: React.TouchEvent<HTMLDivElement>) => void;
+    // NOTE(matthewc)[LC-754] this is a normal React thing, but TS
+    // gets mad if I don't explicitly set it as a prop
+    ref?: (any) => void;
+}
 
 // eslint-disable-next-line react/no-unsafe
-class KeypadButton extends React.PureComponent {
-    static propTypes = {
-        ariaLabel: PropTypes.string,
-        // The borders to display on the button. Typically, this should be set
-        // using one of the preset `BorderStyles` options.
-        borders: bordersPropType,
-        // Any additional keys that can be accessed by long-pressing on the
-        // button.
-        childKeys: PropTypes.arrayOf(keyConfigPropType),
-        // Whether the button should be rendered in a 'disabled' state, i.e.,
-        // without any touch feedback.
-        disabled: PropTypes.bool,
-        focused: PropTypes.bool,
-        heightPx: PropTypes.number.isRequired,
-        icon: iconPropType,
-        onTouchCancel: PropTypes.func,
-        onTouchEnd: PropTypes.func,
-        onTouchMove: PropTypes.func,
-        onTouchStart: PropTypes.func,
-        popoverEnabled: PropTypes.bool,
-        style: PropTypes.any,
-        type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
-        // NOTE(charlie): We may want to make this optional for phone layouts
-        // (and rely on Flexbox instead), since it might not be pixel perfect
-        // with borders and such.
-        widthPx: PropTypes.number.isRequired,
-    };
+class KeypadButton extends React.PureComponent<Props> {
+    buttonSizeStyle: StyleType | undefined;
 
     static defaultProps = {
         borders: BorderStyles.ALL,
@@ -126,7 +128,7 @@ class KeypadButton extends React.PureComponent {
         return [styles.focusBox, focusBackgroundStyle];
     };
 
-    _getButtonStyle = (type, borders, style) => {
+    _getButtonStyle = (type, borders, style?) => {
         // Select the appropriate style for the button.
         let backgroundStyle;
         switch (type) {
@@ -154,10 +156,12 @@ class KeypadButton extends React.PureComponent {
         }
 
         const borderStyle = [];
-        if (borders.indexOf(BorderDirections.LEFT) !== -1) {
+        if (borders.includes(BorderDirections.LEFT)) {
+            // @ts-expect-error TS2345
             borderStyle.push(styles.leftBorder);
         }
-        if (borders.indexOf(BorderDirections.BOTTOM) !== -1) {
+        if (borders.includes(BorderDirections.BOTTOM)) {
+            // @ts-expect-error TS2345
             borderStyle.push(styles.bottomBorder);
         }
 
@@ -199,7 +203,7 @@ class KeypadButton extends React.PureComponent {
         const focusStyle = this._getFocusStyle(type);
         const iconWrapperStyle = [
             styles.iconWrapper,
-            disabled && styles.disabled,
+            disabled ? styles.disabled : undefined,
         ];
 
         const eventHandlers = {
@@ -267,8 +271,6 @@ const focusBoxZIndex = 0;
 
 const styles = StyleSheet.create({
     buttonBase: {
-        // HACK(benkomalo): support old style flex box in Android browsers
-        "-webkit-box-flex": "1",
         flex: 1,
         cursor: "pointer",
         // Make the text unselectable
@@ -353,8 +355,11 @@ const styleForButtonDimensions = (heightPx, widthPx) => {
     }).buttonSize;
 };
 
-const mapStateToProps = (state) => {
-    return state.layout.buttonDimensions;
+const mapStateToProps = (state: State): ReduxProps => {
+    return {
+        heightPx: state.layout.buttonDimensions.heightPx,
+        widthPx: state.layout.buttonDimensions.widthPx,
+    };
 };
 
 export default connect(mapStateToProps, null, null, {forwardRef: true})(

package/src/components/{keypad-container.js → keypad-container.tsx}

@@ -1,5 +1,4 @@
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -16,27 +15,39 @@ import {
 import ExpressionKeypad from "./expression-keypad";
 import FractionKeypad from "./fraction-keypad";
 import NavigationPad from "./navigation-pad";
-import {keyIdPropType} from "./prop-types";
 import Styles from "./styles";
 import * as zIndexes from "./z-indexes";
 
+import type {KeypadType} from "../consts";
+import type {State as ReduxState} from "../store/types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 const {row, centered, fullWidth} = Styles;
 
+interface ReduxProps {
+    active?: boolean;
+    extraKeys?: ReadonlyArray<string>;
+    keypadType?: KeypadType;
+    layoutMode?: keyof typeof LayoutModes;
+    navigationPadEnabled?: boolean;
+}
+
+interface Props extends ReduxProps {
+    onDismiss?: () => void;
+    onElementMounted: (element: any) => void;
+    onPageSizeChange?: (width: number, height: number) => void;
+    style?: StyleType;
+}
+
+type State = {
+    hasBeenActivated: boolean;
+    viewportWidth: string | number;
+};
+
 // eslint-disable-next-line react/no-unsafe
-class KeypadContainer extends React.Component {
-    static propTypes = {
-        active: PropTypes.bool,
-        extraKeys: PropTypes.arrayOf(keyIdPropType),
-        keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
-        layoutMode: PropTypes.oneOf(Object.keys(LayoutModes)).isRequired,
-        navigationPadEnabled: PropTypes.bool.isRequired,
-        onDismiss: PropTypes.func,
-        // A callback that should be triggered with the root React element on
-        // mount.
-        onElementMounted: PropTypes.func,
-        onPageSizeChange: PropTypes.func.isRequired,
-        style: PropTypes.any,
-    };
+class KeypadContainer extends React.Component<Props, State> {
+    _resizeTimeout: number | null | undefined;
+    hasMounted: boolean | undefined;
 
     state = {
         hasBeenActivated: false,
@@ -89,7 +100,7 @@ class KeypadContainer extends React.Component {
         // Throttle the resize callbacks.
         // https://developer.mozilla.org/en-US/docs/Web/Events/resize
         if (this._resizeTimeout == null) {
-            this._resizeTimeout = setTimeout(() => {
+            this._resizeTimeout = window.setTimeout(() => {
                 this._resizeTimeout = null;
 
                 this._onResize();
@@ -103,8 +114,7 @@ class KeypadContainer extends React.Component {
         this.setState({
             viewportWidth: window.innerWidth,
         });
-
-        this.props.onPageSizeChange(window.innerWidth, window.innerHeight);
+        this.props.onPageSizeChange?.(window.innerWidth, window.innerHeight);
     };
 
     renderKeypad = () => {
@@ -154,11 +164,17 @@ class KeypadContainer extends React.Component {
         // NOTE(charlie): We render the transforms as pure inline styles to
         // avoid an Aphrodite bug in mobile Safari.
         //   See: https://github.com/Khan/aphrodite/issues/68.
-        const dynamicStyle = {
+        let dynamicStyle = {
             ...(active ? inlineStyles.active : inlineStyles.hidden),
-            ...(!active && !hasBeenActivated ? inlineStyles.invisible : {}),
         };
 
+        if (!active && !hasBeenActivated) {
+            dynamicStyle = {
+                ...dynamicStyle,
+                ...inlineStyles.invisible,
+            };
+        }
+
         const keypadContainerStyle = [
             row,
             centered,
@@ -278,9 +294,11 @@ const inlineStyles = {
     },
 };
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: ReduxState): ReduxProps => {
     return {
-        ...state.keypad,
+        extraKeys: state.keypad.extraKeys,
+        keypadType: state.keypad.keypadType,
+        active: state.keypad.active,
         layoutMode: state.layout.layoutMode,
         navigationPadEnabled: state.layout.navigationPadEnabled,
     };

package/src/components/{keypad.js → keypad.tsx}

@@ -3,7 +3,6 @@
  * and manages the rendering of echo animations on top of those buttons.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
@@ -13,26 +12,28 @@ import {View} from "../fake-react-native-web/index";
 
 import EchoManager from "./echo-manager";
 import PopoverManager from "./popover-manager";
-import {echoPropType, popoverPropType} from "./prop-types";
+
+import type {State} from "../store/types";
+import type {Popover, Echo} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+interface ReduxProps {
+    active: boolean;
+    echoes: ReadonlyArray<Echo>;
+    popover: Popover | null;
+}
+
+interface Props extends ReduxProps {
+    children: React.ReactNode;
+    style?: StyleType;
+    removeEcho?: (animationId: string) => void;
+}
 
 // eslint-disable-next-line react/no-unsafe
-class Keypad extends React.Component {
-    static propTypes = {
-        children: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.node),
-            PropTypes.node,
-        ]),
-        removeEcho: PropTypes.func.isRequired,
-        style: PropTypes.any,
-
-        // The props below are injected by redux
-
-        // Whether the keypad is active, i.e., whether it should be rendered as
-        // visible or invisible.
-        active: PropTypes.bool,
-        echoes: PropTypes.arrayOf(echoPropType).isRequired,
-        popover: popoverPropType,
-    };
+class Keypad extends React.Component<Props> {
+    _isMounted: boolean | undefined;
+    _resizeTimeout: number | null | undefined;
+    _container: DOMRect | null | undefined;
 
     componentDidMount() {
         this._isMounted = true;
@@ -54,7 +55,7 @@ class Keypad extends React.Component {
     }
 
     _computeContainer = () => {
-        const domNode = ReactDOM.findDOMNode(this);
+        const domNode = ReactDOM.findDOMNode(this) as Element;
         this._container = domNode.getBoundingClientRect();
     };
 
@@ -76,7 +77,7 @@ class Keypad extends React.Component {
         // Throttle resize events -- taken from:
         //    https://developer.mozilla.org/en-US/docs/Web/Events/resize
         if (this._resizeTimeout == null) {
-            this._resizeTimeout = setTimeout(() => {
+            this._resizeTimeout = window.setTimeout(() => {
                 this._resizeTimeout = null;
 
                 if (this._isMounted) {
@@ -96,9 +97,13 @@ class Keypad extends React.Component {
             return {
                 ...rest,
                 initialBounds: {
+                    // @ts-expect-error TS2533
                     top: initialBounds.top - this._container.top,
+                    // @ts-expect-error TS2533
                     right: initialBounds.right - this._container.left,
+                    // @ts-expect-error TS2533
                     bottom: initialBounds.bottom - this._container.top,
+                    // @ts-expect-error TS2533
                     left: initialBounds.left - this._container.left,
                     width: initialBounds.width,
                     height: initialBounds.height,
@@ -113,8 +118,11 @@ class Keypad extends React.Component {
             ...popover,
             bounds: {
                 bottom:
+                    // @ts-expect-error TS2533
                     this._container.height -
+                    // @ts-expect-error TS2533
                     (popover.bounds.bottom - this._container.top),
+                // @ts-expect-error TS2533
                 left: popover.bounds.left - this._container.left,
                 width: popover.bounds.width,
             },
@@ -133,9 +141,9 @@ class Keypad extends React.Component {
     }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: State): ReduxProps => {
     return {
-        ...state.echoes,
+        echoes: state.echoes.echoes,
         active: state.keypad.active,
         popover: state.gestures.popover,
     };

package/src/components/{many-keypad-button.js → many-keypad-button.tsx}

@@ -3,7 +3,6 @@
  * 'default' symbol.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {KeyTypes} from "../consts";
@@ -11,12 +10,15 @@ import KeyConfigs from "../data/key-configs";
 import Keys from "../data/keys";
 
 import EmptyKeypadButton from "./empty-keypad-button";
-import {keyIdPropType} from "./prop-types";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
-class ManyKeypadButton extends React.Component {
-    static propTypes = {
-        keys: PropTypes.arrayOf(keyIdPropType).isRequired,
+type Props = {
+    keys: ReadonlyArray<string>;
+};
+
+class ManyKeypadButton extends React.Component<Props> {
+    static defaultProps = {
+        keys: [],
     };
 
     render() {
@@ -26,7 +28,7 @@ class ManyKeypadButton extends React.Component {
         // one, render a standard button. Otherwise, capture them all in a
         // single button.
         if (keys.length === 0) {
-            return <EmptyKeypadButton {...rest} />;
+            return <EmptyKeypadButton />;
         } else if (keys.length === 1) {
             const keyConfig = KeyConfigs[keys[0]];
             return <TouchableKeypadButton keyConfig={keyConfig} {...rest} />;

package/src/components/{math-icon.js → math-icon.tsx}

@@ -4,7 +4,6 @@
 
 import {StyleSheet} from "aphrodite";
 import katex from "katex";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
@@ -13,14 +12,16 @@ import {View} from "../fake-react-native-web/index";
 import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Styles from "./styles";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 const {row, centered} = Styles;
 
-class MathIcon extends React.Component {
-    static propTypes = {
-        math: PropTypes.string.isRequired,
-        style: PropTypes.any,
-    };
+type Props = {
+    math: string;
+    style: StyleType;
+};
 
+class MathIcon extends React.Component<Props> {
     componentDidMount() {
         this._renderMath();
     }

package/src/components/{multi-symbol-grid.js → multi-symbol-grid.tsx}

@@ -4,7 +4,6 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {IconTypes} from "../consts";
@@ -12,17 +11,18 @@ import {View} from "../fake-react-native-web/index";
 
 import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Icon from "./icon";
-import {iconPropType} from "./prop-types";
 import Styles from "./styles";
 
+import type {Icon as IconType} from "../types";
+
 const {row, column, centered, fullWidth} = Styles;
 
-class MultiSymbolGrid extends React.Component {
-    static propTypes = {
-        focused: PropTypes.bool,
-        icons: PropTypes.arrayOf(iconPropType).isRequired,
-    };
+type Props = {
+    focused: boolean;
+    icons: ReadonlyArray<IconType>;
+};
 
+class MultiSymbolGrid extends React.Component<Props> {
     render() {
         const {focused, icons} = this.props;
 
@@ -131,7 +131,7 @@ class MultiSymbolGrid extends React.Component {
             }
         }
 
-        throw new Error("Invalid number of icons:", icons.length);
+        throw new Error(`Invalid number of icons: ${icons.length}`);
     }
 }
 

package/src/components/{multi-symbol-popover.js → multi-symbol-popover.tsx}

@@ -3,21 +3,20 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {BorderStyles} from "../consts";
 import {View} from "../fake-react-native-web/index";
+import {KeyConfig} from "../types";
 
-import {keyConfigPropType} from "./prop-types";
 import TouchableKeypadButton from "./touchable-keypad-button";
 import * as zIndexes from "./z-indexes";
 
-class MultiSymbolPopover extends React.Component {
-    static propTypes = {
-        keys: PropTypes.arrayOf(keyConfigPropType),
-    };
+type Prop = {
+    keys: ReadonlyArray<KeyConfig>;
+};
 
+class MultiSymbolPopover extends React.Component<Prop> {
     render() {
         const {keys} = this.props;