@khanacademy/perseus-editor 4.2.4 → 4.2.6

package/dist/components/graph-settings.d.ts

@@ -1,85 +1,2 @@
-import * as React from "react";
-import type { PerseusImageBackground } from "@khanacademy/perseus";
-type EditableSetting = "canvas" | "graph" | "snap" | "image" | "measure";
-type Props = {
-    editableSettings: ReadonlyArray<EditableSetting>;
-    box: [number, number];
-    labels: ReadonlyArray<string>;
-    range: [[number, number], [number, number]];
-    step: [number, number];
-    gridStep: [number, number];
-    snapStep: [number, number];
-    valid: boolean | string;
-    backgroundImage: PerseusImageBackground;
-    markings: "graph" | "grid" | "none";
-    showProtractor: boolean;
-    showRuler: boolean;
-    showTooltips: boolean;
-    rulerLabel: string;
-    rulerTicks: number;
-    onChange: (arg1: Partial<Props>) => void;
-};
-type State = {
-    labelsTextbox: ReadonlyArray<string>;
-    gridStepTextbox: [number, number];
-    snapStepTextbox: [number, number];
-    stepTextbox: [number, number];
-    rangeTextbox: [[number, number], [number, number]];
-    backgroundImage: PerseusImageBackground;
-};
-declare class GraphSettings extends React.Component<Props, State> {
-    _isMounted: boolean;
-    static stateFromProps(props: any): {
-        labelsTextbox: any;
-        gridStepTextbox: any;
-        snapStepTextbox: any;
-        stepTextbox: any;
-        rangeTextbox: any;
-        backgroundImage: any;
-    };
-    constructor(props: Props);
-    static defaultProps: {
-        editableSettings: string[];
-        box: 288[];
-        labels: string[];
-        range: number[][];
-        step: number[];
-        gridStep: number[];
-        snapStep: number[];
-        valid: boolean;
-        backgroundImage: {
-            readonly url: null;
-            readonly width: 0;
-            readonly height: 0;
-        };
-        markings: string;
-        showProtractor: boolean;
-        showRuler: boolean;
-        showTooltips: boolean;
-        rulerLabel: string;
-        rulerTicks: number;
-    };
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    componentWillUnmount(): void;
-    change(...args: any[]): any;
-    changeRulerLabel(e: any): void;
-    changeRulerTicks(e: any): void;
-    changeBackgroundUrl(e: any): void;
-    renderLabelChoices(choices: any): JSX.Element[];
-    validRange(range: any): true | "Range must be a valid number" | "Range must have a higher number on the right";
-    validateStepValue(settings: any): string | true;
-    validSnapStep(step: any, range: any): string | true;
-    validGridStep(step: any, range: any): string | true;
-    validStep(step: any, range: any): string | true;
-    validBackgroundImageSize(image: any): true | "Image must be smaller than 450px x 450px.";
-    validateGraphSettings(range: any, step: any, gridStep: any, snapStep: any, image: any): any;
-    changeLabel(i: any, e: any): void;
-    changeRange(i: any, values: any): void;
-    changeStep(step: any): void;
-    changeSnapStep(snapStep: any): void;
-    changeGridStep(gridStep: any): void;
-    changeGraph(): void;
-    render(): JSX.Element;
-}
+declare const GraphSettings: any;
 export default GraphSettings;

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.2.4";
+const libVersion = "4.2.6";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -27170,7 +27170,6 @@ GradedGroupSetEditor.defaultProps = {
 };
 const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.slice(i + 1)];
 
-/* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$3,
   InfoTip: InfoTip$h,
@@ -27188,55 +27187,89 @@ const defaultBackgroundImage$2 = {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-class GraphSettings extends React.Component {
-  static stateFromProps(props) {
+const GraphSettings = createReactClass({
+  displayName: "GraphSettings",
+  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 {
-      labelsTextbox: props.labels,
-      gridStepTextbox: props.gridStep,
-      snapStepTextbox: props.snapStep,
-      stepTextbox: props.step,
-      rangeTextbox: props.range,
-      backgroundImage: _.clone(props.backgroundImage)
+      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$2,
+      markings: "graph",
+      showProtractor: false,
+      showRuler: false,
+      showTooltips: false,
+      rulerLabel: "",
+      rulerTicks: 10
     };
-  }
-  constructor(props) {
-    super(props);
-    this._isMounted = false;
-    this.state = GraphSettings.stateFromProps(props);
-  }
-  componentDidMount() {
+  },
+  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(nextProps) {
+  },
+  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(GraphSettings.stateFromProps(nextProps));
+      this.setState(this.stateFromProps(nextProps));
     }
-  }
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function () {
     this._isMounted = false;
-  }
+  },
+  stateFromProps: function (props) {
+    return {
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      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(e) {
+  changeRulerLabel: function (e) {
     this.change({
       rulerLabel: e.target.value
     });
-  }
-  changeRulerTicks(e) {
+  },
+  changeRulerTicks: function (e) {
     this.change({
       rulerTicks: +e.target.value
     });
-  }
-  changeBackgroundUrl(e) {
+  },
+  changeBackgroundUrl: function (e) {
     // Only continue on blur or "enter"
     if (e.type === "keypress" && e.key !== "Enter") {
       return;
@@ -27262,15 +27295,15 @@ class GraphSettings extends React.Component {
     } else {
       setUrl(null, 0, 0);
     }
-  }
-  renderLabelChoices(choices) {
+  },
+  renderLabelChoices: function (choices) {
     return _.map(choices, function (nameAndValue) {
       return /*#__PURE__*/React.createElement("option", {
         value: nameAndValue[1]
       }, nameAndValue[0]);
     });
