@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/inline-icon.jsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/forbid-prop-types */
+// @flow
+/**
+ * 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 = ({
+    path,
+    width,
+    height,
+    style = {},
+    title,
+}: InlineIconProps): React.Element<"svg"> => (
+    <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.jsx

@@ -0,0 +1,231 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Gorgon from "../gorgon/gorgon.js";
+import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
+import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+import Util from "../util.js";
+
+import MathInput from "./math-input.jsx";
+import MathOutput from "./math-output.jsx";
+import TextInput from "./text-input.jsx";
+import Tooltip from "./tooltip.jsx";
+
+const {captureScratchpadTouchStart} = Util;
+const MATH = "math";
+const TEXT = "text";
+const TEX = "tex";
+
+class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        type: PropTypes.oneOf([MATH, TEXT, TEX]),
+        value: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+        className: PropTypes.string,
+        examples: PropTypes.arrayOf(PropTypes.string).isRequired,
+        shouldShowExamples: PropTypes.bool,
+        convertDotToTimes: PropTypes.bool,
+        buttonSet: PropTypes.string,
+        buttonsVisible: PropTypes.oneOf(["always", "never", "focused"]),
+        labelText: PropTypes.string,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func,
+        disabled: PropTypes.bool,
+
+        // A unique string identifying this InputWithExamples
+        id: PropTypes.string.isRequired,
+        linterContext: linterContextProps,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        type: TEXT,
+        shouldShowExamples: true,
+        onFocus: function () {},
+        onBlur: function () {},
+        disabled: false,
+        linterContext: linterContextDefault,
+    };
+
+    state: $FlowFixMe = {
+        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: () => $FlowFixMe = () => {
+        // Minimal set of props, used by each input type
+        const inputProps = {
+            "aria-describedby": this._getUniqueId(),
+            ref: "input",
+            className: this._getInputClassName(),
+            labelText: this.props.labelText,
+            value: this.props.value,
+            onFocus: this._handleFocus,
+            onBlur: this._handleBlur,
+            disabled: this.props.disabled,
+        };
+
+        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: () => $FlowFixMe = () => {
+        switch (this.props.type) {
+            case TEX:
+                return MathOutput;
+
+            case MATH:
+                return MathInput;
+
+            case TEXT:
+                return TextInput;
+
+            default:
+                return null;
+        }
+    };
+
+    _renderInput: () => $FlowFixMe = () => {
+        const inputProps = this._getPropsForInputType();
+        const InputComponent = this._getComponentForInputType();
+        return <InputComponent {...inputProps} />;
+    };
+
+    render(): React.Node {
+        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={Gorgon.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
+        this.refs.input.focus();
+    };
+
+    blur: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.input.blur();
+    };
+
+    handleChange: ($FlowFixMe) => void = (e) => {
+        this.props.onChange(e.target.value);
+    };
+}
+
+export default InputWithExamples;