diff --git a/.changeset/yellow-baboons-fly.md b/.changeset/yellow-baboons-fly.md new file mode 100644 index 0000000000..7593f0e7e8 --- /dev/null +++ b/.changeset/yellow-baboons-fly.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus-core": minor +"@khanacademy/perseus-editor": patch +--- + +Move upgrade logic for NumberLine to Perseus Core diff --git a/packages/perseus-core/src/data-schema.ts b/packages/perseus-core/src/data-schema.ts index d802e8e8e7..d60e3af3ca 100644 --- a/packages/perseus-core/src/data-schema.ts +++ b/packages/perseus-core/src/data-schema.ts @@ -1253,7 +1253,7 @@ export type PerseusNumberLineWidgetOptions = { // This controls the initial position of the point along the number line initialX: number | null | undefined; // Show tooltips - showTooltip?: boolean; + showTooltips?: boolean; // When true, the answer is displayed and is immutable static: boolean; }; diff --git a/packages/perseus-core/src/index.ts b/packages/perseus-core/src/index.ts index a0be2cd615..3bc3850526 100644 --- a/packages/perseus-core/src/index.ts +++ b/packages/perseus-core/src/index.ts @@ -66,6 +66,8 @@ export {default as matrixLogic} from "./widgets/matrix"; export type {MatrixDefaultWidgetOptions} from "./widgets/matrix"; export {default as measurerLogic} from "./widgets/measurer"; export type {MeasurerDefaultWidgetOptions} from "./widgets/measurer"; +export {default as numberLineLogic} from "./widgets/number-line"; +export type {NumberLineDefaultWidgetOptions} from "./widgets/number-line"; export {default as numericInputLogic} from "./widgets/numeric-input"; export type {NumericInputDefaultWidgetOptions} from "./widgets/numeric-input"; export {default as ordererLogic} from "./widgets/orderer"; diff --git a/packages/perseus-core/src/widgets/number-line/index.ts b/packages/perseus-core/src/widgets/number-line/index.ts new file mode 100644 index 0000000000..3f6f89f8d2 --- /dev/null +++ b/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" + | "showTooltips" +>; + +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, + + showTooltips: false, +}; + +const numberLineWidgetLogic: WidgetLogic = { + name: "number-line", + defaultWidgetOptions, +}; + +export default numberLineWidgetLogic; diff --git a/packages/perseus-editor/src/widgets/number-line-editor.tsx b/packages/perseus-editor/src/widgets/number-line-editor.tsx index b8575da54f..cf0679a08c 100644 --- a/packages/perseus-editor/src/widgets/number-line-editor.tsx +++ b/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 { - 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; + 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; + 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; + showTooltips: boolean; +} & Changeable.ChangeableProps; +class NumberLineEditor extends React.Component { 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 diff --git a/packages/perseus/src/util/parse-perseus-json/perseus-parsers/number-line-widget.ts b/packages/perseus/src/util/parse-perseus-json/perseus-parsers/number-line-widget.ts index 74cab33860..e7feec362b 100644 --- a/packages/perseus/src/util/parse-perseus-json/perseus-parsers/number-line-widget.ts +++ b/packages/perseus/src/util/parse-perseus-json/perseus-parsers/number-line-widget.ts @@ -40,7 +40,7 @@ export const parseNumberLineWidget: Parser = parseWidget( correctRel: optional(nullable(string)), correctX: nullable(number), initialX: optional(nullable(number)), - showTooltip: optional(boolean), + showTooltips: optional(boolean), static: defaulted(boolean, () => false), }), ); diff --git a/packages/perseus/src/widgets/number-line/number-line.testdata.ts b/packages/perseus/src/widgets/number-line/number-line.testdata.ts index ffb26fd16f..821260096d 100644 --- a/packages/perseus/src/widgets/number-line/number-line.testdata.ts +++ b/packages/perseus/src/widgets/number-line/number-line.testdata.ts @@ -52,7 +52,7 @@ export const question2: PerseusRenderer = { correctRel: "eq", correctX: 0.5, initialX: null, - showTooltip: false, + showTooltips: false, isTickCtrl: true, }, },