@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/multi-button-group.tsx

@@ -1,135 +0,0 @@
-import {css, StyleSheet} from "aphrodite";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-type Props = {
-    // the initial values of the buttons selected, defaults to null (no
-    // selection).
-    values: ReadonlyArray<any> | null | undefined;
-    buttons: ReadonlyArray<{
-        // the value returned when the button is selected
-        value: any;
-        // the content shown within the button, typically a string that gets
-        // rendered as the button's display text
-        content: React.ReactNode;
-        // the title-text shown on hover
-        title?: string;
-    }>;
-    // a function that is provided with the updated set of selected value
-    // (which it then is responsible for updating)
-    onChange: (values?: any) => unknown;
-    // if false, at least one button must be selected at all times.
-    // defaults to true
-    allowEmpty?: boolean;
-};
-
-type DefaultProps = {
-    allowEmpty: Props["allowEmpty"];
-    values: Props["values"];
-};
-
-/**
- * MultiButtonGroup is an aesthetically pleasing group of buttons,
- * which allows multiple buttons to be selected at the same time.
- *
- * NOTE: This component is almost identical to ./button-group.jsx except that
- * this component allows multiple selection!
- */
-class MultiButtonGroup extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        values: [],
-        allowEmpty: true,
-    };
-
-    focus(): boolean {
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this)?.focus();
-        return true;
-    }
-
-    toggleSelect: (arg1?: any) => void = (newValue: any) => {
-        const values = (this.props.values || []).slice(0);
-        const allowEmpty = this.props.allowEmpty;
-
-        if (
-            values.indexOf(newValue) >= 0 &&
-            (values.length > 1 || allowEmpty)
-        ) {
-            // If the value is already selected, unselect it
-            values.splice(values.indexOf(newValue), 1);
-        } else {
-            // Otherwise merge with other values and return
-            if (values.indexOf(newValue) < 0) {
-                values.push(newValue);
-            }
-        }
-
-        this.props.onChange(values);
-    };
-
-    render(): React.ReactNode {
-        const values = this.props.values || [];
-        const buttons = this.props.buttons.map((button, i) => {
-            const selected = values.indexOf(button.value) >= 0;
-            return (
-                <button
-                    title={button.title}
-                    type="button"
-                    id={"" + i}
-                    key={"" + i}
-                    ref={"button" + i}
-                    className={css(
-                        styles.buttonStyle,
-                        selected && styles.selectedStyle,
-                    )}
-                    onClick={() => this.toggleSelect(button.value)}
-                >
-                    {button.content || "" + button.value}
-                </button>
-            );
-        });
-
-        const outerStyle = {
-            display: "inline-block",
-        } as const;
-        return <div style={outerStyle}>{buttons}</div>;
-    }
-}
-
-const styles = StyleSheet.create({
-    buttonStyle: {
-        backgroundColor: "white",
-        border: "1px solid #ccc",
-        borderLeft: "0",
-        cursor: "pointer",
-        margin: "0",
-        padding: "5px 10px",
-        position: "relative", // for hover
-
-        ":first-child": {
-            borderLeft: "1px solid #ccc",
-            borderTopLeftRadius: "3px",
-            borderBottomLeftRadius: "3px",
-        },
-
-        ":last-child": {
-            borderRight: "1px solid #ccc",
-            borderTopRightRadius: "3px",
-            borderBottomRightRadius: "3px",
-        },
-
-        ":hover": {
-            backgroundColor: "#ccc",
-        },
-
-        ":focus": {
-            zIndex: 2,
-        },
-    },
-
-    selectedStyle: {
-        backgroundColor: "#ddd",
-    },
-});
-
-export default MultiButtonGroup;

package/src/components/number-input.tsx

