@khanacademy/perseus-editor 4.3.1 → 4.3.3

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "4.3.1";
+const libVersion = "4.3.3";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23769,13 +23769,21 @@ class ItemExtrasEditor extends React__namespace.Component {
     tTable: false,
     zTable: false
   };
+  finCalcOptions = [];
   state = {
     financialCalculatorOptionsExpanded: false
   };
-  componentDidUpdate(prevProps) {
+  constructor(props) {
+    super(props);
+    this.finCalcOptions = [props.financialCalculatorMonthlyPayment, props.financialCalculatorTotalAmount, props.financialCalculatorTimeToPayOff];
+    this.state = {
+      financialCalculatorOptionsExpanded: this.finCalcOptions.some(opt => opt === true)
+    };
+  }
+  componentDidUpdate() {
     // 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) {
+    if (this.state.financialCalculatorOptionsExpanded && !this.finCalcOptions.some(option => option === true)) {
       this.setState({
         financialCalculatorOptionsExpanded: false
       });
@@ -23813,7 +23821,7 @@ class ItemExtrasEditor extends React__namespace.Component {
           financialCalculatorOptionsExpanded: e.target.checked
         });
         // If the financial calculator is unchecked,
-        // this needs to be reset. All checked by
+        // these need to be reset. All checked by
         // default.
         this.props.onChange({
           financialCalculatorMonthlyPayment: e.target.checked,
@@ -29599,93 +29607,78 @@ const defaultBackgroundImage$1 = {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const InteractiveGraphSettings = createReactClass__default["default"]({
-  displayName: "InteractiveGraphSettings",
-  propTypes: {
-    ...perseus.Changeable.propTypes,
-    editableSettings: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(["canvas", "graph", "snap", "image", "measure"])),
-    box: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    labels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    range: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)),
-    step: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    gridStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    snapStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    valid: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].string]),
-    backgroundImage: PropTypes__default["default"].object,
-    markings: PropTypes__default["default"].oneOf(["graph", "grid", "none"]),
-    showProtractor: PropTypes__default["default"].bool,
-    showRuler: PropTypes__default["default"].bool,
-    showTooltips: PropTypes__default["default"].bool,
-    rulerLabel: PropTypes__default["default"].string,
-    rulerTicks: PropTypes__default["default"].number
-  },
-  getDefaultProps: function () {
+class InteractiveGraphSettings extends React__namespace.Component {
+  _isMounted = false;
+  static stateFromProps(props) {
     return {
-      editableSettings: ["graph", "snap", "image", "measure"],
-      box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      gridStep: [1, 1],
-      snapStep: [1, 1],
-      valid: true,
-      backgroundImage: defaultBackgroundImage$1,
-      markings: "graph",
-      showProtractor: false,
-      showRuler: false,
-      showTooltips: false,
-      rulerLabel: "",
-      rulerTicks: 10
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      rangeTextbox: props.range,
+      backgroundImage: ___default["default"].clone(props.backgroundImage)
     };
-  },
-  getInitialState: function () {
-    return this.stateFromProps(this.props);
-  },
-  componentDidMount: function () {
+  }
+  constructor(props) {
+    super(props);
+    this.state = InteractiveGraphSettings.stateFromProps(props);
+  }
+  static defaultProps = {
+    editableSettings: ["graph", "snap", "image", "measure"],
+    box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    step: [1, 1],
+    gridStep: [1, 1],
+    snapStep: [1, 1],
+    valid: true,
+    backgroundImage: defaultBackgroundImage$1,
+    markings: "graph",
+    showProtractor: false,
+    showRuler: false,
+    showTooltips: false,
+    rulerLabel: "",
+    rulerTicks: 10
+  };
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
     this.changeGraph = ___default["default"].debounce(this.changeGraph, 300);
-  },
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Make sure that state updates when switching
     // between different items in a multi-item editor.
     if (!___default["default"].isEqual(this.props.labels, nextProps.labels) || !___default["default"].isEqual(this.props.gridStep, nextProps.gridStep) || !___default["default"].isEqual(this.props.snapStep, nextProps.snapStep) || !___default["default"].isEqual(this.props.step, nextProps.step) || !___default["default"].isEqual(this.props.range, nextProps.range) || !___default["default"].isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
-      this.setState(this.stateFromProps(nextProps));
+      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
     }
-  },
-  componentWillUnmount: function () {
+  }
+  componentWillUnmount() {
     this._isMounted = false;
-  },
-  stateFromProps: function (props) {
-    return {
-      labelsTextbox: props.labels,
-      gridStepTextbox: props.gridStep,
-      snapStepTextbox: props.snapStep,
-      stepTextbox: props.step,
-      rangeTextbox: props.range,
-      backgroundImage: ___default["default"].clone(props.backgroundImage)
+  }
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
     };
-  },
-  change() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return perseus.Changeable.change.apply(this, args);
-  },
+  })();
+
   // TODO(aria): Make either a wrapper for standard events to work
   // with this.change, or make these use some TextInput/NumberInput box
