diff options
Diffstat (limited to 'web/source/settings/lib/form/text.jsx')
| -rw-r--r-- | web/source/settings/lib/form/text.jsx | 31 |
1 files changed, 25 insertions, 6 deletions
diff --git a/web/source/settings/lib/form/text.jsx b/web/source/settings/lib/form/text.jsx index 70e61657c..d9a9ab28c 100644 --- a/web/source/settings/lib/form/text.jsx +++ b/web/source/settings/lib/form/text.jsx @@ -20,14 +20,30 @@ const React = require("react"); -module.exports = function useTextInput({ name, Name }, { validator, defaultValue = "", dontReset = false } = {}) { +module.exports = function useTextInput({ name, Name }, { + defaultValue = "", + dontReset = false, + validator, + showValidation = true, + initValidation +} = {}) { + const [text, setText] = React.useState(defaultValue); - const [valid, setValid] = React.useState(true); const textRef = React.useRef(null); + const [validation, setValidation] = React.useState(initValidation ?? ""); + const [_isValidating, startValidation] = React.useTransition(); + let valid = validation == ""; + function onChange(e) { let input = e.target.value; setText(input); + + if (validator) { + startValidation(() => { + setValidation(validator(input)); + }); + } } function reset() { @@ -38,11 +54,13 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue React.useEffect(() => { if (validator && textRef.current) { - let res = validator(text); - setValid(res == ""); - textRef.current.setCustomValidity(res); + if (showValidation) { + textRef.current.setCustomValidity(validation); + } else { + textRef.current.setCustomValidity(""); + } } - }, [text, textRef, validator]); + }, [validation, validator, showValidation]); // Array / Object hybrid, for easier access in different contexts return Object.assign([ @@ -62,6 +80,7 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue ref: textRef, setter: setText, valid, + validate: () => setValidation(validator(text)), hasChanged: () => text != defaultValue }); };
\ No newline at end of file |