@khanacademy/perseus 3.0.0 → 4.0.0

package/src/components/tex-buttons.jsx

@@ -1,320 +0,0 @@
-// @flow
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import {getDependencies} from "../dependencies.js";
-
-const prettyBig = {fontSize: "150%"};
-const slightlyBig = {fontSize: "120%"};
-const symbStyle = {fontSize: "130%"};
-
-type Inserter = string | ((input: $FlowFixMe) => void);
-type ButtonSet = (props: $FlowFixMe) => [React.Node, Inserter];
-
-type ButtonSets = {|
-    +[string]: $ReadOnlyArray<ButtonSet>,
-|};
-
-// These are functions because we want to generate a new component for each use
-// on the page rather than reusing an instance (which will cause an error).
-// Also, it's useful for things which might look different depending on the
-// props.
-
-const basic: $ReadOnlyArray<ButtonSet> = [
-    () => [
-        <span key="plus" style={slightlyBig}>
-            +
-        </span>,
-        "+",
-    ],
-    () => [
-        <span key="minus" style={prettyBig}>
-            -
-        </span>,
-        "-",
-    ],
-
-    // TODO(joel) - display as \cdot when appropriate
-    (props) => {
-        const {TeX} = getDependencies();
-        if (props.convertDotToTimes) {
-            return [
-                <TeX key="times" style={prettyBig}>
-                    {i18n.doNotTranslate("\\times")}
-                </TeX>,
-                "\\times",
-            ];
-        }
-        return [
-            <TeX key="times" style={prettyBig}>
-                {i18n.doNotTranslate("\\cdot")}
-            </TeX>,
-            "\\cdot",
-        ];
-    },
-    () => {
-        const {TeX} = getDependencies();
-        return [
-            <TeX key="frac" style={prettyBig}>
-                {i18n.doNotTranslate("\\frac{x}{y}")}
-            </TeX>,
-
-            // If there's something in the input that can become part of a
-            // fraction, typing "/" puts it in the numerator. If not, typing
-            // "/" does nothing. In that case, enter a \frac.
-            (input) => {
-                const contents = input.latex();
-                input.typedText("/");
-                if (input.latex() === contents) {
-                    input.cmd("\\frac");
-                }
-            },
-        ];
-    },
-];
-
-const buttonSets: ButtonSets = {
-    basic,
-
-    "basic+div": basic.concat([
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="div">{i18n.doNotTranslate("\\div")}</TeX>,
-                "\\div",
-            ];
-        },
-    ]),
-
-    trig: [
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>,
-                "\\sin",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>,
-                "\\cos",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>,
-                "\\tan",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="theta" style={symbStyle}>
-                    {i18n.doNotTranslate("\\theta")}
-                </TeX>,
-                "\\theta",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <span key="phi">
-                    {/*NOTE: KaTeX does not render "phi" for screen readers*/}
-                    <span className="perseus-sr-only">
-                        {i18n.doNotTranslate("phi")}
-                    </span>
-                    <TeX key="pi" style={symbStyle}>
-                        {i18n.doNotTranslate("\\phi")}
-                    </TeX>
-                </span>,
-                "\\phi",
-            ];
-        },
-    ],
-
-    prealgebra: [
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="sqrt">{i18n.doNotTranslate("\\sqrt{x}")}</TeX>,
-                "\\sqrt",
-            ];
-        },
-        // TODO(joel) - how does desmos do this?
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="nthroot">{i18n.doNotTranslate("\\sqrt[3]{x}")}</TeX>,
-                (input) => {
-                    input.typedText("nthroot3");
-                    input.keystroke("Right");
-                },
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="pow" style={slightlyBig}>
-                    {i18n.doNotTranslate("a^b")}
-                </TeX>,
-                (input) => {
-                    const contents = input.latex();
-                    input.typedText("^");
-
-                    // If the input hasn't changed (for example, if we're
-                    // attempting to add an exponent on an empty input or an empty
-                    // denominator), insert our own "a^b"
-                    if (input.latex() === contents) {
-                        input.typedText("a^b");
-                    }
-                },
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="pi" style={slightlyBig}>
-                    {i18n.doNotTranslate("\\pi")}
-                </TeX>,
-                "\\pi",
-            ];
-        },
-    ],
-
-    logarithms: [
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>,
-                "\\log",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [<TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>, "\\ln"];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="log_b">{i18n.doNotTranslate("\\log_b")}</TeX>,
-                (input) => {
-                    input.typedText("log_");
-                    input.keystroke("Right");
-                    input.typedText("(");
-                    input.keystroke("Left");
-                    input.keystroke("Left");
-                },
-            ];
-        },
-    ],
-
-    "basic relations": [
-        () => {
-            const {TeX} = getDependencies();
-            return [<TeX key="eq">{"="}</TeX>, "="];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [<TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>, "\\lt"];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [<TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>, "\\gt"];
-        },
-    ],
-
-    "advanced relations": [
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>,
-                "\\neq",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>,
-                "\\leq",
-            ];
-        },
-        () => {
-            const {TeX} = getDependencies();
-            return [
-                <TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>,
-                "\\geq",
-            ];
-        },
-    ],
-};
-
-export type ButtonSetsType = $ReadOnlyArray<$Keys<typeof buttonSets>>;
-
-type TexButtonProps = {|
-    sets: ButtonSetsType,
-    onInsert: (Inserter) => void,
-    className?: string,
-    convertDotToTimes?: boolean,
-|};
-
-const buttonSetsPropType = PropTypes.arrayOf(
-    PropTypes.oneOf(_(buttonSets).keys()),
-);
-
-class TexButtons extends React.Component<TexButtonProps> {
-    static buttonSets: typeof buttonSets = buttonSets;
-    static buttonSetsType: $FlowFixMe = buttonSetsPropType;
-
-    render(): React.Node {
-        // Always show buttonSets in the same order. Note: Technically it's ok
-        // for _.keys() to return the keys in an arbitrary order, but in
-        // practice, they will be ordered as listed above.
-        const sortedButtonSets = _.sortBy(this.props.sets, (setName) =>
-            _.keys(buttonSets).indexOf(setName),
-        );
-
-        const buttons = _(sortedButtonSets).map(
-            (setName) => buttonSets[setName],
-        );
-
-        const buttonRows = _(buttons).map((row) =>
-            row.map((symbGen) => {
-                // create a (component, thing we should send to mathquill) pair
-                const symbol = symbGen(this.props);
-                return (
-                    <button
-                        onClick={() => this.props.onInsert(symbol[1])}
-                        className="tex-button"
-                        key={symbol[0].key}
-                        type="button"
-                    >
-                        {symbol[0]}
-                    </button>
-                );
-            }),
-        );
-
-        const buttonPopup = _(buttonRows).map((row, i) => {
-            return (
-                <div
-                    className="clearfix tex-button-row"
-                    key={this.props.sets[i]}
-                >
-                    {row}
-                </div>
-            );
-        });
-
-        return (
-            <div className={`${this.props.className || ""} preview-measure`}>
-                {buttonPopup}
-            </div>
-        );
-    }
-}
-
-export default TexButtons;