-  changeRulerLabel: function (e) {
+  changeRulerLabel = e => {
     this.change({
       rulerLabel: e.target.value
     });
-  },
-  changeRulerTicks: function (e) {
+  };
+  changeRulerTicks = e => {
     this.change({
       rulerTicks: +e.target.value
     });
-  },
-  changeBackgroundUrl: function (e) {
+  };
+  changeBackgroundUrl = e => {
     // Only continue on blur or "enter"
     if (e.type === "keypress" && e.key !== "Enter") {
       return;
@@ -29711,15 +29704,15 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
     } else {
       setUrl(null, 0, 0);
     }
-  },
-  renderLabelChoices: function (choices) {
+  };
+  renderLabelChoices = choices => {
     return ___default["default"].map(choices, function (nameAndValue) {
       return /*#__PURE__*/React__namespace.createElement("option", {
         value: nameAndValue[1]
       }, nameAndValue[0]);
     });
-  },
-  validRange: function (range) {
+  };
+  validRange = range => {
     const numbers = ___default["default"].every(range, function (num) {
       return ___default["default"].isFinite(num);
     });
@@ -29730,8 +29723,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       return "Range must have a higher number on the right";
     }
     return true;
-  },
-  validateStepValue: function (settings) {
+  };
+  validateStepValue = settings => {
     const {
       step,
       range,
@@ -29750,8 +29743,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       return name + " is too small, there can be at most " + maxTicks + " ticks.";
     }
     return true;
-  },
-  validSnapStep: function (step, range) {
+  };
+  validSnapStep = (step, range) => {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -29759,8 +29752,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       minTicks: 5,
       maxTicks: 60
     });
-  },
-  validGridStep: function (step, range) {
+  };
+  validGridStep = (step, range) => {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -29768,8 +29761,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       minTicks: 3,
       maxTicks: 60
     });
-  },
-  validStep: function (step, range) {
+  };
+  validStep = (step, range) => {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -29777,8 +29770,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       minTicks: 3,
       maxTicks: 20
     });
-  },
-  validBackgroundImageSize: function (image) {
+  };
+  validBackgroundImageSize = image => {
     // Ignore empty images
     if (!image.url) {
       return true;
@@ -29788,8 +29781,8 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       return "Image must be smaller than 450px x 450px.";
     }
     return true;
-  },
-  validateGraphSettings: function (range, step, gridStep, snapStep, image) {
+  };
+  validateGraphSettings = (range, step, gridStep, snapStep, image) => {
     const self = this;
     let msg;
     const goodRange = ___default["default"].every(range, function (range) {
@@ -29826,16 +29819,16 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       return msg;
     }
     return true;
-  },
-  changeLabel: function (i, e) {
+  };
+  changeLabel = (i, e) => {
     const val = e.target.value;
     const labels = this.state.labelsTextbox.slice();
     labels[i] = val;
     this.setState({
       labelsTextbox: labels
     }, this.changeGraph);
-  },
-  changeRange: function (i, values) {
+  };
+  changeRange = (i, values) => {
     const ranges = this.state.rangeTextbox.slice();
     ranges[i] = values;
     const step = this.state.stepTextbox.slice();
@@ -29844,7 +29837,10 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
     const scale = perseus.Util.scaleFromExtent(ranges[i], this.props.box[i]);
     if (this.validRange(ranges[i]) === true) {
       step[i] = perseus.Util.tickStepFromExtent(ranges[i], this.props.box[i]);
-      gridStep[i] = perseus.Util.gridStepFromTickStep(step[i], scale);
+      const gridStepValue = perseus.Util.gridStepFromTickStep(step[i], scale);
+      if (gridStepValue) {
+        gridStep[i] = gridStepValue;
+      }
       snapStep[i] = gridStep[i] / 2;
     }
     this.setState({
@@ -29853,26 +29849,26 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       snapStepTextbox: snapStep,
       rangeTextbox: ranges
     }, this.changeGraph);
-  },
-  changeStep: function (step) {
+  };
+  changeStep = step => {
     this.setState({
       stepTextbox: step
     }, this.changeGraph);
-  },
-  changeSnapStep: function (snapStep) {
+  };
+  changeSnapStep = snapStep => {
     this.setState({
       snapStepTextbox: snapStep
     }, this.changeGraph);
-  },
-  changeGridStep: function (gridStep) {
+  };
+  changeGridStep = gridStep => {
     this.setState({
       gridStepTextbox: gridStep,
       snapStepTextbox: ___default["default"].map(gridStep, function (step) {
         return step / 2;
       })
     }, this.changeGraph);
-  },
-  changeGraph: function () {
+  };
+  changeGraph = () => {
     const labels = this.state.labelsTextbox;
     const range = ___default["default"].map(this.state.rangeTextbox, function (range) {
       return ___default["default"].map(range, Number);
@@ -29904,9 +29900,9 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
         valid: validationResult // a string message, not false
       });
     }
-  },
+  };
 
-  render: function () {
+  render() {
     const scale = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
@@ -30080,7 +30076,7 @@ const InteractiveGraphSettings = createReactClass__default["default"]({
       }, n);
     })))))));
   }
-});
+}
 
 const SegmentCountSelector = _ref => {
   let {