Simplify InputWithExamples (#1363)

* simplify input-with-examples

* changeset

* make change a patch

.changeset/five-kiwis-smell.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Cleanup dead code related to input-with-examples

packages/perseus/src/components/input-with-examples.tsx

@@ -8,8 +8,6 @@ import Renderer from "../renderer";
 import Util from "../util";
 
 import {PerseusI18nContext} from "./i18n-context";
-import MathInput from "./math-input";
-import MathOutput from "./math-output";
 import TextInput from "./text-input";
 import Tooltip, {HorizontalDirection, VerticalDirection} from "./tooltip";
 
@@ -19,7 +17,6 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 const {captureScratchpadTouchStart} = Util;
 
 type Props = {
-    type: "math" | "text" | "tex";
     value: string;
     onChange: any;
     className: string;
@@ -38,7 +35,6 @@ type Props = {
 };
 
 type DefaultProps = {
-    type: Props["type"];
     shouldShowExamples: Props["shouldShowExamples"];
     onFocus: Props["onFocus"];
     onBlur: Props["onBlur"];
@@ -57,7 +53,6 @@ class InputWithExamples extends React.Component<Props, State> {
     declare context: React.ContextType<typeof PerseusI18nContext>;
 
     static defaultProps: DefaultProps = {
-        type: "text",
         shouldShowExamples: true,
         onFocus: function () {},
         onBlur: function () {},
@@ -76,12 +71,6 @@ class InputWithExamples extends React.Component<Props, State> {
     };
 
     _getInputClassName: () => string = () => {
-        // <MathOutput> is a special component that manages its own class and
-        // state, as it's a <span> that wants to act like an <input>.
-        if (this.props.type === "tex") {
-            return this.props.className;
-        }
-
         // Otherwise, we need to add these INPUT and FOCUSED tags here.
         let className = ApiClassNames.INPUT + " " + ApiClassNames.INTERACTIVE;
         if (this.state.focused) {
@@ -93,8 +82,7 @@ class InputWithExamples extends React.Component<Props, State> {
         return className;
     };
 
-    _getPropsForInputType: () => any = () => {
-        // Minimal set of props, used by each input type
+    _renderInput: () => any = () => {
         const id = this._getUniqueId();
         const inputProps = {
             id: id,
@@ -107,75 +95,19 @@ class InputWithExamples extends React.Component<Props, State> {
             onBlur: this._handleBlur,
             disabled: this.props.disabled,
             style: this.props.style,
-        } as const;
-
-        if (this.props.type === "tex") {
-            return inputProps;
-        }
-
-        // Add useful props required for MATH and TEXT modes
-        _.extend(inputProps, {
             onChange: this.props.onChange,
             onTouchStart: captureScratchpadTouchStart,
-        });
-
-        // And add final props that are MATH- and TEXT-specific
-        if (this.props.type === "math") {
-            return _.extend(
-                {
-                    buttonSet: this.props.buttonSet,
-                    buttonsVisible: this.props.buttonsVisible,
-                    convertDotToTimes: this.props.convertDotToTimes,
-                },
-                inputProps,
-            );
-        }
-        if (this.props.type === "text") {
-            return _.extend(
-                {
-                    autoCapitalize: "off",
-                    autoComplete: "off",
-                    autoCorrect: "off",
-                    spellCheck: "false",
-                },
-                inputProps,
-            );
-        }
-    };
-
-    _getComponentForInputType: () => any = () => {
-        switch (this.props.type) {
-            case "tex":
-                return MathOutput;
-
-            case "math":
-                return MathInput;
-
-            case "text":
-                return TextInput;
-
-            default:
-                this.props.type as never;
-                return null;
-        }
-    };
-
-    _renderInput: () => any = () => {
-        const inputProps = this._getPropsForInputType();
-        const InputComponent = this._getComponentForInputType();
-        return <InputComponent {...inputProps} />;
+            autoCapitalize: "off",
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: "false",
+        };
+        return <TextInput {...inputProps} />;
     };
 
     render(): React.ReactNode {
         const input = this._renderInput();
 
-        // Static rendering, which doesn't include the 'tooltip' logic that the
-        // other types require, and is hence handled separately.
-        if (this.props.type === "tex") {
-            return input;
-        }
-
-        // Else, we need to be able to show examples
         const examplesContent = _.map(this.props.examples, (example) => {
             return "- " + example;
         }).join("\n");

packages/perseus/src/styles/perseus-renderer.less

@@ -207,18 +207,6 @@
         }
     }
 
-    .math-output {
-        display: inline-block;
-        min-width: 80px;
-        min-height: 36px;
-        border-radius: 5px;
-        padding: 0;
-        margin-top: 4px;
-        margin-bottom: 4px;
-        background: white;
-        border: 1px solid #a4a4a4;
-    }
-
     .graph-settings {
         .graph-settings-axis-label {
             border: 1px solid #ccc;

packages/perseus/src/styles/widgets/matrix.less

@@ -109,13 +109,6 @@ body.mobile {
         .matrix-input-field {
             display: table-cell;
         }
-
-        .math-output {
-            margin: 4px 4px 2px 4px;
-            max-height: 36px;
-            max-width: 80px;
-            overflow: hidden;
-        }
     }
 }
 

packages/perseus/src/widgets/input-number.tsx

@@ -185,7 +185,6 @@ class InputNumber extends React.Component<Props> {
                 value={this.props.currentValue}
                 onChange={this.handleChange}
                 style={inputStyles}
-                type="text"
                 examples={this.examples()}
                 shouldShowExamples={this.shouldShowExamples()}
                 onFocus={this._handleFocus}

packages/perseus/src/widgets/numeric-input.tsx

@@ -445,7 +445,6 @@ export class NumericInput extends React.Component<Props, State> {
                     value={this.props.currentValue}
                     onChange={this.handleChange}
                     labelText={labelText}
-                    type="text"
                     examples={this.examples()}
                     shouldShowExamples={this.shouldShowExamples()}
                     onFocus={this._handleFocus}