@khanacademy/perseus 0.4.3 → 1.0.0

package/src/widgets/radio/widget.jsx

@@ -3,7 +3,6 @@
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import * as React from "react";
-import _ from "underscore";
 
 import Renderer from "../../renderer.jsx";
 import Util from "../../util.js";
@@ -15,7 +14,13 @@ import type {
     PerseusRadioChoice,
     PerseusRadioWidgetOptions,
 } from "../../perseus-types.js";
-import type {PerseusScore, WidgetProps} from "../../types.js";
+import type {
+    PerseusScore,
+    WidgetProps,
+    ChoiceState,
+    RadioChoiceWithMetadata,
+} from "../../types.js";
+import type {FocusFunction, ChoiceType} from "./base-radio.jsx";
 
 // RenderProps is the return type for radio.jsx#transform
 export type RenderProps = {|
@@ -24,9 +29,12 @@ export type RenderProps = {|
     multipleSelect?: boolean,
     countChoices?: boolean,
     deselectEnabled?: boolean,
-    choices: $ReadOnlyArray<PerseusRadioChoice>,
+    choices: $ReadOnlyArray<RadioChoiceWithMetadata>,
     selectedChoices: $ReadOnlyArray<PerseusRadioChoice["correct"]>,
-    choiceStates?: $ReadOnlyArray<$FlowFixMe>,
+    choiceStates?: $ReadOnlyArray<ChoiceState>,
+    // Depreciated; support for legacy way of handling changes
+    // Adds proptype for prop that is used but was lacking type
+    values?: $ReadOnlyArray<boolean>,
 |};
 
 type UserInput = {|
@@ -39,25 +47,39 @@ type UserInput = {|
 type Rubric = PerseusRadioWidgetOptions;
 type Props = WidgetProps<RenderProps, Rubric>;
 
+type DefaultProps = {|
+    choices: Props["choices"],
+    multipleSelect: Props["multipleSelect"],
+    countChoices: Props["countChoices"],
+    deselectEnabled: Props["deselectEnabled"],
+    linterContext: Props["linterContext"],
+|};
+
 class Radio extends React.Component<Props> {
-    static defaultProps: $FlowFixMe = {
-        choices: [{}],
-        displayCount: null,
+    focusFunction: FocusFunction;
+
+    static defaultProps: DefaultProps = {
+        choices: [],
         multipleSelect: false,
         countChoices: false,
         deselectEnabled: false,
         linterContext: linterContextDefault,
     };
 
-    _renderRenderer: (string) => React.Node = (content) => {
-        content = content || "";
-
+    _renderRenderer: (content?: string) => React.Node = (
+        content?: string = "",
+    ) => {
         let nextPassageRefId = 1;
         const widgets = {};
 
         const modContent = content.replace(
             /\{\{passage-ref (\d+) (\d+)(?: "([^"]*)")?\}\}/g,
-            (match, passageNum, refNum, summaryText) => {
+            (
+                match: string,
+                passageNum: string,
+                refNum: string,
+                summaryText: string,
+            ) => {
                 const widgetId = "passage-ref " + nextPassageRefId;
                 nextPassageRefId++;
 
@@ -105,10 +127,19 @@ class Radio extends React.Component<Props> {
     // that we pass a value to `.focus()` and it seems to have been used for
     // adding hints when editing.
     // See: https://github.com/Khan/perseus/blame/e18582b4b69959270b90e237ef1813899711ddfa/src/widgets/radio.js#L169
-    focus: ($FlowFixMe) => boolean = (i) => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.baseRadio.focus(i);
-    };
+    focus(choiceIndex: ?number): boolean {
+        if (this.focusFunction) {
+            return this.focusFunction(choiceIndex);
+        }
+
+        return false;
+    }
+
+    // lets BaseRadio regiser a focus callback so widget
+    // can focus an individual choice
+    registerFocusFunction(fun: FocusFunction): void {
+        this.focusFunction = fun;
+    }
 
     // When `BaseRadio`'s `onChange` handler is called, indicating a change in
     // our choices' state, we need to call our `onChange` handler in order to
@@ -123,7 +154,12 @@ class Radio extends React.Component<Props> {
     //
     // NOTE(mdr): This method expects to be auto-bound. If this component is
     //     converted to an ES6 class, take care to auto-bind this method!
-    updateChoices: ($FlowFixMe) => void = (newValueLists) => {
+    updateChoices: (
+        newValueLists: $ReadOnly<{
+            checked: $ReadOnlyArray<boolean>,
+            crossedOut: $ReadOnlyArray<boolean>,
+        }>,
+    ) => void = (newValueLists) => {
         const {choiceStates, choices} = this.props;
 
         // Construct the baseline `choiceStates` objects. If this is the user's
@@ -131,24 +167,21 @@ class Radio extends React.Component<Props> {
         // new objects with all fields set to the default values. Otherwise, we
         // should clone the old `choiceStates` objects, in preparation to
         // mutate them.
-        let newChoiceStates;
-        if (choiceStates) {
-            newChoiceStates = choiceStates.map((state) => ({...state}));
-        } else {
-            newChoiceStates = choices.map(() => ({
-                selected: false,
-                crossedOut: false,
-                highlighted: false,
-                rationaleShown: false,
-                correctnessShown: false,
-                previouslyAnswered: false,
-                readOnly: false,
-            }));
-        }
+        const newChoiceStates = choiceStates
+            ? choiceStates.map((state: ChoiceState) => ({...state}))
+            : choices.map(() => ({
+                  selected: false,
+                  crossedOut: false,
+                  highlighted: false,
+                  rationaleShown: false,
+                  correctnessShown: false,
+                  previouslyAnswered: false,
+                  readOnly: false,
+              }));
 
         // Mutate the new `choiceState` objects, according to the new `checked`
         // and `crossedOut` values provided in `newValueLists`.
-        newChoiceStates.forEach((choiceState, i) => {
+        newChoiceStates.forEach((choiceState: ChoiceState, i) => {
             choiceState.selected = newValueLists.checked[i];
             choiceState.crossedOut = newValueLists.crossedOut[i];
         });
@@ -178,25 +211,29 @@ class Radio extends React.Component<Props> {
                 const widgetCorrect =
                     score.type === "points" && score.total === score.earned;
 
-                const newStates = choiceStates.map((state) => ({
-                    ...state,
-                    highlighted: state.selected,
-                    // If the choice is selected, show the rationale now
-                    rationaleShown:
-                        state.selected ||
-                        // If the choice already had a rationale, keep it shown
-                        state.rationaleShown ||
-                        // If the widget is correctly answered, show the rationale
-                        // for all the choices
-                        widgetCorrect,
-                    // We use the same behavior for the readOnly flag as for
-                    // rationaleShown, but we keep it separate in case other
-                    // behaviors want to disable choices without showing rationales.
-                    readOnly: state.selected || state.readOnly || widgetCorrect,
-                    correctnessShown: state.selected || state.correctnessShown,
-                    previouslyAnswered:
-                        state.previouslyAnswered || state.selected,
-                }));
+                const newStates: $ReadOnlyArray<ChoiceState> = choiceStates.map(
+                    (state: ChoiceState): ChoiceState => ({
+                        ...state,
+                        highlighted: state.selected,
+                        // If the choice is selected, show the rationale now
+                        rationaleShown:
+                            state.selected ||
+                            // If the choice already had a rationale, keep it shown
+                            state.rationaleShown ||
+                            // If the widget is correctly answered, show the rationale
+                            // for all the choices
+                            widgetCorrect,
+                        // We use the same behavior for the readOnly flag as for
+                        // rationaleShown, but we keep it separate in case other
+                        // behaviors want to disable choices without showing rationales.
+                        readOnly:
+                            state.selected || state.readOnly || widgetCorrect,
+                        correctnessShown:
+                            state.selected || state.correctnessShown,
+                        previouslyAnswered:
+                            state.previouslyAnswered || state.selected,
+                    }),
+                );
 
                 this.props.onChange(
                     {
@@ -213,11 +250,15 @@ class Radio extends React.Component<Props> {
      */
     deselectIncorrectSelectedChoices: () => void = () => {
         if (this.props.choiceStates) {
-            const newStates = this.props.choiceStates.map((state, i) => ({
-                ...state,
-                selected: state.selected && !!this.props.choices[i].correct,
-                highlighted: false,
-            }));
+            const newStates: $ReadOnlyArray<ChoiceState> =
+                this.props.choiceStates.map(
+                    (state: ChoiceState, i): ChoiceState => ({
+                        ...state,
+                        selected:
+                            state.selected && !!this.props.choices[i].correct,
+                        highlighted: false,
+                    }),
+                );
 
             this.props.onChange(
                 {
@@ -230,12 +271,12 @@ class Radio extends React.Component<Props> {
     };
 
     render(): React.Node {
-        let choices = this.props.choices;
-        let choiceStates;
+        const {choices} = this.props;
+        let choiceStates: $ReadOnlyArray<ChoiceState>;
         if (this.props.static) {
-            choiceStates = _.map(choices, (val) => ({
-                selected: val.correct,
-                crossedOut: val.crossedOut,
+            choiceStates = choices.map((choice) => ({
+                selected: !!choice.correct,
+                crossedOut: false,
                 readOnly: true,
                 highlighted: false,
                 rationaleShown: true,
@@ -244,11 +285,10 @@ class Radio extends React.Component<Props> {
             }));
         } else if (this.props.choiceStates) {
             choiceStates = this.props.choiceStates;
-            // $FlowFixMe[prop-missing]
         } else if (this.props.values) {
             // Support legacy choiceStates implementation
             /* istanbul ignore next - props.values is deprecated */
-            choiceStates = _.map(this.props.values, (val) => ({
+            choiceStates = this.props.values.map((val) => ({
                 selected: val,
                 crossedOut: false,
                 readOnly: false,
@@ -258,7 +298,7 @@ class Radio extends React.Component<Props> {
                 previouslyAnswered: false,
             }));
         } else {
-            choiceStates = _.map(choices, () => ({
+            choiceStates = choices.map(() => ({
                 selected: false,
                 crossedOut: false,
                 readOnly: false,
@@ -269,80 +309,82 @@ class Radio extends React.Component<Props> {
             }));
         }
 
-        choices = _.map(choices, (choice, i) => {
-            const content =
-                choice.isNoneOfTheAbove && !choice.content
-                    ? // we use i18n._ instead of $_ here because the content
-                      // sent to a renderer needs to be a string, not a react
-                      // node (/renderable/fragment).
-                      i18n._("None of the above")
-                    : choice.content;
-
-            const {
-                selected,
-                crossedOut,
-                rationaleShown,
-                correctnessShown,
-                readOnly,
-                highlighted,
-                previouslyAnswered,
-            } = choiceStates[i];
-
-            const reviewChoice =
-                this.props.reviewModeRubric &&
-                this.props.reviewModeRubric.choices[i];
-
-            return {
-                content: this._renderRenderer(content),
-                checked: selected,
-                // Current versions of the radio widget always pass in the
-                // "correct" value through the choices. Old serialized state
-                // for radio widgets doesn't have this though, so we have to
-                // pull the correctness out of the review mode rubric. This
-                // only works because all of the places we use
-                // `restoreSerializedState()` also turn on reviewMode, but is
-                // fine for now.
-                // TODO(emily): Come up with a more comprehensive way to solve
-                // this sort of "serialized state breaks when internal
-                // structure changes" problem.
-                correct:
-                    typeof choice.correct === "undefined"
-                        ? !!reviewChoice && reviewChoice.correct
-                        : choice.correct,
-                disabled: readOnly,
-                hasRationale: !!choice.clue,
-                rationale: this._renderRenderer(choice.clue),
-                showRationale: rationaleShown,
-                showCorrectness: correctnessShown,
-                isNoneOfTheAbove: choice.isNoneOfTheAbove,
-                revealNoneOfTheAbove: this.props.questionCompleted && selected,
-                crossedOut,
-                highlighted,
-                previouslyAnswered: previouslyAnswered,
-            };
-        });
+        const choicesProp: $ReadOnlyArray<ChoiceType> = choices.map(
+            (choice, i) => {
+                const content =
+                    choice.isNoneOfTheAbove && !choice.content
+                        ? // we use i18n._ instead of $_ here because the content
+                          // sent to a renderer needs to be a string, not a react
+                          // node (/renderable/fragment).
+                          i18n._("None of the above")
+                        : choice.content;
+
+                const {
+                    selected,
+                    crossedOut,
+                    rationaleShown,
+                    correctnessShown,
+                    readOnly,
+                    highlighted,
+                    previouslyAnswered,
+                } = choiceStates[i];
+
+                const reviewChoice =
+                    this.props.reviewModeRubric &&
+                    this.props.reviewModeRubric.choices[i];
+
+                return {
+                    content: this._renderRenderer(content),
+                    checked: selected,
+                    // Current versions of the radio widget always pass in the
+                    // "correct" value through the choices. Old serialized state
+                    // for radio widgets doesn't have this though, so we have to
+                    // pull the correctness out of the review mode rubric. This
+                    // only works because all of the places we use
+                    // `restoreSerializedState()` also turn on reviewMode, but is
+                    // fine for now.
+                    // TODO(emily): Come up with a more comprehensive way to solve
+                    // this sort of "serialized state breaks when internal
+                    // structure changes" problem.
+                    correct:
+                        choice.correct === undefined
+                            ? !!reviewChoice && !!reviewChoice.correct
+                            : choice.correct,
+                    disabled: readOnly,
+                    hasRationale: !!choice.clue,
+                    rationale: this._renderRenderer(choice.clue),
+                    showRationale: rationaleShown,
+                    showCorrectness: correctnessShown,
+                    isNoneOfTheAbove: !!choice.isNoneOfTheAbove,
+                    revealNoneOfTheAbove: !!(
+                        this.props.questionCompleted && selected
+                    ),
+                    crossedOut,
+                    highlighted,
+                    previouslyAnswered: previouslyAnswered,
+                };
+            },
+        );
 
         return (
             <BaseRadio
-                // eslint-disable-next-line react/no-string-refs
-                ref="baseRadio"
                 labelWrap={true}
                 multipleSelect={this.props.multipleSelect}
                 countChoices={this.props.countChoices}
                 numCorrect={this.props.numCorrect}
-                choices={choices}
+                choices={choicesProp}
                 onChange={this.updateChoices}
                 reviewModeRubric={this.props.reviewModeRubric}
                 deselectEnabled={this.props.deselectEnabled}
                 apiOptions={this.props.apiOptions}
                 isLastUsedWidget={this.props.isLastUsedWidget}
+                registerFocusFunction={(i) => this.registerFocusFunction(i)}
             />
         );
     }
 
     static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
-        const numSelected = _.reduce(
-            userInput.choicesSelected,
+        const numSelected = userInput.choicesSelected.reduce(
             (sum, selected) => {
                 return sum + (selected ? 1 : 0);
             },
@@ -355,8 +397,12 @@ class Radio extends React.Component<Props> {
                 message: null,
             };
         }
-        // $FlowFixMe[invalid-compare]
-        if (userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+
+        if (
+            userInput.numCorrect &&
+            userInput.numCorrect > 1 &&
+            numSelected !== userInput.numCorrect
+        ) {
             return {
                 type: "invalid",
                 message: i18n._("Please choose the correct number of answers."),
@@ -372,11 +418,11 @@ class Radio extends React.Component<Props> {
                 ),
             };
         }
-        /* jshint -W018 */
-        const correct = _.all(userInput.choicesSelected, (selected, i) => {
+
+        const correct = userInput.choicesSelected.every((selected, i) => {
             let isCorrect;
             if (userInput.noneOfTheAboveIndex === i) {
-                isCorrect = _.all(rubric.choices, (choice, j) => {
+                isCorrect = rubric.choices.every((choice, j) => {
                     return i === j || !choice.correct;
                 });
             } else {
@@ -384,7 +430,6 @@ class Radio extends React.Component<Props> {
             }
             return isCorrect === selected;
         });
-        /* jshint +W018 */
 
         return {
             type: "points",
@@ -408,9 +453,8 @@ class Radio extends React.Component<Props> {
             const numCorrect = props.numCorrect;
 
             for (let i = 0; i < choicesSelected.length; i++) {
-                // $FlowFixMe[prop-missing]
                 const index = props.choices[i].originalIndex;
-                // $FlowFixMe[incompatible-use]
+
                 choicesSelected[index] = choiceStates[i].selected;
 
                 if (props.choices[i].isNoneOfTheAbove) {
@@ -432,28 +476,29 @@ class Radio extends React.Component<Props> {
             // Support legacy choiceState implementation
         }
         /* istanbul ignore if - props.values is deprecated */
-        // $FlowFixMe[prop-missing]
-        if (props.values) {
+        const {values} = props;
+        if (values) {
             let noneOfTheAboveIndex = null;
             let noneOfTheAboveSelected = false;
 
-            const values = props.values.slice();
+            const choicesSelected = [...values];
             const countChoices = props.countChoices;
             const numCorrect = props.numCorrect;
+            const valuesLength = values.length;
 
-            for (let i = 0; i < props.values.length; i++) {
+            for (let i = 0; i < valuesLength; i++) {
                 const index = props.choices[i].originalIndex;
-                values[index] = props.values[i];
+                choicesSelected[index] = values[i];
 
                 if (props.choices[i].isNoneOfTheAbove) {
                     noneOfTheAboveIndex = index;
-                    if (values[i]) {
+                    if (choicesSelected[i]) {
                         noneOfTheAboveSelected = true;
                     }
                 }
             }
             return {
-                choicesSelected: values,
+                choicesSelected,
                 noneOfTheAboveIndex,
                 noneOfTheAboveSelected,
                 countChoices,
@@ -462,7 +507,7 @@ class Radio extends React.Component<Props> {
         }
         // Nothing checked
         return {
-            choicesSelected: _.map(props.choices, () => false),
+            choicesSelected: props.choices.map(() => false),
         };
     }
 }

package/src/widgets/radio.jsx

@@ -6,11 +6,8 @@ import Util from "../util.js";
 
 import Radio from "./radio/widget.jsx";
 
-import type {
-    PerseusRadioWidgetOptions,
-    PerseusRadioChoice,
-} from "../perseus-types.js";
-import type {WidgetExports} from "../types.js";
+import type {PerseusRadioWidgetOptions} from "../perseus-types.js";
+import type {WidgetExports, RadioChoiceWithMetadata} from "../types.js";
 import type {RenderProps} from "./radio/widget.jsx";
 
 const {shuffle, random} = Util;
@@ -43,15 +40,16 @@ const _choiceTransform = (
     };
 
     const _addNoneOfAbove = function (
-        choices: $ReadOnlyArray<PerseusRadioChoice>,
-    ): $ReadOnlyArray<PerseusRadioChoice> {
+        choices: $ReadOnlyArray<RadioChoiceWithMetadata>,
+    ) {
         let noneOfTheAbove = null;
 
-        const newChoices = _.reject(choices, function (choice, index) {
+        const newChoices = choices.filter((choice, index) => {
             if (choice.isNoneOfTheAbove) {
                 noneOfTheAbove = choice;
-                return true;
+                return false;
             }
+            return true;
         });
 
         // Place the "None of the above" options last
@@ -63,8 +61,8 @@ const _choiceTransform = (
     };
 
     const enforceOrdering = (
-        choices: $ReadOnlyArray<PerseusRadioChoice>,
-    ): $ReadOnlyArray<PerseusRadioChoice> => {
+        choices: $ReadOnlyArray<RadioChoiceWithMetadata>,
+    ) => {
         const content = choices.map((c) => c.content);
         if (ReversedChoices.some((reversed) => _.isEqual(content, reversed))) {
             return [choices[1], choices[0]];
@@ -73,13 +71,14 @@ const _choiceTransform = (
     };
 
     // Add meta-information to choices
-    let choices = widgetOptions.choices.slice();
-    choices = _.map(choices, (choice, i) => {
-        return _.extend({}, choice, {
-            originalIndex: i,
-            correct: Boolean(choice.correct),
+    const choices: $ReadOnlyArray<RadioChoiceWithMetadata> =
+        widgetOptions.choices.map((choice, i): RadioChoiceWithMetadata => {
+            return {
+                ...choice,
+                originalIndex: i,
+                correct: Boolean(choice.correct),
+            };
         });
-    });
 
     // Apply all the transforms. Note that the order we call these is
     // important!

package/src/widgets/radio/__stories__/cross-out-button.stories.jsx

@@ -1,64 +0,0 @@
-// @flow
-import colors from "@khanacademy/wonder-blocks-color";
-import * as React from "react";
-
-import CrossOutButton from "../cross-out-button.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Widgets/Radio/Cross Out Button",
-}: Story);
-
-export const CrossOutButtonForChoiceAColoredDefaultKaGreen = (
-    args: StoryArgs,
-): React.Node => {
-    return (
-        <CrossOutButton
-            onClick={() => {}}
-            onFocus={() => {}}
-            onBlur={() => {}}
-            pos={0}
-            crossedOut={false}
-            usingKeyboardFocus={false}
-            theme="day"
-        />
-    );
-};
-
-export const ReEnableButtonForChoiceCColoredWonderBlocksBlue = (
-    args: StoryArgs,
-): React.Node => {
-    return (
-        <CrossOutButton
-            onClick={() => {}}
-            onFocus={() => {}}
-            onBlur={() => {}}
-            pos={0}
-            primaryProductColor={colors.blue}
-            crossedOut={true}
-            usingKeyboardFocus={false}
-            theme="day"
-        />
-    );
-};
-
-export const CrossOutButtonForChoiceAColoredWhiteForNightTheme = (
-    args: StoryArgs,
-): React.Node => {
-    return (
-        <CrossOutButton
-            onClick={() => {}}
-            onFocus={() => {}}
-            onBlur={() => {}}
-            pos={0}
-            crossedOut={false}
-            usingKeyboardFocus={false}
-            theme="night"
-        />
-    );
-};