package/src/components/tex.jsx

@@ -1,70 +0,0 @@
-// @flow
-/**
- * Wrapper around the TeX component from react-components-package
- * which adds logic to track whether all pieces of math in an exercise
- * have been loaded.  This tracking is facilitated by the AssetContext.
- */
-import * as React from "react";
-
-import {getDependencies} from "../dependencies.js";
-
-type Props = {|
-    children: string,
-
-    // Pass through prop to TeX from react-components-package.
-    onRender: () => void,
-
-    // If provided, use AssetContext.Consumer, see renderer.jsx.
-    // If not, it defaults to a no-op.
-    setAssetStatus: (assetKey: string, loaded: boolean) => void,
-|};
-
-type State = {|
-    rendered: boolean,
-|};
-
-export default class Tex extends React.Component<Props, State> {
-    _hasRendered: boolean;
-
-    static defaultProps: {|
-        onRender: () => void,
-        setAssetStatus: (src: string, status: boolean) => void,
-    |} = {
-        onRender: () => {},
-        setAssetStatus: (src: string, status: boolean) => {},
-    };
-
-    constructor(props: Props) {
-        super(props);
-        this.props.setAssetStatus(this.props.children, false);
-        this.state = {
-            rendered: false,
-        };
-        this._hasRendered = false;
-    }
-
-    handleRender: () => void = () => {
-        this.props.onRender();
-        this.setState({rendered: true});
-
-        this.props.onRender();
-
-        // We can't use BaseTeX's onRender callback directly b/c it
-        // can fire from BaseTeX's componentDidMount() method and we
-        // need to wait for all of the constructors in the perseus
-        // render tree to first first.
-        if (!this._hasRendered) {
-            this._hasRendered = true;
-            this.props.setAssetStatus(this.props.children, true);
-        }
-    };
-
-    render(): React.Node {
-        const {TeX: BaseTeX} = getDependencies();
-        return (
-            <BaseTeX onRender={this.handleRender}>
-                {this.props.children}
-            </BaseTeX>
-        );
-    }
-}

