@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/reaction-diagram.jsx

@@ -0,0 +1,137 @@
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import {Molecule} from "./molecule.jsx";
+
+import type {WidgetExports} from "../types.js";
+
+class Separator extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        // TODO(colin): figure out and add shape.
+        data: PropTypes.any,
+        index: PropTypes.number,
+    };
+
+    componentDidMount() {
+        this.drawArrow();
+    }
+
+    componentDidUpdate() {
+        this.drawArrow();
+    }
+
+    arrowLength: number = 100;
+
+    drawArrow = () => {
+        // eslint-disable-next-line react/no-string-refs
+        const canvas = this.refs["arrowCanvas" + this.props.index];
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const path = new Path2D();
+        ctx.strokeStyle = "rgb(0,0,0)";
+        ctx.lineWidth = 1.2;
+        ctx.lineCap = "round";
+        const offset = 5;
+        path.moveTo(offset, canvas.height / 2);
+        path.lineTo(canvas.width - offset, canvas.height / 2);
+        path.moveTo(canvas.width - 2 * offset, canvas.height / 2 - offset);
+        path.lineTo(canvas.width - offset, canvas.height / 2);
+        path.moveTo(canvas.width - 2 * offset, canvas.height / 2 + offset);
+        path.lineTo(canvas.width - offset, canvas.height / 2);
+        ctx.stroke(path);
+    };
+
+    render(): React.Node {
+        return (
+            <div className="arrow-container">
+                <div className="above-text">{this.props.data.topText}</div>
+                <canvas
+                    height="30"
+                    id={"arrowCanvas" + this.props.index}
+                    ref={"arrowCanvas" + this.props.index}
+                    width={this.arrowLength}
+                >
+                    {i18n._("Reaction arrow pointing to the right.")}
+                </canvas>
+                <div className="below-text">{this.props.data.bottomText}</div>
+            </div>
+        );
+    }
+}
+
+class ReactionDiagramWidget extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        // TODO(colin): at the moment, these must be arrays of two elements;
+        // we're limited to a single reaction step.  At some point, add support
+        // for more steps in the reaction.
+        rotationAngle: PropTypes.arrayOf(PropTypes.number),
+        // eslint-disable-next-line react/forbid-prop-types
+        separators: PropTypes.arrayOf(PropTypes.object),
+        smiles: PropTypes.arrayOf(PropTypes.string),
+        widgetId: PropTypes.string,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        smiles: [],
+        rotationAngle: [],
+        separators: [],
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = () => {
+        return {type: "points", earned: 0, total: 0, message: null};
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        return [];
+    };
+
+    validate: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (state, rubric) => {
+        // TODO(colin): this appears to be part of the perseus interface.
+        // Figure out if there's a more appropriate value to return.
+        return {
+            type: "points",
+            earned: 0,
+            total: 0,
+            message: null,
+        };
+    };
+
+    focus: () => boolean = () => {
+        return true;
+    };
+
+    render(): React.Node {
+        return (
+            // eslint-disable-next-line react/no-string-refs
+            <div className="reaction" ref="reaction">
+                {this.props.smiles.map((s, i) => {
+                    const id = this.props.widgetId + "-" + i;
+                    return (
+                        <div key={id} className="molecule-container">
+                            <Molecule
+                                id={id}
+                                rotationAngle={this.props.rotationAngle[i]}
+                                smiles={s}
+                            />
+                            {i === this.props.smiles.length - 1 ? null : (
+                                <Separator
+                                    data={this.props.separators[i]}
+                                    index={i}
+                                />
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+export default ({
+    name: "reaction-diagram",
+    displayName: "Chemical reaction",
+    hidden: true,
+    widget: ReactionDiagramWidget,
+}: WidgetExports<typeof ReactionDiagramWidget>);

package/src/widgets/sequence.jsx

@@ -0,0 +1,140 @@
+// @flow
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import InlineIcon from "../components/inline-icon.jsx";
+import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
+import {iconOk} from "../icon-paths.js";
+import * as Changeable from "../mixins/changeable.jsx";
+import {ApiOptions} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+import Util from "../util.js";
+
+import type {WidgetExports} from "../types.js";
+
+class Sequence extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        apiOptions: ApiOptions.propTypes,
+        json: PropTypes.arrayOf(
+            PropTypes.shape({
+                content: PropTypes.string,
+                images: PropTypes.objectOf(PropTypes.any),
+                widgets: PropTypes.objectOf(PropTypes.any),
+            }),
+        ),
+        trackInteraction: PropTypes.func.isRequired,
+        linterContext: linterContextProps,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        json: [
+            {
+                content: "",
+                widgets: {},
+                images: {},
+            },
+        ],
+        linterContext: linterContextDefault,
+    };
+
+    state: $FlowFixMe = {
+        visible: 1,
+    };
+
+    shouldComponentUpdate(
+        nextProps: $FlowFixMe,
+        nextState: $FlowFixMe,
+    ): boolean {
+        return nextProps !== this.props || nextState !== this.state;
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    _handleInteraction: (string) => void = (groupWidgetId) => {
+        const step = parseInt(groupWidgetId.split(" ")[1]);
+        if (step === this.state.visible - 1) {
+            // eslint-disable-next-line react/no-string-refs
+            const widget = this.refs.renderer.getWidgetInstance(
+                "group " + step,
+            );
+
+            widget.showRationalesForCurrentlySelectedChoices();
+            const score = widget.simpleValidate();
+
+            if (score.type === "points" && score.total === score.earned) {
+                this.setState({
+                    visible: this.state.visible + 1,
+                });
+                this.props.trackInteraction({
+                    visible: this.state.visible + 1,
+                });
+            }
+        }
+    };
+
+    render(): React.Node {
+        const icon = <InlineIcon {...iconOk} style={{color: "green"}} />;
+
+        const content = _.chain(this.props.json)
+            .first(this.state.visible)
+            .map((step, i) => `[[${Util.snowman} group ${i}]]`)
+            .join("\n\n")
+            .value();
+
+        const widgets = {};
+        _.each(this.props.json, (step, i) => {
+            const widgetId = `group ${i}`;
+            widgets[widgetId] = {
+                type: "group",
+                graded: true,
+                version: {major: 0, minor: 0},
+                options: _.extend({}, step, {
+                    icon: i < this.state.visible - 1 ? icon : null,
+                }),
+            };
+        });
+
+        return (
+            <div className="perseus-sequence">
+                <Renderer
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="renderer"
+                    content={content}
+                    widgets={widgets}
+                    onInteractWithWidget={this._handleInteraction}
+                    apiOptions={this.props.apiOptions}
+                    linterContext={this.props.linterContext}
+                />
+            </div>
+        );
+    }
+}
+
+const traverseChildWidgets = function (
+    props: $FlowFixMe,
+    traverseRenderer: $FlowFixMe,
+): $FlowFixMe {
+    let oldJson = props.json;
+    if (!_.isArray(oldJson)) {
+        oldJson = [oldJson];
+    }
+    const json = _.map(oldJson, (rendererOptions) => {
+        return traverseRenderer(rendererOptions);
+    });
+
+    return _.extend({}, props, {json: json});
+};
+
+export default ({
+    name: "sequence",
+    displayName: "Graded Sequence",
+    widget: Sequence,
+    traverseChildWidgets: traverseChildWidgets,
+    tracking: "all",
+    hidden: true,
+    isLintable: true,
+}: WidgetExports<typeof Sequence>);