[LEMS-2737/default-number-line] number line

packages/perseus-core/src/index.ts

@@ -34,5 +34,7 @@ export {pluck, mapObject} from "./utils/objective_";
 
 export {default as expressionLogic} from "./widgets/expression";
 export type {ExpressionDefaultWidgetOptions} from "./widgets/expression";
+export {default as numberLineLogic} from "./widgets/number-line";
+export type {NumberLineDefaultWidgetOptions} from "./widgets/number-line";
 
 export type * from "./widgets/logic-export.types";

packages/perseus-core/src/widgets/number-line/index.ts

@@ -0,0 +1,44 @@
+import type {PerseusNumberLineWidgetOptions} from "../../data-schema";
+import type {WidgetLogic} from "../logic-export.types";
+
+export type NumberLineDefaultWidgetOptions = Pick<
+    PerseusNumberLineWidgetOptions,
+    | "range"
+    | "labelRange"
+    | "labelStyle"
+    | "labelTicks"
+    | "divisionRange"
+    | "numDivisions"
+    | "snapDivisions"
+    | "tickStep"
+    | "correctRel"
+    | "correctX"
+    | "initialX"
+    | "showTooltip"
+>;
+
+const defaultWidgetOptions: NumberLineDefaultWidgetOptions = {
+    range: [0, 10],
+
+    labelRange: [null, null],
+    labelStyle: "decimal",
+    labelTicks: true,
+
+    divisionRange: [1, 12],
+    numDivisions: 5,
+    snapDivisions: 2,
+
+    tickStep: null,
+    correctRel: "eq",
+    correctX: null,
+    initialX: null,
+
+    showTooltip: false,
+};
+
+const numberLineWidgetLogic: WidgetLogic = {
+    name: "number-line",
+    defaultWidgetOptions,
+};
+
+export default numberLineWidgetLogic;

packages/perseus-editor/src/widgets/number-line-editor.tsx

@@ -1,11 +1,16 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {number as knumber} from "@khanacademy/kmath";
 import {components, EditorJsonify} from "@khanacademy/perseus";
+import {
+    numberLineLogic,
+    type NumberLineDefaultWidgetOptions,
+} from "@khanacademy/perseus-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
+import type {Changeable} from "@khanacademy/perseus";
+
 const {ButtonGroup, InfoTip, NumberInput, RangeInput} = components;
 
 type Range = [number, number];
@@ -15,52 +20,32 @@ const bound = (x: number, gt: number, lt: number): number =>
 
 const EN_DASH = "\u2013";
 
-type Props = any;
-
-class NumberLineEditor extends React.Component<Props> {
-    static propTypes = {
-        range: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-        labelRange: PropTypes.arrayOf(PropTypes.number).isRequired,
-        labelStyle: PropTypes.string.isRequired,
-        labelTicks: PropTypes.bool,
+type Props = {
+    range: number[];
 
-        divisionRange: PropTypes.arrayOf(PropTypes.number).isRequired,
-        numDivisions: PropTypes.number.isRequired,
-        snapDivisions: PropTypes.number,
+    labelRange: ReadonlyArray<number>;
+    labelStyle: string;
+    labelTicks: boolean;
 
-        tickStep: PropTypes.number,
-        correctRel: PropTypes.oneOf(["lt", "gt", "le", "ge", "eq"]),
-        correctX: PropTypes.number,
-        initialX: PropTypes.number,
-        isTickCtrl: PropTypes.bool,
+    divisionRange: ReadonlyArray<number>;
+    numDivisions: number;
+    snapDivisions: number;
 
-        onChange: PropTypes.func.isRequired,
+    tickStep: number;
+    correctRel: "lt" | "gt" | "le" | "ge" | "eq";
+    correctX: number;
+    initialX: number;
+    isTickCtrl?: boolean;
 
-        static: PropTypes.bool,
-        showTooltips: PropTypes.bool,
-    };
+    static?: boolean;
+    showTooltip: boolean;
+} & Changeable.ChangeableProps;
 
+class NumberLineEditor extends React.Component<Props> {
     static widgetName = "number-line" as const;
 
-    static defaultProps: Props = {
-        range: [0, 10],
-
-        labelRange: [null, null],
-        labelStyle: "decimal",
-        labelTicks: true,
-
-        divisionRange: [1, 12],
-        numDivisions: 5,
-        snapDivisions: 2,
-
-        tickStep: null,
-        correctRel: "eq",
-        correctX: null,
-        initialX: null,
-
-        showTooltips: false,
-    };
+    static defaultProps: NumberLineDefaultWidgetOptions =
+        numberLineLogic.defaultWidgetOptions;
 
     onRangeChange: (arg1: Range) => void = (range) => {
         // Changing the range constrains the initial position, as well as the
@@ -389,9 +374,9 @@ class NumberLineEditor extends React.Component<Props> {
                     {!this.props.static && (
                         <Checkbox
                             label="Show tooltips"
-                            checked={this.props.showTooltips}
+                            checked={this.props.showTooltip}
                             onChange={(value) => {
-                                this.props.onChange({showTooltips: value});
+                                this.props.onChange({showTooltip: value});
                             }}
                         />
                     )}