diff --git a/packages/perseus-editor/src/components/widget-editor.tsx b/packages/perseus-editor/src/components/widget-editor.tsx index 5c4afc53ff..44f9822076 100644 --- a/packages/perseus-editor/src/components/widget-editor.tsx +++ b/packages/perseus-editor/src/components/widget-editor.tsx @@ -173,7 +173,10 @@ class WidgetEditor extends React.Component< href="#" onClick={this._toggleWidget} > - {this.props.id} + {this.props.id}{" "} + {this.props.id.split(" ")[0] === "input-number" + ? " (deprecated)" + : ""} {this.state.showWidget ? ( ) : ( diff --git a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx index aca3deb184..6723c6e6c4 100644 --- a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx +++ b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx @@ -121,8 +121,55 @@ class NumericInputEditor extends React.Component { lastStatus: "wrong", showOptions: _.map(this.props.answers, () => false), }; + const upgradedProps = this.propsUpgrade(this.props); // quickhack for input number + this.props.onChange({props, ...upgradedProps}); // upgrade the props } + // Temporary function to upgrade props from the deprecated + // InputNumber widget to the new NumericInput widget. This can be removed + // once the deprecated InputNumber widget is removed from our content. This should + // happen naturally as Content Editors re-save and publish their content. + // SIDE NOTE: Ooo interesting, I wonder if we could build a script to auto re-publish all content somehow. + propsUpgrade = (initialProps: any): PerseusNumericInputWidgetOptions => { + console.log(initialProps); + if (initialProps.value) { + console.log("Upgrading props for input-number"); + let provideAnswerForm = true; + if ( + initialProps.value !== "number" && + initialProps.value !== "rational" + ) { + provideAnswerForm = false; + } + + const answers = [ + { + value: initialProps.value, + simplify: initialProps.simplify, + answerForms: provideAnswerForm + ? [initialProps.answerType] + : undefined, + strict: initialProps.inexact, + maxError: initialProps.maxError, + status: "correct", // Input-number only allows correct answers + message: "", + }, + ]; + + return { + answers, + size: initialProps.size, + coefficient: false, // input-number doesn't have a coefficient prop + labelText: "", // input-number doesn't have a labelText prop + static: false, // static is always false for numeric-input + }; + } else { + // Otherwise simply return the initialProps as there's no differences + // between v0 and v1 for numeric-input + return initialProps; + } + }; + change = (...args) => { return Changeable.change.apply(this, args); }; diff --git a/packages/perseus/src/widgets.ts b/packages/perseus/src/widgets.ts index 77a8f4ce97..c807001aef 100644 --- a/packages/perseus/src/widgets.ts +++ b/packages/perseus/src/widgets.ts @@ -118,6 +118,8 @@ export const replaceDeprecatedEditors = () => { replaceEditor("sequence", "deprecated-standin"); replaceEditor("simulator", "deprecated-standin"); replaceEditor("unit-input", "deprecated-standin"); + + replaceEditor("input-number", "numeric-input"); }; export const getWidget = (