@khanacademy/perseus-editor 2.14.2 → 2.15.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/perseus-editor
 
+## 2.15.1
+
+### Patch Changes
+
+-   Updated dependencies [[`b7777865`](https://github.com/Khan/perseus/commit/b777786517afc289e92201e3fea876c30c493290)]:
+    -   @khanacademy/perseus@17.3.1
+
+## 2.15.0
+
+### Minor Changes
+
+-   [#867](https://github.com/Khan/perseus/pull/867) [`378294da`](https://github.com/Khan/perseus/commit/378294da3d207839a861333175920b562773ee97) Thanks [@nedredmond](https://github.com/nedredmond)! - Add financial calculators to Item Extras
+
+### Patch Changes
+
+-   [#869](https://github.com/Khan/perseus/pull/869) [`57eeec68`](https://github.com/Khan/perseus/commit/57eeec681072591c64b633527833f3ab9f6e3f1a) Thanks [@nedredmond](https://github.com/nedredmond)! - Remove new unused field from PerseusAnswerArea API
+
+-   Updated dependencies [[`57eeec68`](https://github.com/Khan/perseus/commit/57eeec681072591c64b633527833f3ab9f6e3f1a), [`378294da`](https://github.com/Khan/perseus/commit/378294da3d207839a861333175920b562773ee97)]:
+    -   @khanacademy/perseus@17.3.0
+
 ## 2.14.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -24,7 +24,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.14.2";
+const libVersion = "2.15.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23839,32 +23839,90 @@ const {
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.state = {
+      financialCalculatorOptionsExpanded: false
+    };
     this.serialize = () => {
-      return {
-        calculator: this.props.calculator,
-        chi2Table: this.props.chi2Table,
-        periodicTable: this.props.periodicTable,
-        periodicTableWithKey: this.props.periodicTableWithKey,
-        tTable: this.props.tTable,
-        zTable: this.props.zTable
-      };
+      const data = _extends({}, ItemExtrasEditor.defaultProps);
+      for (const key of ItemExtras) {
+        data[key] = !!this.props[key];
+      }
+      return data;
     };
   }
+  componentDidUpdate(prevProps) {
+    // If no financial calculator options are checked, uncheck the
+    // financial calculator option.
+    if (this.state.financialCalculatorOptionsExpanded && !this.props.financialCalculatorMonthlyPayment && !this.props.financialCalculatorTotalAmount && !this.props.financialCalculatorTimeToPayOff) {
+      this.setState({
+        financialCalculatorOptionsExpanded: false
+      });
+    }
+  }
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-answer-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-answer-options"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Show calculator:", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    }, /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show calculator:",
+      infoTip: "Use the calculator when completing difficult calculations is NOT the intent of the question. DON\u2019T use the calculator when testing the student\u2019s ability to complete different types of computations.",
       checked: this.props.calculator,
       onChange: e => {
         this.props.onChange({
           calculator: e.target.checked
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "Use the calculator when completing difficult calculations is NOT the intent of the question. DON\u2019T use the calculator when testing the student\u2019s ability to complete different types of computations.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Show periodic table:", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show financial calculator:",
+      infoTip: "This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",
+      checked: this.state.financialCalculatorOptionsExpanded,
+      onChange: e => {
+        this.setState({
+          financialCalculatorOptionsExpanded: e.target.checked
+        });
+        // If the financial calculator is unchecked,
+        // this needs to be reset. All checked by
+        // default.
+        this.props.onChange({
+          financialCalculatorMonthlyPayment: e.target.checked,
+          financialCalculatorTotalAmount: e.target.checked,
+          financialCalculatorTimeToPayOff: e.target.checked
+        });
+      }
+    }), this.state.financialCalculatorOptionsExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Include monthly payment:",
+      infoTip: "This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",
+      checked: this.props.financialCalculatorMonthlyPayment,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorMonthlyPayment: e.target.checked
+        });
+      },
+      indent: true
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Include total amount:",
+      infoTip: "This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",
+      checked: this.props.financialCalculatorTotalAmount,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorTotalAmount: e.target.checked
+        });
+      },
+      indent: true
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Include time-to-pay-off:",
+      infoTip: "This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",
+      checked: this.props.financialCalculatorTimeToPayOff,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorTimeToPayOff: e.target.checked
+        });
+      },
+      indent: true
+    })), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show periodic table:",
+      infoTip: "This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",
       checked: this.props.periodicTable,
       onChange: e => {
         this.props.onChange({
@@ -23875,49 +23933,66 @@ class ItemExtrasEditor extends React.Component {
           periodicTableWithKey: false
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.")), this.props.periodicTable && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Include key/legend with periodic table:", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    }), this.props.periodicTable && /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Include key/legend with periodic table:",
+      infoTip: "Include a key for HS courses; omit for AP chemistry.",
       checked: this.props.periodicTableWithKey,
       onChange: e => {
         this.props.onChange({
           periodicTableWithKey: e.target.checked
         });
-      }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "Include a key for HS courses, omit for AP chemistry.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Show z table (statistics):", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+      },
+      indent: true
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show z table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.",
       checked: this.props.zTable,
       onChange: e => {
         this.props.onChange({
           zTable: e.target.checked
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Show t table (statistics):", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show t table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.",
       checked: this.props.tTable,
       onChange: e => {
         this.props.onChange({
           tTable: e.target.checked
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Show chi-squared table (statistics):", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
+      label: "Show chi-squared table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions.",
       checked: this.props.chi2Table,
       onChange: e => {
         this.props.onChange({
           chi2Table: e.target.checked
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions."))));
+    })));
   }
 }
 ItemExtrasEditor.defaultProps = {
   calculator: false,
   chi2Table: false,
+  financialCalculatorMonthlyPayment: false,
+  financialCalculatorTotalAmount: false,
+  financialCalculatorTimeToPayOff: false,
   periodicTable: false,
   periodicTableWithKey: false,
   tTable: false,
   zTable: false
 };
+const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
+  style: {
+    marginLeft: props.indent ? "10px" : "0px"
+  }
+}, /*#__PURE__*/React.createElement("label", null, props.label, /*#__PURE__*/React.createElement("input", {
+  type: "checkbox",
+  checked: props.checked,
+  onChange: props.onChange
+})), /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {