react-typing-test
Version:
A react component typing test, user input and wpm calculations.
38 lines (37 loc) • 1.9 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React, { useCallback } from "react";
import styled from "styled-components";
export var StyledWord = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &&&& {\n padding: 0 4px 0 4px;\n font-size: 16px;\n display: inline-block;\n color: ", ";\n }\n"], ["\n &&&& {\n padding: 0 4px 0 4px;\n font-size: 16px;\n display: inline-block;\n color: ", ";\n }\n"])), function (props) {
if (props.isActive &&
props.isCorrect != null &&
props.isCorrect !== false) {
return props.theme.mainHighlightColor;
}
if (props.isCorrect != null) {
return props.isCorrect
? props.theme.correctColor
: props.theme.incorrectColor;
}
return props.theme.mainTextColor;
});
export var Word = function (_a) {
var wordIndex = _a.wordIndex, targetWord = _a.targetWord, currentWord = _a.currentWord, typedWords = _a.typedWords, word = _a.word, index = _a.index;
var getIsCorrect = useCallback(function () {
if (index > wordIndex)
return null;
if (targetWord === word) {
return targetWord.split("").every(function (tC, i) {
if (currentWord[i] != undefined) {
return tC === currentWord[i];
}
return true;
});
}
return !typedWords[index] ? null : typedWords[index] === word;
}, [typedWords, currentWord, targetWord, index, word, wordIndex]);
return (React.createElement(StyledWord, { isActive: index === wordIndex, isCorrect: getIsCorrect() }, word));
};
var templateObject_1;