@khanacademy/perseus 3.0.0 → 4.0.0

package/src/components/inline-icon.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react/forbid-prop-types */
+/**
+ * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
+ * inline like Font Awesome did.
+ *
+ * If you are looking for an icon that we've used before you should look in
+ * webapp's `icon-paths.js` which is a reference file for all the SVG paths
+ * that we've used. You'll need to copy the object from that file into
+ * whichever file you're using the icon and explicitly pass it in to the
+ * <InlineIcon/> React component.
+ *
+ * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
+ * be defined differently. At some point we might want to add these attributes
+ * to `icon-paths.js`, but for now this is a fairly safe assumption.
+ *
+ * Sample usage:
+ *
+ *   const editIcon = {
+ *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
+ *      width: 100,
+ *      height: 78.912,
+ *   };
+ *   <InlineIcon {...editIcon} />
+ *
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const InlineIcon: React.FC<InlineIconProps> = ({
+    path,
+    width,
+    height,
+    style = {},
+    title,
+}): React.ReactElement => (
+    <svg
+        role="img"
+        aria-hidden={!title}
+        style={{verticalAlign: "middle", ...style}}
+        width={`${width / height}em`}
+        height="1em"
+        viewBox={`0 0 ${width} ${height}`}
+    >
+        {!!title && <title>{title}</title>}
+        <path d={path} fill="currentColor" />
+    </svg>
+);
+
+InlineIcon.propTypes = {
+    // An SVG path to render.
+    path: PropTypes.string.isRequired,
+
+    // The path's viewBox dimensions.
+    // We set the viewport height to 1em and scale the width accordingly.
+    height: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+
+    style: PropTypes.object,
+
+    // A11y description for this icon. If absent, icon is marked
+    // aria-hidden=true
+    title: PropTypes.string,
+};
+export type InlineIconProps = {
+    // An SVG path to render.
+    path: string;
+    // The path's viewBox dimensions.
+    // We set the viewport height to 1em and scale the width accordingly.
+    height: number;
+    width: number;
+    style?: any;
+    // A11y description for this icon. If absent, icon is marked
+    // aria-hidden=true
+    title?: string;
+};
+
+export default InlineIcon;

package/src/components/input-with-examples.tsx

@@ -0,0 +1,249 @@
+/* eslint-disable react/sort-comp */
+import * as PerseusLinter from "@khanacademy/perseus-linter";
+import * as React from "react";
+import _ from "underscore";
+
+import {ClassNames as ApiClassNames} from "../perseus-api";
+import Renderer from "../renderer";
+import Util from "../util";
+
+import MathInput from "./math-input";
+import MathOutput from "./math-output";
+import TextInput from "./text-input";
+import Tooltip from "./tooltip";
+
+import type {LinterContextProps} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+const {captureScratchpadTouchStart} = Util;
+
+type Props = {
+    type: "math" | "text" | "tex";
+    value: string;
+    onChange: any;
+    className: string;
+    examples: ReadonlyArray<string>;
+    shouldShowExamples: boolean;
+    convertDotToTimes?: boolean;
+    buttonSet?: string;
+    buttonsVisible?: "always" | "never" | "focused";
+    labelText?: string;
+    onFocus: () => void;
+    onBlur: () => void;
+    disabled: boolean;
+    style?: StyleType;
+    id: string;
+    linterContext: LinterContextProps;
+};
+
+type DefaultProps = {
+    type: Props["type"];
+    shouldShowExamples: Props["shouldShowExamples"];
+    onFocus: Props["onFocus"];
+    onBlur: Props["onBlur"];
+    disabled: Props["disabled"];
+    linterContext: Props["linterContext"];
+    className: Props["className"];
+};
+
+type State = {
+    focused: boolean;
+    showExamples: boolean;
+};
+
+class InputWithExamples extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        type: "text",
+        shouldShowExamples: true,
+        onFocus: function () {},
+        onBlur: function () {},
+        disabled: false,
+        linterContext: PerseusLinter.linterContextDefault,
+        className: "",
+    };
+
+    state: State = {
+        focused: false,
+        showExamples: false,
+    };
+
+    _getUniqueId: () => string = () => {
+        return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
+    };
+
+    _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) {
+            className += " " + ApiClassNames.FOCUSED;
+        }
+        if (this.props.className) {
+            className += " " + this.props.className;
+        }
+        return className;
+    };
+
+    _getPropsForInputType: () => any = () => {
+        // Minimal set of props, used by each input type
+        const id = this._getUniqueId();
+        const inputProps = {
+            id: id,
+            "aria-describedby": id,
+            ref: "input",
+            className: this._getInputClassName(),
+            labelText: this.props.labelText,
+            value: this.props.value,
+            onFocus: this._handleFocus,
+            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} />;
+    };
+
+    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");
+
+        const showExamples =
+            this.props.shouldShowExamples && this.state.showExamples;
+
+        return (
+            <Tooltip
+                // eslint-disable-next-line react/no-string-refs
+                ref="tooltip"
+                className="perseus-formats-tooltip preview-measure"
+                horizontalPosition="left"
+                horizontalAlign="left"
+                verticalPosition="bottom"
+                arrowSize={10}
+                borderColor="#ccc"
+                show={showExamples}
+            >
+                {input}
+                <div id={this._getUniqueId()}>
+                    <Renderer
+                        content={examplesContent}
+                        linterContext={PerseusLinter.pushContextStack(
+                            this.props.linterContext,
+                            "input-with-examples",
+                        )}
+                    />
+                </div>
+            </Tooltip>
+        );
+    }
+
+    _handleFocus: () => void = () => {
+        this.props.onFocus();
+        this.setState({
+            focused: true,
+            showExamples: true,
+        });
+    };
+
+    show: () => void = () => {
+        this.setState({showExamples: true});
+    };
+
+    hide: () => void = () => {
+        this.setState({showExamples: false});
+    };
+
+    _handleBlur: () => void = () => {
+        this.props.onBlur();
+        this.setState({
+            focused: false,
+            showExamples: false,
+        });
+    };
+
+    focus: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        this.refs.input.focus();
+    };
+
+    blur: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
+        this.refs.input.blur();
+    };
+
+    handleChange: (arg1: any) => void = (e) => {
+        this.props.onChange(e.target.value);
+    };
+}
+
+export default InputWithExamples;