package/src/components/text-input.jsx

@@ -1,133 +0,0 @@
-/* eslint-disable react/sort-comp */
-// @flow
-import {TextField} from "@khanacademy/wonder-blocks-form";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type Props = {|
-    value: string | number | null,
-    onChange: (any) => void,
-    className?: string,
-    labelText?: string,
-    onFocus?: () => void,
-    onBlur?: () => void,
-    disabled?: boolean,
-    id?: string,
-    placeholder?: string,
-    onKeyDown?: () => void,
-    style?: StyleType,
-|};
-
-type DefaultProps = {|
-    value: Props["value"],
-    disabled: Props["disabled"],
-|};
-
-let lastId = 0;
-function uniqueIdForInput(prefix: string = "input-") {
-    lastId++;
-    return `${prefix}${lastId}`;
-}
-
-class TextInput extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        value: "",
-        disabled: false,
-    };
-
-    id: string;
-
-    constructor(props: Props) {
-        super(props);
-        if (props.id) {
-            this.id = props.id;
-        } else {
-            this.id = uniqueIdForInput();
-        }
-    }
-
-    render(): React.Node {
-        const {
-            labelText,
-            value,
-            onFocus,
-            onBlur,
-            disabled,
-            placeholder,
-            onKeyDown,
-            style,
-        } = this.props;
-
-        const formattedValue = value === null ? "" : value.toString();
-
-        return (
-            // $FlowIgnore
-            <TextField
-                style={style}
-                disabled={disabled}
-                id={this.id}
-                value={formattedValue}
-                type="text"
-                aria-label={labelText}
-                onChange={(value) => this.props.onChange(value)}
-                placeholder={placeholder}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onKeyDown={onKeyDown}
-                autoCorrect="off"
-                autoCapitalize="off"
-                autoComplete="off"
-            />
-        );
-    }
-
-    focus: () => void = () => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        ReactDOM.findDOMNode(this).focus();
-    };
-
-    blur: () => void = () => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        ReactDOM.findDOMNode(this).blur();
-    };
-
-    getValue: () => ?string = () => {
-        // $FlowFixMe[prop-missing]
-        return ReactDOM.findDOMNode(this)?.value;
-    };
-
-    getStringValue: () => ?string = () => {
-        // $FlowFixMe[prop-missing]
-        return ReactDOM.findDOMNode(this)?.value.toString();
-    };
-
-    setSelectionRange: (number, number) => void = (
-        selectionStart,
-        selectionEnd,
-    ) => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        ReactDOM.findDOMNode(this).setSelectionRange(
-            selectionStart,
-            selectionEnd,
-        );
-    };
-
-    getSelectionStart: () => number = () => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        return ReactDOM.findDOMNode(this).selectionStart;
-    };
-
-    getSelectionEnd: () => number = () => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        return ReactDOM.findDOMNode(this).selectionEnd;
-    };
-}
-
-export default TextInput;

package/src/components/text-list-editor.jsx

