@khanacademy/perseus-editor 2.0.2 → 2.0.3

package/src/widgets/label-image/__stories__/question-markers.stories.tsx

@@ -70,7 +70,7 @@ class WithState extends React.Component<
     }
 }
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl: "",
@@ -82,7 +82,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl:
@@ -102,6 +102,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/select-image.stories.tsx

@@ -36,7 +36,7 @@ const WithState = () => {
     );
 };
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "",
         onChange: () => {},
@@ -45,7 +45,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
         onChange: () => {},
@@ -54,6 +54,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/answer-choices.tsx

@@ -89,7 +89,7 @@ const DraggableGripIcon = () => (
 /**
  * A button link to add a new answer.
  */
-const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
+const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
         onClick={onClick}
@@ -105,11 +105,11 @@ const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
  *
  * TODO(michaelpolyak): Implement answer reordering, CP-117
  */
-const Answer: React.FC<AnswerProps> = ({
+const Answer = ({
     answer,
     onChange,
     onRemove,
-}): React.ReactElement => (
+}: AnswerProps): React.ReactElement => (
     <li className={css(styles.answer)}>
         <Link onClick={onRemove}>
             <Icon icon={removeIcon} size={24} color="#D92916" />
@@ -137,10 +137,10 @@ const Answer: React.FC<AnswerProps> = ({
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-const AnswerChoices: React.FC<AnswerChoicesProps> = ({
+const AnswerChoices = ({
     choices,
     onChange,
-}): React.ReactElement => (
+}: AnswerChoicesProps): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Answer Choices</div>
 

package/src/widgets/label-image/behavior.tsx

@@ -10,7 +10,7 @@ import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
-type BehaviorProps = {
+type Props = {
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
@@ -22,11 +22,11 @@ type BehaviorProps = {
     }) => void;
 };
 
-const Behavior: React.FC<BehaviorProps> = ({
+const Behavior = ({
     multipleAnswers,
     hideChoicesFromInstructions,
     onChange,
-}): React.ReactElement => (
+}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Behavior</div>
 

package/src/widgets/label-image/marker.tsx

@@ -17,7 +17,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, borderRadius} = globalStyles;
 
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     // The list of possible answer choices.
     choices: ReadonlyArray<string>;
     // Callback for when any of the marker props are changed.
@@ -26,16 +26,16 @@ type MarkerProps = MarkerType & {
     onRemove: () => void;
 };
 
-type MarkerState = {
+type State = {
     // Whether answer choices dropdown is shown, controlled by the user clicking
     // on the marker icon.
     showDropdown: boolean;
 };
 
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
 
-    constructor(props: MarkerProps) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -47,7 +47,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         document.addEventListener("click", this.handleClick, true);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         const {answers} = this.props;
 
         // Exclude those answers that are no longer present in choices.

package/src/widgets/label-image/question-markers.tsx

@@ -13,7 +13,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, typography} = globalStyles;
 
-type QuestionMarkersProps = {
+type Props = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -26,7 +26,7 @@ type QuestionMarkersProps = {
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
 
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined> = [];
 
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>) {

package/src/widgets/label-image/select-image.tsx

@@ -11,17 +11,14 @@ import FormWrappedTextField from "../../components/form-wrapped-text-field";
 
 const {colors, typography} = globalStyles;
 
-type SelectImageProps = {
+type Props = {
     // Callback for when image URL is changed.
     onChange: (url: string) => void;
     // The selected image URL.
     url: string;
 };
 
-const SelectImage: React.FC<SelectImageProps> = ({
-    onChange,
-    url,
-}): React.ReactElement => (
+const SelectImage = ({onChange, url}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Image</div>
 

package/src/widgets/label-image-editor.tsx

@@ -19,7 +19,7 @@ import SelectImage from "./label-image/select-image";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type LabelImageEditorProps = {
+type Props = {
     // List of answer choices to label question image with.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -37,7 +37,7 @@ type LabelImageEditorProps = {
     onChange: (options: any) => void;
 };
 
-class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
 
     static defaultProps: {
@@ -62,7 +62,7 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
 
     static widgetName = "label-image" as const;
 
-    componentDidUpdate(prevProps: LabelImageEditorProps) {
+    componentDidUpdate(prevProps: Props) {
         const coordsToMarkers: Record<string, any> = {};
 
         prevProps.markers.forEach(

package/src/widgets/numeric-input-editor.tsx

@@ -66,7 +66,6 @@ const NumericInputEditor: any = createReactClass({
             size: "normal",
             coefficient: false,
             labelText: "",
-            multipleNumberInput: false,
             rightAlign: false,
         };
     },
@@ -417,16 +416,6 @@ const NumericInputEditor: any = createReactClass({
 
         return (
             <div className="perseus-input-number-editor">
-                <div ref={(e) => (this.multInputOption = e)}>
-                    <select onChange={this.onMultipleInputChange}>
-                        <option value="simple-numeric-input">
-                            Ask for one correct solution
-                        </option>
-                        <option value="multiple-numeric-input">
-                            Ask for all correct solutions
-                        </option>
-                    </select>
-                </div>
                 <div className="ui-title">User input</div>
                 <div className="msg-title">
                     Message shown to user on attempt
@@ -480,15 +469,6 @@ const NumericInputEditor: any = createReactClass({
         });
     },
 
-    onMultipleInputChange: function (event) {
-        const newOption = event.target.value;
-        if (newOption === "multiple-numeric-input") {
-            this.props.onChange({multipleNumberInput: true});
-        } else {
-            this.props.onChange({multipleNumberInput: false});
-        }
-    },
-
     updateAnswer: function (choiceIndex, update) {
         if (!_.isObject(update)) {
             return _.partial(