From e5a2dd8747f3d2691161874923dbac9b4366d654 Mon Sep 17 00:00:00 2001 From: Matthew Date: Mon, 24 Jun 2024 10:12:46 -0500 Subject: [PATCH] Simplify InputWithExamples (#1363) * simplify input-with-examples * changeset * make change a patch --- .changeset/five-kiwis-smell.md | 5 + .../__stories__/math-output.stories.tsx | 23 --- .../src/components/input-with-examples.tsx | 82 +---------- .../perseus/src/components/math-output.tsx | 134 ------------------ .../perseus/src/styles/perseus-renderer.less | 12 -- .../perseus/src/styles/widgets/matrix.less | 7 - packages/perseus/src/widgets/input-number.tsx | 1 - .../perseus/src/widgets/numeric-input.tsx | 1 - 8 files changed, 12 insertions(+), 253 deletions(-) create mode 100644 .changeset/five-kiwis-smell.md delete mode 100644 packages/perseus/src/components/__stories__/math-output.stories.tsx delete mode 100644 packages/perseus/src/components/math-output.tsx diff --git a/.changeset/five-kiwis-smell.md b/.changeset/five-kiwis-smell.md new file mode 100644 index 0000000000..2008663006 --- /dev/null +++ b/.changeset/five-kiwis-smell.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Cleanup dead code related to input-with-examples diff --git a/packages/perseus/src/components/__stories__/math-output.stories.tsx b/packages/perseus/src/components/__stories__/math-output.stories.tsx deleted file mode 100644 index 17ff389785..0000000000 --- a/packages/perseus/src/components/__stories__/math-output.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react"; - -import MathOutput from "../math-output"; - -type StoryArgs = Record; - -type Story = { - title: string; -}; - -export default { - title: "Perseus/Components/Math Ouput", -} as Story; - -export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => { - return ; -}; -export const StringValue = (args: StoryArgs): React.ReactElement => { - return ; -}; -export const NumericValue = (args: StoryArgs): React.ReactElement => { - return ; -}; diff --git a/packages/perseus/src/components/input-with-examples.tsx b/packages/perseus/src/components/input-with-examples.tsx index 96a9b71adc..19ee616f38 100644 --- a/packages/perseus/src/components/input-with-examples.tsx +++ b/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 { declare context: React.ContextType; static defaultProps: DefaultProps = { - type: "text", shouldShowExamples: true, onFocus: function () {}, onBlur: function () {}, @@ -76,12 +71,6 @@ class InputWithExamples extends React.Component { }; _getInputClassName: () => string = () => { - // is a special component that manages its own class and - // state, as it's a that wants to act like an . - 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 { 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 { 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 ; + autoCapitalize: "off", + autoComplete: "off", + autoCorrect: "off", + spellCheck: "false", + }; + return ; }; 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"); diff --git a/packages/perseus/src/components/math-output.tsx b/packages/perseus/src/components/math-output.tsx deleted file mode 100644 index 2191a597d5..0000000000 --- a/packages/perseus/src/components/math-output.tsx +++ /dev/null @@ -1,134 +0,0 @@ -/* eslint-disable react/sort-comp */ -import $ from "jquery"; -import * as React from "react"; -import ReactDOM from "react-dom"; -import _ from "underscore"; - -import {getDependencies} from "../dependencies"; -import {ClassNames as ApiClassNames} from "../perseus-api"; -import TexWrangler from "../tex-wrangler"; - -const ModifyTex = TexWrangler.modifyTex; - -type Props = { - value: string | number; - className?: string; - labelText?: string; - onFocus: () => void; - onBlur: () => void; -}; - -type DefaultProps = Pick; - -type State = { - focused: boolean; - selectorNamespace: string; -}; - -class MathOutput extends React.Component { - static defaultProps: DefaultProps = { - value: "", - onFocus: function () {}, - onBlur: function () {}, - }; - - state: State = { - focused: false, - selectorNamespace: _.uniqueId("math-output"), - }; - - _getInputClassName: () => string = () => { - let className = - "math-output " + - ApiClassNames.INPUT + - " " + - ApiClassNames.INTERACTIVE; - if (this.state.focused) { - className += " " + ApiClassNames.FOCUSED; - } - if (this.props.className) { - className += " " + this.props.className; - } - return className; - }; - - _getDisplayValue: (arg1: string | number) => string = (value) => { - // Cast from (potentially a) number to string - let displayText; - if (value != null) { - displayText = "" + value; - } else { - displayText = ""; - } - return ModifyTex(displayText); - }; - - render(): React.ReactNode { - const divStyle = { - textAlign: "center", - } as const; - const {TeX} = getDependencies(); - - return ( - -
- {this._getDisplayValue(this.props.value)} -
- - ); - } - - getValue: () => string | number = () => { - return this.props.value; - }; - - focus: () => void = () => { - if (!this.state.focused) { - this.props.onFocus(); - this._bindBlurHandler(); - this.setState({ - focused: true, - }); - } - }; - - blur: () => void = () => { - if (this.state.focused) { - this.props.onBlur(); - this._unbindBlurHandler(); - this.setState({ - focused: false, - }); - } - }; - - _bindBlurHandler: () => void = () => { - $(document).bind("vclick." + this.state.selectorNamespace, (e) => { - // Detect whether the target has our React DOM node as a parent - const $closestWidget = $(e.target).closest( - // @ts-expect-error - TS2769 - No overload matches this call. - ReactDOM.findDOMNode(this), - ); - if (!$closestWidget.length) { - this.blur(); - } - }); - }; - - _unbindBlurHandler: () => void = () => { - $(document).unbind("." + this.state.selectorNamespace); - }; - - componentWillUnmount() { - this._unbindBlurHandler(); - } -} - -export default MathOutput; diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less index 70f6dafd36..32e1129470 100644 --- a/packages/perseus/src/styles/perseus-renderer.less +++ b/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; diff --git a/packages/perseus/src/styles/widgets/matrix.less b/packages/perseus/src/styles/widgets/matrix.less index 21da3a6148..0f1e5cc2b9 100644 --- a/packages/perseus/src/styles/widgets/matrix.less +++ b/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; - } } } diff --git a/packages/perseus/src/widgets/input-number.tsx b/packages/perseus/src/widgets/input-number.tsx index 952d378541..79ca3c2d7a 100644 --- a/packages/perseus/src/widgets/input-number.tsx +++ b/packages/perseus/src/widgets/input-number.tsx @@ -185,7 +185,6 @@ class InputNumber extends React.Component { value={this.props.currentValue} onChange={this.handleChange} style={inputStyles} - type="text" examples={this.examples()} shouldShowExamples={this.shouldShowExamples()} onFocus={this._handleFocus} diff --git a/packages/perseus/src/widgets/numeric-input.tsx b/packages/perseus/src/widgets/numeric-input.tsx index f65908319c..bcd0224631 100644 --- a/packages/perseus/src/widgets/numeric-input.tsx +++ b/packages/perseus/src/widgets/numeric-input.tsx @@ -445,7 +445,6 @@ export class NumericInput extends React.Component { value={this.props.currentValue} onChange={this.handleChange} labelText={labelText} - type="text" examples={this.examples()} shouldShowExamples={this.shouldShowExamples()} onFocus={this._handleFocus}