@khanacademy/perseus-editor 4.3.0 → 4.3.2

package/dist/es/index.js

@@ -25,7 +25,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 = "4.3.0";
+const libVersion = "4.3.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23768,8 +23768,9 @@ const {
   InfoTip: InfoTip$m
 } = components;
 class ItemExtrasEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
+    this.finCalcOptions = [];
     this.state = {
       financialCalculatorOptionsExpanded: false
     };
@@ -23780,11 +23781,15 @@ class ItemExtrasEditor extends React.Component {
       }
       return data;
     };
+    this.finCalcOptions = [props.financialCalculatorMonthlyPayment, props.financialCalculatorTotalAmount, props.financialCalculatorTimeToPayOff];
+    this.state = {
+      financialCalculatorOptionsExpanded: this.finCalcOptions.some(opt => opt === true)
+    };
   }
-  componentDidUpdate(prevProps) {
+  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 +23818,7 @@ class ItemExtrasEditor extends React.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,
@@ -29519,6 +29524,7 @@ const GraphTypeSelector = props => {
   }, "Angle"));
 };
 
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
   InfoTip: InfoTip$e,
@@ -29533,64 +29539,8 @@ const defaultBackgroundImage$1 = {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const InteractiveGraphSettings = createReactClass({
-  displayName: "InteractiveGraphSettings",
-  propTypes: _extends({}, Changeable.propTypes, {
-    editableSettings: PropTypes.arrayOf(PropTypes.oneOf(["canvas", "graph", "snap", "image", "measure"])),
-    box: PropTypes.arrayOf(PropTypes.number),
-    labels: PropTypes.arrayOf(PropTypes.string),
-    range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-    step: PropTypes.arrayOf(PropTypes.number),
-    gridStep: PropTypes.arrayOf(PropTypes.number),
-    snapStep: PropTypes.arrayOf(PropTypes.number),
-    valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    backgroundImage: PropTypes.object,
-    markings: PropTypes.oneOf(["graph", "grid", "none"]),
-    showProtractor: PropTypes.bool,
-    showRuler: PropTypes.bool,
-    showTooltips: PropTypes.bool,
-    rulerLabel: PropTypes.string,
-    rulerTicks: PropTypes.number
-  }),
-  getDefaultProps: function () {
-    return {
-      editableSettings: ["graph", "snap", "image", "measure"],
-      box: [interactiveSizes.defaultBoxSizeSmall, 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
-    };
-  },
-  getInitialState: function () {
-    return this.stateFromProps(this.props);
-  },
-  componentDidMount: function () {
-    // 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 = _.debounce(this.changeGraph, 300);
-  },
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
-    // Make sure that state updates when switching
-    // between different items in a multi-item editor.
-    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
-      this.setState(this.stateFromProps(nextProps));
-    }
-  },
-  componentWillUnmount: function () {
-    this._isMounted = false;
-  },
-  stateFromProps: function (props) {
+class InteractiveGraphSettings extends React.Component {
+  static stateFromProps(props) {
     return {
       labelsTextbox: props.labels,
       gridStepTextbox: props.gridStep,
@@ -29599,244 +29549,267 @@ const InteractiveGraphSettings = createReactClass({
       rangeTextbox: props.range,
       backgroundImage: _.clone(props.backgroundImage)
     };
-  },
-  change(...args) {
-    return 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) {
-    this.change({
-      rulerLabel: e.target.value
-    });
-  },
-  changeRulerTicks: function (e) {
-    this.change({
-      rulerTicks: +e.target.value
-    });
-  },
-  changeBackgroundUrl: function (e) {
-    // Only continue on blur or "enter"
-    if (e.type === "keypress" && e.key !== "Enter") {
-      return;
-    }
-    const setUrl = (url, width, height) => {
-      const image = _.clone(this.props.backgroundImage);
-      image.url = url;
-      image.width = width;
-      image.height = height;
-      this.setState({
-        backgroundImage: image
-      }, this.changeGraph);
+  }
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+    this.change = (...args) => {
+      return 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
+    this.changeRulerLabel = e => {
+      this.change({
+        rulerLabel: e.target.value
+      });
     };
+    this.changeRulerTicks = e => {
+      this.change({
+        rulerTicks: +e.target.value
+      });
+    };
+    this.changeBackgroundUrl = e => {
+      // Only continue on blur or "enter"
+      if (e.type === "keypress" && e.key !== "Enter") {
+        return;
+      }
+      const setUrl = (url, width, height) => {
+        const image = _.clone(this.props.backgroundImage);
+        image.url = url;
+        image.width = width;
+        image.height = height;
+        this.setState({
+          backgroundImage: image
+        }, this.changeGraph);
+      };
 
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    const url = ReactDOM.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
-    if (url) {
-      Util.getImageSize(url, (width, height) => {
-        if (this._isMounted) {
-          setUrl(url, width, height);
-        }
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+      const url = ReactDOM.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+      if (url) {
+        Util.getImageSize(url, (width, height) => {
+          if (this._isMounted) {
+            setUrl(url, width, height);
+          }
+        });
+      } else {
+        setUrl(null, 0, 0);
+      }
+    };
+    this.renderLabelChoices = choices => {
+      return _.map(choices, function (nameAndValue) {
+        return /*#__PURE__*/React.createElement("option", {
+          value: nameAndValue[1]
+        }, nameAndValue[0]);
       });
-    } else {
-      setUrl(null, 0, 0);
-    }
-  },
-  renderLabelChoices: function (choices) {
-    return _.map(choices, function (nameAndValue) {
-      return /*#__PURE__*/React.createElement("option", {
-        value: nameAndValue[1]
-      }, nameAndValue[0]);
-    });
-  },
-  validRange: function (range) {
-    const numbers = _.every(range, function (num) {
-      return _.isFinite(num);
-    });
-    if (!numbers) {
-      return "Range must be a valid number";
-    }
-    if (range[0] >= range[1]) {
-      return "Range must have a higher number on the right";
-    }
-    return true;
-  },
-  validateStepValue: function (settings) {
-    const {
-      step,
-      range,
-      name,
-      minTicks,
-      maxTicks
-    } = settings;
-    if (!_.isFinite(step)) {
-      return name + " must be a valid number";
-    }
-    const nSteps = numSteps(range, step);
-    if (nSteps < minTicks) {
-      return name + " is too large, there must be at least " + minTicks + " ticks.";
-    }
-    if (nSteps > maxTicks) {
-      return name + " is too small, there can be at most " + maxTicks + " ticks.";
-    }
-    return true;
-  },
-  validSnapStep: function (step, range) {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Snap step",
-      minTicks: 5,
-      maxTicks: 60
-    });
-  },
-  validGridStep: function (step, range) {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Grid step",
-      minTicks: 3,
-      maxTicks: 60
-    });
-  },
-  validStep: function (step, range) {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Step",
-      minTicks: 3,
-      maxTicks: 20
-    });
-  },
-  validBackgroundImageSize: function (image) {
-    // Ignore empty images
-    if (!image.url) {
+    };
+    this.validRange = range => {
+      const numbers = _.every(range, function (num) {
+        return _.isFinite(num);
+      });
+      if (!numbers) {
+        return "Range must be a valid number";
+      }
+      if (range[0] >= range[1]) {
+        return "Range must have a higher number on the right";
+      }
       return true;
-    }
-    const validSize = image.width <= 450 && image.height <= 450;
-    if (!validSize) {
-      return "Image must be smaller than 450px x 450px.";
-    }
-    return true;
-  },
-  validateGraphSettings: function (range, step, gridStep, snapStep, image) {
-    const self = this;
-    let msg;
-    const goodRange = _.every(range, function (range) {
-      msg = self.validRange(range);
-      return msg === true;
-    });
-    if (!goodRange) {
-      return msg;
-    }
-    const goodStep = _.every(step, function (step, i) {
-      msg = self.validStep(step, range[i]);
-      return msg === true;
-    });
-    if (!goodStep) {
-      return msg;
-    }
-    const goodGridStep = _.every(gridStep, function (gridStep, i) {
-      msg = self.validGridStep(gridStep, range[i]);
-      return msg === true;
-    });
-    if (!goodGridStep) {
-      return msg;
-    }
-    const goodSnapStep = _.every(snapStep, function (snapStep, i) {
-      msg = self.validSnapStep(snapStep, range[i]);
-      return msg === true;
-    });
-    if (!goodSnapStep) {
-      return msg;
-    }
-    const goodImageSize = this.validBackgroundImageSize(image);
-    if (goodImageSize !== true) {
-      msg = goodImageSize;
-      return msg;
-    }
-    return true;
-  },
-  changeLabel: function (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) {
-    const ranges = this.state.rangeTextbox.slice();
-    ranges[i] = values;
-    const step = this.state.stepTextbox.slice();
-    const gridStep = this.state.gridStepTextbox.slice();
-    const snapStep = this.state.snapStepTextbox.slice();
-    const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
-    if (this.validRange(ranges[i]) === true) {
-      step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
-      gridStep[i] = Util.gridStepFromTickStep(step[i], scale);
-      snapStep[i] = gridStep[i] / 2;
-    }
-    this.setState({
-      stepTextbox: step,
-      gridStepTextbox: gridStep,
-      snapStepTextbox: snapStep,
-      rangeTextbox: ranges
-    }, this.changeGraph);
-  },
-  changeStep: function (step) {
-    this.setState({
-      stepTextbox: step
-    }, this.changeGraph);
-  },
-  changeSnapStep: function (snapStep) {
-    this.setState({
-      snapStepTextbox: snapStep
-    }, this.changeGraph);
-  },
-  changeGridStep: function (gridStep) {
-    this.setState({
-      gridStepTextbox: gridStep,
-      snapStepTextbox: _.map(gridStep, function (step) {
-        return step / 2;
-      })
-    }, this.changeGraph);
-  },
-  changeGraph: function () {
-    const labels = this.state.labelsTextbox;
-    const range = _.map(this.state.rangeTextbox, function (range) {
-      return _.map(range, Number);
-    });
-    const step = _.map(this.state.stepTextbox, Number);
-    const gridStep = this.state.gridStepTextbox;
-    const snapStep = this.state.snapStepTextbox;
-    const image = this.state.backgroundImage;
-
-    // validationResult is either:
-    //   true -> the settings are valid
-    //   a string -> the settings are invalid, and the explanation
-    //               is contained in the string
-    // TODO(aria): Refactor this to not be confusing
-    const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
-    if (validationResult === true) {
-      // either true or a string
-      this.change({
-        valid: true,
-        labels: labels,
+    };
+    this.validateStepValue = settings => {
+      const {
+        step,
+        range,
+        name,
+        minTicks,
+        maxTicks
+      } = settings;
+      if (!_.isFinite(step)) {
+        return name + " must be a valid number";
+      }
+      const nSteps = numSteps(range, step);
+      if (nSteps < minTicks) {
+        return name + " is too large, there must be at least " + minTicks + " ticks.";
+      }
+      if (nSteps > maxTicks) {
+        return name + " is too small, there can be at most " + maxTicks + " ticks.";
+      }
+      return true;
+    };
+    this.validSnapStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
         range: range,
+        name: "Snap step",
+        minTicks: 5,
+        maxTicks: 60
+      });
+    };
+    this.validGridStep = (step, range) => {
+      return this.validateStepValue({
         step: step,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        backgroundImage: image
+        range: range,
+        name: "Grid step",
+        minTicks: 3,
+        maxTicks: 60
       });
-    } else {
-      this.change({
-        valid: validationResult // a string message, not false
+    };
+    this.validStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Step",
+        minTicks: 3,
+        maxTicks: 20
+      });
+    };
+    this.validBackgroundImageSize = image => {
+      // Ignore empty images
+      if (!image.url) {
+        return true;
+      }
+      const validSize = image.width <= 450 && image.height <= 450;
+      if (!validSize) {
+        return "Image must be smaller than 450px x 450px.";
+      }
+      return true;
+    };
+    this.validateGraphSettings = (range, step, gridStep, snapStep, image) => {
+      const self = this;
+      let msg;
+      const goodRange = _.every(range, function (range) {
+        msg = self.validRange(range);
+        return msg === true;
+      });
+      if (!goodRange) {
+        return msg;
+      }
+      const goodStep = _.every(step, function (step, i) {
+        msg = self.validStep(step, range[i]);
+        return msg === true;
       });
+      if (!goodStep) {
+        return msg;
+      }
+      const goodGridStep = _.every(gridStep, function (gridStep, i) {
+        msg = self.validGridStep(gridStep, range[i]);
+        return msg === true;
+      });
+      if (!goodGridStep) {
+        return msg;
+      }
+      const goodSnapStep = _.every(snapStep, function (snapStep, i) {
+        msg = self.validSnapStep(snapStep, range[i]);
+        return msg === true;
+      });
+      if (!goodSnapStep) {
+        return msg;
+      }
+      const goodImageSize = this.validBackgroundImageSize(image);
+      if (goodImageSize !== true) {
+        msg = goodImageSize;
+        return msg;
+      }
+      return true;
+    };
+    this.changeLabel = (i, e) => {
+      const val = e.target.value;
+      const labels = this.state.labelsTextbox.slice();
+      labels[i] = val;
+      this.setState({
+        labelsTextbox: labels
+      }, this.changeGraph);
+    };
+    this.changeRange = (i, values) => {
+      const ranges = this.state.rangeTextbox.slice();
+      ranges[i] = values;
+      const step = this.state.stepTextbox.slice();
+      const gridStep = this.state.gridStepTextbox.slice();
+      const snapStep = this.state.snapStepTextbox.slice();
+      const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
+      if (this.validRange(ranges[i]) === true) {
+        step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+        const gridStepValue = Util.gridStepFromTickStep(step[i], scale);
+        if (gridStepValue) {
+          gridStep[i] = gridStepValue;
+        }
+        snapStep[i] = gridStep[i] / 2;
+      }
+      this.setState({
+        stepTextbox: step,
+        gridStepTextbox: gridStep,
+        snapStepTextbox: snapStep,
+        rangeTextbox: ranges
+      }, this.changeGraph);
+    };
+    this.changeStep = step => {
+      this.setState({
+        stepTextbox: step
+      }, this.changeGraph);
+    };
+    this.changeSnapStep = snapStep => {
+      this.setState({
+        snapStepTextbox: snapStep
+      }, this.changeGraph);
+    };
+    this.changeGridStep = gridStep => {
+      this.setState({
+        gridStepTextbox: gridStep,
+        snapStepTextbox: _.map(gridStep, function (step) {
+          return step / 2;
+        })
+      }, this.changeGraph);
+    };
+    this.changeGraph = () => {
+      const labels = this.state.labelsTextbox;
+      const range = _.map(this.state.rangeTextbox, function (range) {
+        return _.map(range, Number);
+      });
+      const step = _.map(this.state.stepTextbox, Number);
+      const gridStep = this.state.gridStepTextbox;
+      const snapStep = this.state.snapStepTextbox;
+      const image = this.state.backgroundImage;
+
+      // validationResult is either:
+      //   true -> the settings are valid
+      //   a string -> the settings are invalid, and the explanation
+      //               is contained in the string
+      // TODO(aria): Refactor this to not be confusing
+      const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
+      if (validationResult === true) {
+        // either true or a string
+        this.change({
+          valid: true,
+          labels: labels,
+          range: range,
+          step: step,
+          gridStep: gridStep,
+          snapStep: snapStep,
+          backgroundImage: image
+        });
+      } else {
+        this.change({
+          valid: validationResult // a string message, not false
+        });
+      }
+    };
+    this.state = InteractiveGraphSettings.stateFromProps(props);
+  }
+  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 = _.debounce(this.changeGraph, 300);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
     }
-  },
-
-  render: function () {
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  render() {
     const scale = [KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[0], this.props.box[0])), KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
@@ -30010,7 +29983,24 @@ const InteractiveGraphSettings = createReactClass({
       }, n);
     })))))));
   }
-});
+}
+InteractiveGraphSettings.defaultProps = {
+  editableSettings: ["graph", "snap", "image", "measure"],
+  box: [interactiveSizes.defaultBoxSizeSmall, 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
+};
 
 const SegmentCountSelector = ({
   numSegments: _numSegments = 1,