@khanacademy/perseus 1.0.0 → 1.1.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },

package/src/components/__stories__/input-with-examples.stories.jsx

@@ -17,6 +17,7 @@ const defaultObject = {
     examples: [],
     id: "",
     onChange: () => {},
+    value: "",
 };
 const testExamples = ["Sample 1", "Sample 2", "Sample 3"];
 

package/src/components/input-with-examples.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/sort-comp */
 // @flow
 import * as PerseusLinter from "@khanacademy/perseus-linter";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
@@ -14,42 +13,59 @@ import MathOutput from "./math-output.jsx";
 import TextInput from "./text-input.jsx";
 import Tooltip from "./tooltip.jsx";
 
+import type {LinterContextProps} from "../types.js";
+
 const {captureScratchpadTouchStart} = Util;
 const MATH = "math";
 const TEXT = "text";
 const TEX = "tex";
 
-class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
-    static propTypes = {
-        type: PropTypes.oneOf([MATH, TEXT, TEX]),
-        value: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
-        className: PropTypes.string,
-        examples: PropTypes.arrayOf(PropTypes.string).isRequired,
-        shouldShowExamples: PropTypes.bool,
-        convertDotToTimes: PropTypes.bool,
-        buttonSet: PropTypes.string,
-        buttonsVisible: PropTypes.oneOf(["always", "never", "focused"]),
-        labelText: PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        disabled: PropTypes.bool,
-
-        // A unique string identifying this InputWithExamples
-        id: PropTypes.string.isRequired,
-        linterContext: PerseusLinter.linterContextProps,
-    };
-
-    static defaultProps: $FlowFixMe = {
+type Props = {|
+    type: "math" | "text" | "tex",
+    value: string,
+    onChange: $FlowFixMe,
+    className: string,
+    examples: $ReadOnlyArray<string>,
+    shouldShowExamples: boolean,
+    convertDotToTimes?: boolean,
+    buttonSet?: string,
+    buttonsVisible?: "always" | "never" | "focused",
+    labelText?: string,
+    onFocus: () => void,
+    onBlur: () => void,
+    disabled: boolean,
+    style?: $FlowFixMe,
+    id: string,
+    linterContext: LinterContextProps,
+|};
+
+type DefaultProps = {|
+    type: Props["type"],
+    shouldShowExamples: Props["shouldShowExamples"],
+    onFocus: Props["onFocus"],
+    onBlur: Props["onBlur"],
+    disabled: Props["disabled"],
+    linterContext: Props["linterContext"],
+    className: Props["className"],
+|};
+
+type State = {|
+    focused: boolean,
+    showExamples: boolean,
+|};
+
+class InputWithExamples extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
         type: TEXT,
         shouldShowExamples: true,
         onFocus: function () {},
         onBlur: function () {},
         disabled: false,
         linterContext: PerseusLinter.linterContextDefault,
+        className: "",
     };
 
-    state: $FlowFixMe = {
+    state: State = {
         focused: false,
         showExamples: false,
     };
@@ -89,6 +105,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
             onFocus: this._handleFocus,
             onBlur: this._handleBlur,
             disabled: this.props.disabled,
+            style: this.props.style,
         };
 
         if (this.props.type === TEX) {

package/src/components/number-input.jsx

@@ -11,7 +11,7 @@ import _ from "underscore";
 import Util from "../util.js";
 import KhanMath from "../util/math.js";
 
-import type {Format} from "../util/math.js";
+import type {MathFormat} from "../perseus-types";
 
 const {firstNumericalParse, captureScratchpadTouchStart} = Util;
 const toNumericString = KhanMath.toNumericString;
@@ -242,7 +242,7 @@ class NumberInput extends React.Component<$FlowFixMe, $FlowFixMe> {
         }
     };
 
-    _setValue: (number, Format) => void = (val, format) => {
+    _setValue: (number, MathFormat) => void = (val, format) => {
         // eslint-disable-next-line react/no-string-refs
         $(ReactDOM.findDOMNode(this.refs.input)).val(
             toNumericString(val, format),

package/src/components/simple-keypad-input.jsx

@@ -14,42 +14,35 @@ import {
     KeypadTypes,
     keypadElementPropType,
 } from "@khanacademy/math-input";
-import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-const SimpleKeypadInput: any = createReactClass({
-    displayName: "SimpleKeypadInput",
-
-    propTypes: {
-        keypadElement: keypadElementPropType,
-        onFocus: PropTypes.func,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    },
-
-    componentDidMount: function () {
+export default class SimpleKeypadInput extends React.Component<$FlowFixMe> {
+    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;
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         this._isMounted = false;
-    },
+    }
+
+    _isMounted: boolean = false;
 
     focus() {
         // $FlowFixMe[object-this-reference]
         this.refs.input.focus(); // eslint-disable-line react/no-string-refs
-    },
+    }
 
     blur() {
         // $FlowFixMe[object-this-reference]
         this.refs.input.blur(); // eslint-disable-line react/no-string-refs
-    },
+    }
 
-    getValue: function () {
+    getValue(): string | number {
         return this.props.value;
-    },
+    }
 
     render(): React.Node {
         // $FlowFixMe[object-this-reference]
@@ -85,7 +78,11 @@ const SimpleKeypadInput: any = createReactClass({
                 {...rest}
             />
         );
-    },
-});
+    }
+}
 
-export default SimpleKeypadInput;
+SimpleKeypadInput.propTypes = {
+    keypadElement: keypadElementPropType,
+    onFocus: PropTypes.func,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/components/text-input.jsx

@@ -4,6 +4,8 @@ import {TextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 type Props = {|
     value: string | number | null,
     onChange: (any) => void,
@@ -15,9 +17,7 @@ type Props = {|
     id?: string,
     placeholder?: string,
     onKeyDown?: () => void,
-
-    // TODO: Remove this
-    style?: $FlowFixMe,
+    style?: StyleType,
 |};
 
 type DefaultProps = {|
@@ -57,6 +57,7 @@ class TextInput extends React.Component<Props> {
             disabled,
             placeholder,
             onKeyDown,
+            style,
         } = this.props;
 
         const formattedValue = value === null ? "" : value.toString();
@@ -64,6 +65,7 @@ class TextInput extends React.Component<Props> {
         return (
             // $FlowIgnore
             <TextField
+                style={style}
                 disabled={disabled}
                 id={this.id}
                 value={formattedValue}

package/src/index.js

@@ -121,11 +121,11 @@ export type {
     WidgetInfo,
 } from "./types.js";
 export type {
+    MathFormat,
     InputNumberWidget,
     PerseusRadioWidgetOptions,
     PerseusRenderer,
 } from "./perseus-types.js";
-export type {Format} from "./util/math.js";
 export type {Coord} from "./interactive2/types.js";
 export type {MarkerType} from "./widgets/label-image/types.js";