extract sub-components from interaction-editor (#904)

* extract point editor

* extract line editor

* extract movable-point-editor

* extract movable-line-editor

* extract function editor

* extract parametric-editor

* extract label-editor

* extract last sub component

* changeset

.changeset/swift-pets-hammer.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Restructure interaction-editor subcomponents

packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx

@@ -0,0 +1,111 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type FunctionEditorProps = any;
+
+//
+// Editor for function plots
+//
+// TODO(eater): Factor this out
+//
+class FunctionEditor extends React.Component<FunctionEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        value: PropTypes.string,
+        rangeMin: PropTypes.string,
+        rangeMax: PropTypes.string,
+        color: PropTypes.string,
+        strokeDashArray: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static defaultProps = {
+        value: "x",
+        rangeMin: "-10",
+        rangeMax: "10",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.value}
+                        onChange={this.change("value")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default FunctionEditor;

packages/perseus-editor/src/widgets/interaction-editor/index.ts

@@ -0,0 +1,3 @@
+import InteractionEditor from "./interaction-editor";
+
+export default InteractionEditor;