Revert type chagnes to two components - rabbit hole

packages/perseus/src/components/range-input.tsx

@@ -1,28 +1,35 @@
+/* eslint-disable react/forbid-prop-types */
+import PropTypes from "prop-types";
 import * as React from "react";
 
 import NumberInput from "./number-input";
 
 const truth = () => true;
 
-type Props = {
-    value: [number, number];
-    placeholder: [string, string];
-    onChange: (start: number, end: number) => void;
-    checkValidity: (vals: [number, number]) => boolean;
-};
-
-type DefaultProps = {
-    placeholder: Props["placeholder"] | [null, null];
-};
-
-/**
- * A minor abstraction on top of NumberInput for ranges.
+/* A minor abstraction on top of NumberInput for ranges
+ *
  */
-class RangeInput extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
+class RangeInput extends React.Component<any> {
+    static propTypes = {
+        value: PropTypes.array.isRequired,
+        onChange: PropTypes.func.isRequired,
+        placeholder: PropTypes.array,
+        checkValidity: PropTypes.func,
+    };
+
+    static defaultProps: any = {
         placeholder: [null, null],
     };
 
+    onChange: (arg1: number, arg2: string) => void = (i, newVal) => {
+        const value = this.props.value;
+        if (i === 0) {
+            this.props.onChange([newVal, value[1]]);
+        } else {
+            this.props.onChange([value[0], newVal]);
+        }
+    };
+
     render(): React.ReactNode {
         const value = this.props.value;
         const checkValidity = this.props.checkValidity || truth;
@@ -33,14 +40,16 @@ class RangeInput extends React.Component<Props> {
                     {...this.props}
                     value={value[0]}
                     checkValidity={(val) => checkValidity([val, value[1]])}
-                    onChange={(val) => this.props.onChange(val, value[1])}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={this.onChange.bind(this, 0)}
                     placeholder={this.props.placeholder[0]}
                 />
                 <NumberInput
                     {...this.props}
                     value={value[1]}
                     checkValidity={(val) => checkValidity([value[0], val])}
-                    onChange={(val: any) => this.props.onChange(value[0], val)}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={this.onChange.bind(this, 1)}
                     placeholder={this.props.placeholder[1]}
                 />
             </div>

packages/perseus/src/components/simple-keypad-input.tsx

@@ -1,24 +1,22 @@
-import {KeypadInput, KeypadType} from "@khanacademy/math-input";
-import * as React from "react";
-
-import type {KeypadAPI} from "@khanacademy/math-input";
-
-type Props = {
-    keypadElement: KeypadAPI;
-    onFocus: () => void;
-    value: string | number;
-};
-
 /**
  * A version of the `math-input` subrepo's KeypadInput component that adheres to
- * the same API as Perseus's `MathOuput` and `NumberInput`, allowing it to be
+ * the same API as Perseus's  MathOuput and NumberInput, allowing it to be
  * dropped in as a replacement for those components without any modifications.
  *
  * TODO(charlie): Once the keypad API has stabilized, move this into the
  * `math-input` subrepo and use it everywhere as a simpler, keypad-coupled
  * interface to `math-input`'s MathInput component.
  */
-export default class SimpleKeypadInput extends React.Component<Props> {
+
+import {
+    KeypadInput,
+    KeypadType,
+    keypadElementPropType,
+} from "@khanacademy/math-input";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+export default class SimpleKeypadInput extends React.Component<any> {
     _isMounted = false;
 
     componentDidMount() {
@@ -86,3 +84,10 @@ export default class SimpleKeypadInput extends React.Component<Props> {
         );
     }
 }
+
+// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
+SimpleKeypadInput.propTypes = {
+    keypadElement: keypadElementPropType,
+    onFocus: PropTypes.func,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};