Use input widget state to style task inputs

[eatyourgreens]

Use checkbox/radio button state (active, checked or focussed) to control the style of adjacent task labels.
Remove onFocus(), onBlur(), unfocus() and associated tests from TaskInputField.
Convert TaskInputField to a function and add React.memo() for speed.
Works around some problems with the multiple choice and single answer task tests by rewriting them to use shallow rendering. Full mounting of those components won't work until enzyme supports React.memo().
Fixes #5096.

This PR should fix slow/laggy behaviour on phones, where there could be a noticeable delay between tapping an answer and seeing it change colour.

Staging branch URL: https://pr-5091.pfe-preview.zooniverse.org

Required Manual Testing

• Does the non-logged in home page render correctly?
• Does the logged in home page render correctly?
• Does the projects page render correctly?
• Can you load project home pages?
• Can you load the classification page?
• Can you submit a classification?
• Does talk load correctly?
• Can you post a talk comment?

Review Checklist

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you rm -rf node_modules/ && npm install and app works as expected?
• If the component is in coffeescript, is it converted to ES6? Is it free of eslint errors? Is the conversion its own commit?
• Are the tests passing locally and on Travis?

Optional

• Have you replaced any ChangeListener or PromiseRenderer components with code that updates component state?
• If changes are made to the classifier, does the dev classifier still work?
• Have you resized and compressed any image you've added?
• Have you added in flow type annotations?
• Have you followed the Springer guidelines for commit messages?

[coveralls]

Coverage decreased (-0.2%) to 48.026% when pulling 7132bb3 on task-input-styles into 74a3e43 on master.

[eatyourgreens]

Tests are broken because of enzymejs/enzyme#1875. The multiple choice and single answer question tests both run a full mount of the task component, then run tests on the input field children.

[eatyourgreens]

Single answer and multiple choice answers seem to be faster in the dev classifier on this branch, but drawing tool radio buttons are still really slow. I'm not sure why. 😞

[srallen]

LGTM. I hadn't refactored this yet in the rewrite code, but had left a note to do so. I'll make sure this gets done there.

For the highlighter tool, I noticed that the radio inputs aren't getting the checked styling, but they also aren't on the master branch. I wasn't sure if you were going to fix this in this branch or not. Do you know if any projects are using this tool type in production? I'm guessing not and if not, then I'm ok with that merging as is.

Not sure why the drawing task inputs are still slow, either.

[eatyourgreens]

Thanks for taking a look. The highlighter options are buttons that you press after each text selection (like the bold/italic buttons in a word processor), so they don’t have a checked state. I’m happy to look at those in a different PR, if these changes are ok.

[srallen]

You know what, I think the highlighter tool confused me in the same way last time I looked at this. Since we're reusing the styling for the radio button inputs, I think the highlighter tool is the same and I try to click on the color I want first then go highlight, but it doesn't work that way. Maybe @beckyrother has a suggestion on how these buttons should be styled because I doubt I'm the only one who would get confused by this. Otherwise this is fine by me.

[beckyrother]

Is there a project that uses this to take a look at?
Maybe the highlight button is inactive until text is selected, with a rollover or modal on click that explains that text needs to be selected first before this can be used.

[srallen]

@beckyrother I think @eatyourgreens or @simensta know which projects that use this. You can also see a contrived example in the dev classifier: https://master.pfe-preview.zooniverse.org/dev/classifier select "Annotate Text" as well as the last frame for the subject viewer to get a text subject.

[beckyrother]

Thanks Sarah! You're right, this is confusing, especially since the drawing task works the opposite way – clicking the type of annotation first and then clicking in the image. Is this possible with text? That is, click the highlight tool first and then select the text?

[srallen]

@beckyrother I've opened #5099 so we can keep track in an issue and have copied your question over to there.