@@ -1,157 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, react/forbid-prop-types, react/no-unsafe, react/sort-comp */
-// @flow
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-const textWidthCache = {};
-function getTextWidth(text) {
-    if (!textWidthCache[text]) {
-        // Hacky way to guess the width of an input box
-        const $test = $("<span>").text(text).appendTo("body");
-        textWidthCache[text] = $test.width() + 5;
-        $test.remove();
-    }
-    return textWidthCache[text];
-}
-
-class TextListEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
-    static propTypes = {
-        options: PropTypes.array,
-        layout: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
-    };
-
-    static defaultProps: $FlowFixMe = {
-        options: [],
-        layout: "horizontal",
-    };
-
-    state: $FlowFixMe = {
-        items: this.props.options.concat(""),
-    };
-
-    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
-        this.setState({
-            items: nextProps.options.concat(""),
-        });
-    }
-
-    render(): React.Node {
-        const className = [
-            "perseus-text-list-editor",
-            "perseus-clearfix",
-            "layout-" + this.props.layout,
-        ].join(" ");
-
-        const inputs = _.map(
-            this.state.items,
-            function (item, i) {
-                return (
-                    <li key={i}>
-                        <input
-                            ref={"input_" + i}
-                            type="text"
-                            value={item}
-                            // eslint-disable-next-line react/jsx-no-bind
-                            onChange={this.onChange.bind(this, i)}
-                            // eslint-disable-next-line react/jsx-no-bind
-                            onKeyDown={this.onKeyDown.bind(this, i)}
-                            style={{width: getTextWidth(item)}}
-                        />
-                    </li>
-                );
-            },
-            this,
-        );
-
-        return <ul className={className}>{inputs}</ul>;
-    }
-
-    onChange: (number, SyntheticInputEvent<>) => void = (index, event) => {
-        let items = _.clone(this.state.items);
-        items[index] = event.target.value;
-
-        if (index === items.length - 1) {
-            items = items.concat("");
-        }
-
-        this.setState({items: items});
-        this.props.onChange(_.compact(items));
-    };
-
-    onKeyDown: (number, SyntheticKeyboardEvent<>) => void = (index, event) => {
-        const which = event.nativeEvent.keyCode;
-
-        // Backspace deletes an empty input...
-        if (which === 8 /* backspace */ && this.state.items[index] === "") {
-            event.preventDefault();
-
-            const items = _.clone(this.state.items);
-            const focusIndex = index === 0 ? 0 : index - 1;
-
-            if (
-                index === items.length - 1 &&
-                (index === 0 || items[focusIndex] !== "")
-            ) {
-                // ...except for the last one, iff it is the only empty
-                // input at the end.
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
-                ReactDOM.findDOMNode(this.refs["input_" + focusIndex]).focus(); // eslint-disable-line react/no-string-refs
-            } else {
-                items.splice(index, 1);
-                this.setState({items: items}, function () {
-                    ReactDOM.findDOMNode(
-                        // eslint-disable-next-line react/no-string-refs
-                        this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
-                    ).focus();
-                });
-            }
-
-            // Deleting the last character in the second-to-last input
-            // removes it
-        } else if (
-            which === 8 /* backspace */ &&
-            this.state.items[index].length === 1 &&
-            index === this.state.items.length - 2
-        ) {
-            event.preventDefault();
-
-            const items = _.clone(this.state.items);
-            items.splice(index, 1);
-            this.setState({items: items});
-            this.props.onChange(_.compact(items));
-
-            // Enter adds an option below the current one...
-        } else if (which === 13 /* enter */) {
-            event.preventDefault();
-
-            const items = _.clone(this.state.items);
-            const focusIndex = index + 1;
-
-            if (index === items.length - 2) {
-                // ...unless the empty input is just below.
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
-                ReactDOM.findDOMNode(this.refs["input_" + focusIndex]).focus(); // eslint-disable-line react/no-string-refs
-            } else {
-                items.splice(focusIndex, 0, "");
-                this.setState({items: items}, function () {
-                    ReactDOM.findDOMNode(
-                        // eslint-disable-next-line react/no-string-refs
-                        this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
-                    ).focus();
-                });
-            }
-        }
-    };
-}
-
-export default TextListEditor;