@@ -1,249 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-import {number as knumber} from "@khanacademy/kmath";
-import classNames from "classnames";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import Util from "../util";
-import KhanMath from "../util/math";
-
-import type {MathFormat} from "../perseus-types";
-
-const {firstNumericalParse, captureScratchpadTouchStart} = Util;
-const toNumericString = KhanMath.toNumericString;
-const getNumericFormat = KhanMath.getNumericFormat;
-
-/* An input box that accepts only numeric strings
- *
- * Calls onChange(value, format) for valid numbers.
- * Reverts to the current value onBlur or on [ENTER],
- *   but maintains the format (i.e. 3/2, 1 1/2, 150%)
- * Accepts empty input and sends it to onChange as null
- *   if no numeric placeholder is set.
- * If given a checkValidity function, will turn
- *   the background/outline red when invalid
- * If useArrowKeys is set to true, up/down arrows will
- *   increment/decrement integers
- * Optionally takes a size ("mini", "small", "normal")
- */
-class NumberInput extends React.Component<any, any> {
-    static propTypes = {
-        value: PropTypes.number,
-        format: PropTypes.string,
-        placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        onChange: PropTypes.func.isRequired,
-        onFormatChange: PropTypes.func,
-        checkValidity: PropTypes.func,
-        size: PropTypes.string,
-        label: PropTypes.oneOf(["put your labels outside your inputs!"]),
-    };
-
-    static defaultProps: any = {
-        value: null,
-        placeholder: null,
-        format: null,
-        onFormatChange: () => null,
-        checkValidity: () => true,
-        useArrowKeys: false,
-    };
-
-    state: any = {
-        format: this.props.format,
-    };
-
-    render(): React.ReactNode {
-        let classes = classNames({
-            "number-input": true,
-            "invalid-input": !this._checkValidity(this.props.value),
-            mini: this.props.size === "mini",
-            small: this.props.size === "small",
-            normal: this.props.size === "normal",
-        });
-        if (this.props.className != null) {
-            classes = classes + " " + this.props.className;
-        }
-
-        const {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onFormatChange,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            checkValidity,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            useArrowKeys,
-            ...restProps
-        } = this.props;
-
-        return (
-            <input
-                {...restProps}
-                className={classes}
-                type="text"
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
-                onChange={this._handleChange}
-                onFocus={this._handleFocus}
-                onBlur={this._handleBlur}
-                onKeyPress={this._handleBlur}
-                onKeyDown={this._onKeyDown}
-                // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
-                onTouchStart={captureScratchpadTouchStart}
-                defaultValue={toNumericString(
-                    this.props.value,
-                    this.state.format,
-                )}
-                value={undefined}
-            />
-        );
-    }
-
-    componentDidUpdate(prevProps: any) {
-        if (!knumber.equal(this.getValue(), this.props.value)) {
-            this._setValue(this.props.value, this.state.format);
-        }
-    }
-
-    /* Return the current "value" of this input
-     * If empty, it returns the placeholder (if it is a number) or null
-     */
-    getValue: () => any = () => {
-        return this.parseInputValue(
-            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-            ReactDOM.findDOMNode(this.refs.input).value, // eslint-disable-line react/no-string-refs
-        );
-    };
-
-    /* Return the current string value of this input */
-    getStringValue: () => string = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
-    };
-
-    parseInputValue: (arg1: any) => any = (value) => {
-        if (value === "") {
-            const placeholder = this.props.placeholder;
-            return _.isFinite(placeholder) ? +placeholder : null;
-        }
-        const result = firstNumericalParse(value);
-        return _.isFinite(result) ? result : this.props.value;
-    };
-
-    /* Set text input focus to this input */
-    focus: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
-        this._handleFocus();
-    };
-
-    blur: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
-        this._handleBlur();
-    };
-
-    setSelectionRange: (arg1: number, arg2: number) => any = (
-        selectionStart,
-        selectionEnd,
-    ) => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this).setSelectionRange(
-            selectionStart,
-            selectionEnd,
-        );
-    };
-
-    getSelectionStart: () => number = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this).selectionStart;
-    };
-
-    getSelectionEnd: () => number = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this).selectionEnd;
-    };
-
-    _checkValidity: (arg1: any) => boolean = (value) => {
-        if (value == null) {
-            return true;
-        }
-
-        const val = firstNumericalParse(value);
-        const checkValidity = this.props.checkValidity;
-
-        return _.isFinite(val) && checkValidity(val);
-    };
-
-    _handleChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        const text = e.target.value;
-        const value = this.parseInputValue(text);
-        const format = getNumericFormat(text);
-
-        this.props.onChange(value);
-        if (format) {
-            this.props.onFormatChange(value, format);
-            this.setState({format: format});
-        }
-    };
-
-    _handleFocus: () => void = () => {
-        if (this.props.onFocus) {
-            this.props.onFocus();
-        }
-    };
-
-    _handleBlur: (e?: React.FocusEvent | React.KeyboardEvent) => void = (e) => {
-        // Only continue on blur or "enter"
-        // @ts-expect-error - TS2339 - Property 'keyCode' does not exist on type 'KeyboardEvent<Element> | FocusEvent<Element, Element>'.
-        if (e && e.type === "keypress" && e.keyCode !== 13) {
-            return;
-        }
-
-        this._setValue(this.props.value, this.state.format);
-        if (this.props.onBlur) {
-            this.props.onBlur();
-        }
-    };
-
-    _onKeyDown: (arg1: React.KeyboardEvent) => void = (e) => {
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(e);
-        }
-
-        if (
-            !this.props.useArrowKeys ||
-            !_.contains(["ArrowUp", "ArrowDown"], e.key)
-        ) {
-            return;
-        }
-
-        let val = this.getValue();
-        if (val !== Math.floor(val)) {
-            return; // bail if not an integer
-        }
-
-        if (e.key === "ArrowUp") {
-            val = val + 1;
-        } else if (e.key === "ArrowDown") {
-            val = val - 1;
-        }
-
-        if (this._checkValidity(val)) {
-            this.props.onChange(val);
-        }
-    };
-
-    _setValue: (arg1: number, arg2: MathFormat) => void = (val, format) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
-        $(ReactDOM.findDOMNode(this.refs.input)).val(
-            toNumericString(val, format),
-        );
-    };
-}
-
-export default NumberInput;