-  }
-  validRange(range) {
+  },
+  validRange: function (range) {
     const numbers = _.every(range, function (num) {
       return _.isFinite(num);
     });
@@ -27281,8 +27314,8 @@ class GraphSettings extends React.Component {
       return "Range must have a higher number on the right";
     }
     return true;
-  }
-  validateStepValue(settings) {
+  },
+  validateStepValue: function (settings) {
     const {
       step,
       range,
@@ -27301,8 +27334,8 @@ class GraphSettings extends React.Component {
       return name + " is too small, there can be at most " + maxTicks + " ticks.";
     }
     return true;
-  }
-  validSnapStep(step, range) {
+  },
+  validSnapStep: function (step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -27310,8 +27343,8 @@ class GraphSettings extends React.Component {
       minTicks: 5,
       maxTicks: 60
     });
-  }
-  validGridStep(step, range) {
+  },
+  validGridStep: function (step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -27319,8 +27352,8 @@ class GraphSettings extends React.Component {
       minTicks: 3,
       maxTicks: 60
     });
-  }
-  validStep(step, range) {
+  },
+  validStep: function (step, range) {
     return this.validateStepValue({
       step: step,
       range: range,
@@ -27328,8 +27361,8 @@ class GraphSettings extends React.Component {
       minTicks: 3,
       maxTicks: 20
     });
-  }
-  validBackgroundImageSize(image) {
+  },
+  validBackgroundImageSize: function (image) {
     // Ignore empty images
     if (!image.url) {
       return true;
@@ -27339,8 +27372,8 @@ class GraphSettings extends React.Component {
       return "Image must be smaller than 450px x 450px.";
     }
     return true;
-  }
-  validateGraphSettings(range, step, gridStep, snapStep, image) {
+  },
+  validateGraphSettings: function (range, step, gridStep, snapStep, image) {
     const self = this;
     let msg;
     const goodRange = _.every(range, function (range) {
@@ -27377,16 +27410,16 @@ class GraphSettings extends React.Component {
       return msg;
     }
     return true;
-  }
-  changeLabel(i, e) {
+  },
+  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(i, values) {
+  },
+  changeRange: function (i, values) {
     const ranges = this.state.rangeTextbox.slice();
     ranges[i] = values;
     const step = this.state.stepTextbox.slice();
@@ -27395,10 +27428,7 @@ class GraphSettings extends React.Component {
     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;
-      }
+      gridStep[i] = Util.gridStepFromTickStep(step[i], scale);
       snapStep[i] = gridStep[i] / 2;
     }
     this.setState({
@@ -27407,26 +27437,26 @@ class GraphSettings extends React.Component {
       snapStepTextbox: snapStep,
       rangeTextbox: ranges
     }, this.changeGraph);
-  }
-  changeStep(step) {
+  },
+  changeStep: function (step) {
     this.setState({
       stepTextbox: step
     }, this.changeGraph);
-  }
-  changeSnapStep(snapStep) {
+  },
+  changeSnapStep: function (snapStep) {
     this.setState({
       snapStepTextbox: snapStep
     }, this.changeGraph);
-  }
-  changeGridStep(gridStep) {
+  },
+  changeGridStep: function (gridStep) {
     this.setState({
       gridStepTextbox: gridStep,
       snapStepTextbox: _.map(gridStep, function (step) {
         return step / 2;
       })
     }, this.changeGraph);
-  }
-  changeGraph() {
+  },
+  changeGraph: function () {
     const labels = this.state.labelsTextbox;
     const range = _.map(this.state.rangeTextbox, function (range) {
       return _.map(range, Number);
@@ -27458,9 +27488,9 @@ class GraphSettings extends React.Component {
         valid: validationResult // a string message, not false
       });
     }
-  }
+  },
 
-  render() {
+  render: function () {
     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
@@ -27607,24 +27637,7 @@ class GraphSettings extends React.Component {
       }, n);
     })))))));
   }
-}
-GraphSettings.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$2,
-  markings: "graph",
-  showProtractor: false,
-  showRuler: false,
-  showTooltips: false,
-  rulerLabel: "",
-  rulerTicks: 10
-};
+});
 
 const {
   InfoTip: InfoTip$g,