package/src/components/prop-check-box.tsx

@@ -1,79 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/* eslint-disable react/sort-comp */
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-
-/* A checkbox that syncs its value to props using the
- * renderer's onChange method, and gets the prop name
- * dynamically from its props list
- */
-const PropCheckBox: any = createReactClass({
-    displayName: "PropCheckBox",
-
-    propTypes: {
-        labelAlignment: PropTypes.oneOf(["left", "right"]),
-    },
-
-    DEFAULT_PROPS: {
-        label: null,
-        onChange: null,
-        labelAlignment: "left",
-    },
-
-    getDefaultProps: function () {
-        return this.DEFAULT_PROPS;
-    },
-
-    propName: function () {
-        const propName = _.find(
-            _.keys(this.props),
-            function (localPropName) {
-                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                return !_.has(this.DEFAULT_PROPS, localPropName);
-            },
-            this,
-        );
-
-        if (!propName) {
-            throw new PerseusError(
-                "Attempted to create a PropCheckBox with no prop!",
-                Errors.InvalidInput,
-            );
-        }
-
-        return propName;
-    },
-
-    _labelAlignLeft: function () {
-        return this.props.labelAlignment === "left";
-    },
-
-    render: function () {
-        const propName = this.propName();
-        return (
-            <label>
-                {this._labelAlignLeft() && this.props.label}
-                <input
-                    type="checkbox"
-                    checked={this.props[propName]}
-                    onChange={this.toggle}
-                />
-                {!this._labelAlignLeft() && this.props.label}
-            </label>
-        );
-    },
-
-    toggle: function () {
-        const propName = this.propName();
-        const changes: Record<string, any> = {};
-        changes[propName] = !this.props[propName];
-        this.props.onChange(changes);
-    },
-});
-
-export default PropCheckBox;

package/src/components/range-input.tsx

@@ -1,60 +0,0 @@
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
-import PropTypes from "prop-types";
-import * as React from "react";
-
-import NumberInput from "./number-input";
-
-const truth = () => true;
-
-/* A minor abstraction on top of NumberInput for ranges
- *
- */
-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],
-    };
-
-    render(): React.ReactNode {
-        const value = this.props.value;
-        const checkValidity = this.props.checkValidity || truth;
-
-        return (
-            <div className="range-input">
-                <NumberInput
-                    {...this.props}
-                    value={value[0]}
-                    checkValidity={(val) => checkValidity([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])}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this.onChange.bind(this, 1)}
-                    placeholder={this.props.placeholder[1]}
-                />
-            </div>
-        );
-    }
-
-    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]);
-        }
-    };
-}
-
-export default RangeInput;

package/src/components/simple-keypad-input.tsx

@@ -1,88 +0,0 @@
-/**
- * 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
- * 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.
- */
-
-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() {
-        // TODO(scottgrant): This is a hack to remove the deprecated call to
-        // this.isMounted() but is still considered an anti-pattern.
-        this._isMounted = true;
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    focus() {
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus(); // eslint-disable-line react/no-string-refs
-    }
-
-    blur() {
-        // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-        this.refs.input.blur(); // eslint-disable-line react/no-string-refs
-    }
-
-    getValue(): string | number {
-        return this.props.value;
-    }
-
-    render(): React.ReactNode {
-        const _this = this;
-        // Intercept the `onFocus` prop, as we need to configure the keypad
-        // before continuing with the default focus logic for Perseus inputs.
-        // Intercept the `value` prop so as to map `null` to the empty string,
-        // as the `KeypadInput` does not support `null` values.
-        const {keypadElement, onFocus, value, ...rest} = _this.props;
-
-        return (
-            // @ts-expect-error - TS2769 - No overload matches this call.
-            <KeypadInput
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
-                keypadElement={keypadElement}
-                onFocus={() => {
-                    if (keypadElement) {
-                        keypadElement.configure(
-                            {
-                                keypadType: KeypadType.FRACTION,
-                            },
-                            () => {
-                                if (_this._isMounted) {
-                                    onFocus && onFocus();
-                                }
-                            },
-                        );
-                    } else {
-                        onFocus && onFocus();
-                    }
-                }}
-                value={value == null ? "" : "" + value}
-                {...rest}
-            />
-        );
-    }
-}
-
-// @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